/* ═══════════════════════════════════════════════════════════════════════════
   Win-Cart ERP — Global Design System Override
   Palette:  sky-blue #e8f6fc  |  deep navy #1a4a6b  |  accent #1976d2
   Strategy: MudBlazor CSS variable overrides + utility classes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Google Font import (Inter) ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── 2. Design tokens ────────────────────────────────────────────────────── */
:root {
    /* Marine palette */
    --merp-navy:          #1a4a6b;
    --merp-navy-dark:     #122f45;
    --merp-navy-mid:      #1e5580;
    --merp-accent:        #1976d2;
    --merp-accent-hover:  #1565c0;
    --merp-sky-light:     #e8f6fc;
    --merp-sky-mid:       #c5e8f5;
    --merp-sky-muted:     rgba(25, 118, 210, 0.08);

    /* Surfaces */
    --merp-surface:       #ffffff;
    --merp-surface-dim:   #f7f9fb;
    --merp-border:        #e2e8ed;
    --merp-border-light:  #eef2f5;

    /* Text */
    --merp-text-primary:  #0f2132;
    --merp-text-secondary:#4a6070;
    --merp-text-muted:    #8a9eac;

    /* Shadows — flat but present */
    --merp-shadow-xs: 0 1px 2px rgba(10, 40, 70, 0.06);
    --merp-shadow-sm: 0 2px 6px rgba(10, 40, 70, 0.08);
    --merp-shadow-md: 0 4px 12px rgba(10, 40, 70, 0.10);
    --merp-shadow-lg: 0 8px 24px rgba(10, 40, 70, 0.12);

    /* Radii */
    --merp-radius-sm: 6px;
    --merp-radius-md: 8px;
    --merp-radius-lg: 12px;

    /* Transitions */
    --merp-t-fast:   120ms ease;
    --merp-t-normal: 200ms ease;
}

/* ── 3. Picker-inside-dialog z-index fix ─────────────────────────────────── */
/*
   MudBlazor dialogs sit at z-index 1300. When a PickerVariant.Dialog picker
   opens inside a dialog, its overlay and panel render in the same stacking
   context and appear behind the parent dialog. Pushing them to 1400 ensures
   picker panels always float above any open dialog.
*/
.mud-picker-container {
    z-index: 1400 !important;
}
.mud-overlay.mud-overlay-picker {
    z-index: 1399 !important;
}

/* ── 4. MudBlazor palette overrides ─────────────────────────────────────── */
:root {
    --mud-palette-primary:                  #1976d2;
    --mud-palette-primary-darken:           #1565c0;
    --mud-palette-primary-lighten:          #42a5f5;
    --mud-palette-primary-text:             #ffffff;
    --mud-palette-secondary:                #1a4a6b;
    --mud-palette-secondary-darken:         #122f45;
    --mud-palette-secondary-text:           #ffffff;
    --mud-palette-appbar-background:        #ffffff;
    --mud-palette-appbar-text:              var(--merp-text-primary);
    --mud-palette-drawer-background:        #111111;
    --mud-palette-drawer-text:              rgba(255,255,255,0.92);
    --mud-palette-drawer-icon:              rgba(255,255,255,0.70);
    --mud-palette-background:              var(--merp-surface-dim);
    --mud-palette-background-grey:          var(--merp-surface-dim);
    --mud-palette-surface:                  #ffffff;
    --mud-palette-text-primary:             var(--merp-text-primary);
    --mud-palette-text-secondary:           var(--merp-text-secondary);
    --mud-palette-lines-default:            var(--merp-border);
    --mud-palette-lines-inputs:             #c4cdd5;
    --mud-default-borderradius:             var(--merp-radius-md);
}

