/**
 * Forecasting routes — distinct "product modes" inside the main column only.
 * Wrapper: .mi-forecast-mode[data-page-theme="demand|bed-flow|ot-block"]
 */

.mi-forecast-mode {
    position: relative;
    isolation: isolate;
    margin: -0.35rem -0.25rem 0;
    padding: 0.35rem 0.25rem 0.5rem;
    border-radius: 0 0 1rem 1rem;
}

/* -------------------------------------------------------------------------- */
/* Demand forecasting — cool indigo / cyan "portfolio analytics" */
/* -------------------------------------------------------------------------- */

[data-page-theme="demand"].mi-forecast-mode {
    --mi-accent: #3730a3;
    --mi-accent-dark: #312e81;
    --mi-accent-rgb: 55, 48, 163;
    --mi-accent-soft-bg: rgba(8, 145, 178, 0.12);
    --mi-accent-soft-border: rgba(8, 145, 178, 0.28);
    --mi-accent-focus-ring: rgba(55, 48, 163, 0.42);
    --mi-card: #fbfdff;
    --mi-border: #c7d2fe;
    --mi-surface: #eef2ff;
    --mi-slate-50: #f5f7ff;

    background-color: #eef2ff;
    background-image:
        radial-gradient(ellipse 100% 420px at 12% -8%, rgba(56, 189, 248, 0.2), transparent 55%),
        radial-gradient(ellipse 80% 360px at 88% 0%, rgba(99, 102, 241, 0.16), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(238, 242, 255, 0.55) 38%, transparent 100%),
        linear-gradient(rgba(55, 48, 163, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55, 48, 163, 0.045) 1px, transparent 1px);
    background-size: auto, auto, auto, 26px 26px, 26px 26px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}

[data-page-theme="demand"].mi-forecast-mode .mi-pageintro__bar {
    padding-bottom: 0.85rem;
    margin-bottom: 0.15rem;
    border-bottom: 2px solid rgba(8, 145, 178, 0.42);
}

[data-page-theme="demand"].mi-forecast-mode .mi-pageintro__title {
    font-weight: 800;
    letter-spacing: -0.045em;
    color: #1e1b4b;
}

[data-page-theme="demand"].mi-forecast-mode .mi-pageintro__chip:not(.mi-pageintro__chip--accent) {
    border-radius: 999px;
    border-color: rgba(55, 48, 163, 0.22);
    background: rgba(255, 255, 255, 0.85);
}

[data-page-theme="demand"].mi-forecast-mode .mi-pageintro__chip--current {
    border-color: rgba(8, 145, 178, 0.45);
    background: rgba(8, 145, 178, 0.12);
    color: #155e75;
}

[data-page-theme="demand"].mi-forecast-mode .mi-park-toolbar {
    border-bottom: none;
    padding: 1rem 1.1rem 1.05rem;
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(224, 231, 255, 0.75) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 10px 36px rgba(30, 27, 75, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.18);
}

[data-page-theme="demand"].mi-forecast-mode .mi-park-pill {
    border-radius: 999px;
    border-color: rgba(55, 48, 163, 0.2);
    background: rgba(255, 255, 255, 0.88);
}

[data-page-theme="demand"].mi-forecast-mode .mi-park-pill.is-active {
    border-color: rgba(8, 145, 178, 0.55);
    background: linear-gradient(180deg, rgba(224, 242, 254, 0.95), rgba(191, 219, 254, 0.55));
    color: #0e7490;
    box-shadow: 0 0 0 1px rgba(8, 145, 178, 0.12);
}

[data-page-theme="demand"].mi-forecast-mode .mi-park-section__title {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 0.35rem 0 0.35rem 0.75rem;
    border-left: 4px solid #0891b2;
    color: #1e1b4b;
}

[data-page-theme="demand"].mi-forecast-mode .mi-park-section--chart,
[data-page-theme="demand"].mi-forecast-mode .mi-park-section--heat {
    border-radius: 1.1rem;
    border-color: rgba(99, 102, 241, 0.22);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 14px 40px rgba(30, 27, 75, 0.07);
}

[data-page-theme="demand"].mi-forecast-mode .mi-park-kpi {
    border-radius: 1rem;
    border-color: rgba(99, 102, 241, 0.18);
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
    box-shadow: 0 10px 28px rgba(30, 27, 75, 0.06);
}

