/* Lailara Design System v2 — Dash brand overrides.
   Dash auto-loads every CSS file in the assets/ directory. */

/* ============================================================
   Self-hosted fonts
   ============================================================ */

@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/playfair-display-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/playfair-display-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('/assets/fonts/source-sans-3-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('/assets/fonts/source-sans-3-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   CSS custom properties
   ============================================================ */

:root {
    --ll-canvas: #f5f3ee;
    --ll-ink: #0d0d0d;
    --ll-text: #333333;
    --ll-text-sec: #595959;
    --ll-reference: #666666;
    --ll-gridline: #d9d9d9;
    --ll-surface: #f2f2f2;
    --ll-red-42: #cc100a;
    --ll-red-95: #fce8e7;
    --ll-chicago-20: #1f2e7a;
    --ll-chicago-10: #141e52;
    --ll-hk-35: #158f75;
    --ll-hk-95: #e4f5f0;
    --ll-sg-55: #ee8a2a;
    --ll-sg-95: #fdeee0;
    --ll-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --ll-sans: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ll-radius: 2px;
}

/* ============================================================
   Body + page background
   ============================================================ */

body {
    background-color: var(--ll-canvas);
    font-family: var(--ll-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ll-text);
}

/* ============================================================
   Sidebar
   ============================================================ */

.sidebar {
    background-color: var(--ll-canvas);
    border-right: 1px solid var(--ll-gridline);
    padding: 1.25rem 1rem;
    height: 100vh;
    overflow-y: auto;
}

.brand-header {
    padding: 0.5rem 0 1rem 0;
    border-bottom: 1px solid var(--ll-gridline);
    margin-bottom: 1rem;
}

.brand-name {
    font-family: var(--ll-serif);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ll-ink);
}

.brand-sub {
    font-family: var(--ll-sans);
    font-size: 15px;
    font-weight: 400;
    color: var(--ll-text-sec);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: -0.1rem;
}

.brand-tool {
    font-family: var(--ll-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--ll-text-sec);
    margin-top: 0.6rem;
}

/* ============================================================
   Cards (metric cards, content panels)
   ============================================================ */

.metric-card {
    background-color: #ffffff;
    border: 1px solid var(--ll-gridline);
    border-radius: var(--ll-radius);
    padding: 12px 16px 10px 16px;
}

/* ============================================================
   Main content area
   ============================================================ */

.main-content {
    padding: 1.5rem;
}

.js-plotly-plot .plotly .main-svg {
    background: transparent !important;
}

/* ============================================================
   AG Grid overrides
   ============================================================ */

.ag-theme-alpine .ag-header {
    background-color: var(--ll-chicago-20);
    color: #ffffff;
}

.ag-theme-alpine .ag-header-cell-text {
    color: #ffffff;
    font-family: var(--ll-sans);
    font-weight: 600;
    font-size: 14px;
}

.ag-theme-alpine .ag-row {
    font-family: var(--ll-sans);
    font-size: 14px;
}

/* ============================================================
   Loading spinner
   ============================================================ */

._dash-loading {
    color: var(--ll-chicago-20);
}

/* ============================================================
   Tabs (Pruning mode)
   ============================================================ */

.nav-tabs .nav-link.active {
    color: var(--ll-ink);
    font-weight: 600;
    border-bottom: 2px solid var(--ll-red-42);
}

.nav-tabs .nav-link {
    color: var(--ll-text-sec);
    font-family: var(--ll-sans);
}

/* ============================================================
   Metric cards (components.py metric_card)
   ============================================================ */

.mc-label {
    font-family: var(--ll-sans);
    font-size: 14px;
    color: var(--ll-text-sec);
    margin-bottom: 4px;
}

.mc-value {
    font-family: var(--ll-serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--ll-ink);
    letter-spacing: -0.02em;
}

.mc-delta {
    font-family: var(--ll-sans);
    font-size: 14px;
    margin-top: 2px;
}

