:root {
    color-scheme: light;
    --ow-font-sans: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --default-font-family: var(--ow-font-sans);
    --ow-accent: #D6FF14;
    --ow-accent-hover: #C8F000;
    --ow-accent-pressed: #B5E600;
    --ow-bg: #FFFFFF;
    --ow-surface: #F8F8F8;
    --ow-elevated: #FFFFFF;
    --ow-hover: #F2F2F2;
    --ow-selected: #EEEEEE;
    --ow-text: #000000;
    --ow-text-secondary: rgba(0,0,0,0.70);
    --ow-text-muted: rgba(0,0,0,0.50);
    --ow-text-disabled: rgba(0,0,0,0.30);
    --ow-border: rgba(0,0,0,0.08);
    --ow-card-border: rgba(0,0,0,0.06);
    --ow-focus-ring: 0 0 0 4px rgba(214,255,20,0.15);
    --ow-elevation-soft: 0 8px 32px rgba(0,0,0,0.10);
    --ow-radius-input: 12px;
    --ow-radius-card: 16px;
    --ow-space-1: 4px;
    --ow-space-2: 8px;
    --ow-space-3: 12px;
    --ow-space-4: 16px;
    --ow-space-5: 24px;
    --ow-space-6: 32px;
    --ow-space-7: 48px;
    --ow-space-8: 64px;

    /* Reusable premium type, semantic, and surface tokens. These are opt-in so
       page rollout can happen after the Dashboard visual validation. */
    --ow-type-display-size: 40px;
    --ow-type-display-weight: 300;
    --ow-type-display-line: 1.12;
    --ow-type-h1-size: 32px;
    --ow-type-h1-weight: 300;
    --ow-type-h1-line: 1.2;
    --ow-type-h2-size: 24px;
    --ow-type-h2-weight: 500;
    --ow-type-h2-line: 1.25;
    --ow-type-h3-size: 18px;
    --ow-type-h3-weight: 500;
    --ow-type-h3-line: 1.35;
    --ow-type-body-size: 14px;
    --ow-type-body-weight: 400;
    --ow-type-body-line: 1.6;
    --ow-type-caption-size: 12px;
    --ow-type-caption-weight: 500;
    --ow-type-caption-line: 1.45;
    --ow-color-success: #16845b;
    --ow-color-warning: #a66308;
    --ow-color-critical: #c53b42;
    --ow-card-padding: var(--ow-space-5);
    --ow-card-radius: 18px;
    --ow-card-border-premium: rgba(15, 23, 42, 0.09);
    --ow-card-shadow-premium: 0 10px 30px rgba(15, 23, 42, 0.07);
}

html[data-theme-mode="dark"],
html[data-header-styles="dark"],
html[data-menu-styles="dark"] {
    color-scheme: dark;
}

html[data-theme-mode="dark"] {
    --ow-bg: #000000;
    --ow-surface: #0A0A0A;
    --ow-elevated: #121212;
    --ow-hover: #181818;
    --ow-selected: #1E1E1E;
    --ow-text: #FFFFFF;
    --ow-text-secondary: rgba(255,255,255,0.75);
    --ow-text-muted: rgba(255,255,255,0.50);
    --ow-text-disabled: rgba(255,255,255,0.30);
    --ow-border: rgba(255,255,255,0.08);
    --ow-card-border: rgba(255,255,255,0.05);
    --ow-elevation-soft: 0 8px 32px rgba(0,0,0,0.25);
}

html,
body,
.mud-typography,
.mud-input,
.mud-button-root,
.mud-table,
.form-control,
button,
input,
select,
textarea {
    font-family: var(--ow-font-sans) !important;
}

/* Bridge the template's later body-scoped MudBlazor variables back to the
   OrderWise font so component typography cannot fall back to system UI. */
body {
    --mud-typography-default-family: var(--ow-font-sans);
    --mud-typography-body1-family: var(--ow-font-sans);
    --mud-typography-body2-family: var(--ow-font-sans);
    --mud-typography-subtitle1-family: var(--ow-font-sans);
    --mud-typography-subtitle2-family: var(--ow-font-sans);
    --mud-typography-h1-family: var(--ow-font-sans);
    --mud-typography-h2-family: var(--ow-font-sans);
    --mud-typography-h3-family: var(--ow-font-sans);
    --mud-typography-h4-family: var(--ow-font-sans);
    --mud-typography-h5-family: var(--ow-font-sans);
    --mud-typography-h6-family: var(--ow-font-sans);
    --mud-typography-button-family: var(--ow-font-sans);
}

