:root {
    color-scheme: dark;
    --bg: #07151d;
    --bg-soft: #0d2230;
    --panel: #fbfdff;
    --panel-2: #eef7f9;
    --text: #11212b;
    --muted: #667985;
    --inverse: #eaf8fb;
    --line: #d9e7ec;
    --aqua: #14b8c4;
    --aqua-dark: #0f94a0;
    --amber: #f4a62a;
    --coral: #ee6b5e;
    --green: #28b463;
    --blue: #3b82f6;
    --shadow: 0 18px 50px rgba(1, 19, 28, .22);
    --radius: 8px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% -8%, rgba(20, 184, 196, .22), transparent 30%),
        linear-gradient(135deg, rgba(238, 107, 94, .08), transparent 42%),
        linear-gradient(180deg, #07151d 0%, #0b1d29 54%, #07151d 100%);
    color: var(--text);
    overflow-x: hidden;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f8fb;
    --bg-soft: #eaf2f6;
    --panel: #ffffff;
    --panel-2: #f6fafc;
    --text: #111827;
    --muted: #64717f;
    --inverse: #142631;
    --line: #dde7ee;
    --shadow: 0 24px 70px rgba(15, 44, 60, .11);
}

:root[data-theme="light"] body {
    background:
        radial-gradient(circle at 12% -8%, rgba(20, 184, 196, .18), transparent 28%),
        linear-gradient(115deg, rgba(238, 107, 94, .08), transparent 40%),
        linear-gradient(180deg, #f8fbfd 0%, #edf5f8 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.app-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 20px;
    color: var(--inverse);
    background: rgba(5, 22, 31, .92);
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(18px);
}

:root[data-theme="light"] .sidebar {
    color: #d9eef4;
    background: #07151d;
}

.brand,
.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand {
    margin-bottom: 0;
    flex: 0 0 auto;
    min-width: 188px;
    color: #ffffff;
}

.brand-logo-frame {
    display: inline-grid;
    place-items: center;
    width: 134px;
    height: 40px;
    padding: 5px 0;
    border-radius: 8px;
}

.brand-logo {
    display: block;
    width: 134px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.brand-text {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.brand-text strong {
    font-size: 12px;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--aqua), #7dd3fc);
    color: #05202a;
    font-weight: 900;
    letter-spacing: 0;
}

.brand small,
.user-chip span,
.user-menu-copy span {
    display: block;
    color: rgba(234, 248, 251, .68);
    font-size: 12px;
    line-height: 1.35;
}

.sidebar nav {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
}

.sidebar nav a {
    flex: 0 1 auto;
    min-height: 38px;
    padding: 8px 9px;
    border-radius: 8px;
    color: rgba(234, 248, 251, .74);
    font-size: 13px;
    font-weight: 780;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.sidebar nav a.active,
.sidebar nav a:hover {
    background: linear-gradient(135deg, rgba(20, 184, 196, .2), rgba(238, 107, 94, .08));
    color: #ffffff;
}

.sidebar nav a svg {
    width: 16px;
    height: 16px;
}

svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

svg text {
    stroke: none;
}

@media (min-width: 981px) and (max-width: 1320px) {
    .sidebar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 12px;
        min-height: 72px;
        padding: 10px 18px;
    }

    .brand {
        min-width: 0;
    }

    .brand-logo-frame {
        width: 132px;
        height: 40px;
    }

    .brand-logo {
        width: 132px;
    }

    .brand-text {
        display: none;
    }

    .sidebar nav {
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 3px;
    }

    .sidebar nav a {
        min-height: 38px;
        gap: 7px;
        padding: 8px 8px;
        font-size: 13px;
        white-space: nowrap;
    }

    .sidebar nav a svg {
        width: 16px;
        height: 16px;
    }

    .side-footer {
        margin-left: 0;
    }

    .user-menu-trigger {
        min-height: 44px;
        max-width: 232px;
    }
}

.side-footer {
    margin-top: 0;
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 0 0 auto;
}

.user-chip {
    padding: 9px 11px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .07);
}

.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    max-width: 280px;
    padding: 6px 9px 6px 7px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: #ffffff;
    cursor: pointer;
    text-align: left;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.user-menu-trigger:hover,
.user-menu.open .user-menu-trigger {
    background: rgba(20, 184, 196, .14);
    border-color: rgba(20, 184, 196, .28);
}

.user-menu-trigger > svg {
    transition: transform .16s ease;
}

.user-menu.open .user-menu-trigger > svg {
    transform: rotate(180deg);
}

.user-avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--aqua), #7dd3fc);
    color: #05202a;
    font-size: 14px;
    font-weight: 950;
}

.user-menu-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.user-menu-copy strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    display: grid;
    min-width: 230px;
    padding: 7px;
    border: 1px solid rgba(217, 231, 236, .9);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(1, 19, 28, .24);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease;
}

.user-menu.open .user-menu-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.user-menu-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 22px;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(217, 231, 236, .9);
    border-left: 1px solid rgba(217, 231, 236, .9);
    background: #ffffff;
    transform: rotate(45deg);
}

.user-menu-form {
    margin: 0;
}

.user-menu-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #213744;
    cursor: pointer;
    font-size: 13px;
    font-weight: 850;
    text-align: left;
    transition: background .16s ease, color .16s ease;
}

.user-menu-item svg {
    width: 17px;
    height: 17px;
    color: var(--aqua-dark);
}

.user-menu-item:hover {
    background: #edf9fb;
    color: #062f38;
}

.user-menu-item.danger {
    color: #a32633;
}

.user-menu-item.danger svg {
    color: #d6404f;
}

@media (min-width: 981px) and (max-width: 1320px) {
    .side-footer {
        margin-left: 0;
    }

    .user-menu-trigger {
        min-height: 44px;
        max-width: 232px;
    }
}

.content {
    width: min(100%, 1540px);
    max-width: 100%;
    margin: 0 auto;
    padding: 22px 24px 56px;
}

.cockpit-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 18px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(13, 34, 48, .84), rgba(7, 21, 29, .52)),
        linear-gradient(120deg, rgba(18, 183, 200, .16), rgba(245, 165, 36, .08));
    box-shadow: 0 30px 90px rgba(8, 32, 44, .14);
    backdrop-filter: blur(18px);
    color: var(--inverse);
}

.mission-hero-v15 {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(260px, .55fr) minmax(210px, auto);
    align-items: stretch;
}

.hero-copy {
    max-width: 860px;
}

.cockpit-hero::after {
    content: "";
    position: absolute;
    inset: auto 30px 0 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(18, 183, 200, .55), transparent);
}

.cockpit-hero h1 {
    margin-bottom: 8px;
    font-size: clamp(34px, 5vw, 58px);
    letter-spacing: 0;
}

:root[data-theme="light"] .cockpit-hero {
    border-color: rgba(255, 255, 255, .42);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .42)),
        linear-gradient(120deg, rgba(18, 183, 200, .18), rgba(245, 165, 36, .08));
}

.cockpit-hero p {
    margin: 0;
    color: color-mix(in srgb, var(--inverse) 70%, transparent);
    font-size: 16px;
}

.hero-date {
    margin-bottom: 12px !important;
}

.hero-subdate {
    margin-top: -6px !important;
    color: color-mix(in srgb, var(--inverse) 58%, transparent) !important;
    font-size: 14px !important;
    font-weight: 800;
}

.mission-brief {
    max-width: 820px;
    color: color-mix(in srgb, var(--inverse) 86%, transparent) !important;
    font-size: 18px !important;
    font-weight: 750;
    line-height: 1.45;
}

.mission-verdict {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px 12px;
    align-items: start;
    margin: 14px 0;
}

.mission-verdict > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .16);
    color: var(--green);
    font-weight: 950;
}

.mission-verdict.yellow > span {
    background: rgba(245, 166, 42, .18);
    color: var(--amber);
}

.mission-verdict.red > span {
    background: rgba(239, 111, 97, .18);
    color: var(--coral);
}

.mission-verdict h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.08;
}

.mission-verdict p {
    grid-column: 2;
    max-width: 720px;
    color: color-mix(in srgb, var(--inverse) 78%, transparent);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
}

.hero-weather-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

.hero-weather-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--inverse) 16%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--inverse) 8%, transparent);
    color: color-mix(in srgb, var(--inverse) 82%, transparent);
    font-size: 13px;
    font-weight: 900;
}

.hero-command-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(18px);
}

.hero-command-card > span {
    color: color-mix(in srgb, var(--inverse) 62%, transparent);
    font-size: 12px;
    font-weight: 900;
}

.hero-command-card > strong {
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1;
}

.hero-command-card dl,
.forecast-card dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.hero-command-card dl div,
.forecast-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.hero-command-card dt,
.forecast-card dt {
    color: color-mix(in srgb, var(--inverse) 62%, transparent);
    font-size: 12px;
    font-weight: 850;
}

.hero-command-card dd,
.forecast-card dd {
    margin: 0;
    font-weight: 950;
}

.hero-command-card p {
    margin: 0;
    color: color-mix(in srgb, var(--inverse) 80%, transparent);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.42;
}

.mission-command-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
    gap: 18px;
    margin-bottom: 18px;
}

.weather-command-main {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.weather-command-main span {
    color: var(--aqua);
    font-size: 12px;
    font-weight: 950;
}

.weather-command-main h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
    font-size: clamp(25px, 3vw, 38px);
}

.weather-command-main p {
    margin: 0;
    color: var(--muted);
    font-weight: 750;
}

.weather-command-main > strong {
    font-size: clamp(48px, 7vw, 82px);
    line-height: .9;
}

.weather-potential-grid {
    display: grid;
    gap: 10px;
}

.weather-context-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}

.weather-context-list div {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.weather-context-list dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.weather-context-list dd {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
}

.potential-row {
    display: grid;
    grid-template-columns: minmax(90px, .7fr) minmax(92px, .75fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--area) 28%, var(--line));
    border-radius: 8px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--area) 10%, transparent), transparent);
}

.potential-row span,
.potential-row small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.potential-row strong {
    color: var(--area);
    letter-spacing: 1px;
}

.forecast-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.forecast-card {
    display: grid;
    gap: 10px;
    min-height: 220px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.forecast-card > div:first-child span {
    color: var(--aqua);
    font-size: 12px;
    font-weight: 950;
}

.forecast-card > div:first-child strong {
    display: block;
    margin-top: 4px;
}

.forecast-weather {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

.forecast-card dt {
    color: var(--muted);
}

.forecast-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.42;
}

.forecast-area-plan {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.forecast-area-plan span {
    padding: 5px 7px;
    border-radius: 8px;
    background: rgba(20, 184, 196, .1);
    color: #0c6f78;
    font-size: 11px;
    font-weight: 900;
}

.forecast-area-plan span.closed {
    background: rgba(239, 68, 68, .1);
    color: #991b1b;
}

.forecast-area-plan span.reduced {
    background: rgba(245, 158, 11, .14);
    color: #92400e;
}

.forecast-area-plan span.extended,
.forecast-area-plan span.special {
    background: rgba(22, 163, 74, .12);
    color: #166534;
}

.data-status-panel {
    display: grid;
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--coral) 34%, rgba(217, 231, 236, .88));
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--coral) 12%, transparent), transparent 48%),
        var(--panel);
    box-shadow: var(--shadow);
}

.context-understanding-grid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: 18px;
    margin-bottom: 18px;
}

.context-understanding-grid .panel-head span {
    color: var(--aqua);
    font-size: 12px;
    font-weight: 950;
}

.insight-mini-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.insight-mini-list p {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.comparison-summary {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.45;
}

.context-factor-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.context-factor-list span {
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(20, 184, 196, .1);
    color: #0d6f78;
    font-size: 12px;
    font-weight: 900;
}

.similar-day-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.similar-day-list article {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.similar-day-list strong {
    font-size: 15px;
}

.similar-day-list > article > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.similar-day-list dl {
    display: grid;
    gap: 5px;
    margin: 0;
}

.similar-day-list dl div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.similar-day-list dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.similar-day-list dd {
    margin: 0;
    font-size: 12px;
    font-weight: 950;
}

.data-status-panel span {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--coral);
    font-size: 12px;
    font-weight: 900;
}

.data-status-panel h2 {
    margin-bottom: 6px;
    font-size: 21px;
}

.data-status-panel p {
    margin-bottom: 0;
    color: var(--muted);
    font-weight: 700;
    line-height: 1.45;
}

.missing-day-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.missing-day-pill {
    display: grid;
    gap: 4px;
    min-width: 178px;
    max-width: 100%;
    padding: 12px 13px;
    border: 1px solid color-mix(in srgb, var(--coral) 38%, rgba(217, 231, 236, .88));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--coral) 8%, var(--panel));
    color: var(--text);
    text-decoration: none;
}

.missing-day-pill.today {
    border-color: color-mix(in srgb, var(--amber) 56%, rgba(217, 231, 236, .88));
    background: color-mix(in srgb, var(--amber) 12%, var(--panel));
}

.missing-day-pill strong {
    font-size: 15px;
}

.missing-day-pill span {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.mission-section,
.weather-intelligence {
    margin-bottom: 18px;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 14px;
    color: var(--text);
}

.section-title-with-help {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
    min-width: 0;
}

.section-heading span {
    color: var(--aqua);
    font-size: 12px;
    font-weight: 900;
}

.section-heading h2 {
    margin: 2px 0 0;
    font-size: 25px;
}

.section-heading p {
    max-width: 500px;
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: 2px;
}

.info-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--aqua) 36%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--aqua) 12%, white);
    color: var(--aqua-dark);
    font-size: 13px;
    font-weight: 950;
    cursor: help;
}

.info-tooltip-trigger:focus-visible {
    outline: 3px solid rgba(20, 184, 196, .28);
    outline-offset: 2px;
}

.info-tooltip-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    z-index: 30;
    width: min(520px, calc(100vw - 44px));
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--aqua) 24%, var(--line));
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
    color: var(--text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    pointer-events: none;
}

.section-title-with-help:hover .info-tooltip-panel,
.section-title-with-help:focus-within .info-tooltip-panel,
.info-tooltip:hover .info-tooltip-panel,
.info-tooltip:focus-within .info-tooltip-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.info-tooltip-panel strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 14px;
}

.info-tooltip-panel p {
    max-width: none;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.info-tooltip-panel dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.info-tooltip-panel dl div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
}

.info-tooltip-panel dt {
    color: var(--aqua-dark);
    font-size: 12px;
    font-weight: 950;
}

.info-tooltip-panel dd {
    margin: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.info-tooltip-panel ul {
    display: grid;
    gap: 5px;
    margin: 12px 0 0;
    padding: 10px 0 0 17px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 720px) {
    .section-title-with-help {
        align-items: flex-start;
    }

    .info-tooltip-panel {
        right: 0;
        left: auto;
        top: calc(100% + 8px);
        bottom: auto;
    }

    .info-tooltip-panel dl div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* Event Controlling */
.event-control-header {
    align-items: end;
    margin-bottom: 22px;
}

.event-control-header h1,
.event-form-header h1 {
    color: var(--inverse);
}

.event-control-header p,
.event-form-header p {
    color: color-mix(in srgb, var(--inverse) 68%, transparent);
}

:root[data-theme="light"] .event-control-header h1,
:root[data-theme="light"] .event-form-header h1 {
    color: var(--text);
}

:root[data-theme="light"] .event-control-header p,
:root[data-theme="light"] .event-form-header p {
    color: var(--muted);
}

.event-year-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
    gap: 28px;
    overflow: hidden;
    padding: clamp(28px, 4vw, 52px);
    border: 1px solid rgba(109, 229, 236, .2);
    border-radius: var(--radius);
    color: #eefcff;
    background:
        linear-gradient(112deg, rgba(20, 184, 196, .2), transparent 45%),
        linear-gradient(135deg, #071820, #102c38 62%, #16232e);
    box-shadow: var(--shadow);
}

.event-year-hero::after {
    position: absolute;
    top: -20%;
    right: 27%;
    width: 1px;
    height: 150%;
    background: rgba(119, 239, 243, .22);
    transform: rotate(18deg);
    content: "";
}

.event-year-copy,
.event-year-result {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
}

.event-year-copy > span,
.event-year-result > span,
.event-kpi-rail span {
    color: rgba(230, 249, 252, .62);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.event-year-copy > strong {
    font-size: clamp(42px, 6vw, 84px);
    line-height: .98;
    letter-spacing: 0;
}

.event-year-copy p,
.event-year-result small {
    margin: 0;
    color: rgba(230, 249, 252, .68);
    font-weight: 700;
    line-height: 1.5;
}

.event-target-track {
    width: min(620px, 100%);
    height: 8px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

.event-target-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #46dce5, #8ce5b0);
    box-shadow: 0 0 24px rgba(70, 220, 229, .42);
}

.event-year-result {
    padding: 24px;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.event-year-result strong {
    overflow-wrap: anywhere;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1;
}

.positive { color: #219653; }
.negative { color: #cf4f43; }
.event-year-result .positive { color: #78e6a5; }
.event-year-result .negative { color: #ff9c91; }

.event-kpi-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 14px 0 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: 0 12px 32px rgba(10, 42, 57, .08);
}

.event-kpi-rail article {
    display: grid;
    min-width: 0;
    gap: 7px;
    padding: 20px;
}

.event-kpi-rail article + article {
    border-left: 1px solid var(--line);
}

.event-kpi-rail span {
    color: var(--muted);
}

.event-kpi-rail strong {
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.05;
}

.event-kpi-rail small {
    color: var(--muted);
    font-weight: 720;
}

.event-alert-band {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
    padding: 16px 18px;
    border: 1px solid rgba(244, 166, 42, .28);
    border-left: 4px solid var(--amber);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--panel) 92%, var(--amber));
}

.event-alert-band > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.event-alert-band span {
    padding: 7px 9px;
    border-radius: 6px;
    color: #855805;
    background: rgba(244, 166, 42, .12);
    font-size: 12px;
    font-weight: 850;
}

.event-insight-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, .55fr);
    gap: 18px;
    margin-bottom: 18px;
}

.event-location-bars {
    display: grid;
    gap: 14px;
}

.event-location-bars > div {
    display: grid;
    grid-template-columns: minmax(130px, .65fr) minmax(160px, 1.5fr) auto;
    gap: 14px;
    align-items: center;
}

.event-location-bars span {
    display: grid;
}

.event-location-bars small,
.event-location-bars em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.event-location-bars i {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--panel-2);
}

.event-location-bars b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--aqua), #6cd8aa);
}

.event-steering-note {
    align-content: center;
    color: #e8f9fc;
    background: #102a36;
}

.event-steering-note > span {
    color: #65dce4;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.event-steering-note h2 {
    margin: 9px 0;
    color: #fff;
    font-size: clamp(22px, 2.4vw, 34px);
}

.event-steering-note p {
    margin: 0;
    color: rgba(232, 249, 252, .68);
    line-height: 1.55;
}

.event-list-panel {
    padding: 0;
    overflow: hidden;
}

.event-list-head {
    display: grid;
    gap: 18px;
    padding: 24px;
    border-bottom: 1px solid var(--line);
}

.event-list-head h2,
.event-list-head p {
    margin: 0;
}