/* ============================================================
   Chart + status legends
   ============================================================ */

.chart-legend {
    color: var(--ll-text-sec);
    font-family: var(--ll-sans);
    font-size: 12px;
    margin: -0.4em 0 0.6em 0;
}

.legend-chip {
    margin-right: 1rem;
}

.legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--ll-radius);
    margin-right: 5px;
    vertical-align: middle;
}

.status-legend {
    color: var(--ll-text-sec);
    font-family: var(--ll-sans);
    font-size: 12px;
    line-height: 1.5;
    margin: 0.25em 0 0.6em 0;
}

.row-count {
    color: var(--ll-text-sec);
    font-family: var(--ll-sans);
    font-size: 12px;
    margin: 0.25em 0 0.75em 0;
}

/* ============================================================
   Empty state
   ============================================================ */

.empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--ll-text-sec);
    font-family: var(--ll-sans);
    font-size: 17px;
}

/* ============================================================
   Dashboard layout (components.py dashboard_layout)
   ============================================================ */

.dash-layout {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 2.5rem);
}

.dash-body {
    display: flex;
    gap: 24px;
    flex: 1;
    min-height: 0;
}

.dash-col {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

.dash-col--scroll {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

.dash-footer {
    padding-top: 8px;
}

/* ============================================================
   Decision mode headers (shared across all 9 modes)
   ============================================================ */

.dh-headline {
    font-family: var(--ll-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ll-ink);
    margin-bottom: 4px;
}

.dh-insight {
    font-family: var(--ll-sans);
    color: var(--ll-text);
    font-size: 15px;
    margin: 4px 0 8px;
    line-height: 1.6;
    max-width: 660px;
}

.dh-caption {
    font-family: var(--ll-sans);
    color: var(--ll-text-sec);
    font-size: 14px;
    margin: 0 0 8px;
}

.dh-metrics {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.dh-metric {
    flex: 1;
}

/* ============================================================
   Export button
   ============================================================ */

.export-btn {
    font-family: var(--ll-sans);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 20px;
    background-color: var(--ll-chicago-20);
    color: #ffffff;
    border: none;
    border-radius: var(--ll-radius);
    cursor: pointer;
}

.export-btn:hover {
    background-color: var(--ll-chicago-10);
}

/* ============================================================
   Sidebar UI
   ============================================================ */

.sidebar-caption {
    font-family: var(--ll-sans);
    font-size: 12px;
    color: var(--ll-text-sec);
    margin-bottom: 8px;
    line-height: 1.5;
}

.sidebar-label {
    font-family: var(--ll-sans);
    font-size: 14px;
    color: var(--ll-text-sec);
    margin-bottom: 4px;
}

.sidebar-section-title {
    font-family: var(--ll-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ll-text-sec);
    margin-bottom: 8px;
}

.sidebar-section-tag {
    font-family: var(--ll-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--ll-text-sec);
    letter-spacing: 0.05rem;
    margin-bottom: 8px;
}

.sidebar-divider {
    border-color: var(--ll-gridline);
    margin: 20px 0;
}

.pitch-btn {
    display: inline-block;
    width: 48%;
    padding: 8px 8px;
    font-family: var(--ll-sans);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--ll-chicago-20);
    border: none;
    border-radius: var(--ll-radius);
    cursor: pointer;
    text-align: center;
}

.pitch-btn:hover {
    background-color: var(--ll-chicago-10);
}

.pitch-btn--right {
    margin-left: 4%;
}

/* ============================================================
   Error card
   ============================================================ */

.error-card {
    border-left: 4px solid var(--ll-red-42);
    margin-bottom: 16px;
}

/* ============================================================
   Portfolio Health landing page
   ============================================================ */

.ph-layout {
    padding: 8px 0;
    max-width: 1100px;
    height: calc(100vh - 2.5rem);
    overflow-y: auto;
}

.ph-subhead {
    font-family: var(--ll-sans);
    color: var(--ll-text-sec);
    font-size: 15px;
    margin: 0 0 4px;
}

.ph-risk-row {
    display: flex;
    gap: 12px;
}

.ph-risk-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid var(--ll-gridline);
    border-radius: var(--ll-radius);
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color 200ms ease-out;
}
.ph-risk-card:hover {
    border-color: var(--ll-chicago-20);
}

.ph-risk-title {
    font-family: var(--ll-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--ll-text-sec);
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    margin-bottom: 4px;
}

.ph-risk-count {
    font-family: var(--ll-serif);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.ph-risk-subtitle {
    font-family: var(--ll-sans);
    font-size: 14px;
    color: var(--ll-text-sec);
    margin-bottom: 4px;
}

.ph-risk-detail {
    font-family: var(--ll-sans);
    font-size: 12px;
    color: var(--ll-text-sec);
    line-height: 1.5;
}

.ph-bar {
    display: flex;
    height: 28px;
    border-radius: var(--ll-radius);
    overflow: hidden;
}

.ph-bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: var(--ll-sans);
    font-size: 12px;
    font-weight: 600;
    min-width: 24px;
}

/* ============================================================
   Sidebar toggle (mobile only)
   ============================================================ */

.sidebar-toggle {
    display: none;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--ll-chicago-20);
    color: #ffffff;
    border: none;
    border-radius: var(--ll-radius);
    font-family: var(--ll-sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

/* Desktop: always show sidebar content regardless of collapse state */
@media (min-width: 768px) {
    body {
        font-size: 17px;
    }

    .dh-insight {
        font-size: 17px;
    }

    #sidebar-collapse {
        display: block !important;
        height: auto !important;
    }
}

/* ============================================================
   Mobile responsive — max-width: 767.98px
   ============================================================ */

@media (max-width: 767.98px) {
    .sidebar {
        height: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--ll-gridline);
        padding: 12px 16px;
    }

    .sidebar-toggle {
        display: block;
    }

    .main-content {
        height: auto !important;
        overflow: visible !important;
        padding: 16px;
    }

    .dash-layout {
        height: auto;
        overflow-y: auto;
    }

    .dash-body {
        flex-direction: column;
        flex: none;
    }

    .dash-col,
    .dash-col--scroll {
        flex: none;
        overflow: visible;
        width: 100%;
        min-height: 300px;
        max-width: 100vw;
    }

    .modebar-container {
        display: none !important;
    }

    .js-plotly-plot,
    .plot-container,
    .plotly {
        width: 100% !important;
    }

    .dash-graph {
        width: 100% !important;
    }

    .dh-metrics {
        flex-wrap: wrap;
    }

    .dh-metric {
        flex: 1 1 45%;
        min-width: 140px;
    }

    .ph-risk-row {
        flex-wrap: wrap;
    }

    .ph-risk-card {
        flex: 1 1 45%;
        min-width: 140px;
    }

    .ph-layout {
        height: auto;
    }

    .ag-theme-alpine {
        min-height: 300px;
        height: auto !important;
    }

    .js-plotly-plot .plotly .main-svg .plot-container {
        overflow: visible;
    }

    .brand-name {
        font-size: 20px;
    }

    .mc-value {
        font-size: 24px;
    }

    .ph-risk-count {
        font-size: 28px;
    }

    .dh-headline {
        font-size: 18px;
    }
}

/* ============================================================
   Retailer breakdown table (Promo ROI)
   ============================================================ */

.retailer-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ll-sans);
    font-size: 14px;
    margin-bottom: 1rem;
}

.retailer-breakdown-table th {
    text-align: left;
    padding: 6px 12px;
    font-weight: 600;
    color: var(--ll-text-sec);
    border-bottom: 2px solid var(--ll-gridline);
    font-size: 13px;
}

.retailer-breakdown-table td {
    padding: 5px 12px;
    border-bottom: 1px solid var(--ll-gridline);
    color: var(--ll-ink);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}