/* ── 3b. Dark-mode token overrides (scoped to .merp-dark wrapper) ────────── */
/*        Redefines every design token so ALL components — MudBlazor,        */
/*        Telerik, and custom panels — inherit the dark values via cascade.   */
.merp-dark {
    /* Marine design tokens — dark versions */
    --merp-surface:            #202528;
    --merp-surface-dim:        #1b1f22;
    --merp-border:             #2e3338;
    --merp-border-light:       #262b30;
    --merp-text-primary:       rgba(255, 255, 255, 0.87);
    --merp-text-secondary:     rgba(255, 255, 255, 0.55);
    --merp-text-muted:         rgba(255, 255, 255, 0.35);
    --merp-shadow-xs:          0 1px 2px rgba(0, 0, 0, 0.35);
    --merp-shadow-sm:          0 2px 6px rgba(0, 0, 0, 0.40);
    --merp-shadow-md:          0 4px 12px rgba(0, 0, 0, 0.45);
    --merp-shadow-lg:          0 8px 24px rgba(0, 0, 0, 0.50);

    /* MudBlazor palette — dark versions */
    --mud-palette-appbar-background:     #1b1f22;
    --mud-palette-appbar-text:           rgba(255, 255, 255, 0.87);
    --mud-palette-background:            #1b1f22;
    --mud-palette-background-grey:       #27272f;
    --mud-palette-surface:               #202528;
    --mud-palette-text-primary:          rgba(255, 255, 255, 0.87);
    --mud-palette-text-secondary:        rgba(255, 255, 255, 0.55);
    --mud-palette-text-disabled:         rgba(255, 255, 255, 0.30);
    --mud-palette-lines-default:         #2e3338;
    --mud-palette-lines-inputs:          #3a4048;
    --mud-palette-divider:               #2e3338;
    --mud-palette-divider-light:         #262b30;
    --mud-palette-action-default:        rgba(255, 255, 255, 0.70);
    --mud-palette-action-disabled:       rgba(255, 255, 255, 0.26);
    --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.10);
    --mud-palette-overlay-dark:          rgba(0, 0, 0, 0.75);
    --mud-palette-table-striped:         rgba(255, 255, 255, 0.04);
    --mud-palette-table-hover:           rgba(255, 255, 255, 0.06);
}

/* ── 4. Typography — tighter scale, Inter ───────────────────────────────── */
:root {
    --mud-typography-default-family:  'Inter', system-ui, -apple-system, sans-serif;
    --mud-typography-h1-size:         2rem;
    --mud-typography-h1-weight:       700;
    --mud-typography-h1-lineheight:   1.2;
    --mud-typography-h2-size:         1.625rem;
    --mud-typography-h2-weight:       700;
    --mud-typography-h2-lineheight:   1.25;
    --mud-typography-h3-size:         1.375rem;
    --mud-typography-h3-weight:       600;
    --mud-typography-h3-lineheight:   1.3;
    --mud-typography-h4-size:         1.125rem;
    --mud-typography-h4-weight:       600;
    --mud-typography-h4-lineheight:   1.35;
    --mud-typography-h5-size:         1rem;
    --mud-typography-h5-weight:       600;
    --mud-typography-h5-lineheight:   1.4;
    --mud-typography-h6-size:         0.9375rem;
    --mud-typography-h6-weight:       600;
    --mud-typography-h6-lineheight:   1.4;
    --mud-typography-body1-size:      0.9375rem;
    --mud-typography-body1-lineheight:1.55;
    --mud-typography-body2-size:      0.875rem;
    --mud-typography-body2-lineheight:1.5;
    --mud-typography-subtitle1-size:  0.9375rem;
    --mud-typography-subtitle1-weight:500;
    --mud-typography-subtitle2-size:  0.8125rem;
    --mud-typography-subtitle2-weight:600;
    --mud-typography-subtitle2-lineheight:1.4;
    --mud-typography-caption-size:    0.75rem;
    --mud-typography-button-size:     0.875rem;
    --mud-typography-button-weight:   600;
    --mud-typography-button-lineheight:1;
    --mud-typography-overline-size:   0.75rem;
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 5. AppBar — clean bar with bottom border ───────────────────────────── */
.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: none !important;
    background-color: var(--mud-palette-appbar-background) !important;
}