.event-list-head p {
    color: var(--muted);
}

.event-filter {
    display: grid;
    grid-template-columns: 100px repeat(3, minmax(145px, .8fr)) minmax(180px, 1.2fr) auto;
    gap: 10px;
    align-items: end;
}

.event-filter label,
.event-control-form label,
.event-settings-form label {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.event-control-table {
    min-width: 1180px;
}

.event-control-table td {
    vertical-align: middle;
}

.event-control-table td > small,
.event-control-table td strong + small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.event-status,
.calculation-state {
    display: inline-flex;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.event-status.planned { color: #166b75; background: rgba(20, 184, 196, .12); }
.event-status.completed_open { color: #96630c; background: rgba(244, 166, 42, .14); }
.event-status.billed,
.calculation-state.complete { color: #187644; background: rgba(40, 180, 99, .12); }
.calculation-state.open,
.event-value-missing { color: #b04339; background: rgba(238, 107, 94, .1); }

.event-control-form,
.event-settings-form {
    display: grid;
    gap: 18px;
}

.event-form-summary {
    position: sticky;
    top: 72px;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid rgba(111, 229, 236, .22);
    border-radius: var(--radius);
    color: #eefcff;
    background: rgba(8, 29, 39, .96);
    box-shadow: 0 16px 36px rgba(2, 17, 24, .2);
    backdrop-filter: blur(14px);
}

.event-form-summary > div {
    display: grid;
    min-width: 0;
    gap: 5px;
    padding: 17px 19px;
}

.event-form-summary > div + div {
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.event-form-summary span,
.event-form-summary small {
    color: rgba(232, 249, 252, .58);
    font-size: 10px;
    font-weight: 820;
}

.event-form-summary strong {
    overflow-wrap: anywhere;
    font-size: clamp(19px, 2vw, 28px);
}

.event-form-section {
    padding: clamp(20px, 3vw, 34px);
}

.event-section-title {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    margin-bottom: 24px;
}

.event-section-title > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(20, 184, 196, .28);
    border-radius: 50%;
    color: var(--aqua-dark);
    font-size: 11px;
    font-weight: 950;
    background: rgba(20, 184, 196, .08);
}

.event-section-title h2,
.event-section-title p {
    margin: 0;
}

.event-section-title p {
    margin-top: 3px;
    color: var(--muted);
}

.event-three-state-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.event-three-state-grid > div {
    display: grid;
    gap: 13px;
    padding: 18px;
    border: 1px solid var(--line);
    border-top: 3px solid #9cacb5;
    border-radius: var(--radius);
    background: var(--panel-2);
    transition: border-color .18s ease, background .18s ease;
}

.event-three-state-grid > div:nth-child(2) { border-top-color: var(--aqua); }
.event-three-state-grid > div:nth-child(3) { border-top-color: var(--green); }
.event-three-state-grid > div.is-current {
    border-color: rgba(20, 184, 196, .42);
    background: color-mix(in srgb, var(--panel) 90%, var(--aqua));
}

.event-three-state-grid > div > span {
    color: var(--text);
    font-size: 12px;
    font-weight: 950;
}

.event-staff-grid {
    margin-top: 16px;
}

.event-location-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.event-location-option {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-2);
}

.event-location-option > span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    color: var(--text);
}

.event-location-option input[type="number"] {
    width: 76px;
}

.event-rent-toggle {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    margin-top: 14px;
    padding: 16px;
    border-left: 3px solid var(--amber);
    background: rgba(244, 166, 42, .08);
}

.event-rent-toggle span {
    display: grid;
    gap: 4px;
}

.event-rent-toggle strong {
    color: var(--text);
}

.event-line-items {
    display: grid;
    gap: 12px;
}

.event-line-item {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-2);
}

.event-line-main,
.event-line-numbers {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.event-line-main {
    grid-template-columns: minmax(180px, 1.15fr) minmax(150px, .8fr) minmax(160px, 1fr) minmax(140px, .8fr) minmax(150px, .8fr) 36px;
    align-items: end;
    border-bottom: 1px solid var(--line);
}

.event-line-numbers {
    grid-template-columns: repeat(5, minmax(105px, 1fr));
}

.event-line-remove {
    align-self: end;
    color: var(--coral);
}

.event-completeness-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 18px;
}

.event-day-allocation {
    display: grid;
    gap: 10px;
}

.event-day-allocation > div {
    display: grid;
    grid-template-columns: minmax(170px, 1.2fr) repeat(4, minmax(100px, .7fr));
    gap: 10px;
    align-items: end;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.event-form-final {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
}

.event-aftercare-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 18px;
    margin-top: 18px;
}

.event-audit-panel summary,
.event-settings-section > summary {
    cursor: pointer;
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
}

.event-audit-panel > div {
    display: grid;
    gap: 0;
    margin-top: 14px;
}

.event-audit-panel p {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.event-audit-panel p small {
    grid-column: 2;
}

.event-delete-panel {
    display: grid;
    gap: 14px;
    border-left: 3px solid var(--coral);
}

.event-delete-panel p {
    margin: 5px 0 0;
    color: var(--muted);
}

.event-settings-section {
    padding: 24px;
}

.event-settings-section[open] > summary {
    margin-bottom: 20px;
}

.event-target-settings,
.event-combination-settings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.event-target-settings > div,
.event-combination-settings > div {
    display: grid;
    gap: 10px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-2);
}

.event-target-settings .new,
.event-catalog-settings .new {
    border-style: dashed;
}

.event-settings-table,
.event-catalog-settings {
    display: grid;
    gap: 10px;
}

.event-settings-table > div,
.event-catalog-settings > div {
    display: grid;
    grid-template-columns: 120px repeat(5, minmax(110px, 1fr));
    gap: 10px;
    align-items: end;
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

.event-settings-table.rent > div {
    grid-template-columns: repeat(7, minmax(110px, 1fr));
}

.event-settings-table.compact > div {
    grid-template-columns: minmax(180px, 1fr) 130px 100px;
}

.event-catalog-settings > div {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    border: 1px solid var(--line);
    border-left: 3px solid var(--green);
    border-radius: var(--radius);
    background: var(--panel-2);
}

.event-catalog-settings > div.review {
    border-left-color: var(--amber);
}

.catalog-review-note,
.setup-inline-note {
    margin: 0 0 14px;
    padding: 13px 15px;
    border-radius: var(--radius);
    color: var(--muted);
    background: rgba(244, 166, 42, .08);
}

.catalog-review-note p {
    margin: 4px 0 0;
}

.settings-save {
    justify-self: start;
}

@media (max-width: 1180px) {
    .event-kpi-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .event-kpi-rail article + article {
        border-left: 0;
    }

    .event-kpi-rail article:not(:nth-child(3n + 1)) {
        border-left: 1px solid var(--line);
    }

    .event-kpi-rail article:nth-child(n + 4) {
        border-top: 1px solid var(--line);
    }

    .event-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .event-line-main,
    .event-line-numbers,
    .event-catalog-settings > div {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .event-settings-table > div,
    .event-settings-table.rent > div {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .event-year-hero,
    .event-insight-grid,
    .event-aftercare-grid {
        grid-template-columns: 1fr;
    }

    .event-year-result {
        padding: 20px 0 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
        border-left: 0;
    }

    .event-form-summary {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-form-summary > div + div {
        border-left: 0;
    }

    .event-form-summary > div:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, .1);
    }

    .event-form-summary > div:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .event-three-state-grid,
    .event-location-selector,
    .event-target-settings,
    .event-combination-settings {
        grid-template-columns: 1fr;
    }

    .event-day-allocation > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-day-allocation > div > strong {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .event-year-hero {
        padding: 24px 19px;
    }

    .event-kpi-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-kpi-rail article:not(:nth-child(3n + 1)),
    .event-kpi-rail article + article {
        border-left: 0;
    }

    .event-kpi-rail article:nth-child(even) {
        border-left: 1px solid var(--line);
    }

    .event-kpi-rail article:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .event-alert-band,
    .event-location-bars > div {
        display: grid;
    }

    .event-location-bars > div {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .event-location-bars i {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .event-filter,
    .event-line-main,
    .event-line-numbers,
    .event-settings-table > div,
    .event-settings-table.rent > div,
    .event-settings-table.compact > div,
    .event-catalog-settings > div {
        grid-template-columns: 1fr;
    }

    .event-section-title {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .event-section-title > button {
        grid-column: 1 / -1;
    }

    .event-form-final {
        grid-template-columns: 1fr;
    }

    .event-form-final .primary-button {
        width: 100%;
    }
}

.eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--aqua);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
}

.top-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: center;
}

.cockpit-metrics {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.cockpit-metrics .metric-card {
    min-height: 154px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.cockpit-metrics .metric-card:hover,
.area-card:hover,
.panel:hover {
    transform: translateY(-2px);
}

.operations-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
    gap: 18px;
    margin-bottom: 18px;
    align-items: start;
}

.area-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-content: start;
    align-items: start;
}

.area-card {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--area) 28%, rgba(217, 231, 236, .88));
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--area) 14%, transparent), transparent 42%),
        var(--panel);
    box-shadow: 0 26px 80px rgba(8, 32, 44, .12);
    transition: transform .18s ease, border-color .18s ease;
}

.area-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--area);
}

.area-card.red {
    border-color: color-mix(in srgb, var(--coral) 55%, var(--line));
}

.area-card-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 18px;
}

.area-card-head > div {
    min-width: 0;
}

.area-card-head span {
    display: block;
    max-width: 310px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.area-card-head strong {
    align-self: flex-start;
    padding: 7px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--area) 13%, white);
    color: color-mix(in srgb, var(--area) 78%, #17232b);
    font-size: 13px;
}

.status-badge {
    justify-self: start;
    white-space: nowrap;
}

.status-badge.green {
    background: rgba(34, 197, 94, .12);
    color: #15803d;
}

.status-badge.yellow {
    background: rgba(245, 165, 36, .14);
    color: #b77900;
}

.status-badge.red {
    background: rgba(239, 111, 97, .14);
    color: #c2410c;
}

.area-card h2 {
    margin-top: 7px;
    font-size: 28px;
}

.area-card-value {
    margin-bottom: 10px;
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 900;
    line-height: 1;
}

.area-mini-meter {
    overflow: hidden;
    height: 8px;
    margin: -2px 0 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--area) 14%, #e8f0f3);
}

.area-mini-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--area);
    transition: width .5s ease;
}

.area-trend {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    padding: 7px 9px;
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.area-trend span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
}

.area-trend.up {
    color: #15803d;
    background: rgba(34, 197, 94, .12);
}

.area-trend.down {
    color: #c2410c;
    background: rgba(239, 111, 97, .12);
}

.area-trend.flat {
    color: #0f6b76;
    background: rgba(20, 184, 196, .12);
}

.target-ring-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.target-ring {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background:
        conic-gradient(var(--area) calc(var(--progress) * 1%), #e8f0f4 0),
        #e8f0f4;
    box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .92);
}

.target-ring span {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--panel);
    font-size: 13px;
    font-weight: 900;
}

.target-ring-row small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.target-ring-row strong {
    display: block;
    margin-top: 3px;
    font-size: 19px;
}

.target-ring-row em {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.35;
}

.area-card dl,
.weather-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.area-card dt,
.weather-facts dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.area-card dd,
.weather-facts dd {
    margin: 3px 0 0;
    font-weight: 900;
}

.area-recommendation {
    margin: 14px 0 0;
    padding: 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--area) 10%, transparent);
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.42;
}

.decision-stack {
    display: grid;
    gap: 18px;
    align-content: start;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.quick-actions a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
    color: #1f3542;
    font-size: 13px;
    font-weight: 900;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.quick-actions a:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 184, 196, .35);
    background: rgba(20, 184, 196, .1);
}

.action-checklist {
    display: grid;
    gap: 9px;
}

.action-checklist div {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.action-checklist span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .16);
    color: var(--green);
    font-size: 12px;
    font-weight: 950;
}

.action-checklist div.yellow span {
    background: rgba(245, 166, 42, .18);
    color: var(--amber);
}

.action-checklist div.red span {
    background: rgba(239, 111, 97, .18);
    color: var(--coral);
}

.action-checklist p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.42;
}

.compact-status-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.compact-status-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.compact-status-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.compact-status-list dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.compact-status-list dd {
    margin: 0;
    text-align: right;
    font-weight: 950;
}

.staffing-list,
.event-mini-list {
    display: grid;
    gap: 10px;
}

.staffing-list article,
.event-mini-list article {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.staffing-list article > strong,
.event-mini-list article > strong {
    display: block;
    margin-bottom: 8px;
}

.staffing-list dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 8px;
}

.staffing-list dl div {
    padding: 8px;
    border-radius: 8px;
    background: #ffffff;
}

.staffing-list dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.staffing-list dd {
    margin: 2px 0 0;
    font-weight: 950;
}

.staffing-list p,
.event-mini-list p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.42;
}

.event-mini-list span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.event-entry-panel {
    align-self: start;
}

.weather-now {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--panel-2);
}

.weather-now-main,
.weather-metric-value,
.weather-inline,
.weather-chart-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.weather-now-main {
    gap: 12px;
}

.weather-symbol {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--aqua-dark);
}

.weather-symbol--sm {
    width: 20px;
    height: 20px;
}

.weather-symbol--md {
    width: 34px;
    height: 34px;
}

.weather-symbol--lg {
    width: 48px;
    height: 48px;
}

.weather-symbol--sun,
.weather-symbol--hot {
    color: var(--amber);
}

.weather-symbol--rain,
.weather-symbol--storm {
    color: var(--blue);
}

.weather-symbol--wind,
.weather-symbol--cloud {
    color: var(--aqua-dark);
}

.weather-symbol--cold {
    color: #60a5fa;
}

.weather-metric-value {
    font-size: clamp(26px, 2.7vw, 36px);
}

.metric-card .weather-metric-value {
    font-size: clamp(26px, 2.7vw, 36px);
    font-weight: 900;
}

.metric-card .weather-metric-value span {
    font-size: inherit;
    font-weight: 900;
    line-height: 1;
}

.weather-inline {
    white-space: nowrap;
}

.weather-now strong {
    font-size: 32px;
}

.weather-now span {
    color: var(--muted);
    font-weight: 700;
}

.analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .8fr);
    gap: 18px;
}

.weather-insight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.weather-insight {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.weather-insight.green {
    border-color: rgba(34, 197, 94, .28);
}

.weather-insight.yellow {
    border-color: rgba(245, 166, 42, .32);
}

.weather-insight strong {
    display: block;
    margin-bottom: 6px;
}

.weather-insight p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.chart-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 12px;
}

.chart-filters button {
    min-height: 32px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--muted);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.chart-filters button.active,
.chart-filters button:hover {
    border-color: rgba(18, 183, 200, .35);
    background: rgba(18, 183, 200, .12);
    color: var(--aqua-dark);
}

.mini-chart-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.mini-chart-grid > div {
    min-height: 168px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-2);
}

.mini-chart-grid h3 {
    margin: 0 0 8px;
    font-size: 13px;
}

.spark-chart,
.spark-chart svg {
    width: 100%;
    min-height: 112px;
}

.capture-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.capture-head p {
    margin: 0;
    color: var(--muted);
}

.capture-head span,
.theme-toggle {
    align-self: flex-start;
    border: 1px solid rgba(20, 184, 196, .28);
    border-radius: 999px;
    background: rgba(20, 184, 196, .12);
    color: var(--aqua);
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 900;
}

.theme-toggle {
    cursor: pointer;
}

.quick-capture .panel {
    max-width: 1040px;
}

.simplified-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.entry-form [hidden] {
    display: none !important;
}

.quick-area-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.area-choice {
    cursor: pointer;
}

.area-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.area-choice span {
    display: grid;
    min-height: 64px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--area) 30%, var(--line));
    border-radius: 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--area) 10%, white), var(--panel));
    color: var(--text);
    font-weight: 950;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.area-choice input:checked + span {
    border-color: var(--area);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--area) 24%, transparent);
    transform: translateY(-1px);
}

.live-calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.sport-revenue-split {
    display: grid;
    gap: 6px;
    margin-top: -2px;
    padding: 13px 14px;
    border: 1px solid rgba(20, 184, 196, .24);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(20, 184, 196, .1), rgba(255, 255, 255, .74));
}

.sport-revenue-split span {
    color: var(--aqua-dark);
    font-size: 12px;
    font-weight: 950;
}

.sport-revenue-split strong {
    color: var(--text);
    font-size: 15px;
    line-height: 1.35;
}

.live-calc-grid article {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.live-calc-grid span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.live-calc-grid strong {
    font-size: 20px;
}

.revenue-cell {
    display: grid;
    gap: 3px;
}

.revenue-cell small,
.area-revenue-split {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

.area-revenue-split {
    margin: -3px 0 8px;
    color: color-mix(in srgb, var(--area) 62%, var(--muted));
}

.opening-override-panel {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) repeat(5, minmax(130px, 1fr));
    gap: 10px;
    align-items: end;
    margin: 12px 0 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.opening-override-panel > div {
    display: grid;
    gap: 3px;
}

.opening-override-panel span,
.opening-override-panel small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.opening-override-panel strong {
    font-size: 18px;
}

.settings-shell .form-stack {
    gap: 18px;
}

.setup-expert-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-style: dashed;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .78)),
        radial-gradient(circle at 0% 0%, rgba(100, 116, 139, .1), transparent 36%);
}

.setup-expert-panel span {
    display: inline-flex;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.setup-expert-panel h2 {
    margin: 0;
}

.setup-expert-panel p {
    max-width: 760px;
    margin: 6px 0 0;
    color: var(--muted);
    font-weight: 760;
    line-height: 1.45;
}

.area-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.setup-cogs-note {
    margin-bottom: 16px;
    border-left: 4px solid var(--aqua);
    background: linear-gradient(110deg, rgba(20, 184, 196, .1), rgba(255, 255, 255, .94) 52%);
}

.setup-cogs-note strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: 15px;
}

.setup-cogs-note p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.cogs-setting-field {
    padding: 10px;
    border: 1px solid rgba(20, 184, 196, .25);
    border-radius: 8px;
    background: rgba(20, 184, 196, .07);
}

.area-settings-card {
    border-color: color-mix(in srgb, var(--area) 24%, var(--line));
}

.area-settings-card::before {
    content: "";
    display: block;
    height: 4px;
    margin: -18px -18px 16px;
    border-radius: 8px 8px 0 0;
    background: var(--area);
}

.area-settings-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.settings-save {
    justify-self: start;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
    color: var(--text);
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 7px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
    letter-spacing: 0;
}

.page-header h1 {
    margin-bottom: 5px;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.14;
    letter-spacing: 0;
}

h2 {
    margin-bottom: 4px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0;
}

.page-header p,
.panel-head p {
    margin-bottom: 0;
    color: var(--muted);
}

.page-header p {
    color: var(--muted);
    max-width: 680px;
    font-size: 14px;
    line-height: 1.45;
}

.reports-header {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.25fr);
    align-items: start;
}

.reports-header .report-filter {
    justify-self: end;
}

.team-page-header {
    align-items: center;
}

.area-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 18px;
}

