/* ==========================================================================
   BASE STYLES (all screen sizes)
   ========================================================================== */

html, body {
    max-width: 100%;
    overflow-x: hidden;
    background-color: #0c0e12;           /* Darker page bg — matches target image */
    font-family: sans-serif;
    color: #fff;
}

/* ==========================================================================
   DASHBOARD CARDS
   The main chart panels — 3-column grid visible in the dashboard
   ========================================================================== */

/* Card container — matches chart background, no internal contrast */
.card {
    background-color: #13161b;
    border: 1px solid #1e2228;
    border-radius: 8px;
    color: #fff;
    font-family: sans-serif;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Card header — slightly lighter than body so it visually separates */
.card-header {
    background-color: #1a1d24 !important;
    border-bottom: 1px solid #1e2228 !important;
    padding: 10px 14px !important;
}

/* Card body — matches Plotly chart paper_bgcolor exactly, no contrast border */
.card-body {
    background-color: #13161b !important;
    padding: 8px 10px !important;
}

/* Card title text — orange, bold, left-aligned */
.card-title-text {
    color: #FFA500;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1px;
}

/* ==========================================================================
   CARD HEADER BUTTONS
   API (orange outline) | CSV (orange outline) | Info (purple solid)
   Expand icon (muted grey)
   ========================================================================== */

/* API and CSV buttons — solid orange fill, dark text — SCOPED to card header only */
.card-header .btn-outline-light,
.card-header > .row .btn,
.card-header dbc-button .btn {
    font-size: 11px !important;
    padding: 2px 10px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    border: none !important;
    transition: opacity 0.15s ease !important;
}

.card-header .btn-outline-light:hover,
.card-header > .row .btn:hover {
    opacity: 0.85 !important;
}

/* Info button — solid purple fill */
.card-header .btn-info-purple {
    font-size: 11px !important;
    padding: 2px 10px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    background-color: #6d28d9 !important;
    color: #fff !important;
    border: none !important;
    transition: opacity 0.15s ease !important;
}

.card-header .btn-info-purple:hover {
    opacity: 0.85 !important;
}

/* Expand icon — SVG background-image span, brightens on hover */
.fa-external-link-alt {
    color: #888;
    transition: color 0.15s ease;
}
.fa-external-link-alt:hover { color: #FFA500 !important; }

/* SVG expand icon hover — swap stroke colour to orange (span only, not buttons) */
span[id$="_enlarged"]:hover {
    opacity: 1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFA500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   DASHBOARD LAYOUT CONTAINER
   Ensures equal left/right padding at all screen sizes so cards are centred
   ========================================================================== */

/* Bootstrap px-2 gives 8px each side — reinforce with consistent padding */
.container-fluid,
.dash-renderer > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
}

/* On mobile ensure the row itself doesn't overflow or create asymmetric margin */
@media screen and (max-width: 767px) {
    .g-3.px-2 {
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Each card col fills full width with equal gutters */
    .g-3.px-2 > .col-md-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   DASH LOADING SPINNER
   Shown while chart data is fetching
   ========================================================================== */

._dash-loading {
    min-height: 300px; /* Prevents card collapse while loading */
}

/* ==========================================================================
   MODALS
   Used for API snippet, Analyst Notes, and Enlarged chart view
   ========================================================================== */

/* Ensures modals render above everything including the navbar */
.modal, .modal-backdrop { z-index: 10000 !important; }
.modal-dialog { z-index: 10001 !important; }

/* All modal sections — same dark bg as cards */
.modal-content {
    background-color: #13161b !important;
    border: 1px solid #1e2228 !important;
    border-radius: 10px !important;
}

.modal-header {
    background-color: #1a1d24 !important;
    color: #fff !important;
    font-family: sans-serif;
    border-bottom: 1px solid #1e2228 !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 12px 16px !important;
}

.modal-body {
    background-color: #13161b !important;
    color: #fff !important;
    font-family: sans-serif;
    font-size: 13px;
    padding: 10px 12px !important;
    overflow: hidden !important;   /* Let the inner Pre handle its own scroll */
}

.modal-footer {
    background-color: #1a1d24 !important;
    color: #fff !important;
    border-top: 1px solid #1e2228 !important;
    border-radius: 0 0 10px 10px !important;
    padding: 8px 16px !important;
}

/* Modal title — orange, matches card title style */
.modal-title {
    color: #FFA500 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: sans-serif !important;
}

/* Modal close (×) button — white, no background, no border bleed */
.modal-header .btn-close {
    filter: invert(1) opacity(0.6) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.modal-header .btn-close:hover {
    filter: invert(1) opacity(1) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Footer Close button — fully isolated, no orange border on hover */
.modal-footer .btn-secondary,
.modal-footer .btn {
    background-color: #2a2f3a !important;
    border: 1px solid #3a4150 !important;
    color: #c8d0de !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    padding: 5px 18px !important;
    width: auto !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    outline: none !important;
}
.modal-footer .btn-secondary:hover,
.modal-footer .btn:hover {
    background-color: #3a4150 !important;
    border: 1px solid #4a5260 !important;
    color: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Copy-to-clipboard button in API snippet modal header */
.modal-header .clipboard-btn:hover,
.modal-header [data-dash-is-loading] ~ * .btn-clipboard:hover {
    background-color: #3a4150 !important;
    color: #fff !important;
}

/* dcc.Clipboard default icon override — keep it inline with title */
.modal-header .dcc-clipboard-button {
    background-color: #2a2f3a !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    color: #c8d0de !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    margin-left: 12px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}
.modal-header .dcc-clipboard-button:hover {
    background-color: #3a4150 !important;
    color: #fff !important;
}
pre code.hljs,
.modal-body pre,
.modal-body code,
.modal-body .codehilite,
.modal-body p code {
    background-color: #0e1117 !important;
    color: #c8d0de !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-family: "Fira Code", "Cascadia Code", "Consolas", monospace !important;
    border: 1px solid #1e2228 !important;
}

.modal-body pre {
    height: 450px;
    overflow-y: auto !important;
    padding: 16px !important;
    margin: 0 !important;
}

/* Syntax highlight colours — matches image (red keywords, blue strings, orange builtins) */
.modal-body .hljs-keyword,
.modal-body .hljs-built_in  { color: #f47174 !important; }   /* import, for, if, else */
.modal-body .hljs-string     { color: #6fa8dc !important; }   /* "strings" */
.modal-body .hljs-number     { color: #FFA500 !important; }   /* 200, True */
.modal-body .hljs-comment    { color: #6a737d !important; font-style: italic !important; }
.modal-body .hljs-title,
.modal-body .hljs-attr       { color: #FFA500 !important; }   /* .format etc */
.modal-body .hljs-name       { color: #c8d0de !important; }

/* ==========================================================================
   TOOLTIPS
   Small orange-accented tooltips on hover over header icons
   ========================================================================== */

.tooltip-inner {
    background-color: #1c2026 !important;
    color: #FFA500 !important;
    border: 1px solid #FFA500 !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
}

.tooltip .tooltip-arrow::before {
    border-top-color: #FFA500 !important;
    border-bottom-color: #FFA500 !important;
}

/* ==========================================================================
   DASH DATATABLE
   Used in some panels for tabular data display
   ========================================================================== */

/* Floating cell tooltip — orange accented */
.dash-table-tooltip {
    background-color: #1c2026 !important;
    color: #FFA500 !important;
    border: 1px solid #FFA500 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}
.dash-table-tooltip:before,
.dash-table-tooltip:after {
    border-bottom-color: #1c2026 !important;
}

/* Compact row height for data-dense tables */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr {
    min-height: 20px;
    height: 20px;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Filter row input — dark background, white text */
.dash-table-container .dash-filter input {
    color: #fff !important;
    background-color: #1a1d23 !important;
    border: 1px solid #2a2f35 !important;
    font-size: 13px !important;
}

/* Hyperlinks inside table cells — light blue */
.dash-table-container .dash-spreadsheet-container a {
    color: #6FC2FF !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   HOUSING PAGE — CITY DROPDOWN
   ========================================================================== */

#dropdown_city_housing {
    font-size: 13px;
    min-width: 0;
    max-width: 200px;
}

#dropdown_city_housing .Select-control {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    color: #fff !important;
    min-height: 34px !important;
}

#dropdown_city_housing .Select-value-label,
#dropdown_city_housing .Select-placeholder {
    color: #fff !important;
    font-size: 13px !important;
}

#dropdown_city_housing .Select-arrow { border-top-color: #9ca3af !important; }

#dropdown_city_housing .Select-menu-outer {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

#dropdown_city_housing .VirtualizedSelectOption {
    background-color: #1c2026 !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
}

#dropdown_city_housing .VirtualizedSelectOption:hover,
#dropdown_city_housing .VirtualizedSelectOption.VirtualizedSelectFocusedOption {
    background-color: #2a2f35 !important;
    color: #FFA500 !important;
}

#dropdown_city_housing .VirtualizedSelectOption.VirtualizedSelectSelectedOption {
    background-color: #2a2f35 !important;
    color: #FFA500 !important;
}

/* Always fill the column width */
#dropdown_city_housing,
#dropdown_city_housing .Select,
#dropdown_city_housing .Select-control {
    width: 100% !important;
}

/* Desktop: cap at 200px */
@media screen and (min-width: 992px) {
    #dropdown_city_housing { max-width: 200px; }
}

/* Small tablet: slightly narrower */
@media screen and (max-width: 575px) {
    #dropdown_city_housing {
        max-width: 100%;
        margin-bottom: 12px;
    }
}

/* ==========================================================================
   HOUSING TOGGLE SWITCH
   ========================================================================== */

#housing-toggle-switch {
    display: flex !important;
    align-items: center !important;
}

#housing-toggle-switch label {
    color: hsl(220, 10%, 55%) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;   /* Prevent label wrapping on small screens */
}

#housing-toggle-switch .form-check-input {
    background-color: #2a2f3a !important;
    border-color: #3a4150 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;        /* Keep track from squishing on mobile */
}

#housing-toggle-switch .form-check-input:checked {
    background-color: #FFA500 !important;
    border-color: #FFA500 !important;
}

#housing-toggle-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px hsla(36, 95%, 52%, 0.25) !important;
}

/* On mobile, stack dropdown above toggle if needed */
@media screen and (max-width: 575px) {
    #housing-toggle-switch label {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   CONSUMER PAGE — COUNTRY DROPDOWN
   ========================================================================== */

#dropdown_country_consumer {
    font-size: 13px;
    min-width: 0;
    max-width: 200px;
}

#dropdown_country_consumer .Select-control {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    color: #fff !important;
    min-height: 34px !important;
}

#dropdown_country_consumer .Select-value-label,
#dropdown_country_consumer .Select-placeholder {
    color: #fff !important;
    font-size: 13px !important;
}

#dropdown_country_consumer .Select-arrow { border-top-color: #9ca3af !important; }

#dropdown_country_consumer .Select-menu-outer {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

#dropdown_country_consumer .VirtualizedSelectOption {
    background-color: #1c2026 !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
}

#dropdown_country_consumer .VirtualizedSelectOption:hover,
#dropdown_country_consumer .VirtualizedSelectOption.VirtualizedSelectFocusedOption {
    background-color: #2a2f35 !important;
    color: #FFA500 !important;
}