.mud-appbar .mud-icon-button {
    color: var(--merp-text-secondary) !important;
    transition: color var(--merp-t-fast), background var(--merp-t-fast);
}

.mud-appbar .mud-icon-button:hover {
    color: var(--merp-accent) !important;
    background: var(--merp-sky-muted) !important;
    border-radius: var(--merp-radius-sm);
}

/* ── 6. Drawers — always black, both left nav and right panels ───────────── */
.mud-drawer,
.mud-drawer-left,
.mud-drawer-right,
.mud-drawer-anchor-left,
.mud-drawer-anchor-right,
.mud-drawer .mud-drawer-content,
.mud-drawer-left .mud-drawer-content,
.mud-drawer-right .mud-drawer-content,
.mud-drawer-anchor-left .mud-drawer-content,
.mud-drawer-anchor-right .mud-drawer-content {
    background: #111111 !important;
    background-color: #111111 !important;
    color: rgba(255, 255, 255, 0.87) !important;
    border: none !important;
    box-shadow: var(--merp-shadow-lg) !important;
}

/* Ensure all text inside any drawer is white */
.mud-drawer .mud-typography,
.mud-drawer-anchor-left .mud-typography,
.mud-drawer-anchor-right .mud-typography {
    color: rgba(255, 255, 255, 0.87) !important;
}

/* MudDivider inside drawers */
.mud-drawer .mud-divider,
.mud-drawer-anchor-left .mud-divider,
.mud-drawer-anchor-right .mud-divider {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ── Theme Manager drawer (.merp-theme-drawer) — always black in all modes ── */
/* CSS variable reset so every var() reference inside resolves to white/dark. */
.merp-theme-drawer {
    --mud-palette-text-primary:   rgba(255, 255, 255, 0.87) !important;
    --mud-palette-text-secondary: rgba(255, 255, 255, 0.60) !important;
    --mud-palette-text-disabled:  rgba(255, 255, 255, 0.38) !important;
    --mud-palette-action-default: rgba(255, 255, 255, 0.87) !important;
    --mud-palette-surface:        #111111 !important;
    --mud-palette-background:     #111111 !important;
}

/* Force every surface inside the Theme Manager to #111111 regardless of mode.
   Three-class specificity (0,3,0) beats .mud-drawer .mud-paper (0,2,0). */
.merp-theme-drawer .mud-expansion-panels,
.merp-theme-drawer .mud-expansion-panel,
.merp-theme-drawer .mud-expansion-panel-header,
.merp-theme-drawer .mud-expansion-panel-content,
.merp-theme-drawer .mud-expansion-panel-content-inner,
.merp-theme-drawer .mud-collapse-container,
.merp-theme-drawer .mud-collapse-container-inner,
.merp-theme-drawer .mud-paper,
.merp-theme-drawer .mud-card {
    background: #111111 !important;
    background-color: #111111 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: none !important;
}

.merp-theme-drawer .mud-expansion-panel-header:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Colour all text including <button> elements (UA stylesheet sets color:ButtonText).
   -webkit-text-fill-color beats the UA reset on Blink/WebKit. */
.merp-theme-drawer .mud-expansion-panel-header,
.merp-theme-drawer .mud-expansion-panel-header *,
.merp-theme-drawer .mud-expansion-panel *,
.merp-theme-drawer .mud-typography {
    color: rgba(255, 255, 255, 0.87) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.87) !important;
}