html,
body {
    background: var(--ow-bg) !important;
    color: var(--ow-text);
    font-size: 14px;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 92% 4%, rgba(214,255,20,0.07), transparent 26rem),
        linear-gradient(180deg, rgba(214,255,20,0.025), transparent 18rem);
    z-index: -1;
}

h1,
.main-content h1,
.main-content .h1,
.mud-typography-h1 {
    color: var(--ow-text) !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    letter-spacing: -0.02em;
    line-height: 1.2 !important;
}

h2,
.main-content h2,
.main-content .h2,
.mud-typography-h2 {
    color: var(--ow-text) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em;
    line-height: 1.25 !important;
}

.card-title,
.mud-typography-h5,
.mud-typography-h6 {
    color: var(--ow-text) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
}

.text-muted,
.op-7,
.app-page-subtitle,
.header-notification-text {
    color: var(--ow-text-muted) !important;
}

.app-page-kicker,
.form-label,
label,
.mud-input-label {
    color: var(--ow-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
}

.premium-layout-shell {
    min-height: 100dvh;
    background: var(--ow-bg);
}

.premium-content-shell {
    padding: var(--ow-space-5) var(--ow-space-4) var(--ow-space-7);
}

.premium-page-container {
    max-width: 1680px;
    margin-inline: auto;
}

.app-shell-page,
.main-content > .mud-container {
    padding-block: var(--ow-space-5) var(--ow-space-6);
}

.app-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ow-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--ow-space-6);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 101;
    background: color-mix(in srgb, var(--ow-bg) 88%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ow-border);
    box-shadow: none;
}

.main-header-container,
.header-link,
.header-country,
.main-header-profile,
.main-header-profile p,
.main-header-profile span {
    color: var(--ow-text) !important;
}

.header-link {
    border-radius: 12px;
    transition: background-color 160ms ease, color 160ms ease;
}

.header-link:hover {
    background: var(--ow-hover) !important;
}

.app-sidebar,
.main-sidebar,
.main-menu-container,
.main-sidebar-header {
    background: var(--ow-bg) !important;
    border-right: 1px solid var(--ow-border) !important;
    box-shadow: none !important;
}

/* The theme gives .main-sidebar both a full viewport height and a header
   margin, which creates overflow before the menu content needs it. Keep the
   premium sidebar within the remaining viewport; OverlayScrollbars can then
   scroll only when the menu itself is taller than the available space. */
[data-nav-layout="vertical"] .app-sidebar .main-sidebar {
    box-sizing: border-box;
    height: calc(100dvh - 4.75rem);
    margin-block-start: 4.75rem;
    min-height: 0;
    overflow: hidden;
    padding-block: var(--ow-space-2) var(--ow-space-4);
}

[data-nav-layout="vertical"] .app-sidebar .main-sidebar > .os-host,
[data-nav-layout="vertical"] .app-sidebar .main-sidebar > .os-host > .os-padding,
[data-nav-layout="vertical"] .app-sidebar .main-sidebar .os-viewport {
    height: 100%;
    min-height: 0;
}

.side-menu__item {
    position: relative;
    margin: 4px 12px;
    padding-block: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--ow-text-secondary) !important;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease;
}

/* The theme stylesheet defaults labels to a single line. Premium navigation is
   explicitly opt-in so long workflow names use the available sidebar width. */
.premium-navigation .side-menu__item {
    align-items: center;
    gap: var(--ow-space-3);
    margin: var(--ow-space-1) var(--ow-space-3);
    min-height: 44px;
    padding: var(--ow-space-3);
}