#dropdown_country_consumer .VirtualizedSelectOption.VirtualizedSelectSelectedOption {
    background-color: #2a2f35 !important;
    color: #FFA500 !important;
}

@media screen and (max-width: 575px) {
    #dropdown_country_consumer { max-width: 160px; }
}


/* ==========================================================================
   JOLTS+ PAGE — COUNTRY DROPDOWN
   ========================================================================== */

#dropdown_country {
    font-size: 13px;
    min-width: 0;
    max-width: 200px;
}

#dropdown_country .Select-control {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    color: #fff !important;
    min-height: 34px !important;
}

#dropdown_country .Select-value-label,
#dropdown_country .Select-placeholder {
    color: #fff !important;
    font-size: 13px !important;
}

#dropdown_country .Select-arrow { border-top-color: #9ca3af !important; }

#dropdown_country .Select-menu-outer {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

#dropdown_country .VirtualizedSelectOption {
    background-color: #1c2026 !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
}

#dropdown_country .VirtualizedSelectOption:hover,
#dropdown_country .VirtualizedSelectOption.VirtualizedSelectFocusedOption {
    background-color: #2a2f35 !important;
    color: #FFA500 !important;
}

#dropdown_country .VirtualizedSelectOption.VirtualizedSelectSelectedOption {
    background-color: #2a2f35 !important;
    color: #FFA500 !important;
}

@media screen and (max-width: 575px) {
    #dropdown_country { max-width: 160px; }
}


/* ==========================================================================
   CONSUMER TOGGLE SWITCH
   ========================================================================== */

#toggle-switch {
    display: flex !important;
    align-items: center !important;
}

#toggle-switch label {
    color: hsl(220, 10%, 55%) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
}

#toggle-switch .form-check-input {
    background-color: #2a2f3a !important;
    border-color: #3a4150 !important;
    cursor: pointer !important;
}

#toggle-switch .form-check-input:checked {
    background-color: #FFA500 !important;
    border-color: #FFA500 !important;
}

#toggle-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px hsla(36, 95%, 52%, 0.25) !important;
}

#dropdown_country_inflation {
    font-size: 13px;
    min-width: 0;
    max-width: 200px;   /* Compact on all sizes — never stretches full width */
}

@media screen and (max-width: 575px) {
    #dropdown_country_inflation {
        max-width: 160px;
        margin-bottom: 0;
    }
}

#dropdown_country_inflation .Select-control {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    color: #fff !important;
    min-height: 34px !important;
}

#dropdown_country_inflation .Select-value-label,
#dropdown_country_inflation .Select-placeholder {
    color: #fff !important;
    font-size: 13px !important;
}

#dropdown_country_inflation .Select-arrow { border-top-color: #9ca3af !important; }

#dropdown_country_inflation .Select-menu-outer {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

#dropdown_country_inflation .VirtualizedSelectOption {
    background-color: #1c2026 !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
}

#dropdown_country_inflation .VirtualizedSelectOption:hover,
#dropdown_country_inflation .VirtualizedSelectOption.VirtualizedSelectFocusedOption {
    background-color: #2a2f35 !important;
    color: #FFA500 !important;
}

#dropdown_country_inflation .VirtualizedSelectOption.VirtualizedSelectSelectedOption {
    background-color: #2a2f35 !important;
    color: #FFA500 !important;
}

#dropdown_country_inflation img {
    vertical-align: middle;
    margin-right: 6px;
}

#dropdown_country_inflation,
#dropdown_country_inflation .Select,
#dropdown_country_inflation .Select-control {
    width: 100% !important;
}

@media screen and (min-width: 992px) {
    #dropdown_country_inflation { max-width: 200px; }
}

@media screen and (max-width: 575px) {
    #dropdown_country_inflation { max-width: 100%; margin-bottom: 12px; }
}

/* ==========================================================================
   INFLATION TOGGLE SWITCH
   Dark label, orange active state
   ========================================================================== */

#inflation-toggle-switch {
    display: flex !important;
    align-items: center !important;
}

#inflation-toggle-switch label {
    color: hsl(220, 10%, 55%) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
}

/* Track — inactive */
#inflation-toggle-switch .form-check-input {
    background-color: #2a2f3a !important;
    border-color: #3a4150 !important;
    cursor: pointer !important;
}

/* Track — active (orange) */
#inflation-toggle-switch .form-check-input:checked {
    background-color: #FFA500 !important;
    border-color: #FFA500 !important;
}

#inflation-toggle-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px hsla(36, 95%, 52%, 0.25) !important;
}


/* ==========================================================================
   NAV TABS  (dcc.Tabs rendered as Bootstrap nav-tabs inside panels)
   Pill style — active tab has dark filled bg, no borders, no underline.
   ========================================================================== */

.nav-tabs {
    border-bottom: none !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    flex-wrap: nowrap !important;
    background-color: transparent !important;
}

.nav-tabs .nav-item {
    margin-bottom: 0 !important;
}

.nav-tabs .nav-link {
    color: hsl(220, 10%, 45%) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 6px 14px !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
}

.nav-tabs .nav-link:hover {
    color: hsl(40, 10%, 75%) !important;
    background-color: hsl(220, 15%, 14%) !important;
    border: none !important;
}

/* Active tab — dark filled pill, white text, no border */
.nav-tabs .nav-link.active {
    color: #fff !important;
    font-weight: 600 !important;
    background-color: #2a2f3a !important;
    border: none !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   TABLE ROW HOVER COLOURS
   Different accent colours per data theme
   ========================================================================== */

.table-hover       tbody tr:hover { background-color: #2e3440 !important; color: #fff !important; }
.table-hover-blue  tbody tr:hover { background-color: #1e3d59 !important; color: #fff !important; }
.table-hover-green tbody tr:hover { background-color: #2d5a3d !important; color: #fff !important; }
.table-hover-orange tbody tr:hover { background-color: #6d4423 !important; color: #fff !important; }
.table-hover-red   tbody tr:hover { background-color: #5d2f2f !important; color: #fff !important; }

/* ==========================================================================
   GRAPH / CHART CONTAINER
   The main chart area with slide transition animations
   ========================================================================== */

#graphs {
    position: relative;
    min-height: 600px;
    transition: opacity 0.3s ease-in-out;
}
#graphs > div { width: 100%; height: 100%; }

/* Slide transition animations for chart navigation */
@keyframes slideInRight {
    from { transform: translateX(50px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.slide-transition-next   { animation: slideInRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.slide-transition-prev   { animation: slideInLeft  0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.slide-transition-search { animation: fadeIn       0.3s ease-in-out; }

/* ==========================================================================
   LOGIN PAGE OVERRIDES — scoped to #login-page-wrapper
   Fully isolated so login styles never bleed into dashboard
   ========================================================================== */

#login-page-wrapper {
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    min-height: -webkit-fill-available !important;
    min-height: 100dvh !important;
    align-items: center !important;
    justify-content: center !important;
}
#login-page-wrapper button.btn:hover {
    background-color: hsl(36, 95%, 58%) !important;
    color: hsl(220, 20%, 7%) !important;
    border-color: hsl(36, 95%, 58%) !important;
    transition: background-color 0.15s ease !important;
}
#login-page-wrapper .btn:not(:disabled):not(.disabled) {
    width: auto !important;
    font-size: inherit !important;
}
#login-page-wrapper .login-card {
    width: min(440px, 100%) !important;
    background-color: hsl(220, 18%, 10%) !important;
    border: 1px solid hsl(220, 15%, 18%) !important;
    border-radius: 14px !important;
    padding: clamp(24px, 5vw, 42px) clamp(20px, 6vw, 40px) !important;
    box-shadow: 0 0 0 1px hsl(220,15%,14%), 0 20px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35) !important;
    box-sizing: border-box !important;
    max-height: 90vh !important;
    overflow-y: visible !important;
}
#login-page-wrapper .login-brand {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: clamp(16px, 3vw, 24px) !important;
}
#login-page-wrapper .login-logo {
    height: clamp(36px, 5vw, 44px) !important;
    width: auto !important;
    display: block !important;
}
#login-page-wrapper .login-title {
    color: hsl(40, 10%, 85%) !important;
    font-size: clamp(18px, 2.5vw, 22px) !important;
    font-weight: 700 !important;
    text-align: center !important;
    letter-spacing: -0.4px !important;
    margin: 0 0 5px !important;
}
#login-page-wrapper .login-subtitle {
    color: hsl(220, 10%, 50%) !important;
    font-size: clamp(12px, 1.5vw, 13px) !important;
    text-align: center !important;
    margin: 0 0 clamp(14px, 2.5vw, 20px) !important;
}
#login-page-wrapper .login-divider {
    border: none !important;
    border-top: 1px solid hsl(36, 95%, 20%) !important;
    margin: 0 0 clamp(14px, 2.5vw, 22px) !important;
    opacity: 1 !important;
}
#login-page-wrapper .login-field-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
    color: hsl(220, 10%, 50%) !important;
    margin-bottom: 6px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