.area-tabs a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid color-mix(in srgb, var(--area) 34%, var(--line));
    border-radius: 8px;
    color: var(--text);
    background: color-mix(in srgb, var(--area) 8%, var(--panel));
    font-weight: 800;
}

.area-tabs a.active,
.area-tabs a:hover {
    color: #061820;
    background: color-mix(in srgb, var(--area) 28%, white);
    border-color: color-mix(in srgb, var(--area) 68%, var(--line));
}

.team-share-panel {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid rgba(20, 184, 196, .26);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(20, 184, 196, .12), rgba(255, 255, 255, .82)),
        var(--panel);
    box-shadow: 0 18px 45px rgba(15, 44, 60, .1);
}

.team-share-panel.ready {
    border-color: rgba(40, 180, 99, .3);
    background:
        linear-gradient(135deg, rgba(40, 180, 99, .12), rgba(255, 255, 255, .84)),
        var(--panel);
}

.team-share-panel.missing {
    border-color: rgba(244, 166, 42, .42);
    background:
        linear-gradient(135deg, rgba(244, 166, 42, .16), rgba(255, 255, 255, .86)),
        var(--panel);
}

.team-share-panel span {
    display: block;
    margin-bottom: 5px;
    color: var(--aqua-dark);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.team-share-panel strong {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
}

.team-share-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.team-share-general-copy {
    margin-top: 8px !important;
    font-weight: 800;
}

.team-share-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.team-share-actions .ghost-button {
    justify-self: end;
}

.team-share-password {
    min-width: 0;
}

.team-share-password span {
    margin-bottom: 6px;
    color: var(--text) !important;
}

.team-share-password input {
    width: 100%;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 15px;
    font-weight: 900;
}

.team-password-copy {
    align-self: end;
}

.team-share-actions input {
    min-width: 0;
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    color: var(--muted);
    font-size: 13px;
}

.team-share-panel.ready span {
    color: #16834a;
}

.team-share-panel.missing span {
    color: #9a6509;
}

.team-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 22px;
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--area) 32%, var(--line));
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--area) 18%, var(--panel)), var(--panel) 64%),
        var(--panel);
    box-shadow: var(--shadow);
}

.team-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--area);
}

.team-kicker,
.team-hero aside span,
.team-task-panel .panel-head span,
.decision-stack .panel-head span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.team-hero h2 {
    max-width: 760px;
    margin-bottom: 8px;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.06;
}

.team-hero p {
    max-width: 780px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.team-hero aside {
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(217, 231, 236, .8);
}

.team-hero aside strong {
    font-size: 28px;
    line-height: 1.05;
}

.team-hero aside small {
    color: var(--muted);
    line-height: 1.45;
}

.team-hero.green aside strong { color: var(--green); }
.team-hero.yellow aside strong { color: var(--amber); }
.team-hero.red aside strong { color: var(--coral); }

.team-weather-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.team-weather-line span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .7);
    color: var(--text);
    font-weight: 800;
}

.team-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.team-forecast-panel {
    margin-bottom: 18px;
}

.team-forecast-panel .panel-head span {
    display: block;
    margin-bottom: 6px;
    color: var(--aqua-dark);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.team-forecast-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.team-forecast-card {
    display: grid;
    gap: 12px;
    min-height: 220px;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--area) 24%, var(--line));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--area) 9%, white), rgba(255, 255, 255, .9)),
        var(--panel);
}

.team-forecast-card.closed {
    border-color: rgba(238, 107, 94, .28);
    background:
        linear-gradient(135deg, rgba(238, 107, 94, .1), rgba(255, 255, 255, .9)),
        var(--panel);
}

.team-forecast-date {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.team-forecast-date span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.team-forecast-date strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 18px;
}

.team-forecast-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.team-forecast-card dl div {
    padding: 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .68);
}

.team-forecast-card dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.team-forecast-card dd {
    margin: 3px 0 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
}

.team-forecast-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.team-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 18px;
    align-items: start;
}

.team-task-panel {
    min-height: 100%;
}

.team-task-list {
    display: grid;
    gap: 10px;
}

.team-task-list div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.team-task-list span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #06202a;
    background: var(--blue);
    font-weight: 900;
}

.team-task-list .green span { background: var(--green); }
.team-task-list .yellow span { background: var(--amber); }
.team-task-list .red span { background: var(--coral); color: white; }

.team-task-list p {
    margin: 0;
    color: var(--text);
    font-weight: 750;
    line-height: 1.45;
}

.full-width-button {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
}

.public-team-body {
    min-height: 100vh;
    padding: 22px;
}

.public-team-shell {
    width: min(100%, 1480px);
    margin: 0 auto;
}

.public-team-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(217, 231, 236, .88);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.public-team-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-weight: 950;
}

.public-team-brand img {
    display: block;
    width: 146px;
    height: auto;
}

.public-team-brand span {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.team-password-panel {
    width: min(100%, 480px);
    margin: min(12vh, 90px) auto 0;
    padding: 30px;
    border: 1px solid rgba(217, 231, 236, .88);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.team-password-panel h1 {
    margin-top: 24px;
    font-size: clamp(28px, 4vw, 42px);
}

.team-password-panel p {
    color: var(--muted);
    line-height: 1.55;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.report-metric-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.report-metric-grid .metric-card {
    min-height: 132px;
}

.report-metric-grid .metric-card strong {
    font-size: clamp(27px, 2.25vw, 34px);
    overflow-wrap: anywhere;
}

.report-metric-grid .metric-card span {
    max-width: 100%;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.report-event-strip {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) minmax(0, 2fr);
    gap: 22px;
    align-items: center;
    margin: 0 0 18px;
    padding: 18px 20px;
    border: 1px solid rgba(124, 92, 255, .24);
    border-radius: var(--radius);
    background:
        linear-gradient(112deg, rgba(124, 92, 255, .12), rgba(255, 255, 255, .9) 42%, rgba(18, 183, 200, .07)),
        var(--panel);
    box-shadow: var(--shadow-soft);
}

.report-event-strip__intro {
    display: grid;
    gap: 3px;
}

.report-event-strip__intro span {
    color: #6d52df;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.report-event-strip__intro strong {
    color: var(--text);
    font-size: 18px;
}

.report-event-strip__intro small,
.report-event-strip dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 760;
}

.report-event-strip dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.report-event-strip dl div {
    min-width: 0;
    padding-left: 14px;
    border-left: 1px solid rgba(124, 92, 255, .2);
}

.report-event-strip dd {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 18px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.report-event-strip dd.positive { color: #07865f; }
.report-event-strip dd.negative { color: var(--coral); }

.event-report-row td {
    background: rgba(124, 92, 255, .035);
}

.event-type-label,
.event-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6d52df;
    font-size: 12px;
    font-weight: 900;
}

.event-type-label svg {
    width: 16px;
    height: 16px;
}

.event-source-badge {
    padding: 5px 8px;
    border: 1px solid rgba(124, 92, 255, .22);
    border-radius: 7px;
    background: rgba(124, 92, 255, .08);
}

@media (max-width: 900px) {
    .report-event-strip {
        grid-template-columns: 1fr;
    }

    .report-event-strip dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .report-event-strip dl {
        grid-template-columns: 1fr;
    }
}

.metric-card,
.panel {
    border: 1px solid rgba(217, 231, 236, .88);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 252, 253, .94)),
        var(--panel);
    box-shadow: var(--shadow);
}

.metric-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 8px;
    min-height: 144px;
    padding: 17px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(246, 250, 252, .8)),
        linear-gradient(120deg, rgba(20, 184, 196, .1), transparent 46%);
}

.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--aqua);
}

.metric-card.aqua::before { background: var(--aqua); }
.metric-card.amber::before { background: var(--amber); }
.metric-card.green::before { background: var(--green); }
.metric-card.red::before { background: var(--coral); }
.metric-card.blue::before { background: var(--blue); }

.metric-card span,
label,
th,
.quiet-link,
.secondary-button,
.ghost-button {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.metric-card strong {
    font-size: clamp(27px, 3vw, 39px);
    line-height: 1;
}

.metric-card small {
    color: var(--muted);
    font-size: 13px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, .8fr);
    gap: 18px;
}

.wide {
    grid-column: 1 / -1;
}

.panel {
    padding: 18px;
    min-width: 0;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.chart-panel {
    min-height: 390px;
}

.line-chart,
.bar-chart,
.weather-chart {
    min-height: 280px;
}

.report-chart-panel {
    overflow: hidden;
    padding: clamp(18px, 2.2vw, 26px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(245, 251, 253, .9)),
        radial-gradient(circle at 12% 0%, rgba(24, 200, 215, .14), transparent 34%),
        var(--panel);
}

.report-line-chart {
    min-height: 520px;
}

.line-chart-shell {
    display: grid;
    gap: 16px;
}

.line-chart__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 10px;
}

.line-chart__summary article {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid rgba(185, 208, 218, .62);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(247, 251, 253, .72)),
        linear-gradient(120deg, rgba(24, 200, 215, .08), transparent 58%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.line-chart__summary article.is-warning {
    border-color: rgba(246, 169, 47, .52);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 249, 235, .72));
}

.line-chart__summary article.is-good {
    border-color: rgba(32, 200, 121, .38);
}

.line-chart__summary span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.line-chart__summary strong {
    display: block;
    color: var(--text);
    font-size: clamp(19px, 2vw, 28px);
    line-height: 1.02;
}

.line-chart__summary small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.line-chart__narrative {
    margin: 0;
    padding: 13px 15px;
    border: 1px solid rgba(24, 200, 215, .24);
    border-radius: 12px;
    background: rgba(24, 200, 215, .08);
    color: var(--text);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.45;
}

.line-chart__stage {
    position: relative;
    min-width: 0;
    min-height: 390px;
    padding: 8px;
    border: 1px solid rgba(185, 208, 218, .66);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(248, 252, 253, .56));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .92),
        0 18px 40px rgba(13, 27, 36, .06);
}

.line-chart__svg {
    overflow: visible;
}

.line-chart-point {
    fill: #ffffff;
    stroke: #18c8d7;
    stroke-width: 3;
    transition: r .18s ease, stroke-width .18s ease;
}

.line-chart-point.is-best {
    fill: #20c879;
    stroke: #ffffff;
    stroke-width: 4;
}

.line-chart-point.is-weak {
    fill: #ff745f;
    stroke: #ffffff;
    stroke-width: 4;
}

.line-chart-hit {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0;
    cursor: crosshair;
    outline: none;
}

.line-chart-tooltip {
    position: absolute;
    z-index: 5;
    min-width: 214px;
    max-width: min(280px, calc(100% - 18px));
    padding: 12px 13px;
    border: 1px solid rgba(185, 208, 218, .72);
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 42px rgba(13, 27, 36, .16);
    color: var(--text);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    transition: opacity .16s ease, transform .16s ease;
}

.line-chart-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 20px));
}

.line-chart-tooltip span,
.line-chart-tooltip small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

.line-chart-tooltip strong {
    display: block;
    margin: 4px 0;
    font-size: 22px;
    line-height: 1;
}

.weather-bars {
    display: grid;
    gap: 12px;
}

.weather-row {
    display: grid;
    grid-template-columns: minmax(136px, 1.1fr) minmax(128px, 2fr) minmax(82px, max-content) minmax(54px, max-content);
    grid-template-areas: "label track value days";
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.weather-row > * {
    min-width: 0;
}

.weather-chart-label {
    grid-area: label;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weather-chart-label .weather-symbol {
    width: 18px;
    height: 18px;
    margin: 0;
}

.weather-track {
    grid-area: track;
    width: 100%;
    min-width: 0;
}

.weather-chart-value {
    grid-area: value;
    justify-self: end;
    white-space: nowrap;
}

.weather-chart-days {
    grid-area: days;
    justify-self: end;
    white-space: nowrap;
    color: var(--muted);
}

@media (max-width: 720px) {
    .weather-row {
        grid-template-columns: minmax(0, 1fr) minmax(72px, max-content) minmax(48px, max-content);
        grid-template-areas:
            "label value days"
            "track track track";
        gap: 8px 10px;
    }

    .line-chart__summary {
        grid-template-columns: 1fr;
    }

    .report-line-chart {
        min-height: 620px;
    }

    .line-chart__stage {
        min-height: 320px;
        padding: 3px;
        border-radius: 14px;
    }

    .line-chart-tooltip {
        display: none;
    }
}

.line-chart svg,
.bar-chart svg,
.weather-chart svg {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    stroke-width: 1.8;
}

.recommendation-list {
    display: grid;
    gap: 10px;
}

.recommendation {
    padding: 13px;
    border-left: 4px solid var(--amber);
    border-radius: var(--radius);
    background: #f7fbfc;
}

.recommendation strong {
    display: block;
    margin-bottom: 5px;
}

.recommendation p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.recommendation.red { border-color: var(--coral); }
.recommendation.green { border-color: var(--green); }
.recommendation.blue { border-color: var(--blue); }

.force-password-note {
    margin-bottom: 16px;
}

.inline-filter,
.filter-grid,
.form-grid,
.quick-entry {
    display: grid;
    gap: 12px;
}

.inline-filter {
    grid-template-columns: auto auto;
    align-items: end;
}

.report-filter {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    width: min(100%, 720px);
}

.report-area-picker {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.report-area-picker legend {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.report-area-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.report-area-option {
    position: relative;
    cursor: pointer;
}

.report-area-option input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.report-area-option span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    font-size: 12px;
    font-weight: 800;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.report-area-option:not(.report-area-option--all) span::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--area);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--area) 12%, transparent);
    content: "";
}

.report-area-option:hover span {
    color: var(--text);
    border-color: color-mix(in srgb, var(--area, var(--aqua)) 45%, var(--line));
    transform: translateY(-1px);
}

.report-area-option input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--area, var(--aqua)) 24%, transparent);
    outline-offset: 2px;
}

.report-area-option input:checked + span {
    color: var(--text);
    border-color: color-mix(in srgb, var(--area, var(--aqua)) 58%, var(--line));
    background: color-mix(in srgb, var(--area, var(--aqua)) 13%, var(--panel));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--area, var(--aqua)) 12%, transparent);
}

.report-area-picker small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
}

.reports-header .report-filter > .secondary-button {
    border-color: color-mix(in srgb, var(--aqua) 58%, var(--line));
    color: #06212a;
    background: color-mix(in srgb, var(--aqua) 22%, white);
}

.reports-header .report-filter > .secondary-button:hover {
    background: color-mix(in srgb, var(--aqua) 34%, white);
}

@media (min-width: 981px) {
    .reports-header h1 {
        color: #edfaff;
    }

    .reports-header > div > p,
    .reports-header .report-area-picker legend,
    .reports-header .report-area-picker small,
    .reports-header .report-filter > label {
        color: rgba(221, 239, 244, .72);
    }
}

@media (min-width: 981px) and (max-width: 1500px) {
    .route-reports .table-panel {
        overflow: hidden;
    }

    .route-reports .table-wrap {
        max-width: 100%;
        overflow-x: auto;
    }
}

.report-filter label[hidden] {
    display: none;
}

.filter-grid {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    align-items: end;
}

.form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comments-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comment-capture-panel {
    display: grid;
    gap: 13px;
    margin-top: 4px;
    padding: 15px;
    border: 1px solid rgba(20, 184, 196, .24);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(20, 184, 196, .1), rgba(255, 255, 255, .92) 46%),
        #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.comment-capture-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.comment-capture-head h2 {
    margin: 0 0 4px;
    font-size: 18px;
}

.comment-capture-head p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.comment-capture-head > span {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid rgba(20, 184, 196, .24);
    border-radius: 999px;
    background: rgba(20, 184, 196, .1);
    color: var(--aqua-dark);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.entry-form {
    display: grid;
    gap: 16px;
}

.month-summary-panel {
    margin-bottom: 18px;
}

.month-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.month-summary-card {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, #f7fcfd, #ffffff);
}

.month-summary-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.month-summary-card strong {
    color: var(--text);
    font-size: 20px;
    line-height: 1.05;
}

.month-summary-card small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.form-section h2 {
    margin-bottom: 14px;
}

label {
    display: grid;
    gap: 7px;
    color: #243945;
}

input,
select,
textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cbdde3;
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    padding: 10px 11px;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--aqua);
    box-shadow: 0 0 0 3px rgba(20, 184, 196, .18);
}

textarea {
    min-height: 118px;
    resize: vertical;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
}

