/* ==========================================================================
   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;
}

/* ==========================================================================
   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; }
}

/* ==========================================================================
   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;
}

/* Wrapper col — positions the dropdown correctly at all sizes */
#dropdown_country {
    font-size: 13px;
    min-width: 0;       /* Allows shrinking on small screens */
}

/* Dropdown control box — dark background matching the theme */
#dropdown_country .Select-control {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    color: #fff !important;
    min-height: 34px !important;
}

/* Selected value text — white */
#dropdown_country .Select-value-label,
#dropdown_country .Select-placeholder {
    color: #fff !important;
    font-size: 13px !important;
}

/* Dropdown arrow caret — white */
#dropdown_country .Select-arrow { border-top-color: #9ca3af !important; }

/* The floating options menu — must appear above cards (z-index > card shadow) */
#dropdown_country .Select-menu-outer {
    background-color: #1c2026 !important;
    border: 1px solid #3a4150 !important;
    border-radius: 6px !important;
    z-index: 9999 !important;   /* Float above all cards and their content */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

/* Individual option rows */
#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;
}

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

/* Selected (active) option */
#dropdown_country .VirtualizedSelectOption.VirtualizedSelectSelectedOption {
    background-color: #2a2f35 !important;
    color: #FFA500 !important;
}

/* Flag images inside options — vertically centred */
#dropdown_country img {
    vertical-align: middle;
    margin-right: 6px;
}

/* ==========================================================================
   COUNTRY DROPDOWN — RESPONSIVE WIDTHS
   Col breakpoints are set in Python (xs=12, sm=6, md=3, lg=2).
   These rules ensure the dropdown itself fills its column at every size.
   ========================================================================== */

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

/* Desktop: cap width so it doesn't stretch beyond the lg=2 col */
@media screen and (min-width: 992px) {
    #dropdown_country {
        max-width: 200px;
    }
}

/* Mobile: full width, add bottom margin before the card grid starts */
@media screen and (max-width: 575px) {
    #dropdown_country {
        max-width: 100%;
        margin-bottom: 12px;
    }
}

/* ==========================================================================
   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%, 14%) !important;
    color: hsl(40, 10%, 85%) !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%, 14%) !important;
    color: hsl(36, 95%, 65%) !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; }
}