#login-page-wrapper .login-field-group { margin-bottom: clamp(12px, 2vw, 16px) !important; }
#login-page-wrapper .login-input {
    width: 100% !important;
    background-color: hsl(220, 15%, 16%) !important;
    border: 1px solid hsl(220, 15%, 22%) !important;
    border-radius: 7px !important;
    color: hsl(40, 10%, 85%) !important;
    font-size: 14px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    padding: 10px 13px !important;
}
#login-page-wrapper .login-input:focus {
    border-color: hsl(36, 95%, 52%) !important;
    box-shadow: 0 0 0 3px hsla(36, 95%, 52%, 0.18) !important;
    background-color: hsl(220, 15%, 18%) !important;
    outline: none !important;
}
#login-page-wrapper .login-forgot-wrap {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: -6px !important;
    margin-bottom: clamp(16px, 2.5vw, 22px) !important;
}
#login-page-wrapper .login-forgot-wrap .forgot-password-link {
    float: none !important;
    font-size: 12px !important;
    color: hsl(220, 10%, 50%) !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}
#login-page-wrapper .login-forgot-wrap .forgot-password-link:hover { color: hsl(36, 95%, 52%) !important; }
#login-page-wrapper .login-submit-btn {
    width: 100% !important;
    background-color: hsl(36, 95%, 52%) !important;
    border-color: hsl(36, 95%, 52%) !important;
    color: hsl(220, 20%, 7%) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: block !important;
}
#login-page-wrapper .login-submit-btn:hover {
    background-color: hsl(36, 95%, 58%) !important;
    border-color: hsl(36, 95%, 58%) !important;
    color: hsl(220, 20%, 7%) !important;
    box-shadow: 0 4px 20px hsla(36, 95%, 52%, 0.35) !important;
}

/* Login modal header */
.login-modal-header {
    background-color: hsl(220, 18%, 10%) !important;
    border-bottom: 1px solid hsl(220, 15%, 18%) !important;
    color: hsl(40, 10%, 85%) !important;
    padding: 16px 20px !important;
}
.login-modal-header .modal-title  { color: hsl(36, 95%, 52%) !important; font-size: 15px !important; font-weight: 600 !important; }
.login-modal-header .btn-close    { filter: invert(1) opacity(0.6) !important; }
.login-modal-header .btn-close:hover { filter: invert(1) opacity(1) !important; }

/* Login modal body / footer */
.login-modal-body   { background-color: hsl(220, 18%, 10%) !important; color: hsl(40, 10%, 85%) !important; padding: 20px !important; }
.login-modal-footer { background-color: hsl(220, 18%, 10%) !important; border-top: 1px solid hsl(220, 15%, 18%) !important; padding: 12px 20px !important; }

/* Login modal primary action button — orange */
.login-modal-btn {
    background-color: hsl(36, 95%, 52%) !important;
    border-color: hsl(36, 95%, 52%) !important;
    color: hsl(220, 20%, 7%) !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    width: auto !important;
}
.login-modal-btn:hover {
    background-color: hsl(36, 95%, 58%) !important;
    border-color: hsl(36, 95%, 58%) !important;
    color: hsl(220, 20%, 7%) !important;
}

/* Login modal close button — neutral dark */
.login-modal-close-btn {
    background-color: hsl(220, 15%, 16%) !important;
    border-color: hsl(220, 15%, 22%) !important;
    color: hsl(40, 10%, 85%) !important;
    border-radius: 7px !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    width: auto !important;
}
.login-modal-close-btn:hover {
    background-color: hsl(220, 15%, 20%) !important;
    color: hsl(40, 10%, 85%) !important;
}

/* Login alert states */
.login-modal-body .alert-success {
    background-color: hsl(120, 30%, 10%) !important;
    border-color: hsl(120, 40%, 25%) !important;
    color: hsl(120, 60%, 70%) !important;
    font-size: 13px !important; border-radius: 7px !important; padding: 8px 12px !important;
}
.login-modal-body .alert-danger {
    background-color: hsl(0, 40%, 12%) !important;
    border-color: hsl(0, 60%, 30%) !important;
    color: hsl(0, 80%, 70%) !important;
    font-size: 13px !important; border-radius: 7px !important; padding: 8px 12px !important;
}
#log-in-error-alert {
    font-size: 13px !important; padding: 8px 12px !important;
    border-radius: 7px !important; margin-bottom: 10px !important;
}
#log-in-error-alert.alert-warning {
    background-color: hsl(30, 80%, 15%) !important;
    border-color: hsl(36, 95%, 35%) !important;
    color: hsl(36, 95%, 75%) !important;
}

/* ==========================================================================
   NAVBAR
   Fixed 48px top bar — logo, nav, user dropdown
   ========================================================================== */

.navbar {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: visible !important;          /* Allows dropdown to escape navbar height */
    padding: 0 16px !important;
    background-color: rgb(14, 17, 21) !important;
    border-bottom: 1px solid hsl(220, 15%, 14%) !important;
    margin-bottom: 0 !important;
}
.navbar > .container-fluid {
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 100% !important;
    overflow: visible !important;
}

/* User icon toggle — no border, no background */
.navbar .navbar-user-toggle,
.navbar .dropdown-toggle {
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    font-size: 20px !important;
    padding: 6px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: hsl(220, 10%, 55%) !important;
    display: inline-flex !important;
    align-items: center !important;
}
.navbar-user-toggle::after        { display: none !important; }
.navbar-user-toggle:focus         { box-shadow: none !important; }
.navbar-user-toggle:hover i       { color: hsl(36, 95%, 52%) !important; }

/* Dropdown menu — dark card, appears below navbar */
.navbar .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: 200px !important;
    transform: none !important;
    background-color: hsl(220, 18%, 10%) !important;
    border: 1px solid hsl(220, 15%, 18%) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    z-index: 9999 !important;
}
.navbar .dropdown-item {
    width: 100% !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    color: hsl(40, 10%, 85%) !important;
    white-space: nowrap !important;
    background: none !important;
}
.navbar .dropdown-item:hover {
    background-color: hsl(220, 15%, 16%) !important;
    color: hsl(36, 95%, 52%) !important;
}

/* ==========================================================================
   TWO-LEVEL NAV
   Row 1: main section tabs (solid orange pill when active)
   Row 2: sub-section tabs (orange outline when active)
   ========================================================================== */

.nav-wrapper {
    background-color: rgb(14, 17, 21);
    padding: 0;
    position: relative;
    margin-top: 0;
    z-index: 100;
}

/* ── Row 1: top-level tabs ── */
.top-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background-color: rgb(14, 17, 21);
    border-bottom: 1px solid hsl(220, 15%, 14%);
    align-items: center;
}
.top-tab-row .btn {
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: hsl(220, 10%, 45%) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 5px 14px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    transform: none !important;
    outline: none !important;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: hsl(220, 15%, 12%);
    --bs-btn-active-bg: transparent;
}
.top-tab-row button.btn:not(.top-tab-active):hover {
    background-color: hsl(220, 15%, 12%) !important;
    color: hsl(40, 10%, 75%) !important;
}
/* Active top tab — solid orange pill, dark text */
.top-tab-row .btn.top-tab-active,
.top-tab-row .btn.top-tab-active:hover,
.top-tab-row .btn.top-tab-active:focus,
.top-tab-row .btn.top-tab-active:active {
    background-color: hsl(36, 95%, 52%) !important;
    color: hsl(220, 20%, 7%) !important;
    font-weight: 600 !important;
    border: none !important;
    --bs-btn-bg: hsl(36, 95%, 52%);
    --bs-btn-hover-bg: hsl(36, 95%, 52%);
    --bs-btn-active-bg: hsl(36, 95%, 52%);
}