.checkbox-row input {
    width: 18px;
    min-height: 18px;
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.primary-button {
    background: var(--aqua);
    color: #06212b;
    font-weight: 900;
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.theme-toggle,
.user-menu-trigger,
.user-menu-item,
.sidebar nav a,
.quiet-link {
    transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.danger-button:hover,
.theme-toggle:hover,
.user-menu-trigger:hover {
    transform: translateY(-1px);
}

.secondary-button {
    background: #e6f7fa;
    color: #07515a;
}

.ghost-button {
    background: rgba(255, 255, 255, .08);
    color: var(--inverse);
    border: 1px solid rgba(255, 255, 255, .15);
}

.panel .ghost-button {
    color: #243945;
    border-color: #cbdde3;
    background: #fff;
}

.danger-button {
    min-height: 34px;
    padding: 0 11px;
    background: color-mix(in srgb, var(--coral) 12%, #fff);
    color: #9f1d2d;
    font-size: 12px;
    font-weight: 900;
}

.danger-button:hover {
    background: color-mix(in srgb, var(--coral) 20%, #fff);
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

.muted-text {
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.quiet-link {
    color: var(--aqua-dark);
}

.table-panel {
    overflow: hidden;
}

.table-wrap {
    overflow-x: auto;
}

@media (min-width: 981px) {
    .table-panel,
    .table-wrap {
        overflow: visible;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
}

th,
td {
    padding: 13px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--muted);
    background: #f4fafb;
}

td {
    font-size: 14px;
}

tr.weekend-row td {
    background:
        linear-gradient(90deg, rgba(244, 166, 42, .12), rgba(255, 255, 255, .92) 56%),
        #ffffff;
}

tr.comment-row td {
    background:
        linear-gradient(90deg, rgba(20, 184, 196, .1), rgba(255, 255, 255, .96) 46%),
        #ffffff;
}

tr.weekend-row.comment-row td {
    background:
        linear-gradient(90deg, rgba(244, 166, 42, .14), rgba(20, 184, 196, .08) 44%, rgba(255, 255, 255, .94) 72%),
        #ffffff;
}

tr.weekend-row td:first-child {
    box-shadow: inset 4px 0 0 rgba(244, 166, 42, .72);
    font-weight: 850;
}

tr.comment-row td:first-child {
    box-shadow: inset 4px 0 0 rgba(20, 184, 196, .72);
    font-weight: 850;
}

tr.weekend-row.comment-row td:first-child {
    box-shadow:
        inset 4px 0 0 rgba(244, 166, 42, .76),
        inset 8px 0 0 rgba(20, 184, 196, .72);
}

.date-cell {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    position: relative;
}

.weekday-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid rgba(102, 121, 133, .22);
    border-radius: 999px;
    background: rgba(238, 247, 249, .86);
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
}

.weekday-badge.weekend {
    border-color: rgba(244, 166, 42, .38);
    background: rgba(244, 166, 42, .16);
    color: #8a5a08;
}

.comment-hover-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid rgba(20, 184, 196, .34);
    border-radius: 999px;
    background: rgba(20, 184, 196, .12);
    color: #0b7f8a;
    cursor: help;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

.comment-hover-badge svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.comment-hover-badge:focus-visible {
    outline: 3px solid rgba(20, 184, 196, .26);
    outline-offset: 2px;
}

.comment-hover-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    z-index: 60;
    display: grid;
    gap: 9px;
    width: min(380px, calc(100vw - 36px));
    padding: 13px;
    border: 1px solid rgba(20, 184, 196, .2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 42px rgba(9, 35, 48, .18);
    color: var(--text);
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease;
    white-space: normal;
}

.comment-hover-panel::before {
    content: "";
    position: absolute;
    left: 18px;
    top: -6px;
    width: 10px;
    height: 10px;
    border-left: 1px solid rgba(20, 184, 196, .2);
    border-top: 1px solid rgba(20, 184, 196, .2);
    background: rgba(255, 255, 255, .98);
    transform: rotate(45deg);
}

.comment-hover-badge:hover .comment-hover-panel,
.comment-hover-badge:focus .comment-hover-panel,
.comment-hover-badge:focus-within .comment-hover-panel {
    opacity: 1;
    transform: translateY(0);
}

.comment-hover-panel > strong {
    font-size: 13px;
    line-height: 1.2;
}

.comment-hover-item {
    display: grid;
    gap: 3px;
    padding-top: 8px;
    border-top: 1px solid rgba(217, 231, 236, .78);
}

.comment-hover-item small {
    color: var(--aqua-dark);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.comment-hover-item span {
    color: #263b47;
    font-size: 12px;
    font-weight: 700;
}

.dept-dot,
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
}

.status-dot.green { background: var(--green); }
.status-dot.yellow { background: var(--amber); }
.status-dot.red { background: var(--coral); }

.admin-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 18px;
}

.department-editor {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 14px;
}

.form-stack {
    display: grid;
    gap: 12px;
}

.compact-form {
    padding: 15px;
}

.narrow-panel {
    max-width: 520px;
}

.flash {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #dcfce7;
    color: #14532d;
    font-weight: 800;
}

.flash.error {
    background: #fee2e2;
    color: #7f1d1d;
}

.login-body {
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-shell {
    width: min(100%, 460px);
}

.login-panel {
    padding: 30px;
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.login-brand {
    display: grid;
    gap: 11px;
    justify-items: start;
}

.login-brand img {
    display: block;
    width: min(260px, 100%);
    height: auto;
}

.login-brand span {
    color: var(--aqua-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.login-panel h1 {
    margin-top: 26px;
    color: var(--text);
}

.login-panel p {
    color: var(--muted);
}

.login-hints {
    display: grid;
    gap: 5px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 1280px) {
    .content {
        padding-inline: 18px;
    }

    .sidebar {
        gap: 12px;
        padding-inline: 18px;
    }

    .brand {
        min-width: 210px;
    }

    .brand-logo-frame,
    .brand-logo {
        width: 132px;
    }

    .sidebar nav a {
        padding-inline: 9px;
    }

    .mission-hero-v15 {
        grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr);
    }

    .mission-hero-v15 .top-controls {
        grid-column: 1 / -1;
        grid-template-columns: auto auto auto;
        justify-content: end;
    }

    .cockpit-metrics {
        grid-template-columns: repeat(7, minmax(105px, 1fr));
    }

    .cockpit-metrics .metric-card {
        min-height: 132px;
        padding: 14px;
    }

    .cockpit-metrics .metric-card strong {
        font-size: clamp(23px, 2vw, 32px);
    }

    .operations-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    }

    .team-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .area-grid {
        gap: 14px;
    }

    .area-card {
        min-height: 330px;
        padding: 18px;
    }

    .forecast-card {
        padding: 12px;
    }

    .forecast-card dd,
    .forecast-card p {
        font-size: 12px;
    }
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .line-chart__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reports-header {
        grid-template-columns: 1fr;
    }

    .reports-header .report-filter {
        justify-self: stretch;
        width: 100%;
    }

    .sidebar {
        position: static;
        height: auto;
        padding: 14px;
        flex-wrap: wrap;
    }

    .sidebar nav {
        order: 3;
        flex-basis: 100%;
    }

    .side-footer {
        flex-wrap: wrap;
        align-items: center;
        margin-left: auto;
    }

    .user-menu-trigger {
        max-width: 250px;
    }

    .metric-grid,
    .dashboard-grid,
    .analytics-grid,
    .weather-insight-grid,
    .context-understanding-grid,
    .mission-command-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-context-list,
    .similar-day-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mission-hero-v15 {
        grid-template-columns: 1fr;
    }

    .team-page-header,
    .team-hero,
    .team-share-panel,
    .team-layout {
        grid-template-columns: 1fr;
    }

    .mission-hero-v15 .top-controls {
        grid-column: auto;
        grid-template-columns: repeat(3, minmax(0, auto));
        justify-content: start;
    }

    .cockpit-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .forecast-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-forecast-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operations-layout {
        grid-template-columns: 1fr;
    }

    .filter-grid,
    .form-grid,
    .comments-grid,
    .opening-override-panel,
    .admin-grid,
    .department-editor,
    .mini-chart-grid,
    .simplified-grid,
    .area-settings-grid,
    .live-calc-grid,
    .month-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-area-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comment-capture-head {
        display: grid;
    }
}

@media (max-width: 720px) {
    .app-shell {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .content {
        width: 100vw;
        max-width: 100vw;
        padding: 16px;
        overflow-x: clip;
    }

    .sidebar {
        gap: 12px;
        width: 100vw;
        max-width: 100vw;
        align-items: stretch;
    }

    .brand {
        margin-bottom: 6px;
        min-width: min(100%, 230px);
    }

    .brand,
    .side-footer {
        justify-content: flex-start;
    }

    .brand {
        order: 1;
    }

    .brand-logo-frame {
        width: 140px;
        height: 42px;
    }

    .brand-logo {
        width: 140px;
    }

    .sidebar nav {
        order: 2;
    }

    .side-footer {
        order: 3;
    }

    .page-header,
    .panel-head {
        display: grid;
    }

    .metric-grid,
    .cockpit-metrics,
    .team-metrics,
    .data-status-panel,
    .dashboard-grid,
    .operations-layout,
    .team-hero,
    .team-share-panel,
    .team-share-actions,
    .team-forecast-grid,
    .team-layout,
    .area-grid,
    .analytics-grid,
    .mission-command-grid,
    .forecast-grid,
    .filter-grid,
    .form-grid,
    .comments-grid,
    .admin-grid,
    .department-editor,
    .mini-chart-grid,
    .side-footer,
    .opening-override-panel,
    .inline-filter,
    .top-controls,
    .simplified-grid,
    .area-settings-grid,
    .quick-area-picker,
    .context-understanding-grid,
    .weather-context-list,
    .similar-day-list,
    .month-summary-grid,
    .team-forecast-card dl,
    .weather-insight-grid {
        grid-template-columns: 1fr;
    }

    .setup-expert-panel {
        display: grid;
    }

    .sidebar nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow-x: visible;
        gap: 6px;
    }

    .side-footer {
        display: block;
        width: 100%;
        margin-left: 0;
    }

    .user-menu,
    .user-menu-trigger {
        width: 100%;
        max-width: 100%;
    }

    .user-menu-dropdown {
        right: auto;
        left: 0;
        width: min(100%, 330px);
    }

    .user-menu-dropdown::before {
        right: auto;
        left: 22px;
    }

    .sidebar nav a {
        min-width: 0;
        min-height: 58px;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 8px 6px;
        font-size: 11px;
        overflow: hidden;
    }

    .sidebar nav a span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand {
        width: 100%;
    }

    .brand-text strong {
        font-size: 12px;
    }

    .brand-logo-frame {
        width: 132px;
    }

    .brand-logo {
        width: 132px;
    }

    .live-calc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cockpit-hero,
    .capture-head,
    .section-heading {
        display: grid;
    }

    .cockpit-hero {
        padding: 18px;
    }

    .mission-verdict {
        grid-template-columns: 1fr;
    }

    .mission-verdict p {
        grid-column: 1;
    }

    .hero-command-card {
        min-width: 0;
    }

    .weather-command-main,
    .potential-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cockpit-hero *,
    .top-controls,
    .top-controls input,
    .top-controls .primary-button,
    .top-controls .secondary-button {
        min-width: 0;
        max-width: 100%;
    }

    .area-card {
        min-height: 220px;
    }

    .cockpit-hero p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .area-card dl,
    .weather-facts {
        grid-template-columns: 1fr 1fr;
    }

    .area-card-head {
        display: grid;
    }

    .status-badge {
        justify-self: start;
        white-space: normal;
    }

    .page-header > *,
    .dashboard-grid > *,
    .metric-grid > *,
    .sidebar,
    .content {
        min-width: 0;
    }

    .page-header p {
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        overflow-wrap: anywhere;
    }

    .metric-card {
        min-height: 118px;
    }

    h1 {
        font-size: 30px;
    }
}

@media (min-width: 430px) and (max-width: 720px) {
    .sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Supieria Mission Control 2026 design pass */
:root {
    --bg: #061019;
    --bg-soft: #0b1c28;
    --panel: rgba(255, 255, 255, .94);
    --panel-2: rgba(244, 250, 252, .82);
    --text: #0d1b24;
    --muted: #607281;
    --inverse: #edfaff;
    --line: rgba(181, 207, 217, .54);
    --aqua: #18c8d7;
    --aqua-dark: #0b8e9c;
    --amber: #f6b23f;
    --coral: #ff6f61;
    --green: #31c878;
    --blue: #5a8dff;
    --violet: #7c5cff;
    --shadow: 0 22px 60px rgba(3, 18, 29, .16);
    --shadow-soft: 0 10px 32px rgba(3, 18, 29, .1);
    --hairline: rgba(255, 255, 255, .5);
    --radius: 8px;
}

:root[data-theme="light"] {
    --bg: #eef6f9;
    --bg-soft: #e5f1f6;
    --panel: rgba(255, 255, 255, .92);
    --panel-2: rgba(247, 251, 253, .9);
    --text: #0d1d27;
    --muted: #627381;
    --inverse: #09202c;
    --line: rgba(185, 208, 218, .62);
    --shadow: 0 22px 60px rgba(14, 49, 67, .12);
}

body {
    background:
        linear-gradient(115deg, rgba(24, 200, 215, .16), transparent 38%),
        linear-gradient(245deg, rgba(255, 111, 97, .1), transparent 34%),
        linear-gradient(180deg, #061019 0%, #0a1b28 52%, #07131e 100%);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

:root[data-theme="light"] body {
    background:
        linear-gradient(115deg, rgba(24, 200, 215, .16), transparent 36%),
        linear-gradient(240deg, rgba(255, 111, 97, .08), transparent 34%),
        linear-gradient(180deg, #f9fcfd 0%, #edf6f9 56%, #eaf3f7 100%);
}

h1,
h2,
h3,
strong {
    letter-spacing: 0;
}

.app-shell {
    position: relative;
}

.app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 72%);
}

.content {
    width: min(100%, 1620px);
    padding: 30px 32px 72px;
}

.sidebar {
    min-height: 68px;
    padding: 10px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background:
        linear-gradient(180deg, rgba(6, 16, 25, .91), rgba(6, 16, 25, .78)),
        rgba(6, 16, 25, .88);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
}

:root[data-theme="light"] .sidebar {
    background:
        linear-gradient(180deg, rgba(7, 21, 31, .94), rgba(7, 21, 31, .84)),
        #07151d;
}

.brand-logo-frame {
    width: 146px;
    height: 42px;
}

.brand-logo {
    width: 146px;
}

.sidebar nav {
    gap: 6px;
}

.sidebar nav a {
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(237, 250, 255, .68);
    font-weight: 820;
}

.sidebar nav a.active {
    border-color: rgba(24, 200, 215, .26);
    background:
        linear-gradient(135deg, rgba(24, 200, 215, .16), rgba(255, 255, 255, .06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.sidebar nav a:hover {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .07);
}

.user-menu-trigger {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.user-avatar {
    background:
        linear-gradient(135deg, #eaffff, #61e3ee 42%, #f6b23f);
    color: #061019;
}

.user-menu-dropdown,
.metric-card,
.panel,
.area-card,
.data-status-panel,
.team-hero,
.team-share-panel,
.team-forecast-card,
.month-summary-card,
.weather-insight,
.staffing-list article,
.event-mini-list article,
.mini-chart-grid > div,
.forecast-card,
.similar-day-list article {
    border-radius: 8px;
}

.metric-card,
.panel {
    border-color: var(--line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 252, 254, .86)),
        var(--panel);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.panel {
    padding: 22px;
}

.panel-head h2,
.section-heading h2 {
    color: var(--text);
    font-size: clamp(21px, 2vw, 30px);
    line-height: 1.05;
}

.panel-head p,
.section-heading p,
.metric-card small,
.area-card-head span,
.area-recommendation,
.recommendation p {
    color: var(--muted);
}

.cockpit-hero {
    min-height: 430px;
    margin-bottom: 26px;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background:
        linear-gradient(100deg, rgba(6, 16, 25, .98), rgba(10, 34, 48, .9) 52%, rgba(9, 27, 39, .74)),
        linear-gradient(135deg, rgba(24, 200, 215, .2), rgba(246, 178, 63, .1) 48%, rgba(255, 111, 97, .12));
    box-shadow: 0 28px 90px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}

:root[data-theme="light"] .cockpit-hero {
    border-color: rgba(255, 255, 255, .16);
    background:
        linear-gradient(100deg, rgba(6, 16, 25, .98), rgba(10, 34, 48, .9) 52%, rgba(9, 27, 39, .74)),
        linear-gradient(135deg, rgba(24, 200, 215, .2), rgba(246, 178, 63, .1) 48%, rgba(255, 111, 97, .12));
    color: var(--inverse);
}

.cockpit-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .075) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 72%);
}

.mission-hero-v15 {
    grid-template-columns: minmax(0, 1.26fr) minmax(330px, .58fr) minmax(220px, auto);
    gap: 22px;
}

.hero-copy,
.hero-command-card,
.top-controls {
    position: relative;
    z-index: 1;
}

.hero-copy {
    min-width: 0;
}

.cockpit-hero h1 {
    max-width: 840px;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: clamp(42px, 4.9vw, 72px);
    font-weight: 920;
    line-height: .92;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.hero-date {
    color: rgba(237, 250, 255, .68) !important;
    font-size: 15px !important;
    font-weight: 780;
}

.mission-verdict {
    max-width: 900px;
    margin-top: 28px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.mission-verdict h2 {
    color: #ffffff;
    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 900;
}

.mission-verdict p {
    color: rgba(237, 250, 255, .76);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 760;
}

.mission-verdict > span {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}

.hero-weather-strip {
    margin-top: 18px;
}

.hero-weather-strip span {
    min-height: 38px;
    padding: 8px 12px;
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
    color: rgba(237, 250, 255, .83);
    backdrop-filter: blur(14px);
}

.hero-command-card {
    padding: 24px;
    border-color: rgba(255, 255, 255, .16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .075));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 18px 56px rgba(0, 0, 0, .18);
}

.hero-command-card > span {
    color: rgba(237, 250, 255, .66);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hero-command-card > strong {
    color: #ffffff;
    font-size: clamp(42px, 4.6vw, 68px);
    letter-spacing: 0;
}

.hero-command-card dl {
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.hero-command-card dt {
    color: rgba(237, 250, 255, .58);
}

.hero-command-card dd,
.hero-command-card p {
    color: rgba(237, 250, 255, .9);
}

.top-controls {
    align-self: start;
    min-width: 224px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(16px);
}

.top-controls input {
    border-color: rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.top-controls .secondary-button {
    border-color: rgba(24, 200, 215, .28);
    background: rgba(24, 200, 215, .12);
    color: rgba(237, 250, 255, .9);
}

.top-controls .secondary-button:hover {
    background: rgba(24, 200, 215, .18);
    color: #ffffff;
}

.top-controls input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.primary-button {
    background: linear-gradient(135deg, #8cf7ff, var(--aqua));
    color: #061019;
    box-shadow: 0 12px 30px rgba(24, 200, 215, .22);
}

.secondary-button {
    border: 1px solid rgba(24, 200, 215, .2);
    background: rgba(24, 200, 215, .12);
    color: #07616b;
}

.ghost-button,
.panel .ghost-button {
    border-color: var(--line);
    background: rgba(255, 255, 255, .5);
    color: var(--text);
}

.mission-section {
    margin-bottom: 24px;
}

.section-heading {
    margin-bottom: 18px;
}

.section-heading span,
.context-understanding-grid .panel-head span,
.team-forecast-panel .panel-head span {
    color: var(--aqua-dark);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.today-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.legacy-yesterday-metrics {
    display: none;
}

.metric-card {
    min-height: 166px;
    padding: 20px;
    gap: 12px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.metric-card::before {
    inset: 14px auto auto 14px;
    width: 34px;
    height: 3px;
    border-radius: 999px;
}

.metric-card span {
    max-width: 92%;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.metric-card strong {
    color: var(--text);
    font-size: clamp(31px, 3.4vw, 50px);
    font-weight: 930;
    letter-spacing: 0;
}

.metric-card small {
    max-width: 340px;
    font-weight: 780;
    line-height: 1.38;
}

.metric-card:hover,
.area-card:hover,
.panel:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.mission-command-grid {
    grid-template-columns: minmax(420px, .9fr) minmax(0, 1.1fr);
    gap: 22px;
    margin-bottom: 24px;
}

.weather-command-panel {
    overflow: hidden;
    position: relative;
    border-color: rgba(24, 200, 215, .24);
    background:
        linear-gradient(145deg, rgba(232, 252, 255, .96), rgba(255, 255, 255, .88)),
        var(--panel);
}

.weather-command-panel::after {
    content: "";
    position: absolute;
    inset: auto -20% -1px 34%;
    height: 48%;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(24, 200, 215, .13), rgba(90, 141, 255, .08), transparent);
    transform: skewX(-12deg);
}

.weather-command-main,
.weather-context-list,
.weather-potential-grid {
    position: relative;
    z-index: 1;
}

.weather-command-main {
    align-items: start;
}

.weather-command-main h2 {
    color: var(--text);
    font-size: clamp(31px, 3.2vw, 46px);
    letter-spacing: 0;
}

.weather-command-main > strong {
    color: var(--aqua-dark);
    font-size: clamp(68px, 8vw, 118px);
    font-weight: 930;
    letter-spacing: 0;
}

.weather-context-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.weather-context-list div,
.potential-row,
.forecast-card,
.similar-day-list article,
.insight-mini-list p,
.staffing-list article,
.event-mini-list article {
    border-color: rgba(185, 208, 218, .56);
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64);
}

.weather-context-list dd {
    font-size: 13px;
}

.potential-row {
    grid-template-columns: minmax(96px, .72fr) minmax(90px, .72fr) minmax(0, 1fr);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--area) 13%, transparent), transparent),
        rgba(255, 255, 255, .66);
}

.potential-row strong {
    font-size: 16px;
}

.forecast-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 253, 254, .86)),
        var(--panel);
}

.forecast-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.forecast-card {
    min-height: 252px;
    padding: 16px;
}

.forecast-card > div:first-child strong {
    font-size: 18px;
}

.forecast-card dl {
    gap: 10px;
}

.forecast-card dl div {
    padding: 8px 0;
    border-bottom: 1px solid rgba(185, 208, 218, .42);
}

.forecast-area-plan span,
.context-factor-list span,
.chart-filters button {
    border: 1px solid rgba(24, 200, 215, .15);
    background: rgba(24, 200, 215, .09);
}

.context-understanding-grid {
    gap: 22px;
    margin-bottom: 24px;
}

.yesterday-panel-v21,
.comparison-panel-v21 {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(248, 252, 254, .84)),
        var(--panel);
}

.compact-status-list div {
    border-bottom-color: rgba(185, 208, 218, .54);
}

.compact-status-list dt {
    text-transform: uppercase;
    letter-spacing: .06em;
}

.compact-status-list dd {
    color: var(--text);
}

.operations-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 410px);
    gap: 24px;
    margin-bottom: 24px;
}

.area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.area-card {
    overflow: hidden;
    min-height: 420px;
    padding: 26px;
    border-color: color-mix(in srgb, var(--area) 32%, var(--line));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--area) 14%, transparent), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 252, 254, .86)),
        var(--panel);
    box-shadow: var(--shadow-soft);
}

.area-card::before {
    inset: 0;
    width: auto;
    height: 4px;
    background: linear-gradient(90deg, var(--area), transparent);
}

.area-card::after {
    content: "";
    position: absolute;
    inset: auto -12% -18% 38%;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--area) 15%, transparent), transparent 72%);
    transform: skewX(-15deg);
}