/* Cards, papers, lists, and accordion content inside drawers — transparent so black shows through */
.mud-drawer .mud-paper,
.mud-drawer .mud-card,
.mud-drawer .mud-card-header,
.mud-drawer .mud-card-content,
.mud-drawer .mud-list,
.mud-drawer .mud-nav-group-collapse,
.mud-drawer .mud-collapse-container,
.mud-drawer .mud-collapse-container-inner,
.mud-drawer .mud-list-item,
.mud-drawer .mud-list-item-text,
.mud-drawer-anchor-left .mud-paper,
.mud-drawer-anchor-left .mud-card,
.mud-drawer-anchor-left .mud-card-header,
.mud-drawer-anchor-left .mud-card-content,
.mud-drawer-anchor-left .mud-list,
.mud-drawer-anchor-left .mud-nav-group-collapse,
.mud-drawer-anchor-left .mud-collapse-container,
.mud-drawer-anchor-left .mud-collapse-container-inner,
.mud-drawer-anchor-left .mud-list-item,
.mud-drawer-anchor-left .mud-list-item-text {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

/* All text nodes inside drawer cards/papers must be white */
.mud-drawer .mud-paper *,
.mud-drawer .mud-card *,
.mud-drawer-anchor-left .mud-paper *,
.mud-drawer-anchor-left .mud-card * {
    color: rgba(255, 255, 255, 0.87) !important;
}

/* Drawer section labels (Color.Primary) — mute them to a subtle white */
.mud-drawer .mud-typography[class*="primary"],
.mud-drawer-anchor-left .mud-typography[class*="primary"] {
    color: rgba(255, 255, 255, 0.40) !important;
}

/* MudTooltip defaults Inline=true, rendering a <span> — force block so nav items stack vertically */
.mud-nav-menu .mud-tooltip-root,
.mud-nav-menu .mud-tooltip-root.mud-tooltip-inline {
    display: block !important;
}

/* Section labels */
.mud-nav-menu .mud-typography-subtitle2 {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.40) !important;
    padding-left: 16px !important;
    margin-top: 20px !important;
    margin-bottom: 2px !important;
}

/* Nav links */
.mud-nav-link {
    border-radius: var(--merp-radius-sm) !important;
    margin: 1px 8px !important;
    padding: 6px 10px !important;
    font-size: var(--merp-nav-font-size, 13px) !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    transition: background var(--merp-t-fast), color var(--merp-t-fast) !important;
}

.mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.mud-nav-link.active {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--merp-accent) !important;
    padding-left: 7px !important;
}

/* Nav icons */
.mud-nav-link .mud-nav-link-icon {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: var(--merp-nav-icon-size, 18px) !important;
}

.mud-nav-link:hover .mud-nav-link-icon,
.mud-nav-link.active .mud-nav-link-icon {
    color: rgba(255, 255, 255, 0.90) !important;
}

/* Nav group toggle (Communications / Settings) */
.mud-nav-group .mud-nav-group-toggle {
    border-radius: var(--merp-radius-sm) !important;
    margin: 1px 8px !important;
    padding: 6px 10px !important;
    font-size: var(--merp-nav-font-size, 13px) !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    transition: background var(--merp-t-fast) !important;
}

.mud-nav-group .mud-nav-group-toggle:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Nav group child indentation — one indent unit (12px) per nesting depth */
.mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 22px !important;
}

.mud-nav-group .mud-collapse-container .mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 34px !important;
}

/* ── 7. Main content area ────────────────────────────────────────────────── */
.mud-main-content {
    background: var(--mud-palette-background) !important;
}

/* ── 8. Cards — flat with hairline border ───────────────────────────────── */
.mud-card,
.mud-paper-outlined {
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: var(--merp-radius-md) !important;
    box-shadow: var(--merp-shadow-xs) !important;
    background: var(--mud-palette-surface) !important;
}

/* Dark mode: all MudPaper surfaces pick up the dark surface token */
.merp-dark .mud-paper {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-lines-default) !important;
}

/* Dark mode: MudSimpleTable rows */
.merp-dark .mud-simple-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.merp-dark .mud-simple-table tbody td {
    border-color: var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Dark mode: MudTabs */
.merp-dark .mud-tabs .mud-tab {
    color: var(--mud-palette-text-secondary) !important;
}

.merp-dark .mud-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary) !important;
}

/* Dark mode: MudAlert */
.merp-dark .mud-alert {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--mud-palette-text-primary) !important;
}

.mud-elevation-1  { box-shadow: var(--merp-shadow-xs) !important; }
.mud-elevation-2  { box-shadow: var(--merp-shadow-sm) !important; }
.mud-elevation-4,
.mud-elevation-8  { box-shadow: var(--merp-shadow-md) !important; }
.mud-elevation-25 { box-shadow: var(--merp-shadow-lg) !important; }