/* ── Row 2: sub-section tabs ── */
.sub-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px 12px;
    background-color: rgb(14, 17, 21);
    border-bottom: 1px solid hsl(220, 15%, 14%);
    align-items: center;
}
.sub-tab-row .btn {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    color: hsl(220, 10%, 55%) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 3px 12px !important;
    cursor: pointer !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
    transform: none !important;
    outline: none !important;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: hsl(220, 15%, 14%);
    --bs-btn-active-bg: transparent;
}
.sub-tab-row button.btn:not(.sub-tab-active):hover {
    background-color: hsl(220, 15%, 12%) !important;
    color: hsl(40, 10%, 75%) !important;
}
/* Active sub-tab — orange outline, white text */
.sub-tab-row .btn.sub-tab-active,
.sub-tab-row .btn.sub-tab-active:hover,
.sub-tab-row .btn.sub-tab-active:focus,
.sub-tab-row .btn.sub-tab-active:active {
    color: hsl(40, 10%, 85%) !important;
    border: 1px solid hsl(36, 95%, 52%) !important;
    background-color: hsl(220, 15%, 14%) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-border-color: hsl(36, 95%, 52%);
}
/* External link in sub-tab row — orange text */
.sub-tab-row .sub-tab-link {
    display: inline-flex !important;
    align-items: center !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    color: hsl(36, 95%, 52%) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 3px 12px !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease !important;
}
.sub-tab-row .sub-tab-link:hover {
    background-color: hsl(220, 15%, 12%) !important;
    color: hsl(40, 10%, 75%) !important;
}

/* ==========================================================================
   CARD HEADER — OVERFLOW PROTECTION (all screen sizes)
   Prevents title + buttons + icon from breaking onto multiple lines
   ========================================================================== */

/* Card header row — flex, no wrapping, vertically centred */
.card-header .row {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px;
}

/* Title column — truncate with ellipsis if title is too long */
.card-header .card-title-col {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Button group — never shrinks, always shows all 3 buttons */
.card-header .btn-group-col {
    flex-shrink: 0;
}

/* Expand icon column — fixed width, never pushed off screen */
.card-header .expand-col {
    flex-shrink: 0;
    text-align: right;
}

/* ==========================================================================
   CHART BODY — MIN-HEIGHT
   Prevents Plotly charts from collapsing to 0px while loading or on mobile
   ========================================================================== */

.card-body .js-plotly-plot,
.card-body [id^="international_"] {
    min-height: 280px;
}

._dash-loading,
.dash-loading-callback-failed {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   TABLET  (768px – 1180px)
   md=6 already gives 2-column — just prevent overflow from gutters
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1180px) {

    .g-3 {
        --bs-gutter-x: 1rem !important;
        --bs-gutter-y: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .col-md-6 {
        width: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }

    .card-header { padding: 8px 12px !important; }
    .card-body   { padding: 6px 8px !important; }
    .card-title-text { font-size: 12px; }

    .card-header .btn-outline-light,
    .card-header .btn-info-purple,
    .card-header .btn {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }

    .card-body .js-plotly-plot,
    .card-body [id^="international_"],
    ._dash-loading { min-height: 220px; }

    .top-tab-row .btn { font-size: 12px !important; padding: 4px 12px !important; }
    .sub-tab-row .btn,
    .sub-tab-row .sub-tab-link { font-size: 11px !important; padding: 3px 10px !important; }

    .px-2 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ==========================================================================
   MOBILE  (< 768px)
   Single-column — each card stacks full width
   ========================================================================== */

@media screen and (max-width: 767px) {

    .col-md-6 {
        flex: 0 0 auto !important;
        width: 100% !important;
    }

    .card { width: 100%; }

    .card-header { padding: 8px 10px !important; }
    .card-body   { padding: 6px 8px !important; }

    .card-title-text {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    .card-header .btn-outline-light,
    .card-header .btn-info-purple {
        font-size: 9px !important;
        padding: 1px 5px !important;
    }

    .card-expand-icon { font-size: 11px; }

    .card-body .js-plotly-plot,
    .card-body [id^="international_"],
    ._dash-loading { min-height: 200px; }

    .modal-header, .modal-body, .modal-footer { font-size: 12px; }

    .top-tab-row .btn { font-size: 11px !important; padding: 4px 10px !important; }

    .sub-tab-row .btn,
    .sub-tab-row .sub-tab-link { font-size: 11px !important; padding: 3px 8px !important; }

    .g-3 { --bs-gutter-x: 0.75rem !important; --bs-gutter-y: 0.75rem !important; }
}

/* ==========================================================================
   SLIDE DECK / ANALYSIS PAGE — DARK THEME
   Matches housing/inflation/consumer colour palette exactly
   ========================================================================== */

/* ── Page & container ───────────────────────────────────────────────────── */
.slide-deck-page,
.slide-deck-page .container-fluid {
    background-color: #0c0e12 !important;
    color: #c8d0de !important;
}

/* Left sidebar panel */
.slide-deck-page .col-4,
.slide-deck-page [style*="backgroundColor: #272c30"] {
    background-color: #13161b !important;
    border: 1px solid #1e2228 !important;
    border-radius: 8px !important;
}

/* ── Headings (📊 DATA, 🔧 TRANSFORM, 🧠 MODEL, 🧬 Create Combined Signal) */
.slide-deck-page h5,
.slide-deck-page h6 {
    color: #FFA500 !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}

/* ── Labels ──────────────────────────────────────────────────────────────── */
.slide-deck-page label,
.slide-deck-page .small,
.slide-deck-page small {
    color: #8892a4 !important;
    font-size: 12px !important;
}

/* ── Section borders (the 3px solid #495057 divs) ───────────────────────── */
.slide-deck-page [style*="border: 3px solid #495057"],
.slide-deck-page [style*="border: 3px solid rgb(73, 80, 87)"] {
    background-color: #13161b !important;
    border-color: #1e2228 !important;
    border-radius: 8px !important;
}

/* ── Dropdowns (dcc.Dropdown, source-select, ticker-select, etc.) ─────── */
.slide-deck-page .Select-control,
.slide-deck-page .Select--single > .Select-control,
.slide-deck-page .Select--multi > .Select-control {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    color: #c8d0de !important;
    min-height: 34px !important;
}

.slide-deck-page .Select-value-label,
.slide-deck-page .Select-placeholder,
.slide-deck-page .Select-input input {
    color: #c8d0de !important;
    font-size: 13px !important;
    background-color: transparent !important;
}

.slide-deck-page .Select-arrow {
    border-top-color: #8892a4 !important;
}

.slide-deck-page .Select-arrow-zone:hover .Select-arrow {
    border-top-color: #FFA500 !important;
}

.slide-deck-page .Select-menu-outer {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}

.slide-deck-page .VirtualizedSelectOption,
.slide-deck-page .Select-option {
    background-color: #1c2026 !important;
    color: #c8d0de !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
}

.slide-deck-page .VirtualizedSelectOption:hover,
.slide-deck-page .VirtualizedSelectOption.VirtualizedSelectFocusedOption,
.slide-deck-page .Select-option.is-focused,
.slide-deck-page .Select-option:hover {
    background-color: #2a2f3a !important;
    color: #FFA500 !important;
}

.slide-deck-page .VirtualizedSelectOption.VirtualizedSelectSelectedOption,
.slide-deck-page .Select-option.is-selected {
    background-color: #2a2f3a !important;
    color: #FFA500 !important;
}

/* Multi-select tags */
.slide-deck-page .Select-multi-value-wrapper .Select-value {
    background-color: #2a2f3a !important;
    border-color: #3a4150 !important;
    color: #FFA500 !important;
    border-radius: 4px !important;
    font-size: 11px !important;
}

.slide-deck-page .Select-value-icon {
    border-right-color: #3a4150 !important;
    color: #8892a4 !important;
}

.slide-deck-page .Select-value-icon:hover {
    background-color: #1a1d24 !important;
    color: #FFA500 !important;
}

/* ── Text inputs (dbc.Input, dcc.Input) ─────────────────────────────────── */
.slide-deck-page input[type="text"],
.slide-deck-page input[type="number"],
.slide-deck-page .form-control {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    color: #c8d0de !important;
    font-size: 13px !important;
}

.slide-deck-page input[type="text"]:focus,
.slide-deck-page input[type="number"]:focus,
.slide-deck-page .form-control:focus {
    background-color: #1c2026 !important;
    border-color: #FFA500 !important;
    box-shadow: 0 0 0 3px hsla(36, 95%, 52%, 0.2) !important;
    color: #c8d0de !important;
}

.slide-deck-page input::placeholder {
    color: #4a5260 !important;
}

/* ── InputGroup ──────────────────────────────────────────────────────────── */
.slide-deck-page .input-group-text {
    background-color: #1a1d24 !important;
    border-color: #3a4150 !important;
    color: #8892a4 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Add to Comparison — green */
.slide-deck-page #add-to-comparison-btn {
    background-color: #22883a !important;
    border-color: #22883a !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}
.slide-deck-page #add-to-comparison-btn:hover {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

/* Upload CSV — info blue */
.slide-deck-page .btn-info,
.slide-deck-page #fetch-accounting-btn {
    background-color: #0e7490 !important;
    border-color: #0e7490 !important;
    color: #fff !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}
.slide-deck-page .btn-info:hover,
.slide-deck-page #fetch-accounting-btn:hover {
    background-color: #0891b2 !important;
}

/* Generate Line — primary orange */
.slide-deck-page #generate-formula-line-btn {
    background-color: #FFA500 !important;
    border-color: #FFA500 !important;
    color: #1a1a1a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}
.slide-deck-page #generate-formula-line-btn:hover {
    background-color: #e69500 !important;
    border-color: #e69500 !important;
}

/* Add Selected Columns */
.slide-deck-page #add-selected-columns-btn {
    background-color: #22883a !important;
    border-color: #22883a !important;
    color: #fff !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

/* Delete line × button */
.slide-deck-page [id*="delete-line-btn"],
.slide-deck-page .btn-danger {
    background-color: #7f1d1d !important;
    border-color: #7f1d1d !important;
    color: #fff !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
}
.slide-deck-page [id*="delete-line-btn"]:hover,
.slide-deck-page .btn-danger:hover {
    background-color: #991b1b !important;
}

/* Run Model — success green */
.slide-deck-page #run-regression-btn {
    background-color: #22883a !important;
    border-color: #22883a !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 4px 16px !important;
}
.slide-deck-page #run-regression-btn:hover {
    background-color: #28a745 !important;
}

/* Reset — muted secondary */
.slide-deck-page #reset-regression-btn {
    background-color: #2a2f3a !important;
    border-color: #3a4150 !important;
    color: #8892a4 !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    padding: 4px 16px !important;
}
.slide-deck-page #reset-regression-btn:hover {
    background-color: #3a4150 !important;
    color: #c8d0de !important;
}