.area-card > * {
    position: relative;
    z-index: 1;
}

.area-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
}

.area-card-head span {
    max-width: 440px;
    font-size: 12px;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.area-card h2 {
    font-size: clamp(29px, 3vw, 42px);
    line-height: .98;
}

.status-badge {
    padding: 8px 10px;
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.area-card-value {
    margin: 6px 0 14px;
    color: var(--text);
    font-size: clamp(46px, 5vw, 72px);
    font-weight: 940;
    letter-spacing: 0;
}

.area-mini-meter {
    height: 10px;
    background: color-mix(in srgb, var(--area) 13%, #dfeaf0);
}

.area-mini-meter span {
    background: linear-gradient(90deg, var(--area), color-mix(in srgb, var(--area) 45%, white));
    box-shadow: 0 0 22px color-mix(in srgb, var(--area) 36%, transparent);
}

.area-trend {
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58);
}

.target-ring {
    width: 84px;
    height: 84px;
    background:
        conic-gradient(var(--area) calc(var(--progress) * 1%), color-mix(in srgb, var(--area) 11%, #dfeaf0) 0),
        #dfeaf0;
    box-shadow: inset 0 0 0 9px rgba(255, 255, 255, .88), 0 18px 36px color-mix(in srgb, var(--area) 18%, transparent);
}

.target-ring span {
    width: 62px;
    height: 62px;
    font-size: 12px;
    text-align: center;
}

.event-card .target-ring span {
    font-size: 11px;
    line-height: 1.05;
}

.area-card dl {
    gap: 10px;
}

.area-card dl div {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(185, 208, 218, .46);
    border-radius: 8px;
    background: rgba(255, 255, 255, .56);
}

.area-card dt {
    text-transform: uppercase;
    letter-spacing: .06em;
}

.area-recommendation {
    border: 1px solid color-mix(in srgb, var(--area) 18%, transparent);
    background: color-mix(in srgb, var(--area) 9%, rgba(255, 255, 255, .54));
}

.decision-stack {
    gap: 18px;
}

.action-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(124, 92, 255, .22);
    background:
        linear-gradient(145deg, rgba(250, 249, 255, .96), rgba(255, 255, 255, .86)),
        var(--panel);
}

.action-panel::before {
    content: "AI";
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 28px;
    border: 1px solid rgba(124, 92, 255, .2);
    border-radius: 8px;
    background: rgba(124, 92, 255, .1);
    color: var(--violet);
    font-size: 12px;
    font-weight: 950;
}

.recommendation-list {
    gap: 12px;
}

.recommendation {
    position: relative;
    padding: 15px 15px 15px 44px;
    border: 1px solid rgba(185, 208, 218, .55);
    border-left: 0;
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64);
}

.recommendation::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 15px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--amber);
    box-shadow: 0 0 0 5px rgba(246, 178, 63, .14);
}

.recommendation.red::before { background: var(--coral); box-shadow: 0 0 0 5px rgba(255, 111, 97, .13); }
.recommendation.green::before { background: var(--green); box-shadow: 0 0 0 5px rgba(49, 200, 120, .13); }
.recommendation.blue::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(90, 141, 255, .13); }

.recommendation strong {
    font-size: 14px;
    line-height: 1.25;
}

.action-checklist div,
.quick-actions a {
    border-color: rgba(185, 208, 218, .54);
    background: rgba(255, 255, 255, .58);
}

.weather-intelligence {
    margin-bottom: 24px;
}

.weather-insight-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.weather-insight {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(247, 251, 253, .64));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.analytics-grid {
    gap: 22px;
}

.chart-panel {
    min-height: 430px;
}

.line-chart,
.bar-chart,
.weather-chart {
    min-height: 300px;
}

.chart-filters {
    gap: 7px;
    margin-bottom: 16px;
}

.chart-filters button {
    min-height: 34px;
    border-color: rgba(185, 208, 218, .56);
    background: rgba(255, 255, 255, .56);
    color: var(--muted);
}

.chart-filters button.active,
.chart-filters button:hover {
    background: rgba(24, 200, 215, .12);
    color: var(--aqua-dark);
}

.mini-chart-grid > div {
    min-height: 190px;
    background: rgba(255, 255, 255, .62);
}

input,
select,
textarea {
    border-color: rgba(174, 202, 214, .72);
    background: rgba(255, 255, 255, .86);
}

@media (prefers-reduced-motion: no-preference) {
    .cockpit-hero,
    .metric-card,
    .panel,
    .area-card {
        animation: smcFadeUp .45s ease both;
    }

    .metric-card:nth-child(2),
    .area-card:nth-child(2) { animation-delay: .035s; }
    .metric-card:nth-child(3),
    .area-card:nth-child(3) { animation-delay: .07s; }
    .metric-card:nth-child(4),
    .area-card:nth-child(4) { animation-delay: .105s; }
}

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

@media (max-width: 1380px) {
    .mission-hero-v15 {
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, .7fr);
    }

    .mission-hero-v15 .top-controls {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .today-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .forecast-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .content {
        padding: 24px 22px 60px;
    }

    .mission-hero-v15,
    .mission-command-grid,
    .operations-layout,
    .context-understanding-grid {
        grid-template-columns: 1fr;
    }

    .area-grid,
    .today-metrics,
    .weather-insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-context-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .content {
        padding: 16px 14px 46px;
    }

    .sidebar {
        padding: 12px 14px;
    }

    .cockpit-hero {
        min-height: 0;
        padding: 20px;
    }

    .cockpit-hero h1 {
        font-size: clamp(30px, 8vw, 32px);
        line-height: 1;
        overflow-wrap: normal;
        word-break: normal;
    }

    .mission-verdict {
        margin-top: 18px;
        padding: 14px;
    }

    .mission-verdict h2 {
        font-size: clamp(24px, 7vw, 30px);
    }

    .mission-verdict p {
        font-size: 15px;
        line-height: 1.38;
    }

    .hero-weather-strip {
        gap: 7px;
    }

    .hero-weather-strip span {
        min-height: 34px;
        padding: 7px 9px;
        font-size: 12px;
    }

    .hero-command-card {
        padding: 16px;
        gap: 10px;
    }

    .hero-command-card > strong {
        font-size: clamp(34px, 12vw, 44px);
    }

    .hero-command-card dl {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .hero-command-card dl div {
        display: grid;
        gap: 3px;
    }

    .top-controls {
        grid-template-columns: 1fr 1fr;
        padding: 10px;
    }

    .mission-hero-v15 .top-controls,
    .today-metrics,
    .area-grid,
    .forecast-grid,
    .weather-context-list,
    .weather-insight-grid {
        grid-template-columns: 1fr;
    }

    .mission-hero-v15 .top-controls {
        grid-template-columns: 1fr 1fr;
    }

    .mission-hero-v15 .top-controls input,
    .mission-hero-v15 .top-controls .primary-button {
        grid-column: 1 / -1;
    }

    .metric-card {
        min-height: 132px;
    }

    .metric-card strong,
    .area-card-value {
        font-size: clamp(32px, 10vw, 44px);
    }

    .weather-command-main > strong {
        font-size: 72px;
    }

    .area-card {
        min-height: 0;
        padding: 20px;
    }

    .area-card-head {
        grid-template-columns: 1fr;
    }

    .area-card dl {
        grid-template-columns: 1fr 1fr;
    }

    .target-ring-row {
        grid-template-columns: 78px minmax(0, 1fr);
    }
}

/* Dashboard middle-section layout repair */
.operations-layout {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
}

.operations-layout .area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.operations-layout .decision-stack {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.operations-layout .decision-stack > .panel {
    min-height: 0;
}

.operations-layout .action-panel,
.operations-layout .action-plan-panel {
    grid-column: span 2;
}

.operations-layout .staffing-panel,
.operations-layout .events-simple-panel,
.operations-layout .quick-actions-panel,
.operations-layout .today-week-panel,
.operations-layout .weather-panel,
.operations-layout .week-panel {
    grid-column: span 1;
}

.operations-layout .action-panel .recommendation-list,
.operations-layout .action-plan-panel .action-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operations-layout .quick-actions {
    grid-template-columns: 1fr;
}

.operations-layout .weather-now {
    margin-bottom: 12px;
}

.operations-layout .weather-now-main {
    align-items: center;
}

.operations-layout .weather-now strong {
    font-size: 22px;
}

@media (max-width: 1380px) {
    .operations-layout .decision-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .operations-layout .action-panel,
    .operations-layout .action-plan-panel {
        grid-column: span 3;
    }

    .operations-layout .action-panel .recommendation-list,
    .operations-layout .action-plan-panel .action-checklist {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .operations-layout .area-grid,
    .operations-layout .decision-stack,
    .operations-layout .action-panel .recommendation-list,
    .operations-layout .action-plan-panel .action-checklist {
        grid-template-columns: 1fr;
    }

    .operations-layout .action-panel,
    .operations-layout .action-plan-panel,
    .operations-layout .staffing-panel,
    .operations-layout .events-simple-panel,
    .operations-layout .quick-actions-panel,
    .operations-layout .today-week-panel,
    .operations-layout .weather-panel,
    .operations-layout .week-panel {
        grid-column: auto;
    }
}

/* Final Design Brief: Supieria Mission Control 2026 */
@media (min-width: 1180px) {
    .app-shell {
        grid-template-columns: 258px minmax(0, 1fr);
        grid-template-rows: 1fr;
        background:
            linear-gradient(115deg, rgba(19, 184, 196, .08), transparent 34%),
            linear-gradient(180deg, #06111a 0%, #081923 46%, #eef6f8 46%, #eef6f8 100%);
    }

    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 24px 14px 18px;
        border-right: 1px solid rgba(255, 255, 255, .1);
        border-bottom: 0;
        background:
            linear-gradient(180deg, rgba(2, 12, 20, .98), rgba(7, 24, 35, .96)),
            #06111a;
        box-shadow: 18px 0 70px rgba(0, 0, 0, .26);
    }

    .brand {
        justify-content: flex-start;
        min-width: 0;
        padding: 0 8px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }

    .brand-logo-frame,
    .brand-logo {
        width: 150px;
    }

    .sidebar nav {
        display: grid;
        flex: 0 1 auto;
        justify-content: stretch;
        gap: 6px;
        width: 100%;
    }

    .sidebar nav a {
        justify-content: flex-start;
        min-height: 44px;
        padding: 10px 12px;
        border: 1px solid transparent;
        background: transparent;
        color: rgba(229, 246, 250, .68);
        font-size: 13px;
        font-weight: 780;
    }

    .sidebar nav a.active {
        border-color: rgba(118, 230, 238, .22);
        background:
            linear-gradient(135deg, rgba(20, 184, 196, .2), rgba(255, 255, 255, .05));
        color: #ffffff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 30px rgba(0, 0, 0, .16);
    }

    .sidebar nav a:hover {
        border-color: rgba(255, 255, 255, .1);
        background: rgba(255, 255, 255, .06);
        color: #ffffff;
    }

    .side-footer {
        display: grid;
        margin: auto 0 0;
        width: 100%;
    }

    .user-menu-trigger {
        max-width: none;
        width: 100%;
        border-color: rgba(255, 255, 255, .11);
        background: rgba(255, 255, 255, .06);
    }

    .user-menu-dropdown {
        right: auto;
        left: 0;
    }

    .content {
        width: min(100%, 1680px);
        padding: 34px 36px 70px;
    }
}

body.route-dashboard {
    background:
        linear-gradient(180deg, #07131d 0%, #0b202c 32%, #edf6f8 32%, #edf6f8 100%);
}

.route-dashboard .content {
    color: #10202b;
}

.route-dashboard .cockpit-hero {
    isolation: isolate;
    min-height: 540px;
    padding: clamp(28px, 3vw, 46px);
    border-color: rgba(255, 255, 255, .14);
    background:
        linear-gradient(90deg, rgba(4, 13, 22, .98), rgba(7, 36, 52, .9) 46%, rgba(11, 68, 80, .54)),
        linear-gradient(135deg, rgba(20, 184, 196, .2), rgba(244, 166, 42, .08) 54%, rgba(238, 107, 94, .1));
    box-shadow: 0 34px 100px rgba(1, 12, 20, .3);
}

.route-dashboard .cockpit-hero::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: .7;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .52), transparent 76%);
}

.route-dashboard .cockpit-hero::after {
    inset: 0;
    height: auto;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 54%, rgba(118, 230, 238, .16) 54% 55%, transparent 55%),
        linear-gradient(180deg, transparent 70%, rgba(6, 17, 26, .54));
    opacity: .82;
}

.route-dashboard .mission-hero-v15 {
    grid-template-columns: minmax(0, 1.24fr) minmax(340px, .52fr) minmax(220px, auto);
    gap: clamp(18px, 2vw, 30px);
    align-items: start;
}

.route-dashboard .hero-copy,
.route-dashboard .hero-command-card,
.route-dashboard .top-controls {
    z-index: 2;
}

.route-dashboard .cockpit-hero h1 {
    max-width: 980px;
    margin: 0 0 12px;
    color: #f7fbff;
    font-size: clamp(42px, 4.7vw, 74px);
    font-weight: 930;
    line-height: .94;
    letter-spacing: 0;
    word-break: normal;
    overflow-wrap: normal;
    text-wrap: balance;
}

.route-dashboard .hero-date {
    color: rgba(231, 248, 252, .66) !important;
    font-size: 14px !important;
    font-weight: 780;
}

.route-dashboard .mission-verdict {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    max-width: 960px;
    margin: 34px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.route-dashboard .mission-verdict > span {
    width: 44px;
    height: 44px;
    margin-top: 6px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(244, 166, 42, .16);
    color: #ffcf74;
}

.route-dashboard .mission-verdict.green > span {
    background: rgba(40, 180, 99, .17);
    color: #77eda7;
}

.route-dashboard .mission-verdict.red > span {
    background: rgba(238, 107, 94, .17);
    color: #ff948a;
}

.route-dashboard .mission-verdict h2 {
    color: #ffffff;
    font-size: clamp(35px, 4vw, 64px);
    font-weight: 930;
    line-height: .98;
    letter-spacing: 0;
    text-wrap: balance;
}

.route-dashboard .mission-verdict p {
    grid-column: 2;
    max-width: 820px;
    color: rgba(231, 248, 252, .8);
    font-size: clamp(16px, 1.45vw, 21px);
    font-weight: 760;
    line-height: 1.48;
}

.route-dashboard .hero-weather-strip {
    max-width: 860px;
    margin-top: 28px;
}

.route-dashboard .hero-weather-strip span {
    min-height: 42px;
    border-color: rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .085);
    color: rgba(238, 252, 255, .88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.route-dashboard .hero-command-card {
    min-height: 360px;
    padding: 26px;
    border-color: rgba(255, 255, 255, .16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 60px rgba(0, 0, 0, .22);
}

.route-dashboard .hero-command-card > span {
    color: rgba(231, 248, 252, .62);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.route-dashboard .hero-command-card > strong {
    color: #ffffff;
    font-size: clamp(46px, 5vw, 74px);
    font-weight: 930;
    letter-spacing: 0;
}

.route-dashboard .hero-command-card dl {
    padding: 18px 0;
}

.route-dashboard .hero-command-card p {
    color: rgba(231, 248, 252, .84);
    font-size: 14px;
}

.route-dashboard .top-controls {
    border-color: rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}

.route-dashboard .mission-section,
.route-dashboard .mission-command-grid,
.route-dashboard .context-understanding-grid,
.route-dashboard .operations-layout,
.route-dashboard .weather-intelligence,
.route-dashboard .analytics-grid {
    margin-top: 30px;
}

.route-dashboard .section-heading {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: end;
    margin-bottom: 18px;
}

.route-dashboard .section-heading h2 {
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 920;
    letter-spacing: 0;
}

.route-dashboard .section-heading p {
    max-width: 600px;
    font-size: 15px;
    font-weight: 760;
    line-height: 1.5;
}

.route-dashboard .panel,
.route-dashboard .metric-card,
.route-dashboard .area-card,
.route-dashboard .forecast-card,
.route-dashboard .weather-context-list div,
.route-dashboard .potential-row,
.route-dashboard .similar-day-list article,
.route-dashboard .weather-insight,
.route-dashboard .mini-chart-grid > div {
    border-color: rgba(156, 188, 202, .34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .64)),
        rgba(255, 255, 255, .72);
    box-shadow: 0 22px 70px rgba(13, 43, 58, .11), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.route-dashboard .metric-card {
    min-height: 150px;
    padding: 21px;
}

.route-dashboard .metric-card span,
.route-dashboard .area-card-head span,
.route-dashboard .compact-status-list dt,
.route-dashboard .area-card dt,
.route-dashboard .forecast-card dt {
    letter-spacing: 0;
    text-transform: uppercase;
}

.route-dashboard .metric-card strong {
    font-size: clamp(34px, 3.6vw, 56px);
    letter-spacing: 0;
}

.route-dashboard .mission-command-grid {
    grid-template-columns: minmax(430px, .86fr) minmax(0, 1.14fr);
}

.route-dashboard .weather-command-panel {
    min-height: 420px;
    color: #eafaff;
    border-color: rgba(118, 230, 238, .24);
    background:
        linear-gradient(145deg, rgba(4, 19, 30, .94), rgba(8, 47, 61, .84)),
        linear-gradient(135deg, rgba(20, 184, 196, .18), rgba(244, 166, 42, .08));
}

.route-dashboard .weather-command-main h2,
.route-dashboard .weather-command-main p,
.route-dashboard .weather-context-list dt,
.route-dashboard .weather-context-list dd {
    color: rgba(235, 252, 255, .88);
}

.route-dashboard .weather-command-main > strong {
    color: #8cf7ff;
    letter-spacing: 0;
}

.route-dashboard .weather-context-list div,
.route-dashboard .potential-row {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .07);
}

.route-dashboard .potential-row small,
.route-dashboard .potential-row span {
    color: rgba(235, 252, 255, .72);
}

.route-dashboard .forecast-panel {
    min-height: 420px;
}

.route-dashboard .forecast-card {
    min-height: 238px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.route-dashboard .forecast-card:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 184, 196, .28);
}

.route-dashboard .operations-layout .area-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.route-dashboard .area-card {
    display: grid;
    min-height: 510px;
    padding: 24px;
    border-color: color-mix(in srgb, var(--area) 34%, rgba(156, 188, 202, .34));
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.route-dashboard .area-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 90px color-mix(in srgb, var(--area) 14%, rgba(13, 43, 58, .2));
}

.route-dashboard .area-card.area-sport {
    background:
        linear-gradient(145deg, rgba(8, 168, 184, .2), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(241, 252, 254, .72));
}

.route-dashboard .area-card.area-beachbar {
    background:
        linear-gradient(145deg, rgba(244, 166, 42, .22), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 248, 235, .7));
}

.route-dashboard .area-card.area-brise {
    background:
        linear-gradient(145deg, rgba(124, 92, 255, .18), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(248, 245, 255, .7));
}

.route-dashboard .area-card.event-card {
    background:
        linear-gradient(145deg, rgba(238, 107, 94, .16), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 246, 245, .72));
}