.premium-navigation .side-menu__label {
    color: currentColor;
    flex: 1 1 auto;
    font-size: var(--ow-type-body-size);
    font-weight: var(--ow-type-caption-weight);
    line-height: var(--ow-type-body-line);
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.premium-navigation .side-menu__icon {
    flex: 0 0 auto;
    margin-inline-end: 0;
}

.side-menu__item i,
.side-menu__item .side-menu__icon,
.side-menu__item svg {
    color: currentColor !important;
    opacity: 0.9;
}

.side-menu__item:hover {
    background: var(--ow-hover) !important;
    color: var(--ow-text) !important;
    transform: translateX(1px);
}

.side-menu__item.active,
.slide.active > .side-menu__item {
    background: rgba(214,255,20,0.20) !important;
    border-color: rgba(214,255,20,0.24) !important;
    color: var(--ow-text) !important;
}

html[data-theme-mode="dark"] .side-menu__item.active,
html[data-theme-mode="dark"] .slide.active > .side-menu__item {
    background: rgba(214,255,20,0.10) !important;
}

.side-menu__item.active::before,
.slide.active > .side-menu__item::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 999px;
    background: var(--ow-accent);
}

.side-menu__item.active i,
.slide.active > .side-menu__item i,
.side-menu__item.active .side-menu__icon,
.slide.active > .side-menu__item .side-menu__icon {
    color: var(--ow-accent) !important;
}

.main-menu .category-name {
    color: var(--ow-text-muted) !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 18px 20px 8px;
}

.main-content .custom-card,
.main-content .mud-card,
.authentication .custom-card,
.mud-dialog {
    background: var(--ow-elevated) !important;
    border: 1px solid var(--ow-card-border) !important;
    border-radius: var(--ow-radius-card) !important;
    box-shadow: var(--ow-elevation-soft) !important;
}

.main-content .mud-card-content,
.main-content .custom-card .mud-card-content {
    padding: var(--ow-space-5) !important;
}

.main-content .custom-card:hover,
.main-content .mud-card:hover {
    border-color: rgba(214,255,20,0.22) !important;
}

.premium-kpi-card .mud-card-content {
    padding: 24px !important;
}

.premium-kpi-card .mud-link,
.notification-link {
    color: var(--ow-text) !important;
    font-weight: 600;
}

.mud-button-root {
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.mud-button-root:hover {
    transform: translateY(-1px);
}

.mud-button-filled.mud-button-filled-primary {
    background: var(--ow-accent) !important;
    border: 0 !important;
    color: #000000 !important;
    box-shadow: none !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--ow-accent-hover) !important;
}

.mud-button-filled.mud-button-filled-primary:active {
    background: var(--ow-accent-pressed) !important;
}

.mud-button-outlined,
.mud-button-text {
    color: var(--ow-text) !important;
    border-color: var(--ow-border) !important;
}

.mud-button-outlined:hover,
.mud-button-text:hover {
    background: var(--ow-hover) !important;
}

.mud-error-text,
.mud-button-filled-error,
.mud-button-outlined-error {
    color: #DC2626 !important;
}

html[data-theme-mode="dark"] .mud-error-text,
html[data-theme-mode="dark"] .mud-button-filled-error,
html[data-theme-mode="dark"] .mud-button-outlined-error {
    color: #F87171 !important;
}

.mud-input,
.mud-input-control > .mud-input-control-input-container > .mud-input,
.form-control,
.mud-select {
    color: var(--ow-text) !important;
    background: var(--ow-elevated) !important;
    border-radius: var(--ow-radius-input) !important;
}

.mud-input-outlined-border,
.form-control {
    border-color: var(--ow-border) !important;
}

.mud-input:hover .mud-input-outlined-border,
.form-control:hover {
    border-color: rgba(214,255,20,0.55) !important;
}

.mud-input:focus-within,
.form-control:focus,
.form-check-input:focus,
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.side-menu__item:focus-visible,
a:focus-visible {
    outline: none !important;
    border-color: var(--ow-accent) !important;
    box-shadow: var(--ow-focus-ring) !important;
}

.mud-input input,
.mud-input textarea,
.mud-input-adornment,
.mud-select-input {
    color: var(--ow-text) !important;
}

.mud-table {
    background: var(--ow-elevated) !important;
    border: 1px solid var(--ow-card-border) !important;
    border-radius: var(--ow-radius-card) !important;
    box-shadow: var(--ow-elevation-soft) !important;
    overflow: auto;
}

.mud-table table {
    border-collapse: separate;
    border-spacing: 0;
}