/* Date preset buttons (6M, 1Y, 5Y, All) */
.slide-deck-page #preset-all,
.slide-deck-page #preset-6m,
.slide-deck-page #preset-1y,
.slide-deck-page #preset-5y {
    background-color: transparent !important;
    border: 1px solid #3a4150 !important;
    color: #8892a4 !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    padding: 2px 10px !important;
}
.slide-deck-page #preset-all:hover,
.slide-deck-page #preset-6m:hover,
.slide-deck-page #preset-1y:hover,
.slide-deck-page #preset-5y:hover {
    border-color: #FFA500 !important;
    color: #FFA500 !important;
}
/* Active preset (primary color) */
.slide-deck-page .btn-primary#preset-all,
.slide-deck-page .btn-primary#preset-6m,
.slide-deck-page .btn-primary#preset-1y,
.slide-deck-page .btn-primary#preset-5y {
    background-color: #FFA500 !important;
    border-color: #FFA500 !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

/* Filter buttons (Big Shock, Medium Shock, etc.) */
.slide-deck-page #big-shock-btn    { background-color: #7f1d1d !important; border-color: #7f1d1d !important; color: #fff !important; font-size: 12px !important; border-radius: 6px !important; }
.slide-deck-page #medium-shock-btn { background-color: #78350f !important; border-color: #78350f !important; color: #fff !important; font-size: 12px !important; border-radius: 6px !important; }
.slide-deck-page #small-shock-btn  { background-color: #164e63 !important; border-color: #164e63 !important; color: #fff !important; font-size: 12px !important; border-radius: 6px !important; }
.slide-deck-page #remove-2020-btn  { background-color: #1e2228 !important; border-color: #3a4150 !important; color: #8892a4 !important; font-size: 12px !important; border-radius: 6px !important; }

/* Active filter state (btn-success) */
.slide-deck-page .btn-success#big-shock-btn,
.slide-deck-page .btn-success#medium-shock-btn,
.slide-deck-page .btn-success#small-shock-btn,
.slide-deck-page .btn-success#remove-2020-btn {
    background-color: #22883a !important;
    border-color: #22883a !important;
    color: #fff !important;
}

/* Filter status text */
.slide-deck-page #filter-status {
    color: #8892a4 !important;
    font-size: 11px !important;
}

/* Calendar / Download buttons */
.slide-deck-page #calendar {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    color: #c8d0de !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}
.slide-deck-page #calendar:hover {
    border-color: #FFA500 !important;
    color: #FFA500 !important;
}

.slide-deck-page #download-btn {
    background-color: #22883a !important;
    border-color: #22883a !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}
.slide-deck-page #download-btn:hover {
    background-color: #28a745 !important;
}

/* ── Toggle switch (Seasonal Adj dbc.Switch) ────────────────────────────── */
.slide-deck-page .form-check-input {
    background-color: #2a2f3a !important;
    border-color: #3a4150 !important;
    cursor: pointer !important;
}
.slide-deck-page .form-check-input:checked {
    background-color: #FFA500 !important;
    border-color: #FFA500 !important;
}
.slide-deck-page .form-check-input:focus {
    box-shadow: 0 0 0 3px hsla(36, 95%, 52%, 0.25) !important;
}
.slide-deck-page .form-check-label {
    color: #8892a4 !important;
    font-size: 12px !important;
}

/* ── Checkboxes (column selection) ──────────────────────────────────────── */
.slide-deck-page .form-check-input[type="checkbox"] {
    background-color: #1c2026 !important;
    border-color: #3a4150 !important;
    border-radius: 3px !important;
}
.slide-deck-page .form-check-input[type="checkbox"]:checked {
    background-color: #FFA500 !important;
    border-color: #FFA500 !important;
}

/* ── HR dividers ─────────────────────────────────────────────────────────── */
.slide-deck-page hr {
    border-color: #1e2228 !important;
    opacity: 1 !important;
}

/* ── Status / helper text ────────────────────────────────────────────────── */
.slide-deck-page #ticker-status,
.slide-deck-page #upload-status,
.slide-deck-page #accounting-status,
.slide-deck-page #formula-status,
.slide-deck-page #variable-mapping {
    color: #8892a4 !important;
    font-size: 11px !important;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.slide-deck-page .alert-warning {
    background-color: #2d1f00 !important;
    border-color: #78350f !important;
    color: #FFB347 !important;
}
.slide-deck-page .alert-danger {
    background-color: #2d0000 !important;
    border-color: #7f1d1d !important;
    color: #F48FB1 !important;
}
.slide-deck-page .alert-info {
    background-color: #062a35 !important;
    border-color: #164e63 !important;
    color: #4CC9F0 !important;
}

/* ── Regression output card ─────────────────────────────────────────────── */
.slide-deck-page #regression-output .card {
    background-color: #13161b !important;
    border-color: #1e2228 !important;
}
.slide-deck-page #regression-output .card-body {
    background-color: #13161b !important;
}

/* ── DataTable in regression output ─────────────────────────────────────── */
.slide-deck-page .custom-table,
.slide-deck-page .table {
    color: #c8d0de !important;
    background-color: #13161b !important;
    border-color: #1e2228 !important;
}
.slide-deck-page .table th {
    background-color: #1a1d24 !important;
    color: #FFA500 !important;
    border-color: #1e2228 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.slide-deck-page .table td {
    background-color: #13161b !important;
    border-color: #1e2228 !important;
    font-size: 12px !important;
}
.slide-deck-page .table-hover tbody tr:hover td {
    background-color: #1e2330 !important;
    color: #fff !important;
}