/* ── 9. Buttons ─────────────────────────────────────────────────────────── */
.mud-button-root {
    border-radius: var(--merp-radius-sm) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    transition: all var(--merp-t-fast) !important;
}

.mud-button-filled-primary {
    background-color: var(--merp-accent) !important;
    color: white !important;
    box-shadow: 0 1px 3px rgba(25, 118, 210, 0.30) !important;
}

.mud-button-filled-primary:hover {
    background-color: var(--merp-accent-hover) !important;
    box-shadow: 0 3px 8px rgba(25, 118, 210, 0.35) !important;
    transform: translateY(-1px);
}

.mud-button-outlined {
    border-width: 1px !important;
}

/* ── 10. Form inputs ─────────────────────────────────────────────────────── */
.mud-input-outlined .mud-notched-outline {
    border-color: var(--merp-border) !important;
    border-radius: var(--merp-radius-sm) !important;
}

.mud-input-outlined:hover .mud-notched-outline {
    border-color: #a0b4c2 !important;
}

.mud-input-outlined.mud-input-focused .mud-notched-outline {
    border-color: var(--merp-accent) !important;
    border-width: 1.5px !important;
}

.mud-input-label {
    font-size: 0.9375rem !important;
}

.mud-input-root input,
.mud-input-root textarea {
    font-size: 0.9375rem !important;
}


/* ── 11. Tables / Telerik grid ───────────────────────────────────────────── */
.mud-table-head .mud-table-cell {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--mud-palette-text-secondary) !important;
    background: var(--mud-palette-background-grey) !important;
}

.mud-table-row:hover .mud-table-cell {
    background: var(--merp-sky-light) !important;
}

/* Telerik header alignment */
.k-grid th {
    font-size: var(--mud-typography-caption-size, 0.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--mud-palette-text-secondary) !important;
    background: var(--mud-palette-background-grey) !important;
}

.k-grid td {
    font-size: var(--mud-typography-body2-size, 0.8125rem) !important;
}

/* ── 12. Filter bar (used on ServiceJobs and similar pages) ─────────────── */
.merp-filter-bar {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--merp-radius-md);
    padding: 10px 14px;
    box-shadow: var(--merp-shadow-xs);
    margin-bottom: 12px;
}

/* ── 13. Page header utility ─────────────────────────────────────────────── */
.merp-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.merp-page-header .merp-page-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--merp-text-primary);
    line-height: 1.25;
}

.merp-page-header .merp-page-subtitle {
    font-size: 0.8rem;
    color: var(--merp-text-secondary);
    margin-top: 1px;
}

/* ── 14. Login card (used on /login page) ────────────────────────────────── */
.merp-login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #e8f6fc 0%, #c5e8f5 55%, #a8d8ee 100%);
    padding: 24px;
}

.merp-login-card {
    background: #ffffff;
    border-radius: var(--merp-radius-lg);
    box-shadow: var(--merp-shadow-lg);
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
}

.merp-login-logo {
    display: block;
    margin: 0 auto 28px;
    height: 72px;
    width: auto;
}

.merp-login-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--merp-text-primary);
    text-align: center;
    margin-bottom: 4px;
}

.merp-login-subheading {
    font-size: 0.8125rem;
    color: var(--merp-text-secondary);
    text-align: center;
    margin-bottom: 28px;
}

.merp-login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    color: var(--merp-text-muted);
    font-size: 0.75rem;
}

.merp-login-divider::before,
.merp-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--merp-border);
}

/* ── 15. Chips / Badges (status badges) ─────────────────────────────────── */
.mud-chip {
    border-radius: 4px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    height: 20px !important;
    padding: 0 7px !important;
    letter-spacing: 0.02em !important;
}

/* ── 16. Dialogs — softer look ───────────────────────────────────────────── */
.mud-dialog {
    border-radius: var(--merp-radius-lg) !important;
    box-shadow: var(--merp-shadow-lg) !important;
}