.mud-table thead,
.mud-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.mud-table thead th {
    background: var(--ow-surface) !important;
    color: var(--ow-text-secondary) !important;
    border-bottom: 1px solid var(--ow-border) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 16px 18px !important;
}

.mud-table tbody td {
    color: var(--ow-text-secondary) !important;
    border-bottom: 1px solid var(--ow-border) !important;
    padding: 16px 18px !important;
}

.mud-table tbody tr {
    background: transparent !important;
    min-height: 56px;
    transition: background-color 160ms ease;
}

.mud-table tbody tr:hover {
    background: rgba(214,255,20,0.10) !important;
}

.mud-table tbody tr.mud-selected-row,
.mud-table tbody tr[aria-selected="true"] {
    background: rgba(214,255,20,0.10) !important;
}

.mud-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.mud-table .text-end,
.mud-table .mud-table-cell-right,
.mud-table td[data-label*="Amount"],
.mud-table td[data-label*="Total"],
.mud-table td[data-label*="Price"],
.mud-table td[data-label*="Revenue"],
.mud-table td[data-label*="Cost"],
.mud-table td[data-label*="Qty"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mud-chip,
.mud-badge {
    border-radius: 999px !important;
}

.mud-progress-linear-bar,
.mud-progress-circular-circle {
    color: var(--ow-accent) !important;
    background-color: var(--ow-accent) !important;
}

.apexcharts-canvas text,
.apexcharts-legend-text {
    fill: var(--ow-text-muted) !important;
    color: var(--ow-text-muted) !important;
    font-family: var(--ow-font-sans) !important;
}

.apexcharts-gridline,
.apexcharts-xaxis-tick,
.apexcharts-yaxis line,
.apexcharts-xaxis line {
    stroke: var(--ow-border) !important;
}

.app-surface-muted,
.dropdown-menu,
.mud-menu-paper,
.mud-popover {
    background: var(--ow-elevated) !important;
    border: 1px solid var(--ow-card-border) !important;
    border-radius: var(--ow-radius-card) !important;
    box-shadow: var(--ow-elevation-soft) !important;
    color: var(--ow-text) !important;
}

.app-empty-state,
.empty-item {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 180px;
    padding: 32px;
    text-align: center;
    color: var(--ow-text-muted) !important;
}

.app-empty-state::before,
.empty-item::before {
    content: "";
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(214,255,20,0.35);
    background: linear-gradient(135deg, rgba(214,255,20,0.18), transparent);
}

.premium-skeleton,
.mud-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--ow-hover) !important;
    border-radius: 12px !important;
}

.premium-skeleton::after,
.mud-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(214,255,20,0.16), transparent);
    animation: premium-shimmer 1.5s infinite;
}

@keyframes premium-shimmer {
    to { transform: translateX(100%); }
}

.footer {
    background: transparent !important;
    border-top: 1px solid var(--ow-border) !important;
    color: var(--ow-text-muted) !important;
}

.scrollToTop {
    right: 1.25rem !important;
    bottom: 1.15rem !important;
}

.scrollToTop .arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--ow-accent);
    color: #000000;
    box-shadow: var(--ow-elevation-soft);
}

.premium-auth-shell,
.authentication.authentication-basic {
    min-height: 100dvh;
    position: relative;
    isolation: isolate;
    animation: premium-fade-up 360ms cubic-bezier(.2,.8,.2,1);
}

.premium-auth-shell {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(214,255,20,0.10), transparent 24rem),
        #000000;
    color: #FFFFFF;
}

.premium-auth-shell .container-lg {
    width: 100%;
}

.authentication .custom-card {
    max-width: 460px;
    margin-inline: auto;
    background: #0A0A0A !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #FFFFFF !important;
}

.authentication .custom-card .mud-card-content {
    padding: 36px !important;
}

.authentication svg {
    width: 180px;
    color: #FFFFFF;
}

.authentication .mud-typography,
.authentication label,
.authentication .form-label,
.authentication .form-check-label {
    color: #FFFFFF !important;
}

.authentication .text-muted {
    color: rgba(255,255,255,0.62) !important;
}

.authentication .mud-input,
.authentication .form-control {
    background: #121212 !important;
    color: #FFFFFF !important;
}

.authentication .ow-primary-cta {
    min-height: 48px;
}