/* ── Right panel scrollable column ──────────────────────────────────────── */
.slide-deck-page .col-8 {
    background-color: #13161b !important;
    border: 1px solid #1e2228 !important;
    border-radius: 8px !important;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.slide-deck-page ._dash-loading-callback {
    background-color: rgba(13, 16, 22, 0.7) !important;
}

/* ── Responsive: stack panels on small screens ───────────────────────────── */
@media screen and (max-width: 768px) {
    .slide-deck-page .col-4,
    .slide-deck-page .col-8 {
        width: 100% !important;
        margin: 0 0 12px 0 !important;
    }
}

/* ==========================================================================
   POINT-IN-TIME PAGE — DARK THEME
   Scoped to .country-dropdown-pit and pit page elements
   ========================================================================== */

/* Country dropdown — PIT */
.country-dropdown-pit .Select-control {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    color: #c8d0de !important;
    min-height: 34px !important;
}

.country-dropdown-pit .Select-value-label,
.country-dropdown-pit .Select-placeholder {
    color: #c8d0de !important;
    font-size: 13px !important;
}

.country-dropdown-pit .Select-arrow { border-top-color: #8892a4 !important; }

.country-dropdown-pit .Select-menu-outer {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

.country-dropdown-pit .VirtualizedSelectOption,
.country-dropdown-pit .Select-option {
    background-color: #1c2026 !important;
    color: #c8d0de !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
}

.country-dropdown-pit .VirtualizedSelectOption:hover,
.country-dropdown-pit .VirtualizedSelectOption.VirtualizedSelectFocusedOption,
.country-dropdown-pit .Select-option.is-focused {
    background-color: #2a2f3a !important;
    color: #FFA500 !important;
}

.country-dropdown-pit .VirtualizedSelectOption.VirtualizedSelectSelectedOption,
.country-dropdown-pit .Select-option.is-selected {
    background-color: #2a2f3a !important;
    color: #FFA500 !important;
}

/* ==========================================================================
   POINT-IN-TIME — OUTER TABS & CONTROLS ROW
   ========================================================================== */

/* Outer tab bar — matches nav-tabs pill style */
.pit-tabs > .nav-tabs {
    border-bottom: 1px solid #1e2228 !important;
    padding: 6px 0 0 0 !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
    background-color: transparent !important;
}

.pit-tabs > .nav-tabs .nav-link {
    color: #8892a4 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 6px 16px !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}

.pit-tabs > .nav-tabs .nav-link:hover {
    color: #c8d0de !important;
    border-bottom-color: #3a4150 !important;
    background-color: transparent !important;
}

.pit-tabs > .nav-tabs .nav-link.active {
    color: #fff !important;
    font-weight: 600 !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #FFA500 !important;
    border-radius: 0 !important;
}

/* Tab content area — add consistent padding */
.pit-tabs > .tab-content {
    padding: 0 4px !important;
    background-color: transparent !important;
}

/* Controls row — ensure buttons and dropdown sit on same baseline */
.pit-tabs .g-2.mb-3 {
    margin-top: 0 !important;
}

.pit-tabs .g-2.mb-3 .btn {
    height: 36px !important;
    line-height: 1 !important;
}

.pit-tabs .g-2.mb-3 .Select-control {
    height: 36px !important;
    min-height: 36px !important;
}

.pit-tabs .g-2.mb-3 .Select-value,
.pit-tabs .g-2.mb-3 .Select-placeholder {
    line-height: 36px !important;
}

/* ==========================================================================
   PIT CHART ROW — equal-height columns, top-aligned, responsive
   ========================================================================== */

.pit-chart-row {
    align-items: flex-start !important;
}

/* Both chart containers stretch to fill their column */
.pit-chart-row .js-plotly-plot,
.pit-chart-row #pit_graph,
.pit-chart-row #pit_graph_changes {
    width: 100% !important;
}

/* On mobile stack vertically with gap */
@media screen and (max-width: 767px) {
    .pit-chart-row > [class*="col-"] {
        width: 100% !important;
        min-height: unset !important;
    }
    .pit-chart-row > [class*="col-"]:first-child {
        margin-bottom: 12px;
    }
}

/* ==========================================================================
   PIT CHART PANELS — side-by-side, same top level, equal height
   ========================================================================== */

.pit-chart-row {
    align-items: stretch !important;
}

/* Each panel: dark card bg, same border as other cards, fills column height */
.pit-chart-panel {
    background-color: #13161b;
    border: 1px solid #1e2228;
    border-radius: 8px;
    padding: 8px 6px 4px 6px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Plotly figure inside each panel fills available space */
.pit-chart-panel .js-plotly-plot,
.pit-chart-panel .plot-container {
    flex: 1 1 auto;
    width: 100% !important;
}

/* Loading spinner centred */
.pit-chart-panel ._dash-loading {
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* On tablet/mobile: stack vertically */
@media screen and (max-width: 991px) {
    .pit-chart-row > [class*="col-"] {
        width: 100% !important;
    }
    .pit-chart-panel {
        margin-bottom: 12px;
    }
}

/* ==========================================================================
   DOCS / DOCUMENTATION PAGE
   Scoped to .docs-page to avoid bleeding into dashboard
   ========================================================================== */

/* Sidebar nav item hover */
.docs-nav-item:hover {
    background-color: #1a1d24 !important;
    cursor: pointer;
}

.docs-nav-item:hover span {
    color: #c8d0de !important;
}

.docs-nav-item:hover i {
    color: #FFA500 !important;
}

/* Info callout box — matches the muted bordered box in the screenshot */
.docs-callout {
    display: flex;
    gap: 12px;
    background-color: #16191f;
    border: 1px solid #1e2228;
    border-radius: 8px;
    padding: 14px 16px;
    max-width: 680px;
}

.docs-callout p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #c8d0de;
}

/* Sidebar scroll — no visible scrollbar */
.docs-sidebar {
    scrollbar-width: none;
}
.docs-sidebar::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   DOCS PAGE — RESPONSIVE
   ========================================================================== */

.docs-mobile-nav  { display: none !important; }
.docs-sidebar     { display: block !important; }

/* Tablet: narrow sidebar */
@media screen and (max-width: 900px) {
    .docs-sidebar { width: 180px !important; min-width: 180px !important; }
    .docs-sidebar .docs-nav-item span { font-size: 12px !important; }
}

/* Mobile: collapse sidebar into hamburger menu */
@media screen and (max-width: 640px) {
    .docs-sidebar    { display: none !important; }
    .docs-mobile-nav { display: block !important; }
    .docs-body-row   { height: auto !important; overflow: visible !important; flex-direction: column !important; }
    #docs-main-content { height: auto !important; overflow-y: visible !important; }
}

/* Nav item hover */
.docs-nav-item:hover { background-color: #1a1d24 !important; }
.docs-nav-item:hover span { color: #c8d0de !important; }
.docs-nav-item:hover i    { color: #FFA500  !important; }

/* Callout max-width relaxes on small screens */
@media screen and (max-width: 640px) {
    .docs-callout { max-width: 100% !important; }
}

/* Hide sidebar scrollbar */
.docs-sidebar::-webkit-scrollbar { display: none; }


/* ==========================================================================
   CENTRAL BANK PAGE — RESPONSIVE LAYOUT
   Scoped to #cb-main-container so nothing bleeds into other dashboards
   ========================================================================== */
 
/* ── Navbar dropdown — dark theme ───────────────────────────────────────── */
#cb-header .country-dropdown .Select-control {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    color: #c8d0de !important;
    min-height: 34px !important;
}
#cb-header .country-dropdown .Select-value-label,
#cb-header .country-dropdown .Select-placeholder { color: #c8d0de !important; }
#cb-header .country-dropdown .Select-menu-outer {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    z-index: 9999 !important;
}
#cb-header .country-dropdown .VirtualizedSelectOption { background-color: #1c2026 !important; color: #c8d0de !important; }
#cb-header .country-dropdown .VirtualizedSelectOption:hover { background-color: #2a2f3a !important; color: #FFA500 !important; }
 
/* ── Base: all CB cards stretch to fill their col ───────────────────────── */
#cb-main-container .card,
#cb-main-container [style*="height: 100%"] {
    height: 100% !important;
}
 
/* ── Tablet: 768px–991px — 2-col then 1-col ────────────────────────────── */
@media screen and (max-width: 991px) {
 
    /* Row 1 (video | hawk/dove | market): 2-col top, 1-col bottom */
    #cb-main-container .mb-2.g-2:nth-child(1) > .col-4 {
        flex: 0 0 auto !important;
        width: 50% !important;
    }
    #cb-main-container .mb-2.g-2:nth-child(1) > .col-4:last-child {
        width: 100% !important;
    }
 
    /* Row 2 (statements | transcription | risk): 2-col then 1-col */
    #cb-main-container .mb-2.g-2:nth-child(2) > .col-4 {
        flex: 0 0 auto !important;
        width: 50% !important;
    }
    #cb-main-container .mb-2.g-2:nth-child(2) > .col-4:last-child {
        width: 100% !important;
    }
 
    /* Row 3 (bond yield | mortgage): stays 2-col — fine at tablet */
 
    /* Video container height reduction */
    #cb-video-container iframe,
    #cb-video-container > div { max-height: 220px !important; }
}
 
/* ── Mobile: < 768px — single column ───────────────────────────────────── */
@media screen and (max-width: 767px) {
 
    /* All 3-col rows → full width stacked */
    #cb-main-container .mb-2.g-2 > .col-4,
    #cb-main-container .mb-2.g-2 > [class*="col-4"] {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
 
    /* All 2-col rows → full width stacked */
    #cb-main-container .mb-2.g-2 > .col-6,
    #cb-main-container .mb-2.g-2 > [class*="col-6"] {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
 
    /* Add vertical gap between stacked cards */
    #cb-main-container .mb-2.g-2 > [class*="col-"] {
        margin-bottom: 10px !important;
    }
 
    /* Cards — remove fixed 100% height so they size to content */
    #cb-main-container .mb-2.g-2 .col-4 > div,
    #cb-main-container .mb-2.g-2 .col-6 > div {
        height: auto !important;
    }
 
    /* Charts — sensible mobile heights */
    #cb-main-container .js-plotly-plot,
    #cb-main-container [id^="cb-chart-"] {
        min-height: 260px !important;
        height: 260px !important;
    }

    /* ℹ icon in CB hawk/dove header — pin it in the flex row */
	#cb-analysis-status {
	    flex-shrink: 0 !important;
	    margin-left: auto !important;
	}

	#cb-open_about_model {
	    display: inline-flex !important;
	    align-items: center !important;
	    justify-content: center !important;
	    width: 20px !important;
	    height: 20px !important;
	    line-height: 1 !important;
	    flex-shrink: 0 !important;
	}
 
 
    /* Video iframe — 16:9 at full width */
    #cb-video-container iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        max-height: 220px !important;
    }
 
    /* Transcription box — shorter on mobile */
    #cb-transcription-display { max-height: 220px !important; }
 
    /* FOMC speeches scroll area */
    #cb-fomc-speeches-content { max-height: 260px !important; }
 
    /* Risk index tabs — allow horizontal scroll if labels overflow */
    #cb-risk-index-tabs .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }
    #cb-risk-index-tabs .nav-tabs::-webkit-scrollbar { display: none !important; }
    #cb-risk-index-tabs .nav-link { white-space: nowrap !important; font-size: 11px !important; padding: 5px 10px !important; }
 
    /* Input group — stack on very narrow screens */
    #cb-main-container .input-group {
        flex-wrap: nowrap !important;
    }
    #cb-main-container .input-group .form-control {
        font-size: 12px !important;
        min-width: 0 !important;
    }
 
    /* Buttons row (stop / clear) */
    #cb-main-container .d-flex.justify-content-center.mt-3 {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
 
    /* Card headers — tighter padding */
    #cb-main-container [style*="backgroundColor: #1a1d24"] {
        padding: 8px 10px !important;
    }
 
    /* Committee member cards — 2 per row on mobile */
    #cb-committee-members-card .d-flex.flex-wrap {
        gap: 8px !important;
    }
 
    /* Member images — slightly smaller */
    #cb-committee-members-card img.rounded-circle {
        width: 60px !important;
        height: 60px !important;
    }
 
    /* Outer container padding — tighter on phone */
    #cb-main-container > .container-fluid {
        padding: 8px !important;
    }
}
 