.mud-dialog-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--merp-text-primary) !important;
    border-bottom: 1px solid var(--merp-border-light);
    padding-bottom: 12px !important;
}

/* ── 17. Pickers — prevent global button/h6 rules from shrinking picker header text ─ */
.mud-picker-header .mud-button-root,
.mud-picker-header .mud-button-label,
.mud-picker-header .mud-typography-h6,
.mud-picker-calendar-header-switch .mud-typography-h6,
.mud-picker-calendar-header-content .mud-typography-h5,
.mud-picker-calendar-header-content .mud-typography-h6 {
    font-size: 1rem !important;
}

.mud-picker-timepicker-toolbar .mud-timepicker-hourminute .mud-timepicker-button {
    font-size: 3.75rem !important;
    letter-spacing: -0.00833em !important;
    font-weight: 300 !important;
}

.mud-picker-timepicker-toolbar .mud-timepicker-ampm .mud-timepicker-button {
    font-size: 18px !important;
    letter-spacing: .00938em !important;
    font-weight: 400 !important;
}

/* Selected AM/PM — strong highlight so the active choice is unmistakable */
.mud-picker-timepicker-toolbar .mud-timepicker-ampm .mud-timepicker-button:not(.mud-timepicker-toolbar-text) {
    background-color: #ffffff !important;
    color: var(--merp-navy) !important;
    font-weight: 700 !important;
    border-radius: var(--merp-radius-sm) !important;
    padding: 2px 14px !important;
    opacity: 1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* ── 18. Scroll-to-top fab ───────────────────────────────────────────────── */
.mud-scroll-to-top .mud-fab {
    box-shadow: var(--merp-shadow-md) !important;
    background-color: var(--merp-navy) !important;
}

/* ── 19. Toggle group (kept from original) ───────────────────────────────── */
.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected {
    background-color: var(--mud-palette-primary) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.mud-toggle-group .mud-toggle-item:not(.mud-toggle-item-selected) {
    background-color: var(--mud-palette-action-disabled-background) !important;
    color: var(--mud-palette-text-disabled) !important;
    opacity: 1 !important;
}

/* ── 19. Header timer badge (kept from original) ─────────────────────────── */
.mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 18px) calc(100% - 20px);
}

/* ── 20. Snackbar / Toast ────────────────────────────────────────────────── */
.mud-snackbar {
    border-radius: var(--merp-radius-sm) !important;
    font-size: 0.8125rem !important;
    box-shadow: var(--merp-shadow-md) !important;
}

/* ── 20b. Autocomplete — wide popover ───────────────────────────────────── */
.catalog-autocomplete-popover {
    min-width: 420px !important;
    width: max-content !important;
}

/* ── 21. Tooltip ─────────────────────────────────────────────────────────── */
.mud-tooltip {
    font-size: 0.75rem !important;
    border-radius: 4px !important;
    background: var(--merp-navy-dark) !important;
}

/* ── 22. Scrollbar polish ────────────────────────────────────────────────── */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: #c4d0d8; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover   { background: #9eacb4; }

