/* Softer red for availability exposure "urgent" bar */
.bg-exposure-urgent {
  background-color: #e57373 !important;  /* Coral red - urgent but not alarming */
}

/* Renewals UI polish */
.renewals-summary-bar {
  gap: 8px;
}
.renewals-badge {
  display: inline-block;
  padding: 4px 8px;
  margin-right: 8px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(0,0,0,0.04);
}
.renewals-badge-current { color: #6c757d; }
.renewals-badge-new { color: #0dcaf0; }
.renewals-badge-base { color: #0d6efd; }
.renewals-badge-amenity { color: #20c997; }
.renewals-badge-increase { color: #198754; }
.renewals-badge-total { color: #0d6efd; font-weight: 600; }

.pill-override {
  background: #ffe8a1;
  color: #856404;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
}
/* Keep override input inline with badges, avoid wrapping early */
.override-inline { display: inline-block; vertical-align: middle; min-width: 140px; }

/* Renewals table terms collapse row styling */
.terms-collapse-row > td {
  background: #f6f8fb;
  border-top: 1px solid #dfe3e8;
  border-bottom: 1px solid #dfe3e8;
}

.terms-collapse-row .dash-table-container {
  margin: 0;
}

/* Custom CSS for Dash Property Management App */

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL STYLES
   ───────────────────────────────────────────────────────────────────── */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa;
}

/* ─────────────────────────────────────────────────────────────────────
   NAVBAR CUSTOMIZATION
   ───────────────────────────────────────────────────────────────────── */

.navbar-brand {
    font-weight: 700 !important;
    font-size: 1.3rem !important;
}

/* Logo and navbar layout */
.navbar .d-flex.align-items-center {
    flex-grow: 1;
}

.navbar .d-flex.align-items-center img {
    /* No filter needed - logo is already white */
    transition: all 0.2s ease;
    opacity: 0.9;
}

.navbar .d-flex.align-items-center img:hover {
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
    opacity: 1;
    transform: scale(1.05);
}

.navbar .d-flex.align-items-center span {
    margin-left: 0.75rem;
    letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────────────────────────────
   SIDEBAR STYLES
   ───────────────────────────────────────────────────────────────────── */

.offcanvas {
    background-color: #2c3e50 !important;
    color: white !important;
}

.offcanvas .form-control,
.offcanvas .form-select {
    background-color: #34495e !important;
    border-color: #5a6c7d !important;
    color: white !important;
}

.offcanvas .form-control:focus,
.offcanvas .form-select:focus {
    background-color: #3b4a5c !important;
    border-color: #3498db !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
}

.offcanvas .form-control::placeholder {
    color: #bdc3c7 !important;
}

.offcanvas .dropdown-menu {
    background-color: #34495e !important;
    border-color: #5a6c7d !important;
}

.offcanvas .dropdown-item {
    color: white !important;
}

.offcanvas .dropdown-item:hover {
    background-color: #3498db !important;
}

/* ─────────────────────────────────────────────────────────────────────
   DASH DROPDOWN STYLES (for sidebar)
   ───────────────────────────────────────────────────────────────────── */

/* Style Dash dropdowns in the sidebar */
.offcanvas .Select-control {
    background-color: #34495e !important;
    border-color: #5a6c7d !important;
    color: white !important;
}

.offcanvas .Select-control:hover {
    border-color: #3498db !important;
}

.offcanvas .Select-control .Select-value {
    color: white !important;
}

.offcanvas .Select-control .Select-value-label {
    color: white !important;
}

.offcanvas .Select-control .Select-placeholder {
    color: #bdc3c7 !important;
}

/* Ensure the main dropdown control text is white */
.offcanvas .Select-control .Select-value .Select-value-label {
    color: white !important;
}

.offcanvas .Select-control .Select-value .Select-value-label * {
    color: white !important;
}

.offcanvas .Select-control .Select-input > input {
    color: white !important;
}

.offcanvas .Select-menu-outer {
    background-color: #34495e !important;
    border-color: #5a6c7d !important;
    color: white !important;
}

.offcanvas .Select-option {
    background-color: #34495e !important;
    color: white !important;
}

.offcanvas .Select-option:hover {
    background-color: #3498db !important;
    color: white !important;
}

.offcanvas .Select-option.is-focused {
    background-color: #3498db !important;
    color: white !important;
}

.offcanvas .Select-option.is-selected {
    background-color: #2980b9 !important;
    color: white !important;
}

/* ─────────────────────────────────────────────────────────────────────
   CARD STYLES
   ───────────────────────────────────────────────────────────────────── */

.card {
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    border-radius: 10px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}

.card-header {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    font-weight: 600 !important;
}

.card-header h5 {
    margin: 0 !important;
    font-size: 1.1rem !important;
}

/* ─────────────────────────────────────────────────────────────────────
   BUTTON STYLES
   ───────────────────────────────────────────────────────────────────── */

.btn {
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn-primary {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    border-color: #2980b9 !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2980b9, #1f618d) !important;
    border-color: #1f618d !important;
    transform: translateY(-1px) !important;
}

.btn-success {
    background: linear-gradient(135deg, #27ae60, #229954) !important;
    border-color: #229954 !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #229954, #1e8449) !important;
    border-color: #1e8449 !important;
    transform: translateY(-1px) !important;
}

.btn-outline-primary {
    border-color: #3498db !important;
    color: #3498db !important;
}

.btn-outline-primary:hover {
    background-color: #3498db !important;
    border-color: #3498db !important;
    transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   TABLE STYLES
   ───────────────────────────────────────────────────────────────────── */

.dash-table-container {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.dash-table-container .dash-spreadsheet-container {
    border-radius: 8px !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner {
    border-radius: 8px !important;
}

/* Table header styling */
.dash-table-container .dash-header {
    background: linear-gradient(135deg, #2c3e50, #34495e) !important;
    color: white !important;
    font-weight: 600 !important;
    border: none !important;
}

.dash-table-container .dash-header .column-header-name {
    color: white !important;
}

/* Table cell styling */
.dash-table-container .dash-cell {
    border: 1px solid #e3e6f0 !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    padding: 12px 8px !important;
}

.dash-table-container .dash-selected-cell {
    background-color: rgba(52, 152, 219, 0.1) !important;
}

/* Actions column styling */
.dash-table-container .dash-cell[data-dash-column="Actions"] {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    border: 1px solid #2980b9 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.dash-table-container .dash-cell[data-dash-column="Actions"]:hover {
    background: linear-gradient(135deg, #2980b9, #1f618d) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.dash-table-container .dash-cell[data-dash-column="Actions"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   ALERT STYLES
   ───────────────────────────────────────────────────────────────────── */

.alert {
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

.alert-info {
    background: linear-gradient(135deg, #d6eaf8, #aed6f1) !important;
    color: #1b4f72 !important;
}

.alert-success {
    background: linear-gradient(135deg, #d5f4e6, #a3e4d7) !important;
    color: #0d5345 !important;
}

.alert-warning {
    background: linear-gradient(135deg, #fdeaa7, #f9e79f) !important;
    color: #7d6608 !important;
}

.alert-danger {
    background: linear-gradient(135deg, #fadbd8, #f5b7b1) !important;
    color: #922b21 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   INPUT STYLES
   ───────────────────────────────────────────────────────────────────── */

.form-control {
    border-radius: 6px !important;
    border: 1px solid #d5dbdb !important;
    transition: all 0.2s ease !important;
}

.form-control:focus {
    border-color: #3498db !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
}

.input-group-text {
    background-color: #ecf0f1 !important;
    border-color: #d5dbdb !important;
    color: #2c3e50 !important;
    font-weight: 500 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   PLOTLY CHART STYLES
   ───────────────────────────────────────────────────────────────────── */

.js-plotly-plot {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    border: 1px solid #e3e6f0 !important;
    background-color: white !important;
    height: 500px !important;
    max-height: 500px !important;
    min-height: 500px !important;
}

/* Force Plotly charts to maintain fixed height */
.js-plotly-plot .plotly {
    height: 500px !important;
    max-height: 500px !important;
    min-height: 500px !important;
}

.js-plotly-plot .plotly .main-svg {
    height: 500px !important;
    max-height: 500px !important;
    min-height: 500px !important;
}

/* Prevent any dynamic resizing of Plotly charts */
.js-plotly-plot,
.js-plotly-plot * {
    transition: none !important;
    animation: none !important;
}

/* Disable Plotly's auto-resize behavior */
.js-plotly-plot .plotly {
    resize: none !important;
}

/* Force fixed dimensions */
#expiration-chart,
#gpr-forecast-chart {
    height: 500px !important;
    max-height: 500px !important;
    min-height: 500px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Chart container styling to match card theme */
.chart-container {
    background-color: white !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    border: 1px solid #e3e6f0 !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

/* Chart title styling */
.chart-title {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   ACCORDION STYLES
   ───────────────────────────────────────────────────────────────────── */

.accordion-button {
    background-color: #34495e !important;
    color: white !important;
    border: none !important;
    font-weight: 500 !important;
}

.accordion-button:not(.collapsed) {
    background-color: #2c3e50 !important;
    color: white !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
}

.accordion-body {
    background-color: #2c3e50 !important;
    color: white !important;
    border-top: 1px solid #34495e !important;
}

/* ─────────────────────────────────────────────────────────────────────
   SIDEBAR TABLE STYLES (for Pricing Parameters)
   ───────────────────────────────────────────────────────────────────── */

/* Style tables within the sidebar accordion */
.offcanvas .accordion-body table {
    background-color: #34495e !important;
    border-color: #5a6c7d !important;
    color: white !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
}

.offcanvas .accordion-body table th {
    background-color: #2c3e50 !important;
    color: white !important;
    border-color: #5a6c7d !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
}

.offcanvas .accordion-body table td {
    background-color: #34495e !important;
    color: white !important;
    border-color: #5a6c7d !important;
    padding: 8px 12px !important;
}

.offcanvas .accordion-body table tr:hover td {
    background-color: #3b4a5c !important;
}

/* Style table headers specifically */
.offcanvas .accordion-body table thead th {
    background-color: #2c3e50 !important;
    color: white !important;
    border-bottom: 2px solid #5a6c7d !important;
    font-weight: 600 !important;
}

/* Style table cells */
.offcanvas .accordion-body table tbody td {
    background-color: #34495e !important;
    color: white !important;
    border-color: #5a6c7d !important;
}

/* Ensure all text in tables is white */
.offcanvas .accordion-body table * {
    color: white !important;
}

/* ─────────────────────────────────────────────────────────────────────
   LOADING ANIMATION
   ───────────────────────────────────────────────────────────────────── */

._dash-loading {
    margin: 20px auto !important;
}

._dash-loading-callback {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   CURRENCY DISPLAY
   ───────────────────────────────────────────────────────────────────── */

.currency {
    font-weight: 600 !important;
    color: #27ae60 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.currency-large {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE DESIGN
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem !important;
    }
    
    .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .dash-table-container {
        font-size: 0.8rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   CUSTOM UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────── */

.text-gradient {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
}

.shadow-soft {
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

.shadow-hover:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px) !important;
    transition: all 0.2s ease !important;
}

.border-radius-lg {
    border-radius: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   ANIMATION CLASSES
   ───────────────────────────────────────────────────────────────────── */

.fade-in {
    animation: fadeIn 0.5s ease-in !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-in {
    animation: slideIn 0.3s ease-out !important;
}

@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────
   MODAL SCROLL PREVENTION
   ───────────────────────────────────────────────────────────────────── */

/* Prevent page from scrolling to top when modals close */
.modal {
    scroll-behavior: auto !important;
}

.modal-dialog {
    scroll-behavior: auto !important;
}

/* Prevent any automatic scrolling when modals are shown/hidden */
body.modal-open {
    scroll-behavior: auto !important;
}

/* Ensure the page maintains its scroll position */
html, body {
    scroll-behavior: auto !important;
}

/* ─────────────────────────────────────────────────────────────────────
   TOOLTIP STYLES
   ───────────────────────────────────────────────────────────────────── */

/* Simple tooltip styling - just black text, let Dash handle positioning */
.dash-tooltip,
.dash-table-tooltip,
.tooltip,
[role="tooltip"],
.tooltip-inner,
.popover,
.popover-body {
    color: #000000 !important;
    font-size: 14px !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 600 !important;
    white-space: pre-line !important;
    line-height: 1.6 !important;
    max-width: 400px !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
}

/* Target all child elements within tooltips */
.dash-tooltip *,
.dash-table-tooltip *,
.tooltip *,
[role="tooltip"] *,
.tooltip-inner *,
.popover *,
.popover-body * {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   BPO INPUT - HIDE SPINNER ARROWS
   ───────────────────────────────────────────────────────────────────── */

/* Hide spinner arrows on BPO number inputs (Chrome, Safari, Edge, Opera) */
.bpo-input-no-spinner::-webkit-outer-spin-button,
.bpo-input-no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spinner arrows on BPO number inputs (Firefox) */
.bpo-input-no-spinner {
    -moz-appearance: textfield;
}