/* ── Very small phones: < 400px ─────────────────────────────────────────── */
@media screen and (max-width: 400px) {
 
    /* Committee members — 1 per row */
    #cb-committee-members-card .d-flex.align-items-center {
        width: 100% !important;
    }
 
    /* Risk index tabs — even smaller font */
    #cb-risk-index-tabs .nav-link { font-size: 10px !important; padding: 4px 8px !important; }
 
    #cb-main-container .js-plotly-plot,
    #cb-main-container [id^="cb-chart-"] {
        height: 220px !important;
        min-height: 220px !important;
    }
}


/* ==========================================================================
   COMMITTEE MEMBER CARDS — prevent name/role truncation
   ========================================================================== */

#cb-committee-members-card .d-flex.align-items-center {
    min-width: 160px !important;   /* enough for img + short name */
    flex: 1 1 160px !important;
}

/* Text block next to avatar — allow wrapping, don't squish */
#cb-committee-members-card .d-flex.align-items-center > div:last-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* Name — allow 2-line wrap instead of clipping */
#cb-committee-members-card .d-flex.align-items-center .mb-0.small.fw-bold {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

/* Role — same */
#cb-committee-members-card .d-flex.align-items-center .mb-0:not(.fw-bold) {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 10px !important;
}

/* Wrapper row — wrap so cards flow onto next line cleanly */
#cb-committee-members-card > div > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px !important;
}

/* Hawk/Dove card — contain chart within card bounds */
#cb-realtime-hawkdove-chart {
    overflow: hidden !important;
}

#cb-main-container .mb-2.g-2:first-child .col-4:nth-child(2) > div {
    overflow: hidden !important;
    height: auto !important;
}


/* ==========================================================================
   MAIN PAGE — dbc.Tabs inside card headers
   NOTE: dbc.Tabs renders className on the <ul> element directly, so
   .main-card-tabs-outline IS the .nav-tabs element — use no-space selectors.
   ========================================================================== */

/* ── Shared base: strip Bootstrap chrome from both variants ─────────── */
.main-card-tabs-outline.nav-tabs,
.main-card-tabs-underline.nav-tabs {
    gap:                        0 !important;
    padding:                    0 !important;
    flex-wrap:                  nowrap !important;
    overflow-x:                 auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width:            none !important;
}
.main-card-tabs-outline.nav-tabs::-webkit-scrollbar,
.main-card-tabs-underline.nav-tabs::-webkit-scrollbar {
    display: none !important;
}

/* All tab links — reset Bootstrap defaults */
.main-card-tabs-outline.nav-tabs .nav-link,
.main-card-tabs-underline.nav-tabs .nav-link {
    background-color: transparent !important;
    border:           none !important;
    border-radius:    0 !important;
    color:            #8892a4 !important;
    font-size:        12px !important;
    font-weight:      400 !important;
    white-space:      nowrap !important;
    transition:       color 0.15s ease !important;
    margin:           0 !important;
}

.main-card-tabs-outline.nav-tabs .nav-link:hover,
.main-card-tabs-underline.nav-tabs .nav-link:hover {
    color:            #c8d0de !important;
    background-color: transparent !important;
    border:           none !important;
}

/* ── Variant 1: orange outline pill ─────────────────────────────────── */
.main-card-tabs-outline.nav-tabs {
    background-color: #13161b !important;
    padding:          6px 10px !important;
    gap:              4px !important;
    border-bottom:    1px solid #1e2228 !important;
}

.main-card-tabs-outline.nav-tabs .nav-link {
    border-radius: 5px !important;
    padding:       4px 12px !important;
    line-height:   1.5 !important;
}

.main-card-tabs-outline.nav-tabs .nav-item .nav-link.active {
    color:            #FFA500 !important;
    border:           1px solid #FFA500 !important;
    border-radius:    5px !important;
    background-color: transparent !important;
    font-weight:      500 !important;
}

/* ── Variant 2: orange underline ─────────────────────────────────────── */
.main-card-tabs-underline.nav-tabs {
    background-color: #13161b !important;
    padding:          0 12px !important;
    border-bottom:    1px solid #1e2228 !important;
}

.main-card-tabs-underline.nav-tabs .nav-link {
    padding:       8px 14px !important;
    line-height:   1.4 !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
}

.main-card-tabs-underline.nav-tabs .nav-link:hover {
    border-bottom: 2px solid #3a4150 !important;
}

.main-card-tabs-underline.nav-tabs .nav-item .nav-link.active {
    color:            #ffffff !important;
    border-bottom:    2px solid #FFA500 !important;
    background-color: transparent !important;
    font-weight:      500 !important;
    border-top:       none !important;
    border-left:      none !important;
    border-right:     none !important;
    border-radius:    0 !important;
}

/* ── Mobile: tighten tab padding so more tabs fit ────────────────────── */
@media screen and (max-width: 767px) {
    .main-card-tabs-outline.nav-tabs .nav-link,
    .main-card-tabs-underline.nav-tabs .nav-link {
        font-size: 11px !important;
        padding:   4px 8px !important;
    }
}

/* ==========================================================================
   SLIDE DECK — TOP BAR UI  (new_slides_hala.py refactor)
   Additions to style.css — append to bottom of file
   ========================================================================== */

/* ── Slide title — orange bold above top bar ──────────────────────────── */
#slide-title {
    color:          #FFA500;
    font-weight:    700;
    font-size:      18px;
    line-height:    1.3;
    margin-bottom:  8px;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    max-width:      100%;
}

@media screen and (max-width: 767px) {
    #slide-title {
        font-size:     15px;
        margin-bottom: 6px;
        white-space:   normal;      /* Allow wrapping on mobile */
    }
}

/* ── Country display pill — flag + code ───────────────────────────────── */
#country-display {
    display:          flex;
    align-items:      center;
    padding:          4px 10px;
    background-color: #2C2C2C;
    border:           1px solid #444;
    border-radius:    5px;
    white-space:      nowrap;
    user-select:      none;
    height:           36px;
    box-sizing:       border-box;
}

#country-display span:first-child {
    font-size:    18px;
    margin-right: 4px;
    line-height:  1;
}

#country-display span:last-child {
    color:       #fff;
    font-weight: 700;
    font-size:   13px;
}


/* ── dmc.Select indicator search (#slide_search) ──────────────────────── */
/* Mantine uses its own class names — target by id + mantine selectors    */

#slide_search input {
    background-color: #2C2C2C !important;
    color:            #fff !important;
    border:           1px solid #444 !important;
    border-radius:    5px !important;
    font-size:        13px !important;
    height:           36px !important;
}

#slide_search input::placeholder { color: #666 !important; }

#slide_search input:focus {
    border-color: #FFA500 !important;
    box-shadow:   0 0 0 2px hsla(36, 95%, 52%, 0.2) !important;
    outline:      none !important;
}

/* Mantine dropdown popover */
.mantine-Select-dropdown,
[data-mantine-component="Select"] .mantine-Popover-dropdown {
    background-color: #1c2026 !important;
    border:           1px solid #444 !important;
    border-radius:    6px !important;
    box-shadow:       0 8px 24px rgba(0,0,0,0.6) !important;
    z-index:          9999 !important;
}

/* Individual options */
.mantine-Select-item,
.mantine-Select-dropdown [class*="item"] {
    color:            #c8d0de !important;
    font-size:        13px !important;
    background-color: transparent !important;
    border-radius:    4px !important;
    padding:          5px 10px !important;
}

.mantine-Select-item:hover,
.mantine-Select-item[data-hovered],
.mantine-Select-dropdown [class*="item"]:hover {
    background-color: #2a2f3a !important;
    color:            #FFA500 !important;
}

.mantine-Select-item[data-selected],
.mantine-Select-dropdown [class*="item"][data-selected] {
    background-color: #2a2f3a !important;
    color:            #FFA500 !important;
    font-weight:      500 !important;
}

/* Group labels inside Mantine select */
.mantine-Select-separator,
[class*="SelectItem_separator"],
.mantine-Select-dropdown [class*="groupLabel"] {
    color:       #8892a4 !important;
    font-size:   11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding:     6px 10px 2px !important;
    border-top:  1px solid #1e2228 !important;
    margin-top:  2px !important;
}

/* Search icon inside input */
#slide_search [class*="Input-icon"],
#slide_search svg {
    color: #888 !important;
}

/* ── Action buttons container (#slide-action-buttons) ─────────────────── */
#slide-action-buttons {
    display:     flex;
    align-items: center;
}

/* Hover: slightly lighter bg, keep text white */
#slide-action-buttons .btn:hover {
    background-color: #2e3440 !important;
    border-color:     #3e4450 !important;
    color:            #fff !important;
}