.route-dashboard .area-card h2 {
    font-size: clamp(26px, 2.7vw, 40px);
    letter-spacing: 0;
}

.route-dashboard .area-card-value {
    font-size: clamp(42px, 4.7vw, 66px);
    letter-spacing: 0;
}

.route-dashboard .area-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-dashboard .area-card dl div {
    border-color: rgba(156, 188, 202, .32);
    background: rgba(255, 255, 255, .5);
}

.route-dashboard .area-recommendation {
    align-self: end;
    color: #213844;
    font-weight: 820;
}

.route-dashboard .operations-layout .decision-stack {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
}

.route-dashboard .operations-layout .action-panel,
.route-dashboard .operations-layout .action-plan-panel {
    grid-column: span 1;
}

.route-dashboard .operations-layout .staffing-panel,
.route-dashboard .operations-layout .events-simple-panel,
.route-dashboard .operations-layout .quick-actions-panel,
.route-dashboard .operations-layout .today-week-panel,
.route-dashboard .operations-layout .weather-panel,
.route-dashboard .operations-layout .week-panel {
    grid-column: span 1;
}

.route-dashboard .action-panel {
    color: #eefbff;
    border-color: rgba(124, 92, 255, .26);
    background:
        linear-gradient(145deg, rgba(18, 18, 37, .96), rgba(11, 37, 50, .88)),
        linear-gradient(135deg, rgba(124, 92, 255, .18), transparent);
}

.route-dashboard .action-panel .panel-head h2,
.route-dashboard .action-panel .panel-head p {
    color: #eefbff;
}

.route-dashboard .action-panel::before {
    content: "AI";
    border-color: rgba(159, 142, 255, .28);
    background: rgba(124, 92, 255, .16);
    color: #c9c0ff;
}

.route-dashboard .recommendation-list {
    gap: 12px;
}

.route-dashboard .recommendation {
    display: grid;
    gap: 7px;
    padding: 15px 15px 15px 46px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.route-dashboard .recommendation strong {
    color: #ffffff;
    font-size: 15px;
}

.route-dashboard .recommendation p,
.route-dashboard .recommendation small {
    color: rgba(231, 248, 252, .76);
}

.route-dashboard .recommendation small {
    font-size: 12px;
    font-weight: 820;
}

.route-dashboard .insight-priority {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(244, 166, 42, .14);
    color: #ffd17b;
    font-size: 10px;
    font-weight: 930;
    letter-spacing: 0;
    text-transform: uppercase;
}

.route-dashboard .recommendation.red .insight-priority { background: rgba(238, 107, 94, .15); color: #ff9f96; }
.route-dashboard .recommendation.green .insight-priority { background: rgba(40, 180, 99, .15); color: #79efaa; }
.route-dashboard .recommendation.blue .insight-priority { background: rgba(59, 130, 246, .16); color: #9dc2ff; }

.route-dashboard .analytics-grid {
    gap: 24px;
}

.route-dashboard .chart-panel,
.route-dashboard .analytics-grid > .panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72));
}

.route-dashboard .line-chart svg,
.route-dashboard .bar-chart svg,
.route-dashboard .weather-chart svg,
.route-dashboard .spark-chart svg {
    filter: drop-shadow(0 10px 18px rgba(20, 184, 196, .1));
}

.route-dashboard .weather-row {
    grid-template-columns: minmax(0, 1fr) minmax(80px, max-content) minmax(48px, max-content);
    grid-template-areas:
        "label value days"
        "track track track";
    gap: 7px 10px;
}

.route-dashboard .weather-chart-label {
    white-space: normal;
}

.route-dashboard .weather-chart-days {
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: no-preference) {
    .route-dashboard .line-chart path,
    .route-dashboard .line-chart polyline,
    .route-dashboard .spark-chart path,
    .route-dashboard .spark-chart polyline {
        stroke-dasharray: 1200;
        stroke-dashoffset: 1200;
        animation: smcDrawChart 1.1s ease forwards;
    }

    .route-dashboard .bar-chart rect,
    .route-dashboard .weather-chart rect {
        transform-box: fill-box;
        transform-origin: bottom;
        animation: smcGrowBar .7s ease both;
    }
}

@keyframes smcDrawChart {
    to { stroke-dashoffset: 0; }
}

@keyframes smcGrowBar {
    from { transform: scaleY(.18); opacity: .45; }
    to { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 1540px) {
    .route-dashboard .operations-layout .area-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .route-dashboard .area-card {
        min-height: 430px;
    }
}

@media (max-width: 1380px) {
    .route-dashboard .mission-hero-v15 {
        grid-template-columns: minmax(0, 1fr) minmax(310px, .52fr);
    }

    .route-dashboard .cockpit-hero {
        min-height: 650px;
    }

    .route-dashboard .cockpit-hero h1 {
        font-size: clamp(38px, 4vw, 58px);
        line-height: .98;
    }

    .route-dashboard .mission-hero-v15 .top-controls {
        position: absolute;
        right: clamp(28px, 3vw, 46px);
        bottom: clamp(24px, 2.6vw, 38px);
        width: 310px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
    }

    .route-dashboard .mission-hero-v15 .top-controls input,
    .route-dashboard .mission-hero-v15 .top-controls .primary-button,
    .route-dashboard .mission-hero-v15 .top-controls .secondary-button {
        min-height: 36px;
        padding: 7px 9px;
        font-size: 12px;
    }

    .route-dashboard .operations-layout .decision-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    body.route-dashboard {
        background:
            linear-gradient(180deg, #07131d 0%, #0b202c 18%, #edf6f8 18%, #edf6f8 100%);
    }

    .route-dashboard .mission-hero-v15,
    .route-dashboard .mission-command-grid,
    .route-dashboard .operations-layout .decision-stack {
        grid-template-columns: 1fr;
    }

    .route-dashboard .mission-hero-v15 .top-controls {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        grid-column: 1;
        grid-row: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .route-dashboard .cockpit-hero {
        min-height: 0;
        padding: 22px;
        overflow: hidden;
    }

    .route-dashboard .cockpit-hero h1 {
        font-size: clamp(34px, 11vw, 46px);
        max-width: 100%;
        width: 100%;
        overflow-wrap: break-word;
    }

    .route-dashboard .hero-copy,
    .route-dashboard .hero-command-card,
    .route-dashboard .top-controls {
        width: 100%;
        max-width: 100%;
    }

    .route-dashboard .hero-command-card {
        min-height: 0;
    }

    .route-dashboard .mission-verdict {
        grid-template-columns: 1fr;
    }

    .route-dashboard .mission-verdict p {
        grid-column: auto;
    }

    .route-dashboard .section-heading {
        display: grid;
        align-items: start;
    }

    .route-dashboard .operations-layout .area-grid,
    .route-dashboard .operations-layout .decision-stack {
        grid-template-columns: 1fr;
    }

    .route-dashboard .area-card {
        min-height: 0;
    }
}

/* Final Product Direction: Morning Operating System */
@media (min-width: 1180px) {
    body.route-dashboard {
        background:
            linear-gradient(180deg, #061019 0%, #0a1a25 46%, #f3f8fa 46%, #f3f8fa 100%);
    }

    body.route-dashboard .app-shell {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        background: transparent;
    }

    body.route-dashboard .sidebar {
        position: sticky;
        top: 16px;
        z-index: 80;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px;
        width: min(calc(100% - 48px), 1480px);
        height: auto;
        margin: 16px auto 0;
        padding: 9px 10px 9px 16px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 8px;
        background: rgba(5, 17, 26, .76);
        box-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
        backdrop-filter: blur(24px);
    }

    body.route-dashboard .brand {
        min-width: 172px;
        padding: 0;
        border: 0;
    }

    body.route-dashboard .brand-logo-frame,
    body.route-dashboard .brand-logo {
        width: 132px;
        height: 38px;
    }

    body.route-dashboard .brand-text {
        display: none;
    }

    body.route-dashboard .sidebar nav {
        display: flex;
        justify-content: center;
        gap: 4px;
        width: auto;
    }

    body.route-dashboard .sidebar nav a {
        min-height: 38px;
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 12px;
    }

    body.route-dashboard .sidebar nav a.active {
        background: rgba(255, 255, 255, .1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
    }

    body.route-dashboard .side-footer {
        margin: 0;
        width: auto;
    }

    body.route-dashboard .user-menu-trigger {
        min-height: 42px;
        max-width: 260px;
    }

    body.route-dashboard .content {
        width: min(100%, 1540px);
        padding: 18px 24px 78px;
    }
}

.route-dashboard .cockpit-hero {
    min-height: min(760px, calc(100vh - 112px));
    border-radius: 8px;
}

@media (min-width: 1180px) {
    .route-dashboard .cockpit-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
        gap: clamp(26px, 4vw, 72px);
        align-items: stretch;
        padding: clamp(38px, 5vw, 74px);
    }
}

.route-dashboard .cockpit-hero.mood-storm {
    background:
        linear-gradient(112deg, rgba(4, 9, 15, .99), rgba(12, 33, 47, .94) 48%, rgba(78, 25, 31, .56)),
        linear-gradient(135deg, rgba(20, 184, 196, .14), rgba(238, 107, 94, .2));
}

.route-dashboard .cockpit-hero.mood-rain {
    background:
        linear-gradient(112deg, rgba(5, 15, 24, .99), rgba(13, 44, 58, .9) 52%, rgba(19, 48, 66, .62)),
        linear-gradient(135deg, rgba(59, 130, 246, .18), rgba(20, 184, 196, .1));
}

.route-dashboard .cockpit-hero.mood-summer,
.route-dashboard .cockpit-hero.mood-opportunity {
    background:
        linear-gradient(112deg, rgba(5, 26, 32, .98), rgba(9, 88, 91, .82) 48%, rgba(244, 166, 42, .22)),
        linear-gradient(135deg, rgba(20, 184, 196, .24), rgba(40, 180, 99, .15));
}

.route-dashboard .hero-copy {
    display: grid;
    align-content: center;
}

.route-dashboard .hero-copy .hero-date {
    order: -1;
    margin-bottom: 18px !important;
}

.route-dashboard .cockpit-hero h1 {
    max-width: 980px;
    font-size: clamp(56px, 7.2vw, 118px);
    line-height: .88;
    letter-spacing: 0;
}

.route-dashboard .mission-verdict {
    max-width: 920px;
    margin-top: clamp(26px, 4vw, 54px);
}

.route-dashboard .mission-verdict h2 {
    font-size: clamp(31px, 4.2vw, 64px);
}

.route-dashboard .mission-verdict p {
    max-width: 760px;
}

.route-dashboard .decision-lanes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 980px;
    margin-top: clamp(24px, 3vw, 42px);
}

.route-dashboard .decision-lanes article {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.route-dashboard .decision-lanes span {
    display: block;
    margin-bottom: 10px;
    color: rgba(231, 248, 252, .64);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.route-dashboard .decision-lanes strong {
    display: block;
    color: #ffffff;
    font-size: clamp(30px, 3.2vw, 50px);
    font-weight: 930;
    line-height: 1;
}

.route-dashboard .decision-lanes p {
    margin: 11px 0 0;
    color: rgba(231, 248, 252, .78);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.42;
}

.route-dashboard .decision-lanes .red { border-color: rgba(238, 107, 94, .28); background: rgba(238, 107, 94, .11); }
.route-dashboard .decision-lanes .green { border-color: rgba(40, 180, 99, .26); background: rgba(40, 180, 99, .1); }
.route-dashboard .decision-lanes .amber { border-color: rgba(244, 166, 42, .3); background: rgba(244, 166, 42, .1); }
.route-dashboard .decision-lanes .blue { border-color: rgba(20, 184, 196, .28); background: rgba(20, 184, 196, .1); }

.route-dashboard .hero-command-card {
    align-self: center;
    min-height: 0;
}

@media (min-width: 1381px) {
    .route-dashboard .mission-hero-v15 .top-controls {
        right: clamp(38px, 5vw, 74px);
        bottom: clamp(34px, 5vw, 62px);
    }
}

.route-dashboard .mission-section {
    display: none;
}

.route-dashboard .mission-command-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: stretch;
}

.route-dashboard .weather-command-panel,
.route-dashboard .forecast-panel,
.route-dashboard .context-understanding-grid > .panel {
    border-radius: 8px;
}

.route-dashboard .operations-layout .area-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-auto-flow: dense;
}

.route-dashboard .area-card {
    min-height: 360px;
}

.route-dashboard .area-card.area-sport,
.route-dashboard .area-card.area-beachbar {
    min-height: 470px;
}

.route-dashboard .area-card.area-sport {
    grid-row: span 2;
}

.route-dashboard .area-card.event-card {
    min-height: 320px;
}

.route-dashboard .area-card dl {
    display: none;
}

.route-dashboard .target-ring-row {
    margin-top: 18px;
}

.route-dashboard .operations-layout .decision-stack {
    grid-template-columns: minmax(0, 1fr);
}

.route-dashboard .operations-layout .staffing-panel,
.route-dashboard .operations-layout .events-simple-panel,
.route-dashboard .operations-layout .today-week-panel,
.route-dashboard .operations-layout .weather-panel,
.route-dashboard .operations-layout .week-panel,
.route-dashboard .operations-layout .quick-actions-panel {
    display: none;
}

.route-dashboard .action-panel,
.route-dashboard .action-plan-panel {
    min-height: 420px;
}

.route-dashboard .action-panel .recommendation-list,
.route-dashboard .action-plan-panel .action-checklist {
    grid-template-columns: 1fr;
}

.route-dashboard .analytics-grid .panel-head h2::after {
    content: " · was bedeutet das?";
    color: var(--aqua-dark);
    font-weight: 760;
}

@media (max-width: 1179px) {
    .route-dashboard .decision-lanes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .route-dashboard .cockpit-hero h1 {
        font-size: clamp(38px, 12vw, 52px);
        line-height: .94;
    }

    .route-dashboard .decision-lanes {
        margin-top: 20px;
    }

    .route-dashboard .operations-layout .area-grid {
        grid-template-columns: 1fr;
    }

    .route-dashboard .area-card dl {
        display: grid;
    }
}

/* Product Direction refinement: keep the morning briefing bold, but scan-ready on real desktop sizes. */
@media (min-width: 1180px) {
    body.route-dashboard .sidebar {
        gap: clamp(10px, 1.4vw, 18px);
    }

    body.route-dashboard .brand {
        min-width: clamp(142px, 13vw, 172px);
    }

    body.route-dashboard .brand-logo-frame,
    body.route-dashboard .brand-logo {
        width: clamp(116px, 10vw, 132px);
    }

    body.route-dashboard .sidebar nav {
        min-width: 0;
        overflow: hidden;
        gap: 2px;
    }

    body.route-dashboard .sidebar nav a {
        min-width: 0;
        padding-inline: clamp(7px, .72vw, 10px);
        white-space: nowrap;
    }

    .route-dashboard .cockpit-hero {
        min-height: auto;
    }

    .route-dashboard .hero-copy {
        min-width: 0;
        align-content: center;
    }

    .route-dashboard .cockpit-hero h1 {
        max-width: 820px;
        font-size: clamp(48px, 5.6vw, 92px);
        line-height: .9;
    }

    .route-dashboard .mission-verdict {
        margin-top: clamp(18px, 2.5vw, 34px);
    }

    .route-dashboard .mission-verdict h2 {
        font-size: clamp(28px, 3.35vw, 52px);
        line-height: .98;
    }

    .route-dashboard .mission-verdict p {
        font-size: clamp(14px, 1.15vw, 18px);
        line-height: 1.42;
    }

    .route-dashboard .hero-weather-strip {
        max-width: 100%;
        margin-top: clamp(18px, 2vw, 26px);
    }

    .route-dashboard .hero-weather-strip span {
        min-width: 0;
    }

    .route-dashboard .decision-lanes {
        max-width: 920px;
        margin-top: clamp(18px, 2vw, 28px);
    }

    .route-dashboard .decision-lanes article {
        padding: 14px;
    }

    .route-dashboard .decision-lanes span {
        margin-bottom: 8px;
        font-size: 10px;
    }

    .route-dashboard .decision-lanes strong {
        font-size: clamp(26px, 2.45vw, 40px);
    }

    .route-dashboard .decision-lanes p {
        font-size: 12px;
        line-height: 1.36;
    }

    .route-dashboard .hero-command-card {
        min-width: 0;
        padding: clamp(18px, 2vw, 26px);
    }

    .route-dashboard .hero-command-card > strong {
        font-size: clamp(40px, 3.9vw, 62px);
    }

    .route-dashboard .weather-command-panel,
    .route-dashboard .area-card {
        overflow: hidden;
    }

    .route-dashboard .weather-command-main,
    .route-dashboard .weather-context-list div,
    .route-dashboard .target-ring-row,
    .route-dashboard .area-card-head,
    .route-dashboard .area-card dl div {
        min-width: 0;
    }

    .route-dashboard .weather-context-list dd,
    .route-dashboard .area-card em,
    .route-dashboard .area-recommendation {
        overflow-wrap: anywhere;
    }
}

@media (min-width: 1180px) and (max-width: 1380px) {
    .route-dashboard .cockpit-hero {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
        gap: 26px;
        padding: 34px;
    }

    .route-dashboard .cockpit-hero h1 {
        font-size: clamp(46px, 4.8vw, 68px);
    }

    .route-dashboard .mission-verdict h2 {
        font-size: clamp(28px, 3vw, 42px);
    }

    .route-dashboard .mission-verdict > span {
        width: 38px;
        height: 38px;
    }

    .route-dashboard .decision-lanes {
        gap: 9px;
    }

    .route-dashboard .decision-lanes article {
        padding: 12px;
    }

    .route-dashboard .decision-lanes strong {
        font-size: clamp(23px, 2.25vw, 31px);
    }

    .route-dashboard .decision-lanes p {
        font-size: 11px;
    }

    .route-dashboard .hero-command-card {
        min-height: 0;
    }

    .route-dashboard .mission-hero-v15 .top-controls {
        width: 300px;
    }
}

/* Visual QA fixes after first product-direction pass */
@media (min-width: 1180px) {
    body.route-dashboard .sidebar {
        position: relative;
        top: auto;
    }

    .route-dashboard .cockpit-hero {
        grid-template-rows: minmax(0, 1fr) auto;
        align-items: stretch;
    }

    .route-dashboard .hero-copy {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .route-dashboard .hero-command-card {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    .route-dashboard .mission-hero-v15 .top-controls {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        grid-column: 2;
        grid-row: 2;
        width: auto !important;
        margin-top: 14px;
        align-self: end;
        justify-self: stretch;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .085);
        backdrop-filter: blur(18px);
    }

    .route-dashboard .mission-hero-v15 .top-controls input,
    .route-dashboard .mission-hero-v15 .top-controls .primary-button,
    .route-dashboard .mission-hero-v15 .top-controls .secondary-button {
        width: 100%;
        min-height: 34px;
        padding: 7px 10px;
        font-size: 11px;
    }

    .route-dashboard .operations-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .route-dashboard .operations-layout .area-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        align-items: stretch;
    }

    .route-dashboard .area-card,
    .route-dashboard .area-card.area-sport,
    .route-dashboard .area-card.area-beachbar,
    .route-dashboard .area-card.event-card {
        min-height: 390px;
    }

    .route-dashboard .area-card.area-sport {
        grid-row: auto;
    }

    .route-dashboard .area-card h2 {
        font-size: clamp(26px, 2.35vw, 36px);
    }

    .route-dashboard .area-card-value {
        font-size: clamp(42px, 3.8vw, 58px);
    }

    .route-dashboard .operations-layout .decision-stack {
        grid-template-columns: 1fr;
    }

    .route-dashboard .action-panel,
    .route-dashboard .action-plan-panel {
        min-height: 0;
    }

    .route-dashboard .analytics-grid {
        align-items: start;
    }

    .route-dashboard .analytics-grid > .panel,
    .route-dashboard .chart-panel {
        min-height: 0;
    }

    .route-dashboard .bar-chart,
    .route-dashboard .weather-chart {
        min-height: auto;
    }
}

@media (min-width: 1180px) and (max-width: 1380px) {
    .route-dashboard .cockpit-hero {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
        grid-template-rows: 1fr auto;
    }

    .route-dashboard .decision-lanes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1179px) {
    body.route-dashboard .sidebar {
        position: relative;
    }

    .route-dashboard .mission-hero-v15 .top-controls {
        margin-top: 12px;
    }
}

/* Forecast card QA: keep large values inside narrow planning cards. */
.route-dashboard .forecast-card {
    min-width: 0;
    overflow: hidden;
}

.route-dashboard .forecast-card dl div {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: 8px;
    align-items: start;
}

.route-dashboard .forecast-card dt,
.route-dashboard .forecast-card dd {
    min-width: 0;
}

.route-dashboard .forecast-card dt {
    font-size: clamp(10px, .68vw, 12px);
    line-height: 1.15;
}

.route-dashboard .forecast-card dd {
    max-width: 100%;
    color: var(--text);
    font-size: clamp(14px, .92vw, 17px);
    line-height: 1.08;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: normal;
}

.route-dashboard .forecast-area-plan {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.route-dashboard .forecast-area-plan span {
    display: block;
    min-width: 0;
    width: 100%;
    padding: 7px 9px;
    font-size: clamp(10px, .72vw, 12px);
    line-height: 1.22;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (min-width: 1180px) and (max-width: 1480px) {
    .route-dashboard .forecast-grid {
        gap: 10px;
    }

    .route-dashboard .forecast-card {
        padding: 14px 12px;
    }
}

/* Mobile PWA header: compact app chrome instead of compressed desktop navigation. */
@media (max-width: 760px) {
    body {
        background:
            linear-gradient(180deg, #06131d 0, #06131d max(132px, env(safe-area-inset-top)), var(--bg) max(132px, env(safe-area-inset-top)));
    }

    .app-shell {
        overflow-x: clip;
    }

    .sidebar {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand user"
            "nav nav";
        align-items: center;
        gap: 14px 12px;
        width: 100%;
        max-width: 100vw;
        min-height: 0;
        height: auto;
        padding: max(14px, env(safe-area-inset-top)) 14px 14px;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        border-radius: 0 0 22px 22px;
        background:
            radial-gradient(circle at 12% 0%, rgba(118, 230, 238, .12), transparent 38%),
            linear-gradient(180deg, rgba(2, 13, 22, .98), rgba(6, 20, 30, .96));
        box-shadow: 0 18px 42px rgba(3, 18, 28, .22);
        backdrop-filter: blur(22px);
    }

    .brand {
        grid-area: brand;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        gap: 10px;
        justify-content: flex-start;
    }

    .brand-logo-frame {
        width: clamp(136px, 42vw, 178px);
        height: 44px;
        padding: 0;
    }

    .brand-logo {
        width: clamp(136px, 42vw, 178px);
    }

    .brand-text {
        display: none;
    }

    .side-footer {
        grid-area: user;
        display: block;
        width: auto;
        margin: 0;
        justify-self: end;
    }

    .user-menu {
        width: auto;
    }

    .user-menu-trigger {
        display: inline-grid;
        grid-template-columns: auto auto;
        width: auto;
        min-width: 0;
        max-width: none;
        min-height: 44px;
        padding: 5px 9px 5px 5px;
        gap: 6px;
        border-color: rgba(255, 255, 255, .14);
        border-radius: 14px;
        background: rgba(255, 255, 255, .075);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .user-avatar {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 14px;
    }

    .user-menu-copy {
        display: none;
    }

    .user-menu-trigger > svg {
        width: 16px;
        height: 16px;
    }

    .user-menu-dropdown {
        right: 0;
        left: auto;
        width: min(calc(100vw - 28px), 330px);
        margin-top: 4px;
        border-radius: 14px;
    }

    .user-menu-dropdown::before {
        right: 18px;
        left: auto;
    }

    .sidebar nav {
        grid-area: nav;
        display: flex;
        width: calc(100vw - 28px);
        max-width: calc(100vw - 28px);
        min-width: 0;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sidebar nav::-webkit-scrollbar {
        display: none;
    }

    .sidebar nav a {
        flex: 0 0 auto;
        min-width: 82px;
        min-height: 48px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        padding: 7px 10px;
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: 15px;
        background: rgba(255, 255, 255, .045);
        color: rgba(229, 246, 250, .68);
        font-size: 10px;
        font-weight: 850;
        line-height: 1.05;
        scroll-snap-align: start;
    }

    .sidebar nav a svg {
        width: 17px;
        height: 17px;
    }

    .sidebar nav a span {
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar nav a.active {
        border-color: rgba(118, 230, 238, .38);
        background:
            linear-gradient(135deg, rgba(20, 184, 196, .24), rgba(255, 255, 255, .07));
        color: #ffffff;
        box-shadow: 0 10px 24px rgba(20, 184, 196, .12), inset 0 1px 0 rgba(255, 255, 255, .1);
    }

    .content {
        width: 100%;
        max-width: 100vw;
        padding: 14px;
    }

    .route-dashboard .cockpit-hero {
        margin-top: 0;
    }
}

@media (max-width: 390px) {
    .sidebar nav a {
        min-width: 76px;
        padding-inline: 8px;
    }

    .brand-logo-frame,
    .brand-logo {
        width: 132px;
    }
}

/* PWA top navigation fix: icon rail with one expanded active command. */
@media (max-width: 760px) {
    .sidebar {
        position: sticky;
        top: 0;
        z-index: 90;
        gap: 10px 10px;
        padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
        border-radius: 0 0 18px 18px;
        box-shadow: 0 14px 34px rgba(3, 18, 28, .22);
    }

    .brand-logo-frame {
        width: clamp(116px, 34vw, 150px);
        height: 36px;
    }

    .brand-logo {
        width: clamp(116px, 34vw, 150px);
    }

    .user-menu-trigger {
        min-height: 38px;
        padding: 4px 8px 4px 4px;
        border-radius: 12px;
    }

    .user-avatar {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 13px;
    }

    .sidebar nav {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        gap: 6px;
        padding: 6px;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 17px;
        background: rgba(255, 255, 255, .045);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    .sidebar nav a {
        width: 46px;
        min-width: 46px;
        min-height: 42px;
        height: 42px;
        flex-direction: row;
        justify-content: center;
        gap: 7px;
        padding: 0;
        border-radius: 13px;
        font-size: 11px;
    }

    .sidebar nav a svg {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
    }

    .sidebar nav a span {
        display: none;
        max-width: 0;
    }

    .sidebar nav a.active {
        width: auto;
        min-width: 112px;
        padding: 0 12px;
        justify-content: flex-start;
    }

    .sidebar nav a.active span {
        display: block;
        max-width: 82px;
    }

    .content {
        padding-top: 12px;
    }
}

@media (display-mode: standalone) and (max-width: 760px) {
    .sidebar {
        padding-top: calc(env(safe-area-inset-top) + 8px);
    }
}

/* PWA fixed header: keep top navigation visible on the start page while scrolling. */
@media (max-width: 760px) {
    :root {
        --pwa-header-height: 132px;
    }

    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 999;
        transform: translateZ(0);
        will-change: transform;
    }

    .content {
        padding-top: calc(var(--pwa-header-height) + env(safe-area-inset-top));
    }

    .user-menu-dropdown {
        position: fixed;
        top: calc(var(--pwa-header-height) - 8px + env(safe-area-inset-top));
        right: 12px;
        left: auto;
    }
}

@media (display-mode: standalone) and (max-width: 760px) {
    .content {
        padding-top: calc(var(--pwa-header-height) + env(safe-area-inset-top));
    }
}

@media (max-width: 390px) {
    :root {
        --pwa-header-height: 132px;
    }
}

/* Premium web login */
.login-body {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    place-items: center;
    padding: clamp(18px, 3vw, 42px);
    color: #f3fbff;
    background:
        radial-gradient(circle at 14% 12%, rgba(118, 230, 238, .22), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(238, 107, 94, .18), transparent 30%),
        linear-gradient(135deg, #04101a 0%, #071923 48%, #132634 100%);
}

.login-body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 52%, rgba(118, 230, 238, .12) 52% 53%, transparent 53%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: auto, 96px 96px, 96px 96px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .92), transparent 88%);
}

.login-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 460px);
    gap: clamp(22px, 5vw, 76px);
    align-items: center;
    width: min(100%, 1180px);
}

.login-stage {
    display: grid;
    gap: clamp(26px, 4vw, 46px);
    min-width: 0;
}

.login-stage-mark img {
    width: min(330px, 72vw);
    height: auto;
}

.login-stage span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 18px;
    padding: 8px 11px;
    border: 1px solid rgba(118, 230, 238, .22);
    border-radius: 999px;
    background: rgba(118, 230, 238, .08);
    color: #8cf7ff;
    font-size: 12px;
    font-weight: 920;
    text-transform: uppercase;
}

.login-stage h1 {
    max-width: 780px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(54px, 8vw, 118px);
    font-weight: 950;
    line-height: .88;
    letter-spacing: 0;
}

.login-stage p {
    max-width: 610px;
    margin: 22px 0 0;
    color: rgba(235, 252, 255, .72);
    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 720;
    line-height: 1.5;
}

.login-signal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 680px;
}

.login-signal-grid div {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    backdrop-filter: blur(18px);
}

.login-signal-grid strong {
    display: block;
    color: #ffffff;
    font-size: 22px;
    font-weight: 940;
}

.login-signal-grid small {
    display: block;
    margin-top: 5px;
    color: rgba(235, 252, 255, .62);
    font-size: 12px;
    font-weight: 780;
}

.login-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 42px);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 252, 253, .84)),
        rgba(255, 255, 255, .88);
    box-shadow: 0 36px 110px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .9);
    color: var(--text);
    backdrop-filter: blur(24px);
}