@keyframes premium-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991.98px) {
    .premium-content-shell {
        padding: var(--ow-space-4) var(--ow-space-2) var(--ow-space-6);
    }

    .main-content .mud-card-content,
    .main-content .custom-card .mud-card-content {
        padding: var(--ow-space-4) !important;
    }
}

@media (max-width: 767.98px) {
    .app-page-head {
        margin-bottom: var(--ow-space-5);
    }

    h1,
    .main-content h1,
    .main-content .h1,
    .mud-typography-h1 {
        font-size: 28px !important;
    }

    .mud-table thead th,
    .mud-table tbody td {
        white-space: nowrap;
    }

    .authentication .custom-card .mud-card-content {
        padding: 28px !important;
    }
}

/* OrderWise /app presentation hardening */
.app-shell-page .mud-card-header {
    align-items: flex-start;
    gap: var(--ow-space-3);
    padding: var(--ow-space-5) var(--ow-space-5) var(--ow-space-3) !important;
}

.app-shell-page .mud-card-header + .mud-divider + .mud-card-content,
.app-shell-page .mud-card-header + .mud-card-content {
    padding-top: var(--ow-space-4) !important;
}

.app-shell-page .mud-card-content > .mud-alert:not(:last-child),
.app-shell-page .mud-table + .mud-alert {
    margin-bottom: var(--ow-space-3);
}