/* Mobile: hide text labels, show icon only */
@media screen and (max-width: 767px) {
    #slide-action-buttons .btn span { display: none !important; }
    #slide-action-buttons .btn { min-width: unset !important; padding: 5px 10px !important; }
}

/* ── Top bar row — prevent collapse on smaller screens ────────────────── */
.slide-topbar-row {
    flex-wrap:  nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
}
.slide-topbar-row::-webkit-scrollbar { display: none; }

/* ── Slide counter badge ───────────────────────────────────────────────── */
#slide-counter {
    color:       #8892a4;
    font-size:   12px;
    min-width:   40px;
    text-align:  center;
    white-space: nowrap;
    user-select: none;
}

/* ── Nav prev/next buttons ─────────────────────────────────────────────── */
#previous-link,
#next-link {
    background-color: rgba(169,169,169,0.15) !important;
    border:           1px solid #444 !important;
    color:            #fff !important;
    border-radius:    4px !important;
    font-size:        13px !important;
    padding:          2px 10px !important;
    line-height:      1.5 !important;
    min-width:        28px !important;
}

#previous-link:hover,
#next-link:hover {
    background-color: rgba(169,169,169,0.3) !important;
    border-color:     #FFA500 !important;
    color:            #FFA500 !important;
}

/* ── Mobile: tighten the top bar ─────────────────────────────────────────  */
@media screen and (max-width: 767px) {
    #slide-action-buttons .btn {
        font-size: 11px !important;
        padding:   2px 6px !important;
        width:     auto !important;
    }

    #slide-action-buttons .btn div {
        display: none !important;   /* Hide CSV/API/Info label text, keep icon */
    }

    #country-display span:last-child {
        display: none !important;   /* Show flag only on mobile */
    }

    #country-display {
        padding: 4px 6px !important;
    }
}

/* ── Bottom date range buttons (calendar / 1Y / 3Y / Max) ────────────── */
[id$="_open_calendar"],
[id$="_1year"],
[id$="_3year"],
[id$="_max_year"] {
    background-color: #1e2228 !important;
    color:            #c8d0de !important;
    border:           1px solid #2e3440 !important;
    font-size:        13px !important;
    font-weight:      400 !important;
    padding:          5px 14px !important;
    border-radius:    6px !important;
}

[id$="_open_calendar"]:hover,
[id$="_1year"]:hover,
[id$="_3year"]:hover,
[id$="_max_year"]:hover {
    background-color: #2e3440 !important;
    border-color:     #3e4450 !important;
    color:            #fff !important;
}

/* ==========================================================================
   SLIDE DECK TOP BAR — COUNTRY DROPDOWN OVERFLOW FIX
   ========================================================================== */

/* Ensure the top bar row doesn't clip the dropdown */
#dropdown_country {
    position: relative;
    z-index:  10000 !important;
}

#dropdown_country .Select-control {
    z-index: 10000 !important;
}

#dropdown_country .Select-menu-outer {
    z-index:  10001 !important;
    position: absolute !important;
    top:      100% !important;
    left:     0 !important;
    width:    120px !important;   /* compact, just fits flag + code */
}

/* The top bar row itself must allow overflow so dropdown escapes it */
.g-2[style*="flexWrap: nowrap"],
.g-2[style*="flex-wrap: nowrap"],
.row.g-2 {
    overflow: visible !important;
}

/* The dbc.Col containing the dropdown must not clip */
#dropdown_country,
#dropdown_country .Select {
    overflow: visible !important;
}

/* ==========================================================================
   TRADING MODELS PAGE  (trading_models_layout.py)
   Append to bottom of style.css
   ========================================================================== */

/* ── Page wrapper & body ─────────────────────────────────────────────────── */
.tm-page-wrapper {
    background-color: #0c0e12;
    min-height: 100vh;
    padding: 0;
}

.tm-page-body {
    padding: 16px 20px;
    /*max-width: 1400px;*/
}

/* ── Card subtitle ───────────────────────────────────────────────────────── */
.tm-card-subtitle {
    color: #8892a4;
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* ── Bullet list ─────────────────────────────────────────────────────────── */
.tm-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tm-bullet-list li {
    color: #c8d0de;
    font-size: 13px;
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tm-bullet-list li::before {
    content: '';
    display: inline-block;
    width:  7px;
    height: 7px;
    border-radius: 50%;
    background-color: #FFA500;
    flex-shrink: 0;
}

/* ── Download rows (right card) ──────────────────────────────────────────── */
.tm-download-row {
    display:         flex;
    align-items:     center;
    background-color: #13161b;
    border:          1px solid #2e3440;
    border-radius:   6px;
    padding:         10px 14px;
    margin-bottom:   8px;
    cursor:          pointer;
    transition:      background-color 0.15s ease, border-color 0.15s ease;
    text-decoration: none !important;
}

.tm-download-row:hover {
    background-color: #1e2228;
    border-color:     #FFA500;
}

.tm-download-row:hover span {
    color: #e8eaf0 !important;
}

a.tm-download-row-link {
    text-decoration: none !important;
}

/* ── Action bar buttons ──────────────────────────────────────────────────── */
#tm-btn-download-data:hover {
    background-color: #e69500 !important;
    border-color:     #e69500 !important;
}

#tm-btn-info:hover {
    background-color: #252b35 !important;
    border-color:     #3e4a5a !important;
    color:            #e8eaf0 !important;
}

/* ── Chart container ─────────────────────────────────────────────────────── */
#tm-chart .js-plotly-plot {
    border-radius: 8px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tm-page-body {
        padding: 12px;
    }

    #tm-chart {
        height: 360px !important;
    }

    #tm-chart .js-plotly-plot {
        height: 360px !important;
    }
}

/* ==========================================================================
   TAA PAGE additions
   ========================================================================== */

#taa-btn-download:hover {
    background-color: #e69500 !important;
    border-color:     #e69500 !important;
}

#taa-btn-info:hover {
    background-color: #252b35 !important;
    border-color:     #3e4a5a !important;
    color:            #e8eaf0 !important;
}


/* ==========================================================================
   SUBSTACK ARCHIVE PAGE
   Append to bottom of style.css
   ========================================================================== */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.sb-page {
    background-color: #13161b;
    min-height:       100vh;
    padding:          20px 24px 40px;
    font-family:      -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.sb-top-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   16px;
}

.sb-page-title {
    color:       #e8eaf0;
    font-size:   20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sb-zoom-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    background-color: #FFA500;
    color:            #13161b;
    border:           none;
    border-radius:    7px;
    font-size:        13px;
    font-weight:      600;
    padding:          7px 14px;
    cursor:           pointer;
    transition:       background-color 0.15s ease;
    white-space:      nowrap;
}
.sb-zoom-btn:hover {
    background-color: #e69500;
}

/* ── Search bar ───────────────────────────────────────────────────────────── */
.sb-search-bar {
    display:          flex;
    align-items:      center;
    gap:              10px;
    background-color: #1a1d24;
    border:           1px solid #1e2228;
    border-radius:    8px;
    padding:          10px 14px;
    margin-bottom:    28px;
}

.sb-search-input {
    background:   transparent !important;
    border:       none !important;
    outline:      none !important;
    color:        #c8d0de !important;
    font-size:    14px !important;
    font-family:  inherit !important;
    width:        100%;
    box-shadow:   none !important;
}

.sb-search-input::placeholder {
    color: #8892a4;
}

/* ── Month sections ───────────────────────────────────────────────────────── */
.sb-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sb-month-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sb-month-label {
    color:          #8892a4;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.08em;
    padding-bottom: 8px;
    border-bottom:  1px solid #1e2228;
}

/* ── Article card ─────────────────────────────────────────────────────────── */
.sb-card {
    display:         block;
    text-decoration: none !important;
    border-radius:   8px;
    border:          1px solid #1e2228;
    background-color: #1a1d24;
    overflow:        hidden;
    transition:      border-color 0.15s ease, background-color 0.15s ease;
    height:          100%;
}
.sb-card:hover {
    border-color:     #2e3440;
    background-color: #1e2228;
}

.sb-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
}

/* ── Thumbnail ────────────────────────────────────────────────────────────── */
.sb-thumb {
    width:            72px;
    height:           72px;
    flex-shrink:      0;
    border-radius:    6px;
    overflow:         hidden;
    background:       linear-gradient(135deg, #2a2f3a 0%, #1a1d24 100%);
}

/* ── Card text ────────────────────────────────────────────────────────────── */
.sb-card-body {
    flex:     1;
    min-width: 0;
    display:  flex;
    flex-direction: column;
    gap: 4px;
}

.sb-card-title {
    color:          #e8eaf0;
    font-size:      13px;
    font-weight:    600;
    line-height:    1.4;
    overflow:       hidden;
    display:        -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sb-card-meta {
    color:     #8892a4;
    font-size: 11px;
}

/* ── Social row (likes / comments) ───────────────────────────────────────── */
.sb-social {
    display:    flex;
    gap:        12px;
    margin-top: 6px;
}

.sb-social-item {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    color:       #8892a4;
    font-size:   11px;
}

.sb-social-item i {
    font-size: 11px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sb-page {
        padding: 14px 12px 32px;
    }
    .sb-page-title {
        font-size: 16px;
    }
    .sb-zoom-btn {
        font-size: 11px;
        padding:   6px 10px;
    }
    .sb-thumb {
        width:  52px;
        height: 52px;
    }
}

a[style*="1a1d24"]:hover {
    border-color: #2e3440 !important;
}