/* ── 23. Blazor error UI ─────────────────────────────────────────────────── */
#blazor-error-ui {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--merp-radius-sm);
    bottom: 0;
    box-shadow: var(--merp-shadow-md);
    color: var(--merp-text-primary);
    display: none;
    font-size: 0.8125rem;
    left: 0;
    padding: 12px 16px;
    position: fixed;
    right: 0;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    font-size: 16px;
    position: absolute;
    right: 12px;
    top: 8px;
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Telerik Grid — Dark Mode overrides
   Scoped to .merp-dark wrapper toggled by BaseLayout when _isDarkMode = true
   Dark palette: bg #1b1f22 | surface #202528 | header #121212 | border #2e3338
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grid shell ──────────────────────────────────────────────────────────── */
.merp-dark .k-grid {
    background-color: #202528 !important;
    border-color: #2e3338 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.merp-dark .k-grid-header,
.merp-dark .k-grid-header-wrap,
.merp-dark .k-grid .k-header {
    background-color: #121212 !important;
    border-color: #2e3338 !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

.merp-dark .k-grid th.k-header {
    background-color: #121212 !important;
    border-color: #2e3338 !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Column resize handle */
.merp-dark .k-grid .k-column-resizer {
    border-color: #2e3338 !important;
}

/* ── Rows ─────────────────────────────────────────────────────────────────── */
.merp-dark .k-grid-content,
.merp-dark .k-grid-content-locked {
    background-color: #202528 !important;
}

.merp-dark .k-grid td {
    background-color: transparent !important;
    border-color: #2e3338 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

.merp-dark .k-grid tr {
    background-color: #202528 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

.merp-dark .k-grid tr.k-alt {
    background-color: #1e2226 !important;
}

.merp-dark .k-grid tr:hover td,
.merp-dark .k-grid tr.k-state-hover td {
    background-color: #2a3038 !important;
}

.merp-dark .k-grid tr.k-selected td,
.merp-dark .k-grid tr.k-state-selected td {
    background-color: rgba(25, 118, 210, 0.25) !important;
    color: #ffffff !important;
}

/* ── Filter row ──────────────────────────────────────────────────────────── */
.merp-dark .k-grid .k-filter-row td,
.merp-dark .k-grid .k-filter-row th {
    background-color: #1b1f22 !important;
    border-color: #2e3338 !important;
}

.merp-dark .k-grid .k-filter-row .k-textbox,
.merp-dark .k-grid .k-filter-row .k-input,
.merp-dark .k-grid .k-filter-row .k-dropdown {
    background-color: #202528 !important;
    border-color: #3a4048 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

/* ── Toolbar & pager ─────────────────────────────────────────────────────── */
.merp-dark .k-grid-toolbar,
.merp-dark .k-grid .k-toolbar {
    background-color: #1b1f22 !important;
    border-color: #2e3338 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

.merp-dark .k-pager-wrap,
.merp-dark .k-grid-pager,
.merp-dark .k-pager {
    background-color: #1b1f22 !important;
    border-color: #2e3338 !important;
    color: rgba(255, 255, 255, 0.70) !important;
}

.merp-dark .k-pager .k-link,
.merp-dark .k-pager-wrap .k-link {
    color: rgba(255, 255, 255, 0.70) !important;
}

.merp-dark .k-pager .k-link:hover,
.merp-dark .k-pager-wrap .k-link:hover {
    background-color: #2a3038 !important;
    color: #ffffff !important;
}

.merp-dark .k-pager .k-link.k-selected,
.merp-dark .k-pager-wrap .k-link.k-selected,
.merp-dark .k-pager .k-state-selected {
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

/* ── Buttons inside grid ─────────────────────────────────────────────────── */
.merp-dark .k-grid .k-button {
    background-color: #2a3038 !important;
    border-color: #3a4048 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

.merp-dark .k-grid .k-button:hover {
    background-color: #353d47 !important;
}

.merp-dark .k-grid .k-button.k-primary,
.merp-dark .k-grid .k-button.k-button-solid-primary {
    background-color: #1976d2 !important;
    border-color: #1565c0 !important;
    color: #ffffff !important;
}

/* ── Inputs inside grid (dropdowns, textboxes) ───────────────────────────── */
.merp-dark .k-grid .k-input,
.merp-dark .k-grid .k-textbox,
.merp-dark .k-grid .k-picker,
.merp-dark .k-grid .k-dropdown-wrap,
.merp-dark .k-grid .k-combobox .k-input {
    background-color: #202528 !important;
    border-color: #3a4048 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

/* ── Column menu / popup ─────────────────────────────────────────────────── */
.merp-dark .k-grid .k-column-menu,
.merp-dark .k-grid .k-menu,
.merp-dark .k-popup {
    background-color: #202528 !important;
    border-color: #2e3338 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

.merp-dark .k-popup .k-item:hover,
.merp-dark .k-popup .k-menu-item:hover {
    background-color: #2a3038 !important;
}

/* ── Group rows & footers ────────────────────────────────────────────────── */
.merp-dark .k-grouping-row td,
.merp-dark .k-group-footer td,
.merp-dark .k-grid-footer td {
    background-color: #1b1f22 !important;
    border-color: #2e3338 !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ── Scrollbar inside grid ───────────────────────────────────────────────── */
.merp-dark .k-grid ::-webkit-scrollbar-track {
    background: #1b1f22;
}

.merp-dark .k-grid ::-webkit-scrollbar-thumb {
    background: #3a4048;
}

.merp-dark .k-grid ::-webkit-scrollbar-thumb:hover {
    background: #4a5260;
}

/* ── Font size scaling (Theme Manager preference) ────────────────────────── */
/*    Uses px throughout so values are independent of the browser root size.  */
/*    Also exposes --merp-nav-font-size for the nav menu to consume.          */

[data-font-size="small"] {
    --mud-typography-h4-size:          13px;
    --mud-typography-h5-size:          12px;
    --mud-typography-h6-size:          11px;
    --mud-typography-subtitle1-size:   11px;
    --mud-typography-subtitle2-size:   10px;
    --mud-typography-body1-size:       11px;
    --mud-typography-body2-size:       10px;
    --mud-typography-button-size:      10px;
    --mud-typography-caption-size:      9px;
    --mud-typography-overline-size:     9px;
    --merp-nav-font-size:              10px;
    --merp-nav-icon-size:              15px;
    font-size: 11px;
}

[data-font-size="medium"] {
    --mud-typography-h4-size:          18px;
    --mud-typography-h5-size:          16px;
    --mud-typography-h6-size:          15px;
    --mud-typography-subtitle1-size:   15px;
    --mud-typography-subtitle2-size:   13px;
    --mud-typography-body1-size:       15px;
    --mud-typography-body2-size:       14px;
    --mud-typography-button-size:      14px;
    --mud-typography-caption-size:     12px;
    --mud-typography-overline-size:    12px;
    --merp-nav-font-size:              13px;
    --merp-nav-icon-size:              18px;
    font-size: 15px;
}

[data-font-size="large"] {
    --mud-typography-h4-size:          25px;
    --mud-typography-h5-size:          23px;
    --mud-typography-h6-size:          20px;
    --mud-typography-subtitle1-size:   20px;
    --mud-typography-subtitle2-size:   18px;
    --mud-typography-body1-size:       19px;
    --mud-typography-body2-size:       18px;
    --mud-typography-button-size:      17px;
    --mud-typography-caption-size:     15px;
    --mud-typography-overline-size:    14px;
    --merp-nav-font-size:              18px;
    --merp-nav-icon-size:              22px;
    font-size: 19px;
}

/* ── Telerik — sync primary color with MudBlazor theme ──────────────────── */
:root {
    --kendo-color-primary:       var(--mud-palette-primary);
    --kendo-color-primary-hover: var(--mud-palette-primary-darken);
    --kendo-color-on-primary:    var(--mud-palette-primary-text);
}

/* ── Telerik Scheduler — compact row height ─────────────────────────────── */
.k-scheduler-table td,
.k-scheduler-table th {
    height: 24px !important;
    min-height: 24px !important;
}

.k-scheduler-times .k-scheduler-table td {
    font-size: 11px !important;
    padding: 2px 4px !important;
}

/* ── Kanban card — needs-attention pulse ─────────────────────────────────── */
@keyframes attention-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(255, 152, 0, 0.75); }
    60%  { box-shadow: 0 0 0 5px rgba(255, 152, 0, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(255, 152, 0, 0);    }
}

.card-needs-attention {
    animation: attention-pulse 1.8s ease-out infinite;
    border-left: 3px solid #FF9800 !important;
}

/* Full-screen photo viewer dialog — dark backdrop */
.vessel-photo-viewer-backdrop {
    background: rgba(0, 0, 0, 0.95) !important;
}