.login-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #76e6ee, #18c8d7, #f4a62a, #ee6b5e);
}

.login-brand {
    gap: 12px;
}

.login-brand img {
    width: min(260px, 100%);
}

.login-brand span {
    color: #0694a4;
    letter-spacing: 0;
}

.login-panel h1 {
    margin: 28px 0 8px;
    color: #07131d;
    font-size: clamp(36px, 4vw, 58px);
    font-weight: 940;
    line-height: .96;
    letter-spacing: 0;
}

.login-panel p {
    margin: 0 0 24px;
    color: #627482;
    font-size: 16px;
    font-weight: 720;
    line-height: 1.45;
}

.login-panel .form-stack {
    gap: 15px;
}

.login-panel label {
    display: grid;
    gap: 7px;
    color: #213744;
    font-size: 13px;
    font-weight: 900;
}

.login-panel input {
    width: 100%;
    min-height: 50px;
    padding: 13px 14px;
    border: 1px solid rgba(156, 188, 202, .58);
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
    color: #07131d;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.login-panel input:focus {
    border-color: rgba(20, 184, 196, .68);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(20, 184, 196, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.login-panel .primary-button {
    min-height: 52px;
    margin-top: 3px;
    border-radius: 10px;
    background: linear-gradient(135deg, #76e6ee 0%, #18c8d7 48%, #0ea5b8 100%);
    color: #06131d;
    box-shadow: 0 18px 36px rgba(20, 184, 196, .26);
}

.login-panel .primary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(20, 184, 196, .32);
}

.login-panel .flash {
    border: 1px solid rgba(34, 197, 94, .22);
    background: rgba(220, 252, 231, .86);
}

.login-panel .flash.error {
    border-color: rgba(238, 107, 94, .24);
    background: rgba(254, 226, 226, .9);
}

.login-hints {
    margin-top: 22px;
    padding: 14px;
    border: 1px solid rgba(156, 188, 202, .32);
    border-radius: 10px;
    background: rgba(255, 255, 255, .54);
}

.login-hints strong {
    color: #07131d;
}

@media (max-width: 920px) {
    .login-shell {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .login-stage {
        text-align: left;
    }

    .login-stage h1 {
        font-size: clamp(44px, 13vw, 72px);
    }

    .login-signal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .login-body {
        align-items: start;
        padding: max(18px, env(safe-area-inset-top)) 16px 24px;
    }

    .login-stage {
        gap: 18px;
    }

    .login-stage-mark img {
        width: 188px;
    }

    .login-stage span {
        margin-bottom: 12px;
    }

    .login-stage p,
    .login-signal-grid {
        display: none;
    }

    .login-panel {
        padding: 25px 20px 22px;
    }
}

/* Final login contrast fix: override global light theme background. */
body.login-body,
:root[data-theme="light"] body.login-body {
    background:
        radial-gradient(circle at 16% 8%, rgba(118, 230, 238, .18), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(238, 107, 94, .16), transparent 32%),
        linear-gradient(135deg, #04101a 0%, #071923 52%, #102432 100%);
}

.login-shell {
    grid-template-columns: minmax(500px, 1fr) minmax(390px, 460px);
    gap: clamp(22px, 3.5vw, 52px);
    width: min(100%, 1260px);
}

.login-stage {
    min-height: min(640px, calc(100vh - 84px));
    align-content: space-between;
    padding: clamp(30px, 4vw, 54px);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(3, 14, 23, .96), rgba(10, 40, 54, .88)),
        linear-gradient(135deg, rgba(20, 184, 196, .18), rgba(238, 107, 94, .12));
    box-shadow: 0 34px 100px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
    overflow: hidden;
}

.login-stage-mark img {
    width: min(280px, 56vw);
}

.login-stage h1 {
    max-width: 620px;
    font-size: clamp(48px, 5.5vw, 82px);
    line-height: .91;
}

.login-stage p {
    max-width: 560px;
    color: rgba(235, 252, 255, .78);
}

.login-signal-grid div {
    border-color: rgba(118, 230, 238, .18);
    background: rgba(255, 255, 255, .075);
}

.login-signal-grid small {
    color: rgba(235, 252, 255, .72);
}

.login-panel {
    align-self: center;
}

@media (max-width: 1040px) {
    .login-shell {
        grid-template-columns: 1fr;
        width: min(100%, 620px);
    }

    .login-stage {
        min-height: auto;
    }
}

@media (max-width: 620px) {
    .login-body,
    :root[data-theme="light"] body.login-body {
        display: block;
        padding: max(14px, env(safe-area-inset-top)) 16px 22px;
    }

    .login-shell {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .login-stage {
        width: 100%;
        max-width: 100%;
        padding: 20px;
        border-radius: 16px;
        gap: 14px;
    }

    .login-stage-mark img {
        width: min(210px, 82vw);
    }

    .login-stage h1 {
        font-size: clamp(32px, 9.2vw, 38px);
        line-height: .95;
    }

    .login-panel {
        width: 100%;
        max-width: 100%;
        padding: 24px 20px 22px;
    }

    .login-brand img {
        width: min(220px, 100%);
    }

    .login-panel h1 {
        font-size: clamp(32px, 9.4vw, 38px);
        line-height: 1;
    }
}

.two-factor-panel p strong {
    color: #0a7280;
    font-weight: 900;
}

.two-factor-status-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-top: 28px;
    border: 1px solid rgba(20, 184, 196, .28);
    border-radius: 50%;
    background: rgba(20, 184, 196, .1);
    color: #078899;
    font-size: 22px;
    font-weight: 950;
}

.two-factor-panel h1 {
    margin-top: 18px;
}

.login-panel .two-factor-code {
    min-height: 64px;
    font-size: 30px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-align: center;
}

.two-factor-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
}

.two-factor-actions form,
.two-factor-actions button {
    width: 100%;
}

.two-factor-actions .secondary-button {
    min-height: 46px;
    border: 1px solid rgba(20, 184, 196, .24);
    border-radius: 10px;
    background: rgba(20, 184, 196, .1);
    color: #075d67;
    font-weight: 900;
}

.two-factor-actions .text-button {
    min-height: 42px;
    border: 0;
    background: transparent;
    color: #637783;
    cursor: pointer;
    font-size: 13px;
    font-weight: 850;
}

.two-factor-actions .text-button:hover {
    color: #0a7280;
}

@media (max-width: 620px) {
    .two-factor-status-icon {
        margin-top: 22px;
    }

    .login-panel .two-factor-code {
        min-height: 58px;
        font-size: 27px;
    }
}

/* Management controlling */
.sanierung-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 22px;
}

.sanierung-kpi-strip .metric-card {
    min-height: 128px;
}

.ordio-control-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    margin-bottom: 18px;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 10%, rgba(118, 230, 238, .18), transparent 34%),
        linear-gradient(135deg, #06131d 0%, #102c38 64%, #1a3440 100%);
    color: #f5fcff;
    box-shadow: 0 24px 70px rgba(1, 19, 28, .24);
}