.app-shell-page .mud-table th.text-end,
.app-shell-page .mud-table td.text-end,
.app-shell-page .mud-table th[data-label*="Forecast"],
.app-shell-page .mud-table td[data-label*="Forecast"],
.app-shell-page .mud-table th[data-label*="Stock"],
.app-shell-page .mud-table td[data-label*="Stock"],
.app-shell-page .mud-table th[data-label*="Qty"],
.app-shell-page .mud-table td[data-label*="Qty"],
.app-shell-page .mud-table th[data-label*="Quantity"],
.app-shell-page .mud-table td[data-label*="Quantity"],
.app-shell-page .mud-table th[data-label*="Impact"],
.app-shell-page .mud-table td[data-label*="Impact"],
.app-shell-page .mud-table th[data-label*="Confidence"],
.app-shell-page .mud-table td[data-label*="Confidence"],
.app-shell-page .mud-table th[data-label*="Cover"],
.app-shell-page .mud-table td[data-label*="Cover"],
.app-shell-page .mud-table th[data-label*="Rows"],
.app-shell-page .mud-table td[data-label*="Rows"],
.app-shell-page .mud-table th[data-label*="Value"],
.app-shell-page .mud-table td[data-label*="Value"],
.app-shell-page .mud-table th[data-label*="Revenue"],
.app-shell-page .mud-table td[data-label*="Revenue"],
.ow-numeric {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-shell-page .mud-table td,
.app-shell-page .mud-table th {
    vertical-align: middle;
}

.ow-nowrap {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.ow-truncate {
    display: block;
    max-width: min(34rem, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ow-table-identity {
    display: grid !important;
    gap: 0.15rem;
    min-width: 0;
}

.ow-table-identity > span,
.ow-table-identity > small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ow-table-identity > small {
    color: var(--ow-text-muted);
    font-size: 0.78rem;
}

.ow-metric-row,
.app-shell-page .model-row,
.app-shell-page .dashboard-metric-row,
.app-shell-page .sanity-row,
.app-shell-page .detail-row {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-width: 0;
}

.ow-metric-row > span,
.app-shell-page .model-row > div:first-child,
.app-shell-page .dashboard-metric-row > span,
.app-shell-page .sanity-row > div,
.app-shell-page .detail-row > .mud-typography:first-child {
    min-width: 0;
}

.ow-metric-row > strong,
.app-shell-page .model-row > div:last-child,
.app-shell-page .dashboard-metric-row > strong,
.app-shell-page .sanity-row > .mud-chip,
.app-shell-page .detail-row > .mud-chip {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ow-metric-inline {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
}

.ow-metric-inline strong {
    font-variant-numeric: tabular-nums;
}

.app-shell-page .mud-input-control {
    margin-top: 0;
}

.app-shell-page .mud-table .mud-chip {
    vertical-align: middle;
}

@media (max-width: 960px) {
    .app-shell-page .mud-card-header {
        padding: var(--ow-space-4) var(--ow-space-4) var(--ow-space-2) !important;
    }

    .ow-truncate {
        max-width: 68vw;
    }
}

/* Dashboard-only premium token adoption. Other pages intentionally remain on
   their current styling until this visual pilot is approved. */
.daily-planning-cockpit {
    color: var(--ow-text);
    font-size: var(--ow-type-body-size);
    line-height: var(--ow-type-body-line);
    max-width: 1680px;
    margin-inline: auto;
}

.daily-planning-cockpit .dashboard-page-head {
    margin-bottom: var(--ow-space-6);
}

.daily-planning-cockpit .dashboard-page-head .mud-typography-h4 {
    font-size: var(--ow-type-h1-size);
    font-weight: var(--ow-type-h1-weight);
    letter-spacing: -0.025em;
    line-height: var(--ow-type-h1-line);
}

.daily-planning-cockpit .dashboard-section {
    margin-bottom: var(--ow-space-8) !important;
}

.daily-planning-cockpit .section-title-row,
.daily-planning-cockpit .dashboard-stage-heading {
    margin-bottom: var(--ow-space-5);
}

.daily-planning-cockpit .section-sequence {
    color: var(--ow-text-muted);
    font-size: var(--ow-type-caption-size);
    line-height: var(--ow-type-caption-line);
    margin-bottom: var(--ow-space-2);
}

.daily-planning-cockpit .section-title-row .mud-typography-h5,
.daily-planning-cockpit .dashboard-stage-heading .mud-typography-h5 {
    font-size: var(--ow-type-h2-size) !important;
    font-weight: var(--ow-type-h2-weight) !important;
    line-height: var(--ow-type-h2-line) !important;
}

.daily-planning-cockpit .custom-card,
.daily-planning-cockpit .mud-card {
    border: 1px solid var(--ow-card-border-premium) !important;
    border-radius: var(--ow-card-radius) !important;
    box-shadow: var(--ow-card-shadow-premium) !important;
}

.daily-planning-cockpit .executive-briefing-card .mud-card-content {
    padding: var(--ow-space-7) !important;
}

.daily-planning-cockpit .briefing-greeting {
    font-size: var(--ow-type-display-size) !important;
    font-weight: var(--ow-type-display-weight) !important;
    line-height: var(--ow-type-display-line) !important;
    margin: var(--ow-space-2) 0 var(--ow-space-3) !important;
}

.briefing-state-grid {
    margin-top: var(--ow-space-6);
}

.briefing-state-grid .briefing-tile {
    gap: var(--ow-space-2);
    min-height: 12rem;
    padding: var(--ow-space-5);
}

.briefing-tile strong {
    font-size: 1.75rem;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-top: var(--ow-space-2);
}

.briefing-tile small,
.aggregate-trust-callout small,
.recommended-action-callout small,
.briefing-context-strip small {
    font-size: var(--ow-type-caption-size);
    line-height: var(--ow-type-caption-line);
}

.briefing-decision-row {
    gap: var(--ow-space-4);
    margin-top: var(--ow-space-5);
}

.recommended-action-callout,
.aggregate-trust-callout {
    gap: var(--ow-space-4);
    min-height: 9.5rem;
    padding: var(--ow-space-5);
}

.recommended-action-callout strong,
.aggregate-trust-callout strong {
    font-size: var(--ow-type-h3-size);
    line-height: var(--ow-type-h3-line);
    margin: var(--ow-space-2) 0;
}

.briefing-actions {
    margin-top: var(--ow-space-5);
}

.briefing-context-strip {
    gap: var(--ow-space-5);
    margin-top: var(--ow-space-6);
    padding-top: var(--ow-space-5);
}

.briefing-context-strip > div {
    gap: var(--ow-space-2);
    min-width: 0;
    padding-right: var(--ow-space-4);
}

.briefing-context-strip strong {
    font-size: 1.25rem;
    line-height: 1.25;
}

.briefing-explanation {
    margin-top: var(--ow-space-5);
}

.executive-kpi-grid .mud-grid-item {
    min-width: 0;
}

.daily-planning-cockpit .executive-kpi-card .mud-card-content {
    display: flex;
    flex-direction: column;
    min-height: 15rem;
    padding: var(--ow-card-padding) !important;
}

.executive-kpi-card .kpi-value {
    font-size: 1.75rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.executive-kpi-card .kpi-trend {
    font-size: var(--ow-type-caption-size);
    line-height: var(--ow-type-caption-line);
}

.executive-kpi-card .kpi-drill-link {
    margin-top: auto;
    padding-top: var(--ow-space-5);
}

.critical-actions-card .mud-card-header {
    gap: var(--ow-space-5);
    padding: var(--ow-space-6);
}

.critical-actions-card > .mud-card-content {
    padding: var(--ow-space-5) var(--ow-space-6) var(--ow-space-6) !important;
}

.executive-table .mud-table-head .mud-table-cell {
    background: var(--ow-surface);
    color: var(--ow-text-secondary);
    font-size: var(--ow-type-caption-size);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: var(--ow-type-caption-line);
    padding: var(--ow-space-4);
    white-space: nowrap;
}

.executive-table .mud-table-body .mud-table-cell {
    line-height: 1.5;
    padding: var(--ow-space-4);
}

.executive-table .mud-table-row {
    border-bottom: 1px solid var(--ow-border);
}

.supporting-intelligence {
    padding-top: var(--ow-space-7);
}

.supporting-intelligence-panels {
    gap: var(--ow-space-3);
}

.supporting-intelligence-panels .mud-expand-panel-header {
    min-height: 64px;
    padding: var(--ow-space-4) var(--ow-space-5);
    font-weight: 600;
}

/* Apex axis labels get breathing room and controlled ellipsis instead of
   colliding with adjacent labels in narrower Dashboard cards. */
.daily-planning-cockpit .apexcharts-xaxis-label,
.daily-planning-cockpit .apexcharts-yaxis-label {
    font-size: 11px;
}

@media (max-width: 960px) {
    .daily-planning-cockpit .executive-briefing-card .mud-card-content {
        padding: var(--ow-space-6) !important;
    }
}

@media (max-width: 600px) {
    .daily-planning-cockpit .dashboard-section {
        margin-bottom: var(--ow-space-7) !important;
    }

    .daily-planning-cockpit .executive-briefing-card .mud-card-content,
    .critical-actions-card .mud-card-header,
    .critical-actions-card > .mud-card-content {
        padding: var(--ow-space-5) !important;
    }
}

/* Keep Blazor's server reconnection action aligned with the OrderWise brand. */
#components-reconnect-modal button,
#components-reconnect-modal .components-reconnect-button {
    background-color: var(--ow-accent, #D6FF14) !important;
    border-color: var(--ow-accent, #D6FF14) !important;
    color: #000000 !important;
}

#components-reconnect-modal button:hover,
#components-reconnect-modal .components-reconnect-button:hover {
    background-color: var(--ow-accent-hover, #C8F000) !important;
    border-color: var(--ow-accent-hover, #C8F000) !important;
}

#components-reconnect-modal button:focus-visible,
#components-reconnect-modal .components-reconnect-button:focus-visible {
    outline: 3px solid rgba(214, 255, 20, 0.35);
    outline-offset: 2px;
}

/* Brand Blazor's built-in reconnect modal across attempting, failed, and rejected states. */
#components-reconnect-modal,
.components-reconnect-modal,
.components-reconnecting,
.components-reconnect-failed,
.components-reconnect-rejected {
    font-family: var(--ow-font-sans) !important;
    color: var(--ow-text) !important;
}

#components-reconnect-modal {
    background: var(--ow-elevated) !important;
    border: 1px solid var(--ow-card-border) !important;
    border-radius: var(--ow-radius-card) !important;
    box-shadow: var(--ow-elevation-soft) !important;
    padding: var(--ow-space-6) !important;
}

.components-reconnecting-animation {
    border-color: var(--ow-border) !important;
    border-top-color: var(--ow-accent) !important;
}

#components-reconnect-modal h5,
#components-reconnect-modal h4,
#components-reconnect-modal p,
#components-reconnect-modal .components-reconnect-current-attempt,
#components-reconnect-modal .components-reconnect-max-retries {
    color: var(--ow-text-secondary) !important;
}

#components-reconnect-modal::before {
    background: var(--ow-accent) !important;
}