[data-page-theme="demand"].mi-forecast-mode .mi-park-exec__card {
    border-radius: 1rem;
    border-top: none;
    border-left: 4px solid #6366f1;
    background: linear-gradient(125deg, #ffffff 0%, #f5f3ff 100%);
    box-shadow: 0 12px 32px rgba(30, 27, 75, 0.07);
}

[data-page-theme="demand"].mi-forecast-mode .mi-park-exec__step {
    color: #0e7490;
}

[data-page-theme="demand"].mi-forecast-mode .mi-park-split {
    gap: 1.35rem;
}

[data-page-theme="demand"].mi-forecast-mode .mi-beds-hint {
    border-radius: 0.85rem;
    border-style: solid;
    border-color: rgba(8, 145, 178, 0.35);
    background: rgba(224, 242, 254, 0.55);
}

/* -------------------------------------------------------------------------- */
/* Bed & flow — same neutral canvas as standard MedIntel analytics (inherits :root --mi-*) */
/* -------------------------------------------------------------------------- */

[data-page-theme="bed-flow"].mi-forecast-mode {
    background-color: transparent;
    background-image: none;
}

/* -------------------------------------------------------------------------- */
/* OT & block — orange accent tokens; chrome matches global mi-park / vars */
/* -------------------------------------------------------------------------- */

[data-page-theme="ot-block"].mi-forecast-mode {
    --mi-accent: #ea580c;
    --mi-accent-dark: #c2410c;
    --mi-accent-rgb: 234, 88, 12;
    --mi-accent-soft-bg: rgba(234, 88, 12, 0.1);
    --mi-accent-soft-border: rgba(234, 88, 12, 0.28);
    --mi-accent-focus-ring: rgba(234, 88, 12, 0.4);
    --mi-card: #fdfcff;
    --mi-border: #e8e4f4;
    --mi-surface: #f9f9fb;
    --mi-slate-50: #f8f7fc;
}

[data-page-theme="ot-block"].mi-forecast-mode .mi-park-heat__cell {
    background: hsl(24 70% calc(36% + var(--h, 50) * 0.26%));
}

/* -------------------------------------------------------------------------- */
/* Forecast pages on standard shell canvas (Bed & OT siblings; avoids drift) */
/* -------------------------------------------------------------------------- */

.mi-forecast-page[data-page-theme="bed-flow"].mi-forecast-mode,
.mi-forecast-page[data-page-theme="ot-block"].mi-forecast-mode {
    background-color: transparent;
    background-image: none;
}

.mi-forecast-page[data-page-theme="bed-flow"].mi-forecast-mode .mi-park-toolbar {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--mi-border);
    border-radius: 0;
    margin-bottom: 1.35rem;
    padding: 0 0 1rem;
}

@media (max-width: 900px) {
    [data-page-theme="demand"].mi-forecast-mode .mi-park-exec,
    [data-page-theme="bed-flow"].mi-forecast-mode .mi-park-exec,
    [data-page-theme="ot-block"].mi-forecast-mode .mi-park-exec {
        /* Preserve app responsive rules; only loosen title clipping on OT uppercase */
        word-break: break-word;
    }
}