.ordio-control-hero.yellow {
    background:
        radial-gradient(circle at 8% 10%, rgba(244, 166, 42, .22), transparent 34%),
        linear-gradient(135deg, #10160f 0%, #27311f 58%, #3a3222 100%);
}

.ordio-control-hero.red {
    background:
        radial-gradient(circle at 8% 10%, rgba(238, 107, 94, .22), transparent 34%),
        linear-gradient(135deg, #160d12 0%, #331b22 58%, #412526 100%);
}

.ordio-control-hero span {
    display: block;
    margin-bottom: 10px;
    color: rgba(235, 252, 255, .68);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.ordio-control-hero h2 {
    max-width: 820px;
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 5vw, 68px);
    line-height: .96;
    letter-spacing: 0;
}

.ordio-control-hero p {
    max-width: 720px;
    margin: 16px 0 0;
    color: rgba(235, 252, 255, .78);
    font-size: 17px;
    font-weight: 760;
}

.ordio-control-hero > strong {
    color: #8cf7ff;
    font-size: clamp(52px, 8vw, 112px);
    line-height: .82;
    letter-spacing: 0;
}

.ordio-kpis {
    margin-bottom: 18px;
}

.ordio-entry-panel textarea {
    min-height: 126px;
}

.sensitive-cost-note {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(246, 169, 47, .32);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 250, 235, .92), rgba(255, 255, 255, .84)),
        radial-gradient(circle at 0% 0%, rgba(246, 169, 47, .16), transparent 38%);
    box-shadow: var(--shadow-soft);
}

.sensitive-cost-note strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 950;
}

.sensitive-cost-note p,
.management-manager-card p,
.management-manager-card small {
    margin: 0;
    color: var(--muted);
    font-weight: 760;
    line-height: 1.45;
}

.management-cost-form {
    display: grid;
    gap: 18px;
}

.management-manager-card {
    display: grid;
    gap: 18px;
}

.management-manager-details {
    padding: 0;
    overflow: hidden;
}

.management-manager-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 96px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    transition: background .18s ease, box-shadow .18s ease;
}

.management-manager-summary::-webkit-details-marker {
    display: none;
}

.management-manager-summary:hover {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(237, 251, 253, .7)),
        radial-gradient(circle at 100% 0%, rgba(60, 232, 239, .12), transparent 34%);
}

.management-manager-summary span {
    display: inline-flex;
    margin-bottom: 5px;
    color: var(--aqua);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.management-manager-summary h2 {
    margin: 0;
    font-size: clamp(21px, 2vw, 28px);
    line-height: 1;
}

.management-manager-summary strong {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 10px 13px;
    border: 1px solid rgba(20, 184, 198, .28);
    border-radius: 999px;
    color: var(--text);
    background: rgba(237, 251, 253, .78);
    font-size: 12px;
    font-weight: 950;
}

.management-manager-summary strong::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}

.management-manager-details[open] .management-manager-summary {
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(237, 251, 253, .72)),
        radial-gradient(circle at 100% 0%, rgba(60, 232, 239, .16), transparent 36%);
}

.management-manager-details[open] .management-manager-summary strong::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.management-manager-body {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.management-manager-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.management-manager-head span {
    display: inline-flex;
    margin-bottom: 5px;
    color: var(--aqua);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.management-manager-head h2 {
    margin: 0;
    font-size: clamp(24px, 2.3vw, 34px);
    line-height: 1;
}

.management-subgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 18px;
}

.management-subgrid > div {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.management-subgrid h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 950;
}

.management-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.management-info-tooltip {
    justify-self: end;
}

.allocation-grid,
.seasonality-grid {
    display: grid;
    gap: 8px;
}

.allocation-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.seasonality-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.allocation-grid label,
.seasonality-grid label {
    min-width: 0;
    border-color: rgba(185, 208, 218, .62);
    background: rgba(255, 255, 255, .72);
}

.allocation-grid label {
    border-top: 3px solid var(--area);
}

.allocation-grid label.is-admin-allocation {
    background:
        linear-gradient(145deg, rgba(248, 250, 252, .96), rgba(255, 255, 255, .78)),
        linear-gradient(120deg, rgba(100, 116, 139, .12), transparent 54%);
}

.allocation-grid input,
.seasonality-grid input {
    min-width: 0;
}

.management-manager-card textarea {
    min-height: 86px;
}

.checkbox-field.danger {
    border-color: rgba(238, 107, 94, .34);
    color: var(--coral);
}

.management-report-panel {
    margin-bottom: 18px;
    border-color: rgba(246, 169, 47, .28);
}

.management-admin-hint {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(100, 116, 139, .22);
    border-radius: 12px;
    background: rgba(248, 250, 252, .76);
}

.management-admin-hint strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 950;
}

.management-admin-hint p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 780;
}

.management-report-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.management-area-costs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.management-area-costs article {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid rgba(185, 208, 218, .62);
    border-top: 3px solid var(--area);
    border-radius: 12px;
    background: rgba(255, 255, 255, .76);
}

.management-area-costs span,
.management-cost-details summary {
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.management-area-costs strong {
    display: block;
    margin-top: 5px;
    color: var(--text);
    font-size: 22px;
}

.management-cost-details {
    margin-top: 14px;
}

.checkbox-field {
    align-content: center;
    grid-template-columns: auto 1fr;
    min-height: 54px;
}

.checkbox-field input {
    width: 18px;
    height: 18px;
}

.ordio-side-panel {
    border-color: rgba(20, 184, 196, .2);
}

.ordio-side-panel.yellow {
    border-color: rgba(244, 166, 42, .34);
}

.ordio-side-panel.red {
    border-color: rgba(238, 107, 94, .34);
}

.ordio-side-panel p {
    margin: 12px 0 0;
    color: var(--muted);
    font-weight: 760;
    line-height: 1.45;
}

.ordio-trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: 10px;
    align-items: end;
}

.ordio-trend-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
}

.ordio-trend-day {
    display: grid;
    gap: 7px;
    justify-items: center;
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}

.ordio-trend-day.green {
    border-color: rgba(40, 180, 99, .3);
}

.ordio-trend-day.yellow {
    border-color: rgba(244, 166, 42, .36);
}

.ordio-trend-day.red {
    border-color: rgba(238, 107, 94, .36);
}

.ordio-trend-day strong,
.ordio-trend-day small {
    max-width: 100%;
    color: var(--text);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}

.ordio-stack {
    position: relative;
    display: flex;
    align-items: end;
    gap: 3px;
    width: 100%;
    max-width: 54px;
    height: 92px;
    padding: 5px;
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(7, 19, 29, .06), rgba(7, 19, 29, .02));
}

.ordio-stack span {
    display: block;
    flex: 1;
    min-height: 2px;
    border-radius: 999px 999px 3px 3px;
}

.ordio-stack .area {
    background: linear-gradient(180deg, #76e6ee, #14b8c4);
}

.ordio-stack .overhead {
    background: linear-gradient(180deg, #ffd37a, #f4a62a);
}

.ordio-stack .open {
    background: linear-gradient(180deg, #ff9b8f, #ee6b5e);
}

@media (max-width: 1180px) {
    .sanierung-kpi-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .management-subgrid,
    .management-report-grid,
    .management-area-costs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .sanierung-kpi-strip {
        grid-template-columns: 1fr;
    }

    .management-manager-head,
    .management-subgrid,
    .allocation-grid,
    .seasonality-grid,
    .management-report-grid,
    .management-area-costs {
        grid-template-columns: 1fr;
    }

    .management-manager-head {
        display: grid;
    }

    .management-manager-summary {
        display: grid;
        min-height: 0;
    }

    .management-manager-summary strong {
        justify-self: start;
    }

    .management-manager-body {
        padding: 18px;
    }

    .ordio-control-hero {
        grid-template-columns: 1fr;
    }

    .ordio-control-hero > strong {
        font-size: 60px;
    }
}

/* Learning engine: transparent model evidence instead of another KPI card row. */
.route-dashboard .learning-command-center {
    position: relative;
    overflow: hidden;
    margin-top: 24px;
    padding: 28px;
    color: #eaf8fb;
    border-color: rgba(116, 228, 235, .18);
    background:
        linear-gradient(135deg, rgba(8, 28, 39, .98), rgba(14, 43, 55, .96) 62%, rgba(25, 35, 49, .98));
    box-shadow: 0 26px 70px rgba(5, 22, 31, .22);
}

.route-dashboard .learning-command-center::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #6ce7ee, #14b8c4 55%, #f4a62a);
}

.learning-command-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(220, 245, 248, .12);
}

.learning-command-head > div:first-child {
    max-width: 780px;
}

.learning-command-head > div > span,
.learning-subhead span,
.learning-insight > span {
    color: #70e5ec;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.learning-command-head h2 {
    margin: 7px 0 8px;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.02;
}

.learning-command-head p {
    max-width: 720px;
    margin: 0;
    color: rgba(225, 244, 248, .7);
    font-size: 14px;
    font-weight: 680;
    line-height: 1.55;
}

.learning-health {
    display: grid;
    min-width: 190px;
    gap: 3px;
    padding: 15px 17px;
    border: 1px solid rgba(108, 231, 238, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
}

.learning-health.yellow { border-color: rgba(244, 166, 42, .32); }
.learning-health.red { border-color: rgba(238, 107, 94, .34); }
.learning-health.green { border-color: rgba(40, 180, 99, .32); }

.learning-health small,
.learning-health span {
    color: rgba(225, 244, 248, .65);
    font-size: 11px;
    font-weight: 780;
}

.learning-health strong {
    color: #ffffff;
    font-size: 31px;
    line-height: 1;
}

.learning-command-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .78fr);
    gap: 28px;
    padding-top: 24px;
}

.deviation-explainer,
.learning-feed {
    min-width: 0;
}

.learning-feed {
    padding-left: 28px;
    border-left: 1px solid rgba(220, 245, 248, .12);
}

.learning-subhead {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    margin-bottom: 14px;
}

.learning-subhead h3 {
    margin: 4px 0 0;
    color: #ffffff;
    font-size: 18px;
}

.learning-subhead > small {
    color: rgba(225, 244, 248, .52);
    font-size: 11px;
    font-weight: 750;
    text-align: right;
}

.deviation-list,
.learning-feed {
    display: grid;
    gap: 10px;
}

.deviation-row {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid rgba(220, 245, 248, .11);
    border-left: 3px solid var(--area);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.deviation-row:hover {
    transform: translateY(-1px);
    border-color: rgba(220, 245, 248, .2);
    background: rgba(255, 255, 255, .07);
}

.deviation-result {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.deviation-result > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.deviation-result span {
    color: rgba(225, 244, 248, .64);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.deviation-result strong {
    color: #ffffff;
    font-size: 22px;
}

.deviation-delta {
    font-size: 13px;
    font-weight: 950;
}

.deviation-delta.positive { color: #76e6a7; }
.deviation-delta.negative { color: #ff9b90; }

.deviation-row > p {
    margin: 7px 0 12px;
    color: rgba(225, 244, 248, .72);
    font-size: 12px;
    font-weight: 720;
    line-height: 1.45;
}

.deviation-factors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.deviation-factors > span {
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 8px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .055);
}

.deviation-factors small {
    overflow: hidden;
    color: rgba(225, 244, 248, .54);
    font-size: 9px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deviation-factors strong {
    color: #eefbff;
    font-size: 12px;
    white-space: nowrap;
}

.deviation-factors .positive strong { color: #76e6a7; }
.deviation-factors .negative strong { color: #ffaaa1; }

.learning-insight {
    display: grid;
    gap: 6px;
    padding: 14px 15px;
    border: 1px solid rgba(220, 245, 248, .11);
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
}

.learning-insight.green { border-left: 3px solid #28b463; }
.learning-insight.yellow { border-left: 3px solid #f4a62a; }
.learning-insight.red { border-left: 3px solid #ee6b5e; }
.learning-insight.blue { border-left: 3px solid #5d9dff; }

.learning-insight > strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.25;
}

.learning-insight p {
    margin: 0;
    color: rgba(225, 244, 248, .7);
    font-size: 12px;
    font-weight: 690;
    line-height: 1.45;
}

.learning-insight > small {
    color: rgba(112, 229, 236, .8);
    font-size: 10px;
    font-weight: 850;
}

.feedback-learning-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(220, 245, 248, .12);
}

.feedback-learning-status > div {
    display: grid;
}

.feedback-learning-status strong {
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
}

.feedback-learning-status span,
.feedback-learning-status p {
    color: rgba(225, 244, 248, .58);
    font-size: 10px;
    font-weight: 750;
}

.feedback-learning-status p {
    margin: 0;
    line-height: 1.4;
}

.learning-empty-state {
    padding: 22px;
    border: 1px dashed rgba(112, 229, 236, .25);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.learning-empty-state strong { color: #ffffff; }
.learning-empty-state p { margin: 6px 0 0; color: rgba(225, 244, 248, .65); line-height: 1.5; }

.action-checklist article {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}

.action-checklist article.yellow > span {
    background: rgba(245, 166, 42, .18);
    color: var(--amber);
}

.action-checklist article.red > span {
    background: rgba(239, 111, 97, .18);
    color: var(--coral);
}

.action-checklist article form {
    grid-column: 2;
}

.action-checklist article form button {
    padding: 6px 9px;
    border: 1px solid rgba(20, 184, 196, .24);
    border-radius: 6px;
    color: #0f7580;
    background: rgba(20, 184, 196, .08);
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.action-checklist article.implemented {
    border-color: rgba(40, 180, 99, .32);
    background: rgba(40, 180, 99, .08);
}

.action-checklist article.implemented form button {
    color: #197942;
    border-color: rgba(40, 180, 99, .32);
    background: rgba(40, 180, 99, .12);
}

@media (max-width: 1120px) {
    .learning-command-grid {
        grid-template-columns: 1fr;
    }

    .learning-feed {
        padding: 24px 0 0;
        border-top: 1px solid rgba(220, 245, 248, .12);
        border-left: 0;
    }
}

@media (max-width: 720px) {
    .route-dashboard .learning-command-center {
        padding: 21px 18px;
    }

    .learning-command-head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .learning-health {
        width: 100%;
        min-width: 0;
    }

    .learning-subhead {
        display: grid;
        align-items: start;
    }

    .learning-subhead > small {
        text-align: left;
    }

    .deviation-result > div:first-child {
        display: grid;
        gap: 2px;
    }

    .deviation-factors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Event route contrast guard: keep the global cockpit grid behind form content. */
.route-event-dashboard .app-shell::before,
.route-event-edit .app-shell::before,
.route-event-new .app-shell::before,
.route-event-settings .app-shell::before {
    display: none;
}

.route-event-dashboard .event-control-header h1,
.route-event-edit .event-form-header h1,
.route-event-new .event-form-header h1,
.route-event-settings .page-header h1 {
    color: #f1fbfd;
}

.route-event-dashboard .event-control-header p,
.route-event-edit .event-form-header p,
.route-event-new .event-form-header p,
.route-event-settings .page-header p {
    color: rgba(225, 244, 248, .68);
}

.route-event-edit .event-form-section,
.route-event-new .event-form-section,
.route-event-settings .event-settings-section {
    position: relative;
    z-index: 1;
}

@media (min-width: 1180px) {
    body:not(.route-dashboard) .side-footer .user-menu-dropdown {
        top: auto;
        bottom: calc(100% + 10px);
        transform: translateY(6px);
    }

    body:not(.route-dashboard) .side-footer .user-menu.open .user-menu-dropdown {
        transform: translateY(0);
    }

    body:not(.route-dashboard) .side-footer .user-menu-dropdown::before {
        top: auto;
        bottom: -6px;
        border-top: 0;
        border-right: 1px solid rgba(217, 231, 236, .9);
        border-bottom: 1px solid rgba(217, 231, 236, .9);
        border-left: 0;
    }
}

/* Event Controlling polish: stable long-page canvas and explicit contrast. */
@media (min-width: 761px) {
    :root[data-theme="light"] body.route-event-dashboard,
    body.route-event-dashboard {
        background-color: #07151f;
        background-image:
            linear-gradient(118deg, rgba(20, 184, 196, .1), transparent 34%),
            linear-gradient(242deg, rgba(238, 107, 94, .06), transparent 30%),
            linear-gradient(180deg, #07151f 0%, #0a1c27 100%);
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
}

@media (min-width: 1180px) {
    body.route-event-dashboard .app-shell {
        min-height: 100vh;
        background: transparent;
    }
}

:root[data-theme="light"] body.route-event-dashboard .event-control-header h1,
body.route-event-dashboard .event-control-header h1 {
    color: #f2fbfd;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .2);
}

:root[data-theme="light"] body.route-event-dashboard .event-control-header p,
body.route-event-dashboard .event-control-header p {
    color: rgba(222, 241, 246, .68);
}

body.route-event-dashboard .event-control-header .section-kicker {
    color: #66dce4;
}

body.route-event-dashboard .event-control-header .secondary-button {
    border-color: rgba(102, 220, 228, .25);
    color: #dff9fb;
    background: rgba(20, 184, 196, .1);
}

body.route-event-dashboard .event-control-header .secondary-button:hover {
    border-color: rgba(102, 220, 228, .42);
    background: rgba(20, 184, 196, .17);
}

body.route-event-dashboard .event-kpi-rail strong {
    font-size: clamp(19px, 1.9vw, 28px);
    white-space: nowrap;
}

body.route-event-dashboard .event-insight-grid {
    align-items: stretch;
}

body.route-event-dashboard .event-insight-grid > .panel {
    min-height: 100%;
}

body.route-event-dashboard .event-steering-note.panel {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    overflow: hidden;
    padding: clamp(24px, 3vw, 38px);
    border-color: rgba(100, 220, 228, .2);
    color: #e8f9fc;
    background:
        linear-gradient(145deg, rgba(20, 184, 196, .14), transparent 48%),
        linear-gradient(180deg, #102a36 0%, #0b222e 100%);
    box-shadow: 0 20px 54px rgba(1, 17, 26, .22);
}

body.route-event-dashboard .event-steering-note.panel::after {
    position: absolute;
    top: -18%;
    right: 16%;
    z-index: -1;
    width: 1px;
    height: 145%;
    background: rgba(112, 226, 232, .2);
    transform: rotate(18deg);
    content: "";
}

body.route-event-dashboard .event-steering-note > span {
    color: #65dce4;
}

body.route-event-dashboard .event-steering-note h2 {
    max-width: 14ch;
    color: #ffffff;
    line-height: 1.08;
}

body.route-event-dashboard .event-steering-note p {
    max-width: 38ch;
    color: rgba(232, 249, 252, .72);
}

body.route-event-dashboard .event-location-bars i {
    background: #e7f0f3;
}

body.route-event-dashboard .event-control-table tbody tr {
    transition: background-color .16s ease;
}

body.route-event-dashboard .event-control-table tbody tr:hover {
    background: rgba(20, 184, 196, .045);
}

@media (max-width: 1180px) {
    body.route-event-dashboard .event-kpi-rail strong {
        white-space: normal;
    }
}