/* -------------------------------------------------------------------------- */
/* App shell — dark / auto-dark: Demand + OT “product modes” (restore tokens) */
/* -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode {
        --mi-accent: #818cf8;
        --mi-accent-dark: #c7d2fe;
        --mi-accent-rgb: 129, 140, 244;
        --mi-accent-soft-bg: rgba(129, 140, 244, 0.14);
        --mi-accent-soft-border: rgba(129, 140, 244, 0.32);
        --mi-accent-focus-ring: rgba(165, 180, 252, 0.45);
        --mi-card: #171b2e;
        --mi-border: rgba(148, 163, 184, 0.22);
        --mi-surface: #10121f;
        --mi-slate-50: #0f172a;
        --mi-ink-on-accent-tint: #e0e7ff;

        background-color: var(--mi-surface);
        background-image:
            radial-gradient(ellipse 100% 420px at 12% -8%, rgba(56, 189, 248, 0.14), transparent 55%),
            radial-gradient(ellipse 80% 360px at 88% 0%, rgba(99, 102, 241, 0.12), transparent 50%),
            linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.42) 42%, transparent 100%),
            linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
            linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
        background-size: auto, auto, auto, 26px 26px, 26px 26px;
        background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-pageintro__title {
        color: #e0e7ff;
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-pageintro__chip:not(.mi-pageintro__chip--accent) {
        border-color: rgba(129, 140, 244, 0.28);
        background: rgba(23, 27, 46, 0.92);
        color: #cbd5e1;
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-pageintro__chip--current {
        border-color: rgba(34, 211, 238, 0.45);
        background: rgba(8, 145, 178, 0.18);
        color: #a5f3fc;
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-park-toolbar {
        background: linear-gradient(135deg, rgba(23, 27, 46, 0.96) 0%, rgba(30, 41, 82, 0.88) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 10px 36px rgba(0, 0, 0, 0.35);
        border: 1px solid rgba(99, 102, 241, 0.22);
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-park-pill {
        border-color: rgba(129, 140, 244, 0.22);
        background: rgba(23, 27, 46, 0.88);
        color: #cbd5e1;
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-park-pill.is-active {
        border-color: rgba(34, 211, 238, 0.45);
        background: linear-gradient(180deg, rgba(8, 145, 178, 0.22), rgba(30, 58, 138, 0.45));
        color: #cffafe;
        box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.12);
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-park-section__title {
        color: #e0e7ff;
        border-left-color: #22d3ee;
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-park-section--chart,
    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-park-section--heat {
        border-color: rgba(99, 102, 241, 0.28);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 14px 40px rgba(0, 0, 0, 0.35);
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-park-kpi {
        border-color: rgba(99, 102, 241, 0.22);
        background: linear-gradient(165deg, #171b2e 0%, #141824 55%, #10121c 100%);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-park-exec__card {
        border-left-color: #818cf8;
        background: linear-gradient(125deg, #171b2e 0%, #1e1b3a 100%);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-park-exec__step {
        color: #67e8f9;
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="demand"].mi-forecast-mode .mi-beds-hint {
        border-color: rgba(34, 211, 238, 0.35);
        background: rgba(8, 51, 68, 0.55);
        color: #cbd5e1;
    }

    html.mi-html--app-shell:not([data-theme]) [data-page-theme="ot-block"].mi-forecast-mode {
        --mi-card: #1c1828;
        --mi-border: rgba(251, 146, 60, 0.22);
        --mi-surface: #13101a;
        --mi-slate-50: #16101f;
        --mi-ink-on-accent-tint: #ffedd5;
    }
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode {
    --mi-accent: #818cf8;
    --mi-accent-dark: #c7d2fe;
    --mi-accent-rgb: 129, 140, 244;
    --mi-accent-soft-bg: rgba(129, 140, 244, 0.14);
    --mi-accent-soft-border: rgba(129, 140, 244, 0.32);
    --mi-accent-focus-ring: rgba(165, 180, 252, 0.45);
    --mi-card: #171b2e;
    --mi-border: rgba(148, 163, 184, 0.22);
    --mi-surface: #10121f;
    --mi-slate-50: #0f172a;
    --mi-ink-on-accent-tint: #e0e7ff;

    background-color: var(--mi-surface);
    background-image:
        radial-gradient(ellipse 100% 420px at 12% -8%, rgba(56, 189, 248, 0.14), transparent 55%),
        radial-gradient(ellipse 80% 360px at 88% 0%, rgba(99, 102, 241, 0.12), transparent 50%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.42) 42%, transparent 100%),
        linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
    background-size: auto, auto, auto, 26px 26px, 26px 26px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-pageintro__title {
    color: #e0e7ff;
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-pageintro__chip:not(.mi-pageintro__chip--accent) {
    border-color: rgba(129, 140, 244, 0.28);
    background: rgba(23, 27, 46, 0.92);
    color: #cbd5e1;
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-pageintro__chip--current {
    border-color: rgba(34, 211, 238, 0.45);
    background: rgba(8, 145, 178, 0.18);
    color: #a5f3fc;
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-park-toolbar {
    background: linear-gradient(135deg, rgba(23, 27, 46, 0.96) 0%, rgba(30, 41, 82, 0.88) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 36px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(99, 102, 241, 0.22);
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-park-pill {
    border-color: rgba(129, 140, 244, 0.22);
    background: rgba(23, 27, 46, 0.88);
    color: #cbd5e1;
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-park-pill.is-active {
    border-color: rgba(34, 211, 238, 0.45);
    background: linear-gradient(180deg, rgba(8, 145, 178, 0.22), rgba(30, 58, 138, 0.45));
    color: #cffafe;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.12);
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-park-section__title {
    color: #e0e7ff;
    border-left-color: #22d3ee;
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-park-section--chart,
html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-park-section--heat {
    border-color: rgba(99, 102, 241, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 40px rgba(0, 0, 0, 0.35);
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-park-kpi {
    border-color: rgba(99, 102, 241, 0.22);
    background: linear-gradient(165deg, #171b2e 0%, #141824 55%, #10121c 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-park-exec__card {
    border-left-color: #818cf8;
    background: linear-gradient(125deg, #171b2e 0%, #1e1b3a 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-park-exec__step {
    color: #67e8f9;
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="demand"].mi-forecast-mode .mi-beds-hint {
    border-color: rgba(34, 211, 238, 0.35);
    background: rgba(8, 51, 68, 0.55);
    color: #cbd5e1;
}

html.mi-html--app-shell[data-theme="dark"] [data-page-theme="ot-block"].mi-forecast-mode {
    --mi-card: #1c1828;
    --mi-border: rgba(251, 146, 60, 0.22);
    --mi-surface: #13101a;
    --mi-slate-50: #16101f;
    --mi-ink-on-accent-tint: #ffedd5;
}