/* ============================================================
   HELM — Maritime Operations Platform
   Design System: Nordic Bridge v2
   ============================================================ */

/* ---- Design Tokens ----
   Both themes use the same variable names. Switch via
     <html data-theme="dark">  or  <html data-theme="light">
   Default (unthemed) = dark, so a failed JS init still renders correctly.
*/
:root,
[data-theme="dark"] {
    /* Backgrounds — deep petroleum palette */
    --bg-deep:        #080f1a;
    --bg-panel:       #0e1829;
    --bg-surface:     rgba(12, 22, 38, 0.94);
    --bg-hover:       rgba(255, 255, 255, 0.04);
    --bg-elevated:    rgba(255, 255, 255, 0.025);

    /* Borders */
    --border-subtle:  rgba(255, 255, 255, 0.05);
    --border-medium:  rgba(255, 255, 255, 0.09);
    --border-glow:    rgba(0, 180, 216, 0.2);

    /* Accent palette — maritime, not Tailwind */
    --accent-teal:    #00b4d8;
    --accent-amber:   #e8912d;
    --accent-green:   #00d4aa;
    --accent-red:     #ff6b4a;
    --accent-gold:    #d4a054;

    /* Accent with opacity (replaces hardcoded rgba) */
    --teal-15:        rgba(0, 180, 216, 0.15);
    --teal-25:        rgba(0, 180, 216, 0.25);
    --teal-30:        rgba(0, 180, 216, 0.30);
    --teal-40:        rgba(0, 180, 216, 0.40);
    --amber-20:       rgba(232, 145, 45, 0.20);
    --amber-30:       rgba(232, 145, 45, 0.30);
    --green-15:       rgba(0, 212, 170, 0.15);
    --green-50:       rgba(0, 212, 170, 0.50);
    --red-10:         rgba(255, 107, 74, 0.10);
    --red-25:         rgba(255, 107, 74, 0.25);

    /* Text — readability pass (T6): lifted muted/dim a stop closer to primary
       for AA contrast on dense screens. */
    --text-primary:   #dfe6f0;
    --text-muted:     #a3b1c6;
    --text-dim:       #8090a7;

    color-scheme: dark;

    /* Typography — three fonts, deliberate hierarchy */
    --font-display:   'Space Grotesk', 'DM Sans', system-ui, sans-serif;
    --font-ui:        'DM Sans', system-ui, -apple-system, sans-serif;
    --font-data:      'JetBrains Mono', 'Consolas', monospace;

    /* Type scale — 7 steps. Anchored to whole-px values used across the app.
       T6: bumped 2xs (10→11px) and xs (11.2→12px); these tokens drive the
       densest text in the app (labels, attribution, briefing rows). */
    --text-2xs:       0.6875rem; /* 11px — micro labels, dense badges */
    --text-xs:        0.75rem;   /* 12px — labels, attribution */
    --text-sm:        0.8rem;    /* 12.8px — body small, buttons */
    --text-base:      0.85rem;   /* 13.6px — body, UI elements */
    --text-md:        1rem;      /* 16px — popup headers */
    --text-lg:        1.15rem;   /* 18.4px — data callouts */
    --text-xl:        1.3rem;    /* 20.8px — brand, modal headers */

    /* Spatial */
    --glass-blur:     blur(24px);
    --radius-sm:      4px;
    --radius-md:      8px;
    --radius-lg:      12px;
    --radius-xl:      16px;
    --shadow-panel:   0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-glow:    0 0 24px rgba(0, 180, 216, 0.06);
    --shadow-card:    0 1px 3px var(--scrim-20);
    --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 180, 216, 0.08);

    /* Transitions */
    --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
    --ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout constants */
    --header-height:       44px;
    --time-slider-height:  64px;
    --bg-ocean:            #0a1628;

    /* --- Surface gradients (dark) --- */
    --grad-header:   linear-gradient(180deg, rgba(12, 20, 32, 0.95) 0%, rgba(8, 15, 26, 0.88) 100%);
    --grad-panel:    linear-gradient(180deg, rgba(18, 28, 46, 0.9) 0%, rgba(12, 20, 34, 0.9) 100%);
    --grad-toolbar:  linear-gradient(180deg, rgba(16, 26, 42, 0.92) 0%, rgba(10, 18, 32, 0.92) 100%);
    --grad-modal:    linear-gradient(180deg, rgba(16, 26, 44, 0.98) 0%, rgba(10, 18, 34, 0.98) 100%);
    --grad-popup:    linear-gradient(180deg, rgba(14, 24, 42, 0.96) 0%, rgba(10, 18, 34, 0.96) 100%);
    --grad-schedule: linear-gradient(180deg, rgba(14, 24, 42, 0.96) 0%, rgba(10, 18, 34, 0.94) 100%);
    --grad-fab:      linear-gradient(180deg, rgba(20, 32, 48, 0.94), rgba(12, 22, 36, 0.94));
    --grad-bottom:   linear-gradient(0deg, rgba(12, 20, 34, 0.96) 0%, rgba(14, 24, 42, 0.92) 100%);

    /* --- Overlays & surfaces --- */
    --surface-02:    rgba(255, 255, 255, 0.02);
    --surface-03:    rgba(255, 255, 255, 0.03);
    --surface-04:    rgba(255, 255, 255, 0.04);
    --surface-06:    rgba(255, 255, 255, 0.06);
    --surface-08:    rgba(255, 255, 255, 0.08);
    --surface-10:    rgba(255, 255, 255, 0.10);
    --surface-15:    rgba(255, 255, 255, 0.15);

    --edge-04:       rgba(255, 255, 255, 0.04);
    --edge-06:       rgba(255, 255, 255, 0.06);
    --edge-08:       rgba(255, 255, 255, 0.08);
    --edge-10:       rgba(255, 255, 255, 0.10);
    --edge-12:       rgba(255, 255, 255, 0.12);

    --scrim-20:      rgba(0, 0, 0, 0.20);
    --scrim-25:      var(--scrim-25);
    --scrim-35:      rgba(0, 0, 0, 0.35);
    --scrim-50:      rgba(0, 0, 0, 0.50);
    --scrim-70:      rgba(0, 0, 0, 0.70);

    --shadow-popup:  0 10px 28px rgba(0, 0, 0, 0.5);
    --shadow-modal:  0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-fab:    0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 180, 216, 0.12) inset;
    --shadow-toast:  0 8px 24px rgba(0, 0, 0, 0.4);

    /* Popup / modal surface (solid-ish) */
    --surface-popup: rgba(14, 22, 36, 0.96);
    --surface-modal: rgba(8, 18, 32, 0.97);

    /* Ocean scrim (vignette at map edges) */
    --ocean-vignette: rgba(6, 14, 24, 0.35);
}

/* ---- Light theme ---- */
[data-theme="light"] {
    /* Backgrounds */
    --bg-deep:        #f3f6fa;
    --bg-panel:       #ffffff;
    --bg-surface:     rgba(255, 255, 255, 0.96);
    --bg-hover:       rgba(10, 25, 45, 0.05);
    --bg-elevated:    rgba(10, 25, 45, 0.025);
    --bg-ocean:       #dde7f2;

    /* Borders */
    --border-subtle:  rgba(10, 25, 45, 0.08);
    --border-medium:  rgba(10, 25, 45, 0.14);
    --border-glow:    rgba(0, 134, 168, 0.25);

    /* Accents — darkened for contrast on white */
    --accent-teal:    #0086a8;
    --accent-amber:   #b67015;
    --accent-green:   #00866a;
    --accent-red:     #c94521;
    --accent-gold:    #8d6415;

    --teal-15:        rgba(0, 134, 168, 0.10);
    --teal-25:        rgba(0, 134, 168, 0.18);
    --teal-30:        rgba(0, 134, 168, 0.24);
    --teal-40:        rgba(0, 134, 168, 0.32);
    --amber-20:       rgba(182, 112, 21, 0.16);
    --amber-30:       rgba(182, 112, 21, 0.24);
    --green-15:       rgba(0, 134, 106, 0.12);
    --green-50:       rgba(0, 134, 106, 0.45);
    --red-10:         rgba(201, 69, 33, 0.10);
    --red-25:         rgba(201, 69, 33, 0.22);

    /* Text */
    --text-primary:   #1a2332;
    --text-muted:     #3d4a5e;
    --text-dim:       #677488;

    /* Shadows — much softer on light */
    --shadow-panel:   0 8px 24px rgba(10, 25, 45, 0.08), 0 2px 6px rgba(10, 25, 45, 0.04);
    --shadow-glow:    0 0 20px rgba(0, 134, 168, 0.08);
    --shadow-card:    0 1px 2px rgba(10, 25, 45, 0.06);
    --shadow-card-hover: 0 4px 16px rgba(10, 25, 45, 0.10), 0 0 0 1px rgba(0, 134, 168, 0.12);

    /* --- Surface gradients (light) --- */
    --grad-header:   linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(243, 246, 250, 0.92) 100%);
    --grad-panel:    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 249, 253, 0.94) 100%);
    --grad-toolbar:  linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(243, 247, 252, 0.95) 100%);
    --grad-modal:    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 253, 0.98) 100%);
    --grad-popup:    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 254, 0.96) 100%);
    --grad-schedule: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 249, 253, 0.95) 100%);
    --grad-fab:      linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(243, 247, 252, 0.95));
    --grad-bottom:   linear-gradient(0deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 251, 254, 0.94) 100%);

    /* --- Overlays & surfaces (tinted navy on white) --- */
    --surface-02:    rgba(10, 25, 45, 0.02);
    --surface-03:    rgba(10, 25, 45, 0.03);
    --surface-04:    rgba(10, 25, 45, 0.04);
    --surface-06:    rgba(10, 25, 45, 0.05);
    --surface-08:    rgba(10, 25, 45, 0.06);
    --surface-10:    rgba(10, 25, 45, 0.08);
    --surface-15:    rgba(10, 25, 45, 0.10);

    --edge-04:       rgba(10, 25, 45, 0.06);
    --edge-06:       rgba(10, 25, 45, 0.08);
    --edge-08:       rgba(10, 25, 45, 0.10);
    --edge-10:       rgba(10, 25, 45, 0.12);
    --edge-12:       rgba(10, 25, 45, 0.14);

    --scrim-20:      rgba(10, 25, 45, 0.06);
    --scrim-25:      rgba(10, 25, 45, 0.08);
    --scrim-35:      rgba(10, 25, 45, 0.10);
    --scrim-50:      rgba(10, 25, 45, 0.14);
    --scrim-70:      rgba(10, 25, 45, 0.20);

    --shadow-popup:  0 10px 28px rgba(10, 25, 45, 0.10);
    --shadow-modal:  0 24px 80px rgba(10, 25, 45, 0.14), 0 0 0 1px rgba(10, 25, 45, 0.05);
    --shadow-fab:    0 16px 40px rgba(10, 25, 45, 0.12), 0 0 0 1px rgba(0, 134, 168, 0.15) inset;
    --shadow-toast:  0 8px 24px rgba(10, 25, 45, 0.10);

    --surface-popup: rgba(255, 255, 255, 0.98);
    --surface-modal: rgba(255, 255, 255, 0.99);

    --ocean-vignette: rgba(10, 25, 45, 0.06);

    color-scheme: light;
}

/* Mute the body grain texture on light — pure white reads cleaner */
[data-theme="light"] body::before { opacity: 0; }

/* ---- Reset ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ui);
    overflow: hidden;
    background: var(--bg-deep);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Noise texture overlay — kills the flat background look */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

/* ---- Header — minimal Apple bar ---- */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--grad-header);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    animation: headerEnter 0.5s var(--ease-out) both;
}

#header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.12) 30%, rgba(0, 180, 216, 0.12) 70%, transparent);
}

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

.header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-logo {
    color: var(--text-muted);
    flex-shrink: 0;
}

.brand-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--text-primary);
    text-shadow: 0 0 20px rgba(0, 180, 216, 0.15);
}

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-ts {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-dim);
}

@keyframes fadeStagger {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Buttons ---- */
.btn {
    background: var(--bg-hover);
    border: 1px solid var(--border-medium);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.btn:hover {
    background: var(--surface-08);
    color: var(--text-primary);
    border-color: var(--surface-15);
}

.btn:active {
    transform: scale(0.97);
}

.btn:focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: 2px;
}

/* Legacy toggle support (for dynamically added custom layer buttons) */
.toggle-group { display: contents; }

.toggle-btn {
    position: relative;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    color: var(--text-dim);
}

.toggle-dot { display: none; }

.toggle-btn.active {
    color: var(--accent-teal);
    background: var(--teal-15);
    border-color: var(--teal-30);
}

/* ---- Floating Map Toolbar ---- */
.map-toolbar {
    position: fixed;
    top: calc(var(--header-height) + 12px);
    left: 12px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: fadeStagger 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.tb-handle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--grad-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ease-smooth);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tb-handle:hover {
    color: var(--accent-teal);
    border-color: var(--teal-30);
    background: var(--bg-surface);
}

.map-toolbar.collapsed .tb-handle {
    border-radius: var(--radius-lg);
}

.tb-tray {
    margin-top: 6px;
    width: 168px;
    background: var(--grad-toolbar);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: opacity 0.25s ease, transform 0.25s var(--ease-out);
    transform-origin: top left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.map-toolbar.icons-only .tb-tray { width: auto; }
.map-toolbar.ais-feedback-open .tb-tray { width: 168px; }
.ais-feedback[hidden], .ais-signin-prompt[hidden], #aisOffPrompt[hidden], #aisVisibleCount[hidden], #connectionStatus[hidden] { display: none; }
#toggleLive { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 10px; gap: 6px; }
.ais-compact-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-variant-numeric: tabular-nums; }
.ais-connection-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }
.ais-connection-dot[data-phase="ready"] { background: var(--accent-green); }
.ais-connection-dot[data-phase="loading"], .ais-connection-dot[data-phase="waiting"] { background: var(--accent-amber); }
.ais-connection-dot[data-phase="error"] { background: var(--accent-red); }
.ais-disclosure { display: block; width: 10px; height: 10px; opacity: .55; transform-origin: center; }
#toggleLive[aria-expanded="true"] .ais-disclosure { transform: rotate(90deg); }
.ais-feedback-heading { display: flex; align-items: center; gap: 4px; }
.ais-feedback-heading strong { flex: 1; }
.ais-stop { display: grid; place-items: center; flex: 0 0 24px; min-height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--accent-red); cursor: pointer; }
.ais-stop:hover { background: var(--red-10); }
.ais-stop:focus-visible { outline: 2px solid var(--accent-red); }
.ais-off-prompt { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-medium); }
#aisOffConfirm { color: var(--accent-red); }
.ais-feedback {
    margin: 2px 4px 6px; padding: 8px;
    border-left: 2px solid var(--accent-teal); border-radius: 4px;
    background: var(--bg-hover); color: var(--text-muted);
    font-size: 11px; line-height: 1.45; overflow-wrap: anywhere;
}
/* Native disclosures retain their state across polling and support Enter/Space. */
.map-feedback summary {
    display: flex; align-items: flex-start; gap: 6px; cursor: pointer;
    list-style: none; min-height: 24px;
}
.map-feedback summary::-webkit-details-marker { display: none; }
.map-feedback summary::after {
    content: ''; flex: 0 0 6px; width: 6px; height: 6px;
    margin: 5px 3px 0 auto; border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
}
.map-feedback[open] > summary::after { transform: rotate(45deg); }
.map-feedback summary:focus-visible {
    outline: 2px solid var(--accent-teal); outline-offset: 3px; border-radius: 2px;
}
.map-feedback-body { margin-top: 4px; }
.map-feedback[data-phase="error"] > summary { color: var(--accent-red); }
.ais-feedback strong { display: block; color: var(--text-primary); font-weight: 600; }
.ais-feedback span { display: block; }
.ais-feedback[data-phase="error"] { border-color: var(--accent-red); }
.ais-feedback[data-phase="loading"] strong::before,
.ais-feedback[data-phase="waiting"] strong::before { content: '◌ '; color: var(--accent-teal); }
.ais-feedback-action {
    margin-top: 6px; padding: 5px 8px; cursor: pointer;
    border: 1px solid var(--border-medium); border-radius: 5px;
    background: var(--bg-panel); color: var(--accent-teal); font: inherit;
}
.ais-signin-prompt {
    position: fixed; z-index: 1100; width: 264px; max-width: calc(100vw - 24px);
    padding: 16px; border: 1px solid var(--border-medium); border-radius: var(--radius-lg);
    background: var(--bg-panel); color: var(--text-primary);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35); font-size: var(--text-sm);
}
.ais-signin-prompt p { color: var(--text-muted); line-height: 1.5; margin: 8px 0 14px; }
.ais-signin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#aisSignIn { color: var(--accent-teal); border-color: var(--teal-30); }
.ais-feedback-action:focus-visible, .ais-signin-actions button:focus-visible {
    outline: 2px solid var(--accent-teal); outline-offset: 2px;
}

.map-toolbar.collapsed .tb-tray {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    padding: 0 6px;
    margin-top: 0;
    border: none;
}

.tb-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-label {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 8px 2px;
}

.tb-btn {
    width: 100%;
    min-width: 36px;
    height: 32px;
    padding: 0 10px 0 8px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    transition: all 0.2s var(--ease-smooth);
    position: relative;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: left;
    white-space: nowrap;
}
.tb-btn > svg { flex-shrink: 0; }
.tb-btn-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    opacity: 0.9;
}
/* Collapsed toolbar → hide labels, center icon */
.map-toolbar.collapsed .tb-btn-label,
.map-toolbar.collapsed .tb-label,
.map-toolbar.icons-only .tb-btn-label,
.map-toolbar.icons-only .tb-label { display: none; }
.map-toolbar.icons-only .tb-btn {
    width: 36px;
    padding: 0;
    justify-content: center;
}

.tb-btn:hover {
    background: var(--border-subtle);
    color: var(--text-primary);
    border-color: var(--surface-04);
}

.tb-btn:active {
    transform: scale(0.93);
}

/* Custom layer toggle wrapper + hover card */
.custom-layer-wrap { position: relative; display: flex; align-items: center; }
.custom-layer-wrap > .tb-btn { flex: 1; min-width: 0; width: auto; }
.custom-layer-wrap > .m-popover-item { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-layer-delete {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
}
.custom-layer-delete:hover { color: #ff9a9a; background: rgba(239, 68, 68, 0.14); }
.custom-layer-delete:focus-visible { outline: 2px solid var(--accent-teal); outline-offset: -2px; }
.custom-layer-delete:disabled { opacity: 0.4; cursor: wait; }
.custom-layer-card {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    min-width: 180px;
    max-width: 280px;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    background: var(--surface-popup);
    border: 1px solid rgba(0, 180, 216, 0.35);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    color: var(--text-primary, #e8f3f4);
    font-size: var(--text-sm);
    display: none;
    z-index: 1500;
    pointer-events: auto;
}
.custom-layer-card::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 0;
    width: 12px;
    height: 100%;
}
.custom-layer-wrap:hover .custom-layer-card,
.custom-layer-wrap:focus-within .custom-layer-card,
.custom-layer-card:hover { display: block; }
.custom-layer-card .clc-label {
    font-weight: 600;
    margin-bottom: 2px;
}
.custom-layer-card .clc-meta {
    color: var(--text-secondary, #9aafc2);
    font-size: var(--text-2xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Active state: the ::after rule below already paints a 2px teal left-edge
   marker. Drop the surrounding fill/border/glow — when 6–8 buttons stack,
   the cumulative teal halos compete with the map. The icon + label change
   to teal, plus the left marker, are sufficient signal. */
.tb-btn.active {
    color: var(--accent-teal);
}
/* Without this, hovering an active button re-paints the surround
   (.tb-btn:hover sets background + border-color) — produces a flicker
   that contradicts the intent above. */
.tb-btn.active:hover {
    background: transparent;
    border-color: transparent;
    color: var(--accent-teal);
}

.tb-btn.active::after {
    content: '';
    position: absolute;
    left: -1px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 1px;
    background: var(--accent-teal);
}

/* Submenu toggle (Draw & Measure) */
.tb-submenu-toggle {
    position: relative;
}
.tb-chevron {
    margin-left: auto;
    opacity: 0.5;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.tb-submenu-toggle.open .tb-chevron {
    transform: rotate(180deg);
}
.tb-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    padding-left: 8px;
    border-left: 1px solid var(--border-subtle);
    margin-left: 10px;
}
.tb-submenu.open {
    max-height: 300px;
}

.tb-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--border-subtle);
}

.tb-select {
    width: 36px;
    height: 28px;
    padding: 0;
    font-size: 0;
    color: transparent;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M2 4h12M4 8h8M6 12h4' stroke='%236b7d99' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s ease;
}

.tb-select:hover {
    background-color: var(--surface-06);
    border-color: var(--border-subtle);
}

.tb-select:focus {
    outline: none;
    border-color: var(--accent-teal);
    width: 160px;
    font-size: var(--text-xs);
    color: var(--text-primary);
    background-image: none;
    padding: 0 8px;
    background-color: var(--bg-panel);
}

.tb-select option {
    background: var(--bg-deep);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

/* ---- Vessel-type multi-select filter ---- */
.tb-filter {
    position: relative;
    display: inline-flex;
}

.tb-filter-btn {
    position: relative;
}

.tb-filter-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    color: var(--bg-deep);
    background: var(--accent-teal);
    border-radius: 7px;
    pointer-events: none;
}

.tb-filter-panel {
    position: absolute;
    top: -4px;
    left: calc(100% + 10px);
    width: 300px;
    max-height: min(640px, 85vh);
    overflow-y: auto;
    padding: 10px 4px 8px;
    background: var(--surface-modal);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 180, 216, 0.18);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--surface-02) inset;
    z-index: 1100;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

/* Pointer tail pointing back at the button */
.tb-filter-panel::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -5px;
    width: 10px;
    height: 10px;
    background: var(--surface-modal);
    border-left: 1px solid rgba(0, 180, 216, 0.18);
    border-bottom: 1px solid rgba(0, 180, 216, 0.18);
    transform: rotate(45deg);
}

.tb-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 12px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--surface-06);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7d99;
}

.tb-filter-header-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tb-filter-header-total {
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #8a9ab0;
    text-transform: none;
}

.tb-filter-clear {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 3px 10px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--accent-teal);
    background: transparent;
    border: 1px solid rgba(0, 180, 216, 0.28);
    border-radius: 4px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    transition: background 0.15s ease;
}

.tb-filter-clear:hover {
    background: rgba(0, 180, 216, 0.12);
}

.tb-filter-clear[hidden] {
    display: none;
}

.tb-filter-cat {
    padding: 2px 0 6px;
}

.tb-filter-cat + .tb-filter-cat {
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
    padding-top: 6px;
}

.tb-filter-catrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s ease;
}

.tb-filter-catrow:hover {
    background: var(--surface-04);
}

.tb-filter-catname {
    flex: 1;
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
}

.tb-filter-catcount {
    font-size: var(--text-xs);
    font-weight: 500;
    color: #6b7d99;
    font-variant-numeric: tabular-nums;
}

.tb-filter-groups {
    display: flex;
    flex-direction: column;
    padding: 2px 0 2px 28px;
}

.tb-filter-grouprow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 0;
    cursor: pointer;
    border-radius: 4px;
    color: #aebacb;
    transition: background 0.12s ease, color 0.12s ease;
}

.tb-filter-grouprow:hover {
    background: var(--surface-04);
    color: var(--text-primary);
}

.tb-filter-grouprow.is-empty {
    opacity: 0.45;
    cursor: default;
}

.tb-filter-groupname {
    flex: 1;
    font-size: var(--text-base);
}

.tb-filter-groupcount {
    font-size: var(--text-xs);
    color: #6b7d99;
    font-variant-numeric: tabular-nums;
}

.tb-filter-panel input[type="checkbox"] {
    accent-color: var(--accent-teal);
    cursor: pointer;
    margin: 0;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.tb-filter-btn.active {
    color: var(--accent-teal);
}

/* ---- Topbar icon buttons (chat, schedule) ---- */
.topbar-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    cursor: pointer;
    transition: color 120ms var(--ease-smooth), background 120ms var(--ease-smooth), border-color 120ms var(--ease-smooth);
}

.topbar-icon-btn:hover {
    color: var(--accent-teal);
    background: var(--teal-15);
    border-color: var(--teal-30);
}

.topbar-icon-btn:active {
    transform: scale(0.95);
}

.topbar-icon-btn.active {
    color: var(--accent-teal);
    background: var(--teal-15);
    border-color: var(--teal-30);
}

.topbar-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--accent-red);
    color: #fff;
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--bg-deep);
}

/* ---- Vessel count pill ---- */
#vesselCount {
    font-family: var(--font-data);
    font-weight: 500;
    color: var(--accent-teal);
    background: rgba(0, 180, 216, 0.08);
    padding: 3px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 180, 216, 0.15);
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
    box-shadow: inset 0 1px 0 var(--surface-03);
}

/* ---- Connection status dot ---- */
#connectionStatus {
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    color: transparent;
    overflow: hidden;
}

#connectionStatus::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

#connectionStatus.connected { color: var(--accent-green); }
#connectionStatus.connected::before {
    background: var(--accent-green);
    box-shadow: 0 0 6px var(--green-50);
    animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--green-50); }
    50% { opacity: 0.5; box-shadow: 0 0 3px var(--green-15); }
}

#connectionStatus.error { color: var(--accent-red); }
#connectionStatus.error::before {
    background: var(--accent-red);
    box-shadow: 0 0 6px rgba(255, 107, 74, 0.5);
}
#connectionStatus.info { color: var(--accent-teal); }
#connectionStatus.info::before {
    background: var(--accent-teal);
    box-shadow: 0 0 6px var(--teal-40);
}

/* ---- Map ---- */
#map {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: crosshair;
    background: var(--bg-ocean);
}

/* Crosshair cursor on Leaflet map container */
.leaflet-container {
    cursor: crosshair !important;
    font-family: var(--font-ui);
}

/* Form controls don't inherit font-family by default — without this every
   <input>/<button>/<select> across the app falls back to Arial/Helvetica. */
input, button, select, textarea {
    font-family: inherit;
}

.leaflet-interactive {
    cursor: pointer !important;
}

.leaflet-grab {
    cursor: crosshair !important;
}

.leaflet-dragging .leaflet-grab {
    cursor: grabbing !important;
}

/* Subtle tone adjustment for map tiles */
.leaflet-tile-pane {
    filter: brightness(0.95) saturate(0.90) contrast(1.02);
}

/* ESRI reference labels overlay — muted so it reads without shouting over imagery */
.leaflet-layer .basemap-labels-overlay,
.basemap-labels-overlay {
    filter: brightness(1.05) contrast(0.9) saturate(0.4) hue-rotate(180deg);
    mix-blend-mode: screen;
}

/* Coordinate readout — compact chip in topbar */
.topbar-coord {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: transparent;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.topbar-coord .coord-value {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    min-width: 150px;
    text-align: right;
}

.topbar-coord .coord-mode-chip {
    cursor: pointer;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--accent-teal);
    background: rgba(0, 180, 216, 0.08);
    border: 1px solid rgba(0, 180, 216, 0.25);
    border-radius: 3px;
    padding: 2px 7px;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.topbar-coord .coord-mode-chip:hover {
    background: rgba(0, 180, 216, 0.18);
    border-color: rgba(0, 180, 216, 0.5);
}

/* Override Leaflet attribution */
.leaflet-control-attribution {
    background: var(--bg-surface) !important;
    color: var(--text-dim) !important;
    font-family: var(--font-ui) !important;
    font-size: var(--text-xs) !important;
    backdrop-filter: var(--glass-blur);
    border: none !important;
}

.leaflet-control-attribution a {
    color: var(--text-muted) !important;
}

/* MapLibre GL mounts its own attribution control inside the Leaflet container —
   it lingers after switching basemaps and double-stacks with Leaflet's own
   attribution. Leaflet's control already credits OpenFreeMap/OSM via each
   layer's `attribution` option, so suppress MapLibre's. */
.maplibregl-ctrl-attrib,
.mapboxgl-ctrl-attrib {
    display: none !important;
}

/* Override Leaflet zoom control */
.leaflet-control-zoom a {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
    backdrop-filter: var(--glass-blur);
    font-family: var(--font-ui) !important;
    transition: all 0.15s ease;
}

.leaflet-control-zoom a:hover {
    background: var(--bg-panel) !important;
    border-color: var(--border-glow) !important;
}

/* ---- Basemap trigger (inside zoom bar) ---- */
.leaflet-control-zoom .basemap-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
    border-top: 1px solid var(--border-subtle) !important;
    backdrop-filter: var(--glass-blur);
    cursor: pointer;
    transition: all 0.15s ease;
}

.leaflet-control-zoom .basemap-trigger:hover,
.leaflet-control-zoom.basemap-expanded .basemap-trigger {
    background: var(--bg-panel) !important;
    color: var(--accent-teal) !important;
    border-color: var(--border-glow) !important;
}

.leaflet-control-zoom .basemap-tray {
    position: absolute;
    top: auto;
    bottom: 0;
    right: calc(100% + 6px);
    display: flex;
    gap: 1px;
    padding: 3px;
    background: var(--grad-toolbar);
    border: 1px solid var(--surface-04);
    border-radius: var(--radius-md);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity 0.15s var(--ease-smooth), transform 0.15s var(--ease-smooth);
    white-space: nowrap;
}

.leaflet-control-zoom.basemap-expanded .basemap-tray {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.basemap-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s var(--ease-smooth);
    white-space: nowrap;
    line-height: 1;
}

.basemap-btn:hover {
    color: var(--text-primary);
    background: var(--surface-04);
}

.basemap-btn.active {
    background: rgba(0, 180, 216, 0.1);
    color: var(--accent-teal);
}

.basemap-icon {
    font-size: var(--text-sm);
    line-height: 1;
}

/* ---- Loading Overlay ---- */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-surface);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    color: var(--text-primary);
    font-size: var(--text-base);
    gap: 16px;
    backdrop-filter: var(--glass-blur);
}

.loading-overlay.visible {
    display: flex;
}

/* Dual-ring spinner — replaces generic border-spin */
.spinner {
    width: 32px;
    height: 32px;
    position: relative;
}

.spinner::before,
.spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
}

.spinner::before {
    border-top-color: var(--accent-teal);
    border-right-color: var(--accent-teal);
    animation: spin 0.8s linear infinite;
}

.spinner::after {
    inset: 4px;
    border-bottom-color: var(--teal-40);
    border-left-color: var(--teal-40);
    animation: spin 1.2s linear infinite reverse;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Vessel Markers ---- */
.vessel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vessel-icon svg {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    transition: filter 0.2s ease, transform 0.2s ease;
}

.vessel-icon:hover svg {
    filter: drop-shadow(0 2px 8px var(--teal-40));
    transform: scale(1.15);
}

/* Draggable scheduled markers — grab cursor */
.vessel-scheduled {
    cursor: grab !important;
}

.vessel-scheduled:active {
    cursor: grabbing !important;
}

/* ---- Measurement delete popup ---- */
.measurement-popup .leaflet-popup-content { margin: 6px 8px; }
.msmt-delete-btn {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: var(--radius-sm, 4px);
    padding: 4px 10px;
    font-family: var(--font-ui);
    font-size: var(--text-xs, 11px);
    cursor: pointer;
}
.msmt-delete-btn:hover { background: rgba(239, 68, 68, 0.28); color: #fff; }

/* ---- Embedded dimension labels (CAD-style annotations on drawings) ---- */
.drawing-dim-label {
    pointer-events: none;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--dim-color, #00b4d8);
    text-shadow:
        0 0 2px rgba(0, 0, 0, 0.85),
        0 0 4px rgba(0, 0, 0, 0.65);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    padding: 0;
}

/* ---- Zoom-tier scaling ----
   Vessels, zones, and drawings look thick/cartoonish at low zooms because
   their pixel sizes are constant while the world shrinks. These rules scale
   vessel icons (via --vessel-scale used in vesselSvg's transform) and thin
   vector overlay strokes proportionally. Tiers set by updateZoomTier() in app.js. */
.helm-zoom-xs { --vessel-scale: 0.5; }   /* z<=4 — globe view */
.helm-zoom-sm { --vessel-scale: 0.65; }  /* z 5-6 */
.helm-zoom-md { --vessel-scale: 0.82; }  /* z 7-8 */

.helm-zoom-xs .leaflet-overlay-pane svg path { stroke-width: 0.6; }
.helm-zoom-sm .leaflet-overlay-pane svg path { stroke-width: 0.85; }
.helm-zoom-md .leaflet-overlay-pane svg path { stroke-width: 1.1; }

/* ---- Popup ---- */
.leaflet-popup-content-wrapper {
    position: relative;
    background: var(--grad-popup) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--surface-04), var(--shadow-glow) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-primary) !important;
    border: none !important;
    overflow: hidden;
}

.leaflet-popup-tip {
    background: var(--surface-popup) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-popup-close-button {
    color: var(--text-dim) !important;
    font-size: 16px !important;
    top: 10px !important;
    right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm) !important;
    transition: all 0.15s var(--ease-smooth);
}

.leaflet-popup-close-button:hover {
    color: var(--text-primary) !important;
    background: var(--surface-06) !important;
}

.leaflet-popup-content {
    margin: 16px 18px;
    line-height: 1.5;
}

.vessel-popup {
    min-width: 270px;
}

.vessel-popup-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--border-subtle);
    border-top: 2px solid var(--accent-teal);
    margin-top: -16px;
    padding-top: 16px;
    background: linear-gradient(180deg, rgba(0, 180, 216, 0.04) 0%, transparent 60%);
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
}

.vessel-popup-scheduled .vessel-popup-header {
    border-top-color: var(--accent-amber);
    background: linear-gradient(180deg, rgba(232, 145, 45, 0.04) 0%, transparent 60%);
}

.vessel-photo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--teal-15);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vessel-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.vessel-popup-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vessel-popup h3 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.2;
}

.vessel-type-badge {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: 400;
}

.vessel-popup .source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: var(--text-xs);
    font-weight: 600;
    width: fit-content;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.source-badge.live {
    background: var(--teal-15);
    color: var(--accent-teal);
    border-left: 2px solid var(--accent-teal);
    animation: pulse-badge 2.5s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.source-badge.scheduled {
    background: var(--amber-20);
    color: var(--accent-amber);
    border-left: 2px solid var(--accent-amber);
}

.vessel-popup-body .info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    font-size: var(--text-sm);
}

.vessel-popup-body .label {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin-right: 20px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vessel-popup-body .value {
    color: var(--text-primary);
    text-align: right;
    font-family: var(--font-data);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
}

/* Instrument-style readouts for speed/heading */
.vessel-popup-body .value.readout {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--accent-teal);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(0, 180, 216, 0.2);
}

/* Tabular nums for all data values */
.vessel-popup-body .value,
.weather-card-value,
.weather-hour-wave,
.weather-hour-wind,
#vesselCount,
#lastUpdate,
.header-stats {
    font-variant-numeric: tabular-nums;
}

.vessel-popup-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.popup-action-btn {
    flex: 1;
    padding: 7px 12px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    border: 1px solid var(--surface-06);
    border-radius: var(--radius-sm);
    background: var(--surface-02);
    color: var(--text-dim);
    cursor: not-allowed;
    transition: all 0.2s var(--ease-smooth);
    letter-spacing: 0.02em;
}

.popup-action-btn:not(:disabled) {
    background: rgba(0, 180, 216, 0.06);
    color: var(--accent-teal);
    border-color: rgba(0, 180, 216, 0.15);
    cursor: pointer;
}

.popup-action-btn:not(:disabled):hover {
    background: rgba(0, 180, 216, 0.12);
    border-color: rgba(0, 180, 216, 0.25);
}

.popup-action-btn.primary:not(:disabled) {
    background: linear-gradient(180deg, rgba(0, 180, 216, 0.32), rgba(0, 180, 216, 0.22));
    color: #e6f7fb;
    border-color: rgba(0, 180, 216, 0.55);
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 12px rgba(0, 180, 216, 0.18);
}

.popup-action-btn.primary:not(:disabled):hover {
    background: linear-gradient(180deg, rgba(0, 180, 216, 0.42), rgba(0, 180, 216, 0.28));
    border-color: rgba(0, 180, 216, 0.7);
}

/* ---- Scheduled Vessel Popup ---- */
.vessel-popup-scheduled .source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: var(--text-xs);
    font-weight: 600;
    width: fit-content;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.popup-project-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    margin-bottom: 6px;
    width: fit-content;
}

.popup-notes {
    max-width: 180px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
    text-align: right;
}

.vessel-popup-body .info-row:has(.popup-notes) {
    align-items: flex-start;
}

/* Weather go/no-go traffic light */
.popup-weather-gonogo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: var(--radius-md);
    background: var(--surface-02);
    border: 1px solid var(--surface-04);
    font-size: var(--text-xs);
}

.wx-traffic-light {
    flex-shrink: 0;
}

.wx-light {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--surface-10);
}

.wx-light-loading {
    background: var(--text-dim);
    animation: pulse-badge 1.5s ease-in-out infinite;
}

.wx-light-green  { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.wx-light-amber  { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.5); }
.wx-light-red    { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.5); }
.wx-light-unknown { background: var(--text-dim); }

.wx-limit-text {
    color: var(--text-muted);
    font-family: var(--font-data);
}

.wx-status-text {
    color: var(--text-dim);
    font-family: var(--font-data);
    margin-left: auto;
}

.wx-status-green  { color: #22c55e; }
.wx-status-amber  { color: #f59e0b; }
.wx-status-red    { color: #ef4444; font-weight: 600; }
.wx-status-unknown { color: var(--text-dim); }

/* ---- Schedule Search Box ---- */
.schedule-search-box {
    position: relative;
    padding: 4px 18px 10px;
}

.schedule-search-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none;
    margin-top: -3px;
    transition: color 0.2s var(--ease-smooth);
    opacity: 0.6;
}

.schedule-search-box:focus-within .schedule-search-icon {
    color: var(--accent-teal);
    opacity: 1;
}

.schedule-search-input {
    width: 100%;
    padding: 7px 12px 7px 30px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-02);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    outline: none;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    box-sizing: border-box;
}

.schedule-search-input::placeholder {
    color: var(--text-dim);
    font-weight: 400;
}

.schedule-search-input:focus {
    border-color: var(--teal-40);
    background: rgba(0, 180, 216, 0.04);
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.06);
}

/* ---- Schedule Card Subline ---- */
.schedule-card-subline {
    font-size: var(--text-xs);
    color: var(--text-dim);
    font-family: var(--font-ui);
    padding: 1px 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

/* ---- Marker Cluster Overrides ---- */
.marker-cluster {
    background: transparent !important;
}

.marker-cluster div {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-data) !important;
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    border: 1.5px solid var(--teal-40) !important;
    backdrop-filter: var(--glass-blur);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.marker-cluster-small {
    background: transparent !important;
}
.marker-cluster-small div {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    margin-left: 4px !important;
    margin-top: 4px !important;
    font-size: var(--text-xs) !important;
}

.marker-cluster-medium {
    background: transparent !important;
}
.marker-cluster-medium div {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    margin-left: 1px !important;
    margin-top: 1px !important;
    border-color: rgba(0, 180, 216, 0.5) !important;
}

.marker-cluster-large {
    background: transparent !important;
}
.marker-cluster-large div {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    margin-left: -2px !important;
    margin-top: -2px !important;
    border-color: rgba(0, 180, 216, 0.6) !important;
    font-size: var(--text-sm) !important;
}

/* ---- Context Menu ---- */
.ctx-menu {
    display: none;
    position: fixed;
    z-index: 3000;
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
    padding: 4px;
    min-width: 200px;
}

.ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 12px;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    color: var(--text-primary);
    font-family: var(--font-data);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: left;
}

.ctx-item:hover {
    background: var(--teal-15);
    border-left-color: var(--accent-teal);
    padding-left: 14px;
}

.ctx-icon {
    flex-shrink: 0;
    color: var(--text-dim);
    transition: color 0.12s ease;
}

.ctx-item:hover .ctx-icon {
    color: var(--accent-teal);
}

.ctx-label {
    flex: 1;
}

.ctx-sub {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-dim);
}

.ctx-sep {
    height: 1px;
    margin: 4px 8px;
    background: var(--border-medium);
}

/* ---- Measure Tooltip ---- */
.measure-tooltip {
    background: var(--bg-surface) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--teal-30) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--accent-teal) !important;
    font-family: var(--font-data) !important;
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    box-shadow: var(--shadow-panel) !important;
}

.measure-tooltip::before {
    display: none !important;
}

/* Voyage waypoint + start markers (L.divIcon, draggable) */
.voyage-dot-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
}
.voyage-dot {
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
}
.voyage-dot-wrap--draggable { cursor: grab; }
.voyage-dot-wrap--draggable:active { cursor: grabbing; }

/* Multi-segment measure — per-segment label (distance + bearing) */
.measure-seg-label {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 3px 8px;
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--teal-30);
    border-radius: 3px;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--accent-teal);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.measure-seg-label .mseg-d {
    font-weight: 600;
}
.measure-seg-label .mseg-b {
    opacity: 0.7;
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

/* Live rubber-band label — slightly brighter to signal "not yet committed" */
.measure-seg-label.measure-seg-live {
    border-color: var(--accent-teal);
    background: rgba(0, 180, 216, 0.18);
    color: #e6f7fb;
    box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.45), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.measure-seg-label.measure-seg-live .mseg-b {
    color: rgba(230, 247, 251, 0.75);
}

/* Total distance label at end of measurement */
.measure-seg-label.measure-total-label {
    background: rgba(0, 180, 216, 0.18);
    border-color: var(--accent-teal);
    transform: translate(-50%, -120%);
}

/* User-drawing labels — permanent text bound to drawings (point/line/poly/circle/sector)
   Two-layer DOM: outer .drawing-label is the anchor (positioned by Leaflet at the
   shape's centroid latlng). Inner .drawing-label-pill is the visual block — it can
   be displaced from the anchor via --dx/--dy CSS vars (set by deconflictLabels in
   app.js) to avoid colliding with other labels. */
.drawing-label {
    pointer-events: none;
    /* outer element is a zero-size anchor; visuals live on the pill */
    background: transparent;
    border: 0;
}
.drawing-label-pill {
    --dx: 0px;
    --dy: 0px;
    background: rgba(15, 25, 35, 0.85);
    border: 1px solid rgba(0, 180, 216, 0.55);
    border-radius: 4px;
    color: #e6f7fb;
    font-family: var(--font-ui, 'DM Sans'), sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 8px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    /* default: centered on anchor. dx/dy are pixel offsets applied by deconflictLabels(). */
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));
    transition: transform 160ms ease;
}
.drawing-label-text { color: inherit; }

/* Inline label editor — refined chip styling. Floats above the shape it edits,
   with a small caret pointing down at the anchor. Single row: text input |
   project selector | action buttons. */
.drawing-label-edit {
    position: absolute;
    transform: translate(-50%, calc(-100% - 16px));
    z-index: 1200;
    display: inline-flex;
    align-items: stretch;
    background: linear-gradient(180deg, rgba(18, 28, 40, 0.97), rgba(12, 20, 30, 0.97));
    border: 1px solid rgba(0, 180, 216, 0.3);
    border-radius: 8px;
    overflow: visible;
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px) saturate(1.2);
    font-family: var(--font-ui, 'DM Sans'), sans-serif;
    color: #e6f7fb;
    /* prevent default browser focus halos from leaking outside the chip rounded corners */
}
/* Downward-pointing caret indicating which shape the chip is editing */
.drawing-label-edit::before,
.drawing-label-edit::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}
.drawing-label-edit::before {
    /* border layer behind the fill */
    top: 100%;
    margin-left: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid rgba(0, 180, 216, 0.3);
}
.drawing-label-edit::after {
    /* fill, 1px inset so the border peeks out */
    top: 100%;
    margin-left: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(12, 20, 30, 0.97);
}
.drawing-label-edit .dle-input {
    background: transparent;
    border: 0;
    color: inherit;
    font: 600 var(--text-sm)/1.2 var(--font-ui, 'DM Sans'), sans-serif;
    letter-spacing: 0.01em;
    padding: 9px 14px;
    width: 200px;
    outline: none;
    border-radius: 8px 0 0 8px;
}
.drawing-label-edit .dle-input::placeholder {
    color: rgba(230, 247, 251, 0.38);
    font-weight: 500;
}
.drawing-label-edit .dle-input:focus {
    background: rgba(0, 180, 216, 0.06);
}
.drawing-label-edit .dle-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
    margin: 6px 0;
}
.drawing-label-edit .dle-project {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="rgba(230,247,251,0.55)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 0;
    color: inherit;
    font: 500 var(--text-xs)/1 var(--font-ui, 'DM Sans'), sans-serif;
    letter-spacing: 0.02em;
    padding: 9px 26px 9px 12px;
    cursor: pointer;
    max-width: 160px;
    text-overflow: ellipsis;
    outline: none;
}
.drawing-label-edit .dle-project:hover { background-color: rgba(255, 255, 255, 0.03); }
.drawing-label-edit .dle-project:focus { background-color: rgba(0, 180, 216, 0.06); }
.drawing-label-edit .dle-actions {
    display: inline-flex;
    align-items: stretch;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.drawing-label-edit button {
    background: transparent;
    border: 0;
    color: rgba(230, 247, 251, 0.7);
    width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    padding: 0;
}
.drawing-label-edit button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e6f7fb;
}
.drawing-label-edit button svg {
    display: block;
    width: 15px;
    height: 15px;
    stroke-width: 2;
}
.drawing-label-edit .dle-save:hover { color: var(--accent-teal); }
.drawing-label-edit .dle-del:hover { color: #fbbf24; }
.drawing-label-edit .dle-trash:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}
.drawing-label-edit .dle-trash {
    border-radius: 0 8px 8px 0;
}
.drawing-label-edit > :first-child {
    border-radius: 8px 0 0 8px;
}

/* Graticule grid labels — theme-aware so they stay legible on both light and dark map backgrounds */
.graticule-label {
    font-family: var(--font-data);
    font-size: 9px;
    color: var(--text-dim);
    opacity: 0.65;
    white-space: nowrap;
    pointer-events: none;
}

#map.measure-active, #map.draw-active {
    cursor: crosshair;
}

/* Draw & Measure — coordinate input panel */
.draw-coord-panel {
    position: fixed;
    top: calc(var(--header-height) + 12px);
    left: 200px;
    z-index: 910;
    width: 220px;
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--teal-30);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-primary);
    animation: fadeIn 0.15s ease;
}
.dcp-header {
    padding: 6px 10px 4px;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border-subtle);
}
.dcp-list {
    max-height: 180px;
    overflow-y: auto;
}
.dcp-entry {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-bottom: 1px solid var(--border-subtle);
}
.dcp-entry-coord {
    flex: 1;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcp-entry-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    color: var(--accent-teal);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: 0;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.dcp-entry-btn:hover {
    background: rgba(0, 180, 216, 0.15);
    border-color: var(--accent-teal);
}
.dcp-entry-btn.drawn {
    color: var(--text-dim);
    border-color: transparent;
}
.dcp-input-row {
    padding: 6px 10px 2px;
}
.dcp-input {
    width: 100%;
    padding: 5px 8px;
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    color: var(--text-primary);
    font-family: var(--font-data);
    font-size: var(--text-sm);
    outline: none;
    box-sizing: border-box;
}
.dcp-input:focus {
    border-color: var(--accent-teal);
}
.dcp-hint {
    padding: 2px 10px 6px;
    font-size: 9px;
    color: var(--text-dim);
    line-height: 1.3;
}
.dcp-extra {
    margin-top: 6px;
}
.dcp-extra label {
    display: block;
    font-size: var(--text-2xs);
    color: var(--text-dim);
    margin-bottom: 2px;
}
.dcp-extra input {
    width: 100%;
    padding: 4px 6px;
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    color: var(--text-primary);
    font-family: var(--font-data);
    font-size: var(--text-sm);
    outline: none;
    box-sizing: border-box;
}
.dcp-extra input:focus {
    border-color: var(--accent-teal);
}
.dcp-footer {
    padding: 6px 10px 8px;
    border-top: 1px solid var(--border-subtle);
}
.dcp-done-btn {
    width: 100%;
    padding: 5px 0;
    background: rgba(0, 180, 216, 0.12);
    border: 1px solid var(--teal-30);
    border-radius: 3px;
    color: var(--accent-teal);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease;
}
.dcp-done-btn:hover {
    background: rgba(0, 180, 216, 0.22);
}

/* ---- Name Labels (zoom-dependent) ---- */
.helm-label {
    background: var(--bg-surface) !important;
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-medium) !important;
    border-radius: 2px !important;
    color: var(--text-primary) !important;
    font-family: var(--font-data) !important;
    font-size: var(--text-xs) !important;
    font-weight: 500 !important;
    padding: 1px 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap;
    pointer-events: none;
}

.helm-label::before {
    display: none !important;
}

.vessel-label {
    color: var(--accent-teal) !important;
    padding: 0 !important;
    pointer-events: auto;
}

.vessel-label-button {
    display: block;
    padding: 1px 5px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    white-space: inherit;
    cursor: pointer;
}

.vessel-label-button:focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: 2px;
}

.field-label {
    color: var(--text-muted) !important;
    font-size: var(--text-xs) !important;
    background: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
}

.facility-label {
    color: var(--accent-green) !important;
    font-size: var(--text-xs) !important;
}

/* ---- User Area & Auth ---- */
.user-area {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    flex-shrink: 0;
    animation: fadeStagger 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

.user-login-btn {
    color: var(--accent-teal) !important;
    border-color: var(--teal-30) !important;
}

.user-login-btn:hover {
    background: var(--teal-15) !important;
}

.user-menu {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px !important;
}
.account-settings-icon { flex-shrink: 0; margin-left: auto; color: var(--text-muted); }
.guest-settings .user-menu-btn { padding: 8px !important; }
.user-menu [hidden] { display: none !important; }
.dropdown-heading { padding: 8px 14px 4px; font-size: var(--text-xs); color: var(--text-dim); }
.dropdown-item.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-value { color: var(--text-primary); font-size: var(--text-xs); }

.user-initial {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 180, 216, 0.08);
    border: 1px solid rgba(0, 180, 216, 0.18);
    color: var(--accent-teal);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-name {
    font-size: var(--text-sm);
    color: var(--text-primary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--surface-06);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    padding: 8px 0;
    z-index: 2000;
}

.dropdown-org {
    padding: 8px 14px 2px;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

.dropdown-role {
    padding: 0 14px 8px;
    font-size: var(--text-xs);
    font-family: var(--font-data);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dropdown-sep {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    transition: all 0.12s ease;
}

.dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    padding-left: 18px;
}

/* ---- Login Modal ---- */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: var(--scrim-70);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    position: relative;
    width: 360px;
    max-width: 90vw;
    background: var(--grad-modal);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-top: 2px solid var(--accent-teal);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--surface-03);
    padding: 36px 32px 28px;
}

.login-header {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo {
    color: var(--text-muted);
    margin-bottom: 12px;
}

.login-header h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--text-primary);
    margin: 0;
}

.login-subtitle {
    font-size: var(--text-xs);
    color: var(--text-dim);
    letter-spacing: 0.08em;
    margin-top: 4px;
    text-transform: uppercase;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    background: var(--scrim-20);
    border: 1px solid var(--surface-06);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    transition: all 0.2s var(--ease-smooth);
}

.form-group input:focus {
    outline: none;
    border-color: rgba(0, 180, 216, 0.35);
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.06);
    background: var(--scrim-25);
}

.form-group input::placeholder {
    color: var(--text-dim);
}

.login-error {
    padding: 8px 12px;
    margin-bottom: 14px;
    border-radius: var(--radius-sm);
    background: var(--red-10);
    border: 1px solid var(--red-25);
    border-left: 3px solid var(--accent-red);
    color: var(--accent-red);
    font-size: var(--text-sm);
}

.login-submit-btn {
    width: 100%;
    padding: 10px !important;
    background: var(--teal-15) !important;
    border-color: var(--teal-30) !important;
    color: var(--accent-teal) !important;
    font-weight: 600 !important;
    font-size: var(--text-base) !important;
    justify-content: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.login-submit-btn:hover {
    background: var(--teal-25) !important;
    border-color: var(--teal-40) !important;
    box-shadow: 0 0 16px var(--teal-15) !important;
    transform: translateY(-1px);
}

.login-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: all 0.15s ease;
}

.login-close:hover {
    color: var(--text-primary);
    transform: scale(1.1);
}

/* ---- Sodir GIS Layer Toggles ---- */
.sodir-toggles {
    margin-left: 3px;
    padding-left: 8px;
    border-left: 1px solid var(--border-subtle);
}

/* ---- Sodir Popups ---- */
.sodir-popup {
    min-width: 240px;
}

.sodir-popup h3 {
    margin: 0 0 6px 0;
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.2;
}

.sodir-popup .sodir-type {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sodir-popup .info-row {
    display: flex;
    justify-content: space-between;
    padding: 2.5px 0;
    font-size: var(--text-sm);
}

.sodir-popup .label {
    font-weight: 500;
    color: var(--text-muted);
    margin-right: 16px;
}

.sodir-popup .value {
    color: var(--text-primary);
    text-align: right;
    font-family: var(--font-data);
    font-size: var(--text-sm);
}

.sodir-popup .sodir-link {
    display: inline-block;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle);
    color: var(--accent-teal);
    font-size: var(--text-xs);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.12s ease;
}

.sodir-popup .sodir-link:hover {
    color: var(--text-primary);
}

/* ---- Scanline overlay for instrument panels ---- */
.weather-panel::after,
.leaflet-popup-content-wrapper::after,
.ctx-menu::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.03;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.5) 2px,
        rgba(255, 255, 255, 0.5) 3px
    );
}

/* ---- Weather Panel ---- */
.weather-panel {
    position: fixed;
    top: 60px;
    right: 12px;
    width: 340px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    z-index: 2000;
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--teal-40);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel), var(--shadow-glow);
    animation: weatherSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.weather-panel::-webkit-scrollbar {
    width: 4px;
}

.weather-panel::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 2px;
}

@keyframes weatherSlideIn {
    from { opacity: 0; transform: translateX(16px) scale(0.98); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

.weather-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.weather-panel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.weather-panel-title svg {
    color: var(--accent-teal);
    flex-shrink: 0;
}

.weather-panel-coords {
    flex: 1;
    text-align: right;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weather-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: all 0.12s ease;
    flex-shrink: 0;
}

.weather-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.weather-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 14px;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.spinner-sm {
    width: 14px !important;
    height: 14px !important;
}

.spinner-sm::before,
.spinner-sm::after {
    border-width: 1.5px !important;
}

.weather-content {
    padding: 0;
}

.weather-section {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.weather-section:last-of-type {
    border-bottom: none;
}

.weather-section-label {
    font-family: var(--font-data);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

/* Current conditions grid */
.weather-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.weather-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s ease;
}

.weather-card:hover {
    border-color: var(--border-medium);
}

.weather-card.card-wide {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.weather-card-label {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.weather-card-label svg {
    flex-shrink: 0;
}

.weather-card-value {
    font-family: var(--font-data);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.weather-card-sub {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.weather-card-value .unit {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--text-dim);
    margin-left: 2px;
}

/* Direction arrows */
.weather-dir-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    color: var(--accent-teal);
    font-size: var(--text-base);
    margin-right: 3px;
}

/* Severity badges — instrument-grade color coding */
.severity-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 1px;
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-left: 2px solid currentColor;
}

.severity-calm       { background: var(--green-15); color: var(--accent-green); }
.severity-slight     { background: var(--green-15); color: var(--accent-green); }
.severity-moderate   { background: var(--amber-20); color: var(--accent-amber); }
.severity-rough      { background: var(--red-10);   color: var(--accent-red); }
.severity-very_rough { background: var(--red-25);   color: var(--accent-red); }
.severity-high       { background: var(--red-25);   color: var(--accent-red); }
.severity-phenomenal { background: rgba(255, 107, 74, 0.35); color: #ffb09e; }

/* Forecast timeline */
.weather-timeline {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.weather-timeline::-webkit-scrollbar {
    height: 4px;
}

.weather-timeline::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 2px;
}

.weather-hour {
    flex: 0 0 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    transition: all 0.15s ease;
}

.weather-hour:hover {
    border-color: var(--border-medium);
}

.weather-hour:first-child {
    border-color: var(--teal-30);
    background: var(--teal-15);
}

.weather-hour-time {
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    color: var(--text-dim);
    white-space: nowrap;
}

.weather-hour-wave {
    font-family: var(--font-data);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.weather-hour-wind {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.weather-hour-arrow {
    color: var(--accent-teal);
    font-size: var(--text-xs);
    line-height: 1;
}

.weather-day-sep {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 10px 0 4px;
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    border-left: 1px solid var(--border-subtle);
    margin-left: 4px;
}

.weather-day-sep:first-child {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
}

.weather-attribution {
    padding: 8px 14px;
    font-size: var(--text-2xs);
    color: var(--text-dim);
    text-align: center;
    letter-spacing: 0.02em;
}

.weather-error {
    padding: 16px 14px;
    color: var(--accent-red);
    font-size: var(--text-sm);
    text-align: center;
}

/* Beaufort color coding — maritime palette */
.bf-low    { color: var(--accent-green); }  /* 0-3 */
.bf-mod    { color: var(--accent-amber); }  /* 4-6 */
.bf-high   { color: var(--accent-red); }    /* 7-9 */
.bf-storm  { color: #ffb09e; }             /* 10-12 */

/* ---- Schedule Toggle Button ---- */
.schedule-toggle-btn {
    margin-left: 3px;
    padding-left: 8px;
    border-left: 1px solid var(--border-subtle);
}

/* ---- Schedule Panel (right sidebar) ---- */
.schedule-panel {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: 380px;
    height: calc(100vh - var(--header-height));
    z-index: 1500;
    background: var(--grad-schedule);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-left: 1px solid var(--surface-04);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    animation: scheduleSlideIn 0.3s var(--ease-out);
}

@keyframes scheduleSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.schedule-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%);
}

.schedule-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    flex: 1;
}

.schedule-panel-title svg {
    color: var(--accent-amber);
    flex-shrink: 0;
    opacity: 0.7;
}

.schedule-count-badge {
    background: rgba(232, 145, 45, 0.1);
    color: var(--accent-amber);
    font-size: var(--text-2xs);
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid rgba(232, 145, 45, 0.18);
    font-family: var(--font-data);
    min-width: 22px;
    text-align: center;
}

.schedule-add-btn {
    padding: 4px 10px !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    color: var(--text-dim) !important;
    border-color: var(--surface-06) !important;
    background: var(--surface-03) !important;
    line-height: 1;
    border-radius: var(--radius-sm) !important;
    transition: all 0.15s var(--ease-smooth) !important;
}

.schedule-add-btn:hover {
    background: var(--surface-06) !important;
    color: var(--text-primary) !important;
    border-color: var(--surface-10) !important;
}

.schedule-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: var(--text-md);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: all 0.15s var(--ease-smooth);
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.5;
}

.schedule-close:hover {
    color: var(--text-primary);
    background: var(--surface-04);
    opacity: 1;
}

/* Schedule filter dropdowns (project + activity type) */
.schedule-filter-dropdowns {
    display: flex;
    gap: 6px;
    padding: 10px 18px 6px;
    flex-shrink: 0;
}

.schedule-filter-select {
    flex: 1;
    padding: 5px 8px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--surface-02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233d4f66'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 22px;
    min-width: 0;
    transition: all 0.15s var(--ease-smooth);
}

.schedule-filter-select:hover {
    border-color: var(--surface-08);
    background: var(--surface-03);
}

.schedule-filter-select:focus {
    outline: none;
    border-color: rgba(0, 180, 216, 0.3);
}

.schedule-filter-select option {
    background: var(--bg-deep);
    color: var(--text-primary);
}

/* Project color tag on schedule cards */
.schedule-card-project {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    margin-top: 2px;
}

.schedule-card-project .project-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Project management modal */
.project-manage-list {
    max-height: 250px;
    overflow-y: auto;
    padding: 0 20px;
}

.project-manage-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.project-manage-item .project-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.project-manage-item .project-name {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.project-manage-item .project-name input {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-ui);
}

.project-manage-actions {
    display: flex;
    gap: 4px;
}

.project-manage-actions button {
    padding: 3px 8px;
    font-size: var(--text-xs);
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
}

.project-manage-actions button:hover {
    color: var(--text-muted);
    border-color: var(--border-medium);
}

.project-manage-actions button.danger:hover {
    color: var(--accent-red, #ef4444);
    border-color: var(--accent-red, #ef4444);
}

.project-add-row {
    display: flex;
    gap: 6px;
    padding: 12px 20px;
    align-items: center;
}

.project-name-input {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
}

.project-color-input {
    width: 32px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-surface);
    cursor: pointer;
}

/* Schedule status filters */
.schedule-filters {
    display: flex;
    gap: 3px;
    padding: 8px 18px 10px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    overflow-x: auto;
}

.filter-chip {
    padding: 4px 11px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s var(--ease-smooth);
}

.filter-chip:hover {
    color: var(--text-muted);
    background: var(--surface-03);
}

.filter-chip.active {
    color: var(--text-primary);
    background: var(--surface-06);
    border-color: var(--surface-08);
}

/* Schedule list */
.schedule-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-06) transparent;
}

.schedule-list::-webkit-scrollbar { width: 3px; }
.schedule-list::-webkit-scrollbar-thumb { background: var(--surface-06); border-radius: 2px; }
.schedule-list::-webkit-scrollbar-thumb:hover { background: var(--surface-10); }

/* Schedule cards */
.schedule-card {
    background: var(--surface-04);
    border: 1px solid var(--edge-08);
    border-left: 2px solid var(--text-dim);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
    position: relative;
}

.schedule-card:hover {
    background: var(--surface-03);
    border-color: var(--surface-06);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

/* Status accent on left border */
.schedule-card[data-status="planned"]   { border-left-color: var(--accent-amber); }
.schedule-card[data-status="ongoing"]   { border-left-color: var(--accent-green); }
.schedule-card[data-status="completed"] { border-left-color: var(--text-dim); }
.schedule-card[data-status="cancelled"] { border-left-color: var(--accent-red); }

/* Light theme — at the default --surface-04 (4% navy on white), the card
   body blends into the panel and only the 2px left-edge marker locates
   the card. Use a solid white fill instead: it gives cards their own
   surface that reads against the panel gradient, plus a stronger border
   and a soft shadow for the "card sitting on a card" feel. */
[data-theme="light"] .schedule-card {
    background: #ffffff;
    border-color: rgba(10, 25, 45, 0.10);
    box-shadow: 0 1px 2px rgba(10, 25, 45, 0.04), 0 0 0 1px rgba(10, 25, 45, 0.02);
}
[data-theme="light"] .schedule-card:hover {
    background: #ffffff;
    border-color: rgba(10, 25, 45, 0.18);
    box-shadow: 0 2px 8px rgba(10, 25, 45, 0.08);
}

.schedule-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.schedule-card-name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.schedule-card-status {
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 3px;
    flex-shrink: 0;
    transition: all 0.15s var(--ease-smooth);
}

.status-planned     { background: rgba(232, 145, 45, 0.12); color: var(--accent-amber); }
.status-ongoing     { background: rgba(0, 212, 170, 0.1); color: var(--accent-green); }
.status-completed   { background: rgba(107, 125, 153, 0.08); color: var(--text-dim); }
.status-cancelled   { background: rgba(255, 107, 74, 0.08); color: rgba(255, 107, 74, 0.6); }

.schedule-card-status[data-action="cycle-status"] { cursor: pointer; }
.schedule-card-status[data-action="cycle-status"]:hover {
    filter: brightness(1.15);
    transform: scale(1.04);
}

.activity-badge {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.schedule-card-detail {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--text-dim);
    font-family: var(--font-data);
    padding: 2px 0;
    letter-spacing: 0.02em;
}

.schedule-card-detail .val {
    color: var(--text-muted);
}

.schedule-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--surface-04);
}

.sched-action-group {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.sched-action-btn {
    flex: 1;
    padding: 5px 8px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface-03);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s var(--ease-smooth);
    letter-spacing: 0.02em;
}

.sched-action-btn:hover {
    color: var(--accent-teal);
    background: rgba(0, 180, 216, 0.08);
    border-color: rgba(0, 180, 216, 0.15);
}

.sched-action-btn.primary {
    background: rgba(0, 180, 216, 0.12);
    color: var(--accent-teal);
    border-color: rgba(0, 180, 216, 0.22);
}

.sched-action-btn.primary:hover {
    background: rgba(0, 180, 216, 0.2);
    border-color: rgba(0, 180, 216, 0.35);
}

.sched-action-btn.danger {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    background: transparent;
    opacity: 0.55;
}

.sched-action-btn.danger:hover {
    color: var(--accent-red);
    background: rgba(255, 107, 74, 0.08);
    border-color: rgba(255, 107, 74, 0.2);
    opacity: 1;
}

/* Compact card (>5 entries) */
.schedule-card.compact {
    padding: 8px 14px;
    margin-bottom: 3px;
}

.schedule-card.compact .schedule-card-header {
    margin-bottom: 1px;
}

.schedule-card.compact .activity-badge,
.schedule-card.compact .schedule-card-expandable,
.schedule-card.compact .schedule-card-actions {
    display: none;
}

.schedule-card.compact:hover .schedule-card-actions {
    display: flex;
    margin-top: 6px;
    padding-top: 4px;
}

.schedule-card-expandable {
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.schedule-card.expanded .schedule-card-expandable {
    display: block;
    animation: expandReveal 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes expandReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Schedule empty state */
.schedule-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--text-dim);
    font-size: var(--text-sm);
    text-align: center;
}

/* ---- Schedule Modal ---- */
.schedule-modal-card {
    position: relative;
    width: 480px;
    max-width: 94vw;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--grad-modal);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-top: 2px solid var(--accent-amber);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--surface-03);
    padding: 28px 28px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-06) transparent;
}

.schedule-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group-full {
    grid-column: span 2;
}

.form-group-pick {
    grid-column: span 2;
    display: flex;
    justify-content: flex-end;
    margin-top: -4px;
}

.schedule-pick-btn {
    font-size: var(--text-xs) !important;
    color: var(--accent-teal) !important;
    border-color: var(--teal-30) !important;
}

.schedule-pick-btn:hover {
    background: var(--teal-15) !important;
}

.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--scrim-20);
    border: 1px solid var(--surface-06);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    transition: all 0.2s var(--ease-smooth);
}

.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: rgba(0, 180, 216, 0.35);
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.06);
    background: var(--scrim-25);
}

.form-group select option {
    background: var(--bg-panel);
    color: var(--text-primary);
}

.form-group textarea {
    resize: vertical;
    min-height: 40px;
}

/* Schedule time row — Start / Duration / End */
.schedule-time-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.sched-time-col {
    flex: 1 1 0;
    min-width: 0;
}

.sched-time-col .date-input {
    width: 100%;
    box-sizing: border-box;
}

.sched-dur-col {
    flex: 1;
    min-width: 0;
}

/* Duration quick buttons (horizontal row under Start/End) */
.duration-quick-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Legacy duration row (kept for compat) */
.duration-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.duration-input {
    width: 60px !important;
    min-width: 60px;
    flex-shrink: 0;
    text-align: center;
    font-family: var(--font-data) !important;
}

.duration-quick {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.dur-btn {
    padding: 6px 10px;
    min-width: 40px;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--surface-03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
    line-height: 1;
}

.dur-btn:hover {
    color: var(--text-bright);
    background: var(--surface-04);
    border-color: var(--border-medium);
}

.dur-btn.active {
    color: #e6f7fb;
    background: linear-gradient(180deg, rgba(0, 180, 216, 0.38), rgba(0, 180, 216, 0.22));
    border-color: rgba(0, 180, 216, 0.6);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 8px rgba(0, 180, 216, 0.2);
}

/* Date/time picker inputs */
.date-input {
    font-family: var(--font-data) !important;
    letter-spacing: 0.02em;
    color-scheme: dark;
}

.schedule-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
    position: sticky;
    bottom: -20px;
    padding: 16px 0 4px;
    background: linear-gradient(to top, var(--bg-deep, #0a1628) 70%, transparent);
    z-index: 2;
}

/* Custom styling for native date/time picker icon — match theme on dark */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8) sepia(0.2) hue-rotate(160deg) saturate(0.7);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.schedule-form-actions .login-submit-btn {
    width: auto !important;
    padding: 8px 20px !important;
}

/* ---- Facility Autocomplete Dropdown ---- */
.facility-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 3100;
    background: var(--bg-panel);
    border: 1px solid var(--border-medium);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    max-height: 200px;
    overflow-y: auto;
}

.facility-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-primary);
    transition: background 0.1s ease;
}

.facility-option:hover,
.facility-option.active {
    background: var(--teal-15);
}

.facility-option-name {
    font-weight: 500;
}

.facility-option-kind {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-dim);
}

/* Vessel-search dropdown — source-section divider + per-source row styling */
.vessel-source-label {
    padding: 5px 12px 4px;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim, rgba(230, 247, 251, 0.55));
    background: rgba(255, 255, 255, 0.025);
    border-top: 1px solid var(--edge-08);
    pointer-events: none;
}
.vessel-source-label:first-child { border-top: 0; }
.vessel-option-meta {
    margin-left: 8px;
    opacity: 0.6;
    font-size: var(--text-xs);
}
.vessel-option--registry strong { color: var(--text-dim, rgba(230, 247, 251, 0.7)); }
.vessel-option--registry .vessel-option-meta { opacity: 0.45; }
.vessel-option--registry::before {
    content: '○';
    margin-right: 6px;
    color: var(--text-dim, rgba(230, 247, 251, 0.4));
    font-size: 10px;
}
.vessel-option--live::before {
    content: '●';
    margin-right: 6px;
    color: var(--accent-teal, #00b4d8);
    font-size: 10px;
}

/* ── Activity Zones ────────────────────────────────────────── */

.zone-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
    margin-top: 4px;
}

.zone-section > label {
    display: block;
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zone-draw-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.zone-draw-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs) !important;
    color: var(--accent-teal) !important;
    border-color: var(--teal-30) !important;
    padding: 5px 10px !important;
}

.zone-draw-btn:hover {
    background: var(--teal-15) !important;
}

.zone-draw-btn svg {
    flex-shrink: 0;
}

/* Single "Edit Zones on Map" button that replaces the draw-row */
.zone-edit-on-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 7px 12px !important;
    background: linear-gradient(180deg, rgba(0,180,216,0.12), rgba(0,180,216,0.06)) !important;
    border: 1px solid var(--teal-30) !important;
    color: var(--accent-teal) !important;
    font-size: var(--text-xs) !important;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: background 0.15s, border-color 0.15s, transform 0.08s;
}

.zone-edit-on-map-btn:hover {
    background: linear-gradient(180deg, rgba(0,180,216,0.20), rgba(0,180,216,0.10)) !important;
    border-color: var(--accent-teal) !important;
}

.zone-edit-on-map-btn:active { transform: translateY(1px); }

.zone-edit-on-map-btn svg { flex-shrink: 0; opacity: 0.9; }

.zone-edit-btn-label { flex: 1; text-align: left; }

.zone-edit-btn-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    background: var(--accent-teal);
    color: #08121d;
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 700;
    border-radius: 9px;
    text-align: center;
    line-height: 14px;
}

.zone-edit-btn-count:empty, .zone-edit-btn-count[data-empty="true"] { display: none; }

.zone-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.zone-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--teal-15);
    border: 1px solid var(--teal-30);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-family: var(--font-data);
}

.zone-chip-x {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.15s;
}

.zone-chip-x:hover {
    color: #e74c3c;
}

/* DMAC auto-suggest prompt */
.dmac-suggest {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--radius-sm);
    margin-top: 6px;
}

.dmac-text {
    font-size: var(--text-xs);
    color: #f59e0b;
    white-space: nowrap;
}

.dmac-btn {
    font-size: 11px !important;
    padding: 3px 8px !important;
    color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.dmac-btn:hover {
    background: rgba(245, 158, 11, 0.12) !important;
}

.dmac-skip {
    color: var(--text-dim) !important;
    border-color: var(--border-subtle) !important;
}

/* Hide Geoman default toolbar */
.leaflet-pm-toolbar {
    display: none !important;
}

/* Geoman vertex + edit handle markers — teal to match HELM */
.zone-draw-vertex {
    background: var(--accent-teal);
    border: 2px solid #e6f7fb;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Sector draw center marker — crosshair ring */
.zone-draw-center {
    pointer-events: none;
}
.zone-draw-center .zdc-ring {
    position: absolute;
    inset: 0;
    border: 2px solid var(--accent-teal);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.25), 0 0 8px rgba(0, 180, 216, 0.5);
    background: rgba(0, 180, 216, 0.15);
}
.zone-draw-center .zdc-cross {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, transparent calc(50% - 0.5px), var(--accent-teal) calc(50% - 0.5px), var(--accent-teal) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--accent-teal) calc(50% - 0.5px), var(--accent-teal) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* Sector draw bearing labels along radials */
.zone-draw-bearing {
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    letter-spacing: 0.06em;
    padding: 2px 6px;
    background: rgba(0, 180, 216, 0.92);
    color: #041018;
    border-radius: 3px;
    white-space: nowrap;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Geoman edit-mode vertex handles — match drawing-time .zone-draw-vertex */
.leaflet-marker-icon.marker-icon,
.marker-icon.leaflet-pm-draggable {
    background: var(--accent-teal) !important;
    border: 2px solid #e6f7fb !important;
    border-radius: 50% !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: -6px !important;
    margin-top: -6px !important;
    box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
}

/* Geoman middle-marker (edge midpoint) — smaller, lower contrast so it reads as
   "insert a vertex here" rather than "this vertex exists". */
.leaflet-marker-icon.marker-icon-middle,
.marker-icon-middle {
    background: rgba(0, 180, 216, 0.55) !important;
    border: 1.5px dashed #e6f7fb !important;
    border-radius: 50% !important;
    width: 10px !important;
    height: 10px !important;
    margin-left: -5px !important;
    margin-top: -5px !important;
    box-sizing: border-box !important;
    opacity: 0.75 !important;
}

/* Geoman snap marker indicator */
.leaflet-pm-snap-marker {
    filter: hue-rotate(180deg);
}

/* ────────────────────────────────────────────────────────────
   Zone Editor — map-native edit mode
   - Rail on the right shows schedule context
   - Bottom bar has draw tools + selected-zone actions
   ──────────────────────────────────────────────────────────── */

.zone-editor {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1600;
    display: flex;
    justify-content: flex-end;
}

.zone-editor.active {
    display: flex;
}

/* Darken the ring around the map slightly for focus */
.zone-editor::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, var(--ocean-vignette) 100%);
    pointer-events: none;
}

/* ── Side rail — activity context + zone list ──────────────── */
.ze-rail {
    width: 296px;
    height: calc(100vh - 104px);
    margin: 56px 14px 48px 0;
    padding: 16px 16px 12px;
    background: var(--grad-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-card, 0 16px 48px rgba(0,0,0,0.4));
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
}

.ze-rail-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
}

.ze-rail-eyebrow {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-teal);
    font-weight: 600;
}

.ze-rail-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.ze-rail-sub {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.ze-rail-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-xs);
}

.ze-rail-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.ze-rail-meta-row > span:first-child {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 9px;
    line-height: 16px;
}

.ze-rail-meta-row > span:last-child {
    color: var(--text-secondary);
    font-family: var(--font-data);
    text-align: right;
}

.ze-zone-list-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ze-zone-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    padding: 6px 0;
    border-top: 1px solid var(--border-subtle);
}

.ze-zone-count {
    font-family: var(--font-data);
    color: var(--accent-teal);
}

.ze-zone-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 4px;
}

.ze-zone-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    background: var(--surface-02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.ze-zone-item:hover {
    background: rgba(0,180,216,0.06);
    border-color: var(--teal-30);
}

.ze-zone-item.selected {
    background: rgba(0,180,216,0.14);
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 1px var(--teal-30), inset 0 0 12px rgba(0,180,216,0.08);
}

.ze-zone-item-icon {
    flex-shrink: 0;
    width: 14px; height: 14px;
    color: var(--accent-teal);
    opacity: 0.85;
}

.ze-zone-item.selected .ze-zone-item-icon { opacity: 1; }

.ze-zone-item-label {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ze-zone-item-meta {
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    color: var(--text-dim);
}

.ze-hints {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    padding: 10px 0 2px;
    margin-top: 4px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 6px;
    letter-spacing: 0.01em;
}

.ze-hints > div,
.ze-hints > p {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}

.ze-hints kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 1px solid var(--border-medium);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-bright, #e6f7fb);
    line-height: 1;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* ── Bottom action bar ─────────────────────────────────────── */

.ze-bottombar {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--grad-fab);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,180,216,0.12) inset;
    pointer-events: auto;
    max-width: calc(100vw - 340px);
}

.ze-tools {
    display: flex;
    gap: 4px;
}

.ze-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    border-radius: 9px;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.ze-tool:hover {
    color: var(--accent-teal);
    background: rgba(0,180,216,0.08);
    border-color: var(--teal-30);
}

.ze-tool.active {
    color: #e6f7fb;
    background: linear-gradient(180deg, rgba(0,180,216,0.45), rgba(0,180,216,0.25));
    border-color: rgba(0,180,216,0.7);
    box-shadow: 0 0 0 1px rgba(0,180,216,0.4), 0 0 14px rgba(0,180,216,0.35), 0 1px 0 rgba(255,255,255,0.08) inset;
    font-weight: 600;
}

/* Draw HUD — floating bottom-center readout during draw */
.zone-draw-hud {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    background: rgba(6, 18, 32, 0.88);
    border: 1px solid rgba(0, 180, 216, 0.35);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 180, 216, 0.08);
    backdrop-filter: blur(12px);
    color: var(--text-bright, #e6f7fb);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    z-index: 1650;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.zone-draw-hud.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.zone-draw-hud .zdh-label {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--accent-teal);
    padding-right: 10px;
    border-right: 1px solid rgba(0, 180, 216, 0.25);
}
.zone-draw-hud .zdh-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.zone-draw-hud .zdh-k {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
}
.zone-draw-hud .zdh-v {
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 600;
    color: #e6f7fb;
    min-width: 64px;
    text-align: left;
}
.zone-draw-hud .zdh-hint {
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-dim);
    font-size: var(--text-xs);
    font-style: italic;
    max-width: 280px;
}

/* Crosshair cursor when a draw tool is active */
#map.zone-drawing,
#map.zone-drawing .leaflet-container {
    cursor: crosshair !important;
}

/* On-map zone label (editor mode) — minimal engineered tag */
.leaflet-tooltip.zone-map-label {
    background: rgba(6, 18, 32, 0.88);
    border: 1px solid rgba(0, 180, 216, 0.4);
    color: #e6f7fb;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    letter-spacing: 0.04em;
    /* Halo + depth for readability over satellite imagery */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 2px 10px rgba(0, 0, 0, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    pointer-events: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.leaflet-tooltip.zone-map-label::before,
.leaflet-tooltip.zone-map-label::after { display: none; }
.leaflet-tooltip.zone-map-label .zml-name {
    color: var(--accent-teal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-2xs);
}
.leaflet-tooltip.zone-map-label .zml-meta {
    font-family: var(--font-data);
    color: #cfe0f0;
    font-weight: 500;
}

.ze-tool svg { flex-shrink: 0; }

.ze-sep {
    width: 1px;
    height: 22px;
    background: var(--border-subtle);
    margin: 0 4px;
}

.ze-selection {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: rgba(0,180,216,0.12);
    border: 1px solid var(--teal-30);
    border-radius: 9px;
    max-width: 360px;
}

.ze-sel-label {
    font-size: var(--text-xs);
    color: var(--text-primary);
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ze-sel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ze-sel-btn:hover {
    color: var(--accent-teal);
    background: rgba(0,180,216,0.10);
    border-color: var(--teal-30);
}

.ze-sel-btn.danger:hover {
    color: #fca5a5;
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.35);
}

.ze-spacer { flex: 1; min-width: 4px; }

.ze-done-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(180deg, rgba(34,197,94,0.95), rgba(22,163,74,0.95));
    border: 1px solid rgba(34,197,94,0.7);
    color: #041810;
    font-weight: 600;
    font-size: var(--text-sm);
    border-radius: 9px;
    cursor: pointer;
    transition: filter 0.12s, transform 0.08s;
}

.ze-done-btn:hover { filter: brightness(1.08); }
.ze-done-btn:active { transform: translateY(1px); }

/* Numeric popover */
.ze-numeric-popover {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    width: 320px;
    padding: 14px 16px 12px;
    background: var(--grad-modal);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    z-index: 1650;
    pointer-events: auto;
}

.ze-np-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-teal);
    margin-bottom: 10px;
    font-weight: 600;
}

.ze-np-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.ze-np-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ze-np-field label {
    flex: 1;
    font-size: var(--text-xs);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ze-np-field input {
    width: 120px;
    padding: 6px 8px;
    background: var(--surface-04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-data);
    font-size: var(--text-sm);
    text-align: right;
}

.ze-np-field input:focus {
    outline: none;
    border-color: var(--accent-teal);
    background: rgba(0,180,216,0.06);
}

.ze-np-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* While editor is open, hide the main schedule modal but keep DOM */
body.zone-editor-open .modal-overlay,
body.zone-editor-open .login-overlay,
body.zone-editor-open #scheduleModal { display: none !important; }
body.zone-editor-open .schedule-panel { display: none !important; }
body.zone-editor-open #mapToolbar { display: none !important; }

/* Selected zone styling (applied to Leaflet layer) */
.zone-selected-marker { filter: drop-shadow(0 0 6px rgba(0,180,216,0.6)); }

/* ---- Briefing Card (topbar dropdown) ---- */
.briefing-card {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    z-index: 1600;
    background: var(--grad-popup);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    animation: fadeStagger 0.2s var(--ease-out);
}

.briefing-header {
    padding: 10px 14px;
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border-subtle);
}

.briefing-body {
    padding: 4px 0;
    max-height: 400px;
    overflow-y: auto;
}

.brief-section {
    padding: 8px 14px;
}
.brief-section + .brief-section {
    border-top: 1px solid rgba(255,255,255,0.04);
}

.brief-section-title {
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.brief-line {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-primary);
    line-height: 1.5;
}

/* Header label showing which slice (project / "All") the briefing is scoped to */
.brief-scope {
    font-family: var(--font-data);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.brief-scope-val {
    color: var(--text-primary);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
}

.brief-sub {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
    padding-left: 2px;
}

.brief-clickable {
    cursor: pointer;
    border-radius: 3px;
    padding: 2px 4px;
    margin-left: -4px;
    transition: background 120ms ease, color 120ms ease;
}
.brief-past summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-xs);
}
.brief-review-row {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
}
.brief-clickable:hover, .brief-clickable:focus-visible {
    background: rgba(0, 180, 216, 0.10);
    color: var(--text-primary);
}

.simops-clickable {
    cursor: pointer;
}

/* Brief outline flash when a schedule card is jumped to (from briefing / SIMOPS) */
@keyframes schedCardFlash {
    0%   { box-shadow: 0 0 0 2px var(--accent-teal); }
    100% { box-shadow: 0 0 0 2px transparent; }
}
.schedule-card-flash {
    animation: schedCardFlash 1400ms ease-out;
}

.brief-warn {
    color: var(--accent-amber);
}

.brief-dim {
    color: var(--text-dim);
}

/* Weather outlook strip in briefing card */
.brief-wx-grid {
    display: flex;
    gap: 1px;
}
.brief-wx-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 3px 0;
    border-radius: 3px;
    transition: background 0.15s;
}
.brief-wx-day:hover {
    background: rgba(255, 255, 255, 0.04);
}
.wx-day-lbl {
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}
.wx-day-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wx-day-val {
    font-family: var(--font-data);
    font-size: 9px;
    color: var(--text-muted);
    line-height: 1;
}
.wx-day-val.wx-wind {
    color: var(--text-dim);
    font-size: 8px;
}
.brief-wx-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding: 0 2px;
    font-family: var(--font-data);
    font-size: 8px;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}
.brief-wx-sum {
    margin-top: 6px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ---- Situation Strip / Ribbon (bottom bar) ---- */
.time-slider {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--time-slider-height);
    z-index: 1500;
    background: var(--grad-toolbar);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--edge-08);
    display: flex;
    flex-direction: column;
    animation: sliderSlideUp 0.25s var(--ease-out);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5);
    transition: height 0.3s var(--ease-out);
    will-change: height;
}

.ribbon-handle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    cursor: pointer;
    color: var(--text-dim);
    opacity: 0.5;
    transition: color 0.2s, opacity 0.2s;
}
.ribbon-handle:hover {
    color: var(--accent-teal);
    opacity: 1;
}
.time-slider.ribbon-expanded .ribbon-handle svg {
    transform: rotate(180deg);
}

.time-slider-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 28px;
    flex-shrink: 0;
}

@keyframes sliderSlideUp {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

.time-slider-now {
    font-family: var(--font-data) !important;
    font-size: var(--text-xs) !important;
    padding: 4px 10px !important;
    color: var(--accent-teal) !important;
    border-color: var(--teal-30) !important;
    flex-shrink: 0;
}

.ts-axis-wrap {
    touch-action: none;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
    position: relative;
    cursor: grab;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.ts-axis-wrap:active {
    cursor: grabbing;
}

.ts-axis-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.time-slider-label {
    font-family: var(--font-data);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-teal);
    white-space: nowrap;
    min-width: 140px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.time-slider-windows {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.time-window-btn {
    padding: 3px 8px;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-dim);
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.12s ease;
}

.time-window-btn:hover {
    color: var(--text-muted);
    border-color: var(--border-medium);
}

.time-window-btn.active {
    color: var(--accent-teal);
    background: var(--teal-15);
    border-color: var(--teal-30);
}

/* ---- Ribbon group-by selector (Activities / Projects) ---- */
.ribbon-groupby {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    margin-left: 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.ribbon-groupby-btn {
    padding: 3px 8px;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-dim);
    background: none;
    border: none;
    border-right: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.12s ease;
}
.ribbon-groupby-btn:last-child { border-right: none; }
.ribbon-groupby-btn:hover { color: var(--text-muted); }
.ribbon-groupby-btn.active {
    color: var(--accent-teal);
    background: var(--teal-15);
}

/* ---- Ribbon hover tooltip ---- */
.ribbon-tooltip {
    position: fixed;
    z-index: 5000;
    display: none;
    pointer-events: none;
    background: var(--grad-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-family: var(--font-ui);
    color: var(--text-primary);
    box-shadow: var(--shadow-panel);
    min-width: 220px;
    max-width: 340px;
    line-height: 1.45;
    animation: ribbonTipFade 0.12s var(--ease-out) both;
}

@keyframes ribbonTipFade {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rt-vessel {
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
}

.rt-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rt-project {
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin-bottom: 6px;
    font-style: italic;
}

.rt-status {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rt-status-critical  { background: rgba(251, 113, 133, 0.18); color: #fb7185; }
.rt-status-attention { background: rgba(251, 191,  36, 0.16); color: #fbbf24; }
.rt-status-active    { background: rgba( 94, 234, 212, 0.16); color: #5eead4; }
.rt-status-past      { background: rgba(160, 180, 205, 0.10); color: var(--text-muted); }
.rt-status-nominal   { background: rgba(160, 180, 205, 0.10); color: var(--text-muted); }

.rt-delta {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
.rt-delta-zero    { background: rgba(160, 180, 205, 0.10); color: var(--text-muted); }
.rt-delta-active  { background: rgba( 94, 234, 212, 0.18); color: #5eead4; }

.rt-time {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, var(--text-primary));
    margin-top: 2px;
}

.rt-dur {
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--accent-teal);
    margin-top: 2px;
    letter-spacing: 0.05em;
}

/* Basemap default popup */
.basemap-default-popup {
    position: fixed;
    z-index: 2000;
    transform: translateX(-50%);
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    animation: fadeInUp 0.15s ease;
}

.basemap-default-popup strong {
    color: var(--accent-teal);
}

.basemap-default-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    justify-content: center;
}

.basemap-default-yes,
.basemap-default-no {
    padding: 3px 14px;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.12s ease;
    background: none;
    color: var(--text-muted);
}

.basemap-default-yes {
    background: var(--teal-15);
    color: var(--accent-teal);
    border-color: var(--teal-30);
}

.basemap-default-yes:hover {
    background: var(--teal-30);
}

.basemap-default-no:hover {
    border-color: var(--border-medium);
    color: var(--text-primary);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Map pick mode */
.map-pick-mode .leaflet-container {
    cursor: crosshair !important;
}

.map-pick-toast {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3100;
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--teal-30);
    border-radius: var(--radius-md);
    padding: 8px 20px;
    font-family: var(--font-data);
    font-size: var(--text-sm);
    color: var(--accent-teal);
    box-shadow: var(--shadow-panel);
    animation: fadeStagger 0.3s ease both;
}

/* Subtle inner highlight on schedule panel top edge */
.schedule-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--surface-04) 30%, var(--surface-04) 70%, transparent);
}

/* Adjust layout when time slider is visible */
body.has-time-slider #map {
    bottom: var(--time-slider-height);
}

body.has-time-slider .schedule-panel {
    height: calc(100vh - var(--header-height) - var(--time-slider-height));
}

body.has-time-slider .chat-panel {
    bottom: calc(84px + var(--time-slider-height));
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    #header {
        flex-direction: column;
        height: auto;
        gap: 8px;
        padding: 10px 14px;
    }

    .brand-sub {
        display: none;
    }

    #controls {
        justify-content: center;
    }

    .header-stats {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }

    #map {
        top: 95px;
    }

    .weather-panel {
        width: calc(100vw - 24px);
        right: 12px;
        left: 12px;
        max-height: 60vh;
    }

    .schedule-panel {
        width: 100%;
    }

    .schedule-modal-card {
        width: 95vw;
        padding: 20px 16px 16px;
    }

    .time-slider {
        gap: 6px;
        padding: 0 8px;
    }
}

@media (max-width: 400px) {
    .btn {
        padding: 5px 8px;
        font-size: var(--text-xs);
    }

    .header-stats {
        font-size: var(--text-xs);
    }
}

/* ── Chart Upload Modal ────────────────────────────────────────── */

.upload-chart-btn {
    border: 1px dashed rgba(0, 180, 216, 0.5);
    color: var(--accent-teal);
    background: rgba(0, 180, 216, 0.06);
}
.upload-chart-btn:hover {
    background: rgba(0, 180, 216, 0.14);
    border-color: var(--accent-teal);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--scrim-50);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Step 3: shrink to corner so map is visible */
.modal-overlay.preview-mode {
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 0 80px 16px;
}
.modal-overlay.preview-mode .upload-modal-panel {
    pointer-events: all;
    width: 320px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8);
    border-color: var(--accent-teal);
}

.upload-modal-panel {
    background: var(--grad-modal);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    width: 480px;
    max-width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--surface-03);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.modal-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.modal-close:hover { color: var(--text-primary); background: var(--bg-hover); }

.upload-step-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0 0 12px;
    font-weight: 500;
}

.upload-sublabel {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 12px 0 6px;
}

.upload-facility-results {
    margin-top: 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    max-height: 200px;
    overflow-y: auto;
}

.upload-facility-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.upload-facility-item:last-child { border-bottom: none; }
.upload-facility-item:hover { background: var(--bg-hover); }

.upload-facility-name { font-size: var(--text-sm); color: var(--text-primary); }
.upload-facility-kind { font-size: var(--text-xs); color: var(--text-muted); }

.upload-facility-selected {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(0,180,216,0.1);
    border: 1px solid rgba(0,180,216,0.3);
    border-radius: 6px;
    color: var(--accent-teal);
    font-size: var(--text-sm);
}

.upload-step-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); }

.btn-primary {
    background: var(--accent-teal);
    color: #000;
    font-weight: 600;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 180, 216, 0.25);
    letter-spacing: 0.02em;
}
.btn-primary:hover { background: #00c8f0; box-shadow: 0 4px 16px rgba(0, 180, 216, 0.3); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.upload-dropzone {
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.upload-dropzone:hover,
.upload-dropzone.drag-over {
    border-color: var(--accent-teal);
    background: rgba(0,180,216,0.05);
}
.upload-formats {
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin: 4px 0 0;
    letter-spacing: 0.03em;
}
.upload-browse-link {
    color: var(--accent-teal);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.upload-parse-status {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: var(--text-sm);
}
.upload-parse-status.parsing { background: var(--border-subtle); color: var(--text-muted); }
.upload-parse-status.success { background: rgba(34,197,94,0.1); color: #22c55e; }
.upload-parse-status.error   { background: rgba(239,68,68,0.1);  color: #ef4444; }

.upload-preview-summary {
    background: var(--bg-deep);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}
.upload-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    padding: 3px 0;
    color: var(--text-muted);
}
.upload-summary-row strong { color: var(--text-primary); }

.upload-pdf-preview {
    max-height: 280px;
    overflow: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 12px;
    background: rgba(0,0,0,0.3);
}
.upload-pdf-preview img {
    display: block;
    width: 100%;
    height: auto;
}
.pdf-opacity-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: 6px 8px;
}
.pdf-opacity-label input[type="range"] {
    flex: 1;
    accent-color: var(--accent-teal);
}
.pdf-opacity-label[data-busy="1"]::after {
    content: 'processing…';
    color: var(--accent-teal);
    font-style: italic;
    margin-left: 6px;
}
.pdf-align-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 8px;
}
.pdf-align-status {
    font-size: var(--text-xs);
    color: var(--accent-teal);
    flex: 1;
}
.pdf-align-pin {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #fff;
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3500;
    box-shadow: 0 0 6px rgba(0,0,0,.6);
}
.pdf-align-pin.pin-chart { background: #ef4444; }
.pdf-align-pin.pin-map   { background: #22c55e; }

.upload-dxf-layer-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 150px;
    overflow-y: auto;
    padding: 4px 0;
}
.upload-layer-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 4px;
}
.upload-layer-check:hover { background: var(--bg-hover); }
.upload-layer-check input { accent-color: var(--accent-teal); }

.upload-warnings {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(232,145,45,0.1);
    border: 1px solid rgba(232,145,45,0.3);
    border-radius: 6px;
}
.upload-warning-item {
    font-size: var(--text-xs);
    color: var(--accent-amber);
    padding: 2px 0;
}

.upload-map-hint {
    font-size: var(--text-xs);
    color: var(--text-dim);
    text-align: center;
    margin: 12px 0 0;
    font-style: italic;
}

/* ── CRS guidance block ──────────────────────────────────────── */

.upload-crs-block {
    margin-top: 12px;
    border: 1px solid rgba(0,180,216,0.2);
    border-radius: 8px;
    overflow: hidden;
}

.upload-crs-detected {
    padding: 8px 12px;
    background: rgba(0,180,216,0.08);
    font-size: var(--text-xs);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
}

.upload-crs-detected strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.upload-crs-sample {
    padding: 8px 12px;
    background: var(--surface-03);
    border-top: 1px solid var(--surface-06);
    font-size: var(--text-xs);
    color: var(--text-dim);
}

.upload-crs-sample .mono {
    display: block;
    margin-top: 3px;
    font-size: var(--text-xs);
    color: var(--accent-teal);
    opacity: 0.85;
}

.upload-crs-override {
    padding: 8px 12px;
    background: var(--surface-02);
    border-top: 1px solid var(--surface-06);
    display: flex;
    align-items: center;
    gap: 8px;
}

.upload-crs-override label {
    font-size: var(--text-xs);
    color: var(--text-dim);
    white-space: nowrap;
}

.upload-crs-select {
    flex: 1;
    background: var(--bg-panel);
    border: 1px solid var(--edge-12);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: var(--text-xs);
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
}

.upload-crs-select:focus {
    border-color: var(--accent-teal);
}

.upload-reparsing {
    font-size: var(--text-xs);
    color: var(--accent-teal);
    opacity: 0.7;
    margin-left: 4px;
    font-style: italic;
}

.upload-error {
    font-size: var(--text-sm);
    color: #ef4444;
    margin-top: 8px;
}

/* ── Weather Map Overlay ─────────────────────────────────── */

.weather-grid-point {
    background: none !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    gap: 1px;
}

.wx-wave-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    line-height: 1;
}

.wx-wave-circle .wx-unit {
    font-size: 8px;
    font-weight: 400;
    margin-left: 1px;
}

.wx-wind-arrow {
    position: absolute;
    top: -2px;
    right: -4px;
    pointer-events: none;
}

.wx-wind-label {
    font-family: var(--font-data);
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
    position: absolute;
    top: -2px;
    right: -14px;
}

/* Legacy class kept for backwards compat */
.weather-wind-arrow {
    background: none !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
}

.wind-speed-label {
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
}

/* ── Go/No-Go Timeline ──────────────────────────────────── */

.gonogo-limits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.gonogo-limit-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 80px;
}

.gonogo-limit-row label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.gonogo-limit-row input {
    background: var(--bg-panel);
    border: 1px solid var(--edge-12);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: var(--text-sm);
    padding: 4px 6px;
    min-height: 44px;
    font-family: var(--font-data);
}

.gonogo-limit-row input:focus {
    border-color: var(--accent-teal);
    outline: none;
}

.gonogo-calc-btn {
    background: var(--accent-teal) !important;
    color: var(--bg-deep) !important;
    font-weight: 600;
    border-radius: 6px;
    padding: 6px 14px;
    min-height: 44px;
    align-self: flex-end;
    cursor: pointer;
    flex-shrink: 0;
}

.gonogo-bar {
    position: relative;
    height: 20px;
    background: var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0 4px;
}

.gonogo-segment {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 2px;
    opacity: 0.9;
    transition: opacity 0.2s;
    cursor: pointer;
}

.gonogo-segment:hover {
    opacity: 1;
}

.gonogo-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-2xs);
    font-family: var(--font-data);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.gonogo-summary {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    padding: 4px 0;
}

.gonogo-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
    padding: 8px 0;
}

/* ── Weather Limits in Schedule Modal ───────────────────── */

.weather-limits-section label {
    display: block;
    margin-bottom: 4px;
}

.weather-limits-row {
    display: flex;
    gap: 6px;
}

.weather-limit-input {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
}

.weather-limit-input input {
    background: var(--bg-panel);
    border: 1px solid var(--edge-12);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-data);
    padding: 4px 6px;
    min-height: 44px;
}

.weather-limit-input input:focus {
    border-color: var(--accent-teal);
    outline: none;
}

.weather-limit-input .limit-label {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    text-align: center;
}

/* Weather badge on schedule cards */
.schedule-weather-badge {
    margin-left: 4px;
    font-size: var(--text-sm);
    opacity: 0.8;
}

/* ── Mobile: Weather ─────────────────────────────────────── */

/* ── Project Chat Panel ──────────────────────────────────── */

.chat-toggle-btn {
    position: relative;
}

.chat-global-unread {
    display: inline-block;
    background: var(--accent-red);
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: 700;
    font-family: var(--font-data);
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 4px;
    margin-left: 4px;
}

.chat-panel {
    position: fixed;
    bottom: 84px;
    right: 20px;
    width: 420px;
    height: 560px;
    background: var(--bg-surface);
    backdrop-filter: blur(8px);
    border: 1px solid var(--surface-08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
    display: flex;
    flex-direction: column;
    z-index: 2500;
    overflow: hidden;
}
.chat-panel--revamp { /* slot for revamp-only tweaks */ }

.chat-panel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--surface-06);
    flex-shrink: 0;
}

.chat-project-select {
    flex: 1;
    background: var(--bg-panel);
    border: 1px solid var(--edge-12);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: var(--text-sm);
    padding: 6px 8px;
    min-height: 36px;
    cursor: pointer;
    outline: none;
}

.chat-project-select:focus {
    border-color: var(--accent-teal);
}

.chat-unread-badge {
    background: var(--accent-red);
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 4px;
}

.chat-minimize,
.chat-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-minimize:hover,
.chat-close:hover {
    color: var(--text-primary);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-10) transparent;
}

.chat-empty,
.chat-loading {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
    padding: 24px 0;
    margin: auto;
}

.chat-msg {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 8px;
    border-radius: 8px;
    max-width: 85%;
    background: var(--surface-03);
}

.chat-msg-mine {
    align-self: flex-end;
    background: rgba(0,180,216,0.1);
    border: 1px solid rgba(0,180,216,0.15);
}

.chat-msg-system {
    align-self: center;
    max-width: 100%;
    background: none;
    padding: 2px 0;
}

.chat-msg-system-text {
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
}

.chat-msg-sender {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent-teal);
}

.chat-msg-text {
    font-size: var(--text-sm);
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.4;
}

.chat-msg-time {
    font-size: var(--text-2xs);
    color: var(--text-dim);
    font-family: var(--font-data);
    align-self: flex-end;
}

.chat-msg-file {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.chat-file-link {
    color: var(--accent-teal);
    font-size: var(--text-sm);
    text-decoration: none;
}

.chat-file-link:hover {
    text-decoration: underline;
}

.chat-file-size {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    font-family: var(--font-data);
}

.chat-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--surface-06);
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    background: var(--bg-panel);
    border: 1px solid var(--edge-12);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: var(--text-sm);
    padding: 8px 10px;
    min-height: 44px;
    outline: none;
}

.chat-input:focus {
    border-color: var(--accent-teal);
}

.chat-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.chat-file-label {
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    min-width: 32px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-file-label:hover {
    color: var(--text-primary);
}

.chat-send-btn {
    background: var(--accent-teal) !important;
    color: var(--bg-deep) !important;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 14px;
    min-height: 44px;
    cursor: pointer;
}

.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Facility Dashboard Panel ────────────────────────────── */

.facility-panel {
    position: fixed;
    top: var(--header-height);
    left: 12px;
    bottom: 12px;
    width: 340px;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    z-index: 1500;
    overflow: hidden;
}

.facility-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    min-height: 48px;
}

.facility-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.facility-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

.facility-loading {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
}

.facility-section {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.facility-section:last-child {
    border-bottom: none;
}

.facility-section-title {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.facility-info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    font-size: var(--text-sm);
}

.facility-info-grid .label {
    color: var(--text-muted);
    font-family: var(--font-ui);
}

.facility-info-grid .value {
    color: var(--text-primary);
    font-family: var(--font-data);
}

.facility-schedule-card {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.facility-schedule-card:last-child {
    border-bottom: none;
}

.facility-schedule-name {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.facility-schedule-meta {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: capitalize;
}

.facility-project-tag {
    font-size: var(--text-xs);
    padding: 1px 6px;
    border: 1px solid;
    border-radius: 4px;
    font-family: var(--font-ui);
    color: var(--text-muted);
}

.facility-vessel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: var(--text-sm);
}

.facility-vessel-name {
    color: var(--text-primary);
    font-family: var(--font-ui);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.facility-vessel-dist {
    color: var(--text-muted);
    font-family: var(--font-data);
    font-size: var(--text-xs);
    white-space: nowrap;
    margin-left: 8px;
}

.facility-alert-row {
    padding: 4px 0;
    font-size: var(--text-sm);
    color: var(--accent-red);
    font-family: var(--font-ui);
}

.facility-empty {
    font-size: var(--text-sm);
    color: var(--text-dim);
    font-family: var(--font-ui);
    padding: 4px 0;
}

.facility-chat-link {
    display: block;
    width: 100%;
    margin-top: 4px;
    text-align: left;
    font-size: var(--text-sm);
}

.sodir-dashboard-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    font-size: var(--text-xs);
    padding: 5px 10px;
}

/* ── Report Modal ────────────────────────────────────────── */

.report-modal-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    width: 400px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

.report-format-row {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}

.report-format-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
}

.report-format-option input[type="radio"] {
    accent-color: var(--accent-teal);
}

/* ── SIMOPS Alerts ───────────────────────────────────────── */

/* Wrapper is structural — the alert cards inside carry their own red signal,
   so the wrapper just needs spacing. Two layers of red was over-loud. */
.simops-alerts {
    margin: 0 12px 10px;
    padding: 0;
    background: transparent;
    border: 0;
}

.simops-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-red);
    margin-bottom: 8px;
}

.simops-icon {
    font-size: var(--text-md);
}

.simops-alert-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 107, 74, 0.06);
    border: 1px solid rgba(255, 107, 74, 0.12);
    border-radius: 6px;
    margin-bottom: 6px;
}

.simops-alert-card:last-child {
    margin-bottom: 0;
}

.simops-alert-text {
    flex: 1;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.simops-alert-type {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.simops-ack-btn {
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-family: var(--font-ui);
    background: transparent;
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    min-height: 28px;
    transition: background 0.15s, color 0.15s;
}

.simops-ack-btn:hover {
    background: var(--accent-red);
    color: #fff;
}

.simops-seismic .simops-alert-type {
    color: #a855f7;
}

/* ── Mobile: Chat + Weather ──────────────────────────────── */

@media (max-width: 768px) {
    .gonogo-limits {
        flex-direction: column;
    }
    .weather-limits-row {
        flex-direction: column;
    }
    .chat-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        z-index: 3000;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .chat-input-row {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    .simops-alert-card {
        flex-wrap: wrap;
    }
    .simops-ack-btn {
        min-height: 44px;
        width: 100%;
    }
    .facility-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border-radius: 0;
        z-index: 3000;
    }
    .report-modal-panel {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }
}

/* ---- Omni search in header ---- */
.omni-search {
    position: relative;
    flex: 1;
    max-width: 380px;
    min-width: 220px;
    margin: 0 12px;
}
.omni-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none;
}
.omni-search-input {
    width: 100%;
    height: 28px;
    padding: 0 10px 0 30px;
    background: var(--surface-04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    outline: none;
    transition: all 0.15s;
}
.omni-search-input::placeholder { color: var(--text-dim); }
.omni-search-input:hover { background: var(--surface-06); }
.omni-search-input:focus {
    background: var(--surface-08);
    border-color: var(--teal-30);
    box-shadow: 0 0 0 3px var(--teal-15);
}
.omni-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    background: var(--grad-popup);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-popup);
    z-index: 1000;
    padding: 4px;
}
.omni-group-title {
    padding: 8px 10px 4px;
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.omni-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-primary);
    transition: background 0.12s;
}
.omni-item:hover, .omni-item.active { background: var(--surface-08); }
.omni-item-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}
.omni-item-body { flex: 1; min-width: 0; }
.omni-item-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.omni-item-sub {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    font-family: var(--font-data);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.omni-empty, .omni-loading {
    padding: 12px;
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

@media (max-width: 640px) {
    .omni-search { display: none; }
}

/* ---- KPI chips in header ---- */
.kpi-strip {
    position: relative;
    display: flex;
    gap: 6px;
    margin-left: 12px;
}
.kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    height: 26px;
    background: var(--surface-04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.18s var(--ease-smooth);
}
.kpi-chip:hover {
    background: var(--surface-08);
    border-color: var(--border-medium);
}
.kpi-chip.active {
    background: var(--teal-15);
    border-color: var(--teal-30);
}
.kpi-briefing-icon {
    color: var(--text-dim);
    flex-shrink: 0;
}
.kpi-chip.active .kpi-briefing-icon,
.kpi-chip:hover .kpi-briefing-icon {
    color: var(--accent-teal);
}
.kpi-value {
    font-family: var(--font-data);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
/* Demoted count next to a label — shown only when nonzero (see updateKPIs).
   The label is the primary; the count is a small badge. */
.kpi-value-badge {
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--surface-06);
    padding: 1px 5px;
    border-radius: 8px;
    line-height: 1.4;
    letter-spacing: 0;
}
.kpi-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.kpi-chip.has-issues .kpi-value-badge {
    background: var(--amber-20);
    color: var(--accent-amber);
}
.kpi-chip.has-issues .kpi-value { color: var(--accent-amber); }
.kpi-chip.has-issues {
    background: var(--amber-20);
    border-color: var(--amber-30);
}
.kpi-chip.has-issues .kpi-briefing-icon { color: var(--accent-amber); }

/* ---- Gear Rail (project focus controller) ---- */
.gear-rail {
    position: fixed;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 48px;
    /* Cap to viewport so we never exceed the screen — scroll if content is taller. */
    max-height: calc(100vh - 96px);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 4px;
    border-radius: 14px;
    /* Theme-aware surface — gear rail now flips for light mode instead of
       rendering as a black floating panel on a white page. */
    background: var(--grad-toolbar);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--edge-08);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    transition: background 0.25s var(--ease-out),
                border-color 0.25s var(--ease-out),
                box-shadow 0.25s var(--ease-out);
}
.gear-rail::-webkit-scrollbar { display: none; }
.gear-rail:hover {
    background: rgba(10, 16, 28, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.gear-rail[hidden] { display: none !important; }

.gear-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    width: 46px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    background: none;
    border-left: 2px solid transparent;
    transition: background 0.15s, border-color 0.2s;
}
.gear-item:hover {
    background: rgba(255, 255, 255, 0.07);
}
.gear-item.active {
    background: rgba(0, 180, 216, 0.08);
    border-left-color: var(--accent-teal);
}
.gear-item.active .gear-label {
    color: var(--text-primary);
}

.gear-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.2s;
}
.gear-item.active .gear-icon {
    color: var(--accent-teal);
}
.gear-pip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: box-shadow 0.2s;
}
.gear-label {
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
}

.gear-sep {
    width: 22px;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 0;
}

.gear-expand {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    opacity: 0.35;
}
.gear-expand:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    opacity: 0.7;
}

/* ---- Playfield (expanded CRUD workspace) ---- */
.playfield {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: var(--time-slider-height, 64px);
    z-index: 1200;
    background: var(--bg-deep);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: fadeStagger 0.2s var(--ease-out);
}
.playfield[hidden] { display: none !important; }

.pf-header {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.pf-title {
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    flex: 1;
}
.pf-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.pf-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.pf-canvas {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-06) transparent;
}

/* Project block */
.pf-project {
    border: 1.5px solid var(--border-subtle);
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 320px;
    max-width: 460px;
    flex: 1 1 360px;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.2s;
}
.pf-project-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.pf-project-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pf-project-name {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
.pf-project-count {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-dim);
}
.pf-add-btn {
    background: none;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    padding: 6px 10px;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
    transition: border-color 0.15s, color 0.15s;
}
.pf-add-btn:hover {
    border-color: var(--accent-teal);
    color: var(--text-muted);
}

/* Vessel within project */
.pf-vessel {
    margin-bottom: 6px;
}
.pf-vessel-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.pf-vessel-name {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-muted);
    flex: 1;
}

/* Activity tree — branches off vessel */
.pf-activities {
    padding-left: 10px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.08);
    margin-left: 4px;
}
.pf-activity {
    position: relative;
    padding: 5px 0 5px 14px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-muted);
    cursor: default;
    border-radius: 4px;
    transition: background 0.1s;
}
.pf-activity:hover {
    background: rgba(255, 255, 255, 0.03);
}
.pf-activity::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.08);
}
.pf-activity-type {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.pf-activity-where {
    color: var(--text-dim);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-activity-dates {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-dim);
    white-space: nowrap;
}
.pf-status-btn {
    background: none;
    border: none;
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.pf-status-btn:hover { opacity: 0.8; }
.pf-status-btn[data-st="planned"]   { background: rgba(232,145,45,0.12); color: var(--accent-amber); }
.pf-status-btn[data-st="ongoing"]   { background: rgba(0,212,170,0.10); color: var(--accent-green); }
.pf-status-btn[data-st="completed"] { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.pf-status-btn[data-st="cancelled"] { background: rgba(255,107,74,0.08); color: var(--accent-red); }

/* Inline-editable fields */
.pf-editable {
    cursor: text;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s;
    padding-bottom: 1px;
}
.pf-activity:hover .pf-editable { border-bottom-color: rgba(255,255,255,0.15); }
.pf-editable:hover { border-bottom-color: rgba(255,255,255,0.3) !important; }
.pf-inline-input select,
.pf-activity .pf-inline-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 3px;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    padding: 1px 4px;
    outline: none;
}
.pf-activity .pf-inline-input:focus { border-color: var(--accent-teal); }
.pf-date-input { width: 130px; font-family: var(--font-data); font-size: var(--text-2xs); }
.pf-dates-editing { display: flex; align-items: center; gap: 2px; white-space: nowrap; }

/* Voyage expand/collapse + waypoint sub-tree */
.pf-expand-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s, color 0.15s;
}
.pf-expand-btn:hover { color: var(--accent-teal); }
.pf-expand-btn.pf-expanded { transform: rotate(90deg); color: var(--accent-teal); }
.pf-expand-spacer { width: 14px; flex-shrink: 0; }

.pf-waypoints {
    margin: 4px 0 8px 28px;
    padding: 6px 10px;
    border-left: 1.5px solid rgba(0, 180, 216, 0.18);
    background: rgba(0, 180, 216, 0.025);
    border-radius: 0 4px 4px 0;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
}
.pf-wp-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 3px 0;
    color: var(--text-muted);
}
.pf-wp-row.pf-wp-start {
    color: var(--text-dim);
    border-bottom: 1px dashed rgba(255,255,255,0.05);
    padding-bottom: 6px;
    margin-bottom: 4px;
}
.pf-wp-tag {
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--accent-teal);
    letter-spacing: 0.06em;
    width: 28px;
    flex-shrink: 0;
}
.pf-wp-row.pf-wp-start .pf-wp-tag { color: var(--text-dim); }
.pf-wp-label {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.pf-wp-act {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-dim);
}
.pf-wp-time {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-dim);
    white-space: nowrap;
}
.pf-wp-dur {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.pf-wp-transit {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    padding: 1px 0 1px 28px;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-dim);
}
.pf-transit-meta {
    overflow-wrap: anywhere;
}
.pf-wp-arrow {
    color: rgba(0, 180, 216, 0.55);
    font-size: var(--text-2xs);
}
.pf-route-src {
    color: var(--text-dim);
    font-style: italic;
}

/* Voyage anchor — pin/back-solve UX */
.pf-wp-pin {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 2px 4px;
    margin: 0 2px;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    filter: grayscale(1) brightness(.7);
}
.pf-wp-row:hover .pf-wp-pin { opacity: .5; }
.pf-wp-pin:hover { opacity: 1 !important; transform: scale(1.15); }
.pf-wp-pin.pf-wp-pin-on {
    opacity: 1;
    filter: none;
}
.pf-wp-row.pf-wp-pinned {
    background: rgba(232, 145, 45, 0.06);
    border-left: 2px solid rgba(232, 145, 45, 0.45);
    padding-left: 4px;
    margin-left: -6px;
}
.pf-wp-arrive-pin {
    color: var(--accent-amber, #e8912d) !important;
}
.pf-wp-time-auto {
    color: var(--text-muted);
    font-style: italic;
}
.pf-auto-tag {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.06);
    color: var(--text-dim);
    font-style: normal;
}

.pf-num-input {
    width: 50px;
    text-align: right;
    font-family: var(--font-data);
}

.pf-wp-totals {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255,255,255,0.06);
    font-family: var(--font-data);
    font-size: var(--text-xs);
    color: var(--text-dim);
    text-align: right;
}

.pf-wp-reorder {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.pf-wp-row:hover .pf-wp-reorder { opacity: 1; }
.pf-wp-arrow {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 9px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    border-radius: 2px;
    transition: color 0.15s;
}
.pf-wp-arrow:hover:not(:disabled) { color: var(--accent-teal); }
.pf-wp-arrow:disabled { opacity: 0.3; cursor: default; }

.pf-wp-del {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}
.pf-wp-row:hover .pf-wp-del { opacity: 1; }
.pf-wp-del:hover { color: var(--accent-red); }

.pf-wp-add {
    margin-top: 4px;
    background: none;
    border: 1px dashed rgba(0, 180, 216, 0.25);
    border-radius: 4px;
    color: var(--accent-teal);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    padding: 4px 10px;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.15s, background 0.15s;
}
.pf-wp-add:hover {
    border-color: var(--accent-teal);
    background: rgba(0, 180, 216, 0.06);
}

/* Project header actions */
.pf-color-pick {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
}
.pf-color-pick::-webkit-color-swatch-wrapper { padding: 0; }
.pf-color-pick::-webkit-color-swatch { border: none; border-radius: 50%; }
.pf-color-pick::-moz-color-swatch { border: none; border-radius: 50%; }

.pf-project-name[data-action="rename"] {
    cursor: text;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s;
}
.pf-project-name[data-action="rename"]:hover {
    border-bottom-color: rgba(255,255,255,0.2);
}
.pf-inline-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    padding: 2px 6px;
    width: 100%;
    outline: none;
}
.pf-inline-input:focus { border-color: var(--accent-teal); }

.pf-proj-del {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: var(--text-md);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}
.pf-project-head:hover .pf-proj-del { opacity: 1; }
.pf-proj-del:hover { color: var(--accent-red); }

/* Activity action buttons (dup, del) */
.pf-act-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}
.pf-activity:hover .pf-act-btn { opacity: 1; }
.pf-dup-btn:hover { color: var(--accent-teal); }
.pf-del-btn:hover { color: var(--accent-red); }

/* Drag-and-drop: move activities between projects */
.pf-activity[draggable="true"] { cursor: grab; }
.pf-activity.pf-dragging { opacity: 0.4; cursor: grabbing; }
.pf-project.pf-drop-active {
    border-color: var(--accent-teal) !important;
    background: rgba(0, 180, 216, 0.06);
}

/* New project form */
.pf-new-project {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 260px;
    max-width: 360px;
    flex: 1 1 300px;
    border: 1.5px dashed rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 16px;
    transition: border-color 0.15s;
}
.pf-new-project:focus-within { border-color: var(--accent-teal); }
.pf-new-name {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    padding: 6px 10px;
    outline: none;
}
.pf-new-name:focus { border-color: var(--accent-teal); }
.pf-new-name::placeholder { color: var(--text-dim); }
.pf-new-btn {
    background: rgba(0,180,216,0.12);
    border: none;
    color: var(--accent-teal);
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.pf-new-btn:hover { background: rgba(0,180,216,0.2); }

/* ---- Vessel Peek card ---- */
.vessel-peek[hidden], .vessel-drawer[hidden] { display: none !important; }
.vessel-peek {
    position: fixed;
    z-index: 1100;
    width: 280px;
    background: var(--grad-popup);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popup);
    padding: 12px;
    animation: peekIn 0.18s var(--ease-out) both;
    font-family: var(--font-ui);
    color: var(--text-primary);
}
@keyframes peekIn {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.peek-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}
.peek-photo {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--surface-04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.peek-photo img { width: 100%; height: 100%; object-fit: cover; }
.peek-title { flex: 1; min-width: 0; }
.peek-title h4 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.peek-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.peek-close {
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
}
.peek-close:hover { color: var(--text-primary); background: var(--surface-06); }
.peek-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: var(--text-sm);
    margin-bottom: 10px;
}
.peek-body .peek-k { color: var(--text-muted); }
.peek-body .peek-v { color: var(--text-primary); font-family: var(--font-data); font-weight: 500; text-align: right; }
.peek-actions { display: flex; gap: 6px; }
.peek-btn {
    flex: 1;
    padding: 7px 10px;
    background: var(--surface-04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.peek-btn:hover { background: var(--surface-08); border-color: var(--border-medium); }
.peek-btn-primary {
    background: var(--teal-15);
    border-color: var(--teal-30);
    color: var(--accent-teal);
}
.peek-btn-primary:hover { background: var(--teal-25); border-color: var(--teal-40); }

/* ---- Vessel Drawer — right side ---- */
.vessel-drawer {
    position: fixed;
    top: calc(var(--header-height) + 10px);
    right: 10px;
    bottom: calc(var(--time-slider-height, 0px) + 10px);
    width: 380px;
    z-index: 1200;
    background: var(--grad-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: drawerIn 0.22s var(--ease-out) both;
    font-family: var(--font-ui);
    color: var(--text-primary);
}
@keyframes drawerIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.drawer-title h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.drawer-sub { display: flex; gap: 6px; flex-wrap: wrap; }
.drawer-close {
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.drawer-close:hover { color: var(--text-primary); background: var(--surface-06); border-color: var(--border-medium); }
.drawer-body {
    padding: 14px 16px;
    overflow-y: auto;
    flex: 1;
}

@media (max-width: 640px) {
    .vessel-drawer { width: calc(100vw - 20px); right: 10px; }
    .vessel-peek { width: calc(100vw - 24px); max-width: 320px; }
    .kpi-strip { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE SHELL — phones ≤768px (Find My style: full-bleed map + sheet)
   Breakpoint mirrors MOBILE_MQ in app.js — keep the two in sync.
   Structural layout/visibility lives in the @media block so first paint
   is correct (no FOUC). body.is-mobile + .dragging + [data-snap] carry
   JS-coordinated state only. All colors via tokens (light + dark safe).
   ════════════════════════════════════════════════════════════════════ */

/* Never shown on desktop (outside the breakpoint) */
.m-topbar, .m-pills, .m-sheet, .m-search-overlay, .m-popover { display: none; }

@media (max-width: 768px) {
    /* Behind the full-bleed map: match the ocean so any 1px seam never reads dark */
    body.is-mobile { background: var(--bg-ocean); }

    /* Full-bleed map; hide desktop chrome the mobile shell replaces */
    #map { top: 0; }
    #header,
    #mapToolbar,
    .home-card,
    .leaflet-control-zoom,
    .gear-rail { display: none; }

    /* updateTimeSlider() sets the ribbon to inline display:flex; force it hidden
       as a floating bottom bar and only show it docked inside the Timeline tab. */
    body.is-mobile .time-slider { display: none !important; }
    body.is-mobile #mSheetBody .time-slider {
        display: flex !important;
        position: static;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: var(--time-slider-height);
        z-index: auto;
    }
    body.is-mobile #mSheetBody .time-slider-controls {
        flex-wrap: wrap;
        gap: 6px;
        height: auto;
        padding: 6px 8px;
    }
    body.is-mobile #mSheetBody .time-slider-windows { flex-wrap: wrap; }
    body.is-mobile #mSheetBody .ribbon-groupby { margin-left: 0; }
    body.is-mobile #mSheetBody .ts-axis-wrap { flex: 0 0 80px; }
    body.is-mobile #mSheetBody .ribbon-expanded .ts-axis-wrap { flex-basis: 160px; }

    /* ── Top bar (transparent; only children are tappable) ───────── */
    .m-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1100;
        padding: calc(env(safe-area-inset-top) + 8px) 14px 8px;
        pointer-events: none;
    }
    .m-topbar > * { pointer-events: auto; }
    .m-brand {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 6px 12px 6px 10px;
        background: var(--bg-surface);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-xl);
        color: var(--text-primary);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: var(--text-md);
        letter-spacing: 0.02em;
    }
    .m-brand svg { color: var(--text-primary); }

    .m-icon-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px; height: 40px;
        background: var(--bg-surface);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--border-subtle);
        border-radius: 50%;
        color: var(--text-primary);
        cursor: pointer;
    }
    .m-icon-btn:active { background: var(--surface-08); }

    .m-brand { cursor: pointer; }
    .m-brand:active { background: var(--surface-08); }

    /* Right-side cluster: relocated Sign In / account menu + search */
    .m-topbar-actions { display: flex; align-items: center; gap: 8px; }
    .m-topbar-actions .user-login-btn,
    .m-topbar-actions .user-menu-btn {
        height: 40px;
        padding: 0 14px;
        background: var(--bg-surface);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-xl);
        color: var(--text-primary);
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        cursor: pointer;
    }
    .m-topbar-actions .user-menu { position: relative; display: flex; }
    .m-topbar-actions .user-dropdown { right: 0; left: auto; }

    /* ── Right-edge control pills (thumb zone, vertically centered) ─ */
    .m-pills {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: fixed;
        top: 50%;
        right: calc(10px + env(safe-area-inset-right));
        transform: translateY(-50%);
        z-index: 1100;
    }
    .m-pill {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px; height: 44px;
        background: var(--bg-surface);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--border-subtle);
        border-radius: 50%;
        color: var(--text-primary);
        cursor: pointer;
        box-shadow: var(--shadow-popup);
        transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .m-pill:active { transform: scale(0.94); }
    .m-pill.active {
        background: var(--teal-15);
        border-color: var(--teal-30);
        color: var(--accent-teal);
    }

    /* ── Pill popovers (basemap / layers) — JS positions top/right ── */
    .m-popover:not([hidden]) {
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: fixed;
        z-index: 1101;
        min-width: 150px;
        padding: 6px;
        background: var(--grad-popup);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-popup);
    }
    .m-popover-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        background: none;
        border: none;
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-family: var(--font-ui);
        font-size: var(--text-base);
        text-align: left;
        cursor: pointer;
    }
    .m-popover-item:active { background: var(--surface-08); }
    .m-popover-item[aria-checked="true"],
    .m-popover-item[aria-current="true"] {
        color: var(--accent-teal);
        background: var(--teal-15);
    }

    /* ── Bottom sheet ───────────────────────────────────────────── */
    .m-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        height: 88dvh;
        z-index: 1200;
        background: var(--bg-surface);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-top: 1px solid var(--border-subtle);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
        padding-bottom: env(safe-area-inset-bottom);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
        backface-visibility: hidden;
    }
    .m-sheet.dragging { transition: none; }
    /* Snap positions (JS sets data-snap; inline transform only during drag) */
    .m-sheet[data-snap="peek"] { transform: translateY(calc(88dvh - 132px)); }
    .m-sheet[data-snap="half"] { transform: translateY(42dvh); }
    .m-sheet[data-snap="full"] { transform: translateY(0); }

    .m-sheet-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        flex-shrink: 0;
        cursor: grab;
        touch-action: none;
    }
    .m-sheet-handle:active { cursor: grabbing; }
    .m-sheet-grip {
        width: 38px; height: 4px;
        border-radius: 2px;
        background: var(--border-medium);
    }
    .m-sheet-tabs {
        display: flex;
        gap: 4px;
        padding: 0 10px 8px;
        flex-shrink: 0;
        border-bottom: 1px solid var(--border-subtle);
    }
    .m-tab {
        flex: 1;
        padding: 9px 4px;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--text-muted);
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        font-weight: 500;
        cursor: pointer;
        position: relative;
    }
    .m-tab.active {
        color: var(--accent-teal);
        border-bottom-color: var(--accent-teal);
    }
    .m-sheet-body {
        flex: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
    .m-sheet-placeholder {
        padding: 24px 16px;
        color: var(--text-dim);
        font-size: var(--text-base);
        text-align: center;
    }

    /* Content lists (Vessels / Projects) rendered into the sheet body */
    .m-list { display: flex; flex-direction: column; }
    .m-list-row {
        display: flex;
        flex-direction: column;
        gap: 3px;
        width: 100%;
        text-align: left;
        padding: 12px 16px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--border-subtle);
        color: var(--text-primary);
        font-family: var(--font-ui);
        cursor: pointer;
    }
    .m-list-row:active { background: var(--surface-08); }
    .m-list-row.active { background: var(--teal-15); box-shadow: inset 3px 0 0 var(--accent-teal); }
    .m-list-title { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: 500; }
    .m-list-sub { font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--font-data); }
    .m-list-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

    /* Schedule panel relocated into the sheet body (by mobileMountSchedule) —
       flow it statically and let the sheet body be the single scroll area. */
    #mSheetBody #schedulePanel {
        position: static;
        display: block;
        inset: auto;
        width: 100%;
        height: auto;
        max-height: none;
        border: none;
        box-shadow: none;
        background: none;
    }
    #mSheetBody #schedulePanel .schedule-panel-header { display: none; }
    #mSheetBody #schedulePanel .schedule-list {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    /* ── Fullscreen search overlay (hosts relocated omni-search) ──── */
    .m-search-overlay:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 5000;
        background: var(--bg-deep);
        padding-top: env(safe-area-inset-top);
    }
    .m-search-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
    }
    .m-search-host { flex: 1; }
    /* Re-show + enlarge the omni-search that 640px hides */
    .m-search-overlay .omni-search {
        display: block;
        flex: 1;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }
    .m-search-overlay .omni-search-input { height: 44px; font-size: var(--text-md); }
    .m-search-overlay .omni-results {
        position: static;
        margin-top: 8px;
        max-height: calc(100dvh - 120px);
        box-shadow: none;
        border: none;
        background: none;
    }
}

/* ── Chat revamp B: channel switcher, activity tray, pop-out ── */
.chat-channel-switch {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px 10px;
    color: #e6f7fb;
    font-family: inherit;
    font-size: var(--text-base);
    cursor: pointer;
    text-align: left;
}
.chat-channel-switch:hover {
    background: rgba(0, 180, 216, 0.08);
    border-color: var(--accent-teal, #00b4d8);
}
.chat-channel-switch.is-open .chat-channel-arrow { transform: rotate(90deg); }
.chat-channel-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    transition: background 0.2s;
}
.chat-channel-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.chat-channel-arrow {
    color: var(--text-muted);
    font-size: 14px;
    transition: transform 0.2s;
}

.chat-popout, .chat-minimize, .chat-close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    line-height: 1;
}
.chat-popout:hover { color: var(--accent-teal, #00b4d8); }

.chat-activity-tray {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
    max-height: 50%;
    overflow-y: auto;
}
.chat-tray-label {
    padding: 8px 12px 4px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
}
.chat-tray-list {
    padding: 0 4px 6px;
}
.chat-tray-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 4px;
    padding: 7px 10px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: var(--text-sm);
}
.chat-tray-item:hover { background: rgba(255, 255, 255, 0.04); }
.chat-tray-item.is-active {
    background: rgba(0, 180, 216, 0.1);
    color: var(--text-primary);
}
.chat-tray-item.has-unread { color: var(--text-primary); font-weight: 600; }
.chat-tray-pip {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chat-tray-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-tray-time {
    font-size: var(--text-2xs);
    color: var(--text-dim);
    font-weight: 400;
}
.chat-tray-unread {
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-teal, #00b4d8);
    color: #0b1620;
    font-size: var(--text-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pulse dot on gear-rail chips when their project has unread messages */
.gear-item.has-unread::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-teal, #00b4d8);
    box-shadow: 0 0 6px var(--accent-teal, #00b4d8);
    animation: gear-pulse 1.6s ease-in-out infinite;
}
@keyframes gear-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.gear-item { position: relative; }

/* Toggle button badge — count of unread messages across all projects */
#chatToggleBtn { position: relative; }
#chatToggleBtn .chat-toggle-unread {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 8px;
    font-size: var(--text-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
#chatToggleBtn .chat-toggle-unread:empty,
#chatToggleBtn .chat-toggle-unread[data-count="0"] { display: none; }

/* ── Chat: scope rail, ref cards, event cards, drag target ──── */
.chat-scope-rail {
    display: flex;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.chat-scope-btn {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    font-family: inherit;
}
.chat-scope-btn:hover { border-color: var(--accent-teal, #00b4d8); color: var(--text-primary); }
.chat-scope-btn.active {
    background: rgba(0, 180, 216, 0.18);
    border-color: var(--accent-teal, #00b4d8);
    color: var(--accent-teal, #00b4d8);
}
.chat-scope-btn[data-scope="internal_owner_only"].active {
    background: rgba(201, 162, 39, 0.18);
    border-color: #c9a227;
    color: #c9a227;
}

.chat-internal-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 2px;
    background: rgba(201, 162, 39, 0.2);
    color: #c9a227;
    font-weight: 600;
}
.chat-msg-internal {
    background: rgba(201, 162, 39, 0.06);
    border-left: 2px solid #c9a227;
    padding-left: 8px;
}

.chat-msg-org {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 2px;
    background: var(--surface-06);
    color: var(--text-muted);
    font-weight: 500;
}
.chat-msg-org-planner  { background: rgba(0, 180, 216, 0.18);  color: #00b4d8; }
.chat-msg-org-client   { background: rgba(91, 62, 156, 0.22);  color: #b59cff; }
.chat-msg-org-captain  { background: rgba(232, 145, 45, 0.18); color: #e8912d; }
.chat-msg-org-supplier { background: rgba(45, 90, 61, 0.28);   color: #6dcc8c; }
.chat-msg-org-offshore { background: rgba(193, 74, 60, 0.2);   color: #ff8b7d; }

/* Pending refs above the input */
.chat-pending-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(0, 180, 216, 0.04);
    border-top: 1px solid rgba(0, 180, 216, 0.15);
}
.chat-pending-ref {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px 3px 8px;
    background: var(--teal-15);
    border: 1px solid var(--teal-40);
    border-radius: 11px;
    font-size: var(--text-xs);
    color: var(--text-primary);
}
.chat-pending-ref-icon { font-size: var(--text-sm); }
.chat-pending-ref-x {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-base);
    line-height: 1;
    padding: 0 4px;
}
.chat-pending-ref-x:hover { color: #ef4444; }

/* Inline reference cards in messages */
.chat-ref-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 6px 10px;
    background: var(--teal-15);
    border: 1px solid var(--teal-30);
    border-radius: 4px;
    font-size: var(--text-xs);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    max-width: 240px;
}
.chat-ref-card:hover { background: rgba(0, 180, 216, 0.15); }
.chat-ref-icon { font-size: 14px; }
.chat-ref-body { display: flex; flex-direction: column; min-width: 0; }
.chat-ref-label {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-ref-sub {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Event card (bot post) */
.chat-msg-event { background: rgba(255, 255, 255, 0.02); }
.chat-event-card {
    background: var(--surface-04);
    border: 1px solid var(--edge-08);
    border-radius: 4px;
    padding: 8px 12px;
    color: var(--text-primary);
}
.chat-event-card header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 4px;
}
.chat-event-icon { font-size: 14px; }
.chat-event-title { color: var(--text-primary); }
.chat-event-list {
    margin: 0;
    padding-left: 18px;
    font-size: var(--text-xs);
    color: var(--text-primary);
    line-height: 1.6;
}
.chat-event-body { font-size: var(--text-xs); color: var(--text-primary); }
.chat-msg-event-simops_conflict .chat-event-card { border-color: rgba(193, 74, 60, 0.5); background: rgba(193, 74, 60, 0.08); }
.chat-msg-event-weather .chat-event-card { border-color: rgba(0, 180, 216, 0.4); background: rgba(0, 180, 216, 0.06); }
.chat-msg-event-voyage_edit .chat-event-card { border-color: rgba(91, 62, 156, 0.5); background: rgba(91, 62, 156, 0.08); }

/* Acknowledged SIMOPS card — muted, neutralized colors. */
.chat-msg-event-simops_conflict .chat-event-card--acked,
.chat-event-card--acked {
    border-color: var(--edge-08);
    background: rgba(255, 255, 255, 0.02);
    opacity: 0.62;
}
.chat-event-card--acked .chat-event-icon,
.chat-event-card--acked .chat-event-title,
.chat-event-card--acked .chat-event-body {
    color: var(--text-dim, rgba(230, 247, 251, 0.55));
}
.chat-event-card--acked .chat-event-title { font-weight: 500; }
.chat-event-ack-by { color: var(--text-primary); font-weight: 600; margin-left: 2px; }
.chat-event-ack-when {
    color: var(--text-dim, rgba(230, 247, 251, 0.5));
    font-weight: 500;
    margin-left: 6px;
    font-family: var(--font-data, 'JetBrains Mono'), monospace;
    font-size: var(--text-2xs);
}

/* Inline "Acknowledge" button on un-acked SIMOPS cards. Sits under the body. */
.chat-event-ack {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 180, 216, 0.1);
    border: 1px solid rgba(0, 180, 216, 0.35);
    color: var(--accent-teal, #00b4d8);
    border-radius: 4px;
    padding: 4px 10px;
    font-family: var(--font-ui, 'DM Sans'), sans-serif;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.chat-event-ack:hover {
    background: rgba(0, 180, 216, 0.18);
    border-color: rgba(0, 180, 216, 0.55);
}
.chat-event-ack:disabled {
    opacity: 0.5;
    cursor: progress;
}
.chat-event-ack svg { display: block; }

/* Drop target highlight when dragging from map */
.chat-drop-active {
    outline: 2px dashed var(--accent-teal, #00b4d8);
    outline-offset: -6px;
}

/* "Send to chat" chip in vessel popup */
.vessel-to-chat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 5px 10px;
    background: rgba(0, 180, 216, 0.1);
    border: 1px solid rgba(0, 180, 216, 0.4);
    border-radius: 4px;
    font-size: var(--text-xs);
    color: var(--accent-teal, #00b4d8);
    cursor: grab;
    user-select: none;
}
.vessel-to-chat-chip:hover { background: rgba(0, 180, 216, 0.18); }
.vessel-to-chat-chip:active { cursor: grabbing; }

/* ── Invite landing page ─────────────────────────────────────── */
.invite-body {
    background: radial-gradient(circle at 30% 20%, rgba(0, 180, 216, 0.08), transparent 60%) ,
                #0b1620;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e6f7fb;
    font-family: 'DM Sans', sans-serif;
    padding: 24px;
}
.invite-card {
    width: min(440px, 100%);
    background: rgba(15, 25, 35, 0.92);
    border: 1px solid rgba(0, 180, 216, 0.25);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    padding: 32px 28px;
    backdrop-filter: blur(14px);
}
.invite-loading { color: rgba(255, 255, 255, 0.6); text-align: center; padding: 24px; }
.invite-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.invite-head h1 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.invite-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.invite-meta {
    margin: 0 0 24px;
    font-size: var(--text-base);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}
.invite-meta strong { color: var(--text-primary); font-weight: 600; }
.invite-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 3px;
    font-weight: 600;
}
.invite-tag-planner  { background: #00b4d8; color: #0b1620; }
.invite-tag-client   { background: #5b3e9c; color: #fff; }
.invite-tag-captain  { background: #e8912d; color: #1a0f00; }
.invite-tag-supplier { background: #2d5a3d; color: #fff; }
.invite-tag-offshore { background: #c14a3c; color: #fff; }
.invite-form { display: flex; flex-direction: column; gap: 14px; }
.invite-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
}
.invite-form input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #e6f7fb;
    font: 500 14px 'DM Sans', sans-serif;
    padding: 10px 12px;
    outline: none;
    text-transform: none;
    letter-spacing: 0;
}
.invite-form input:focus { border-color: #00b4d8; }
.invite-form small {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.4);
    text-transform: none;
    letter-spacing: 0;
}
.invite-btn-primary {
    background: #00b4d8;
    color: #0b1620;
    border: 0;
    border-radius: 4px;
    padding: 11px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
}
.invite-btn-primary:hover { transform: translateY(-1px); }
.invite-btn-secondary {
    display: inline-block;
    color: #00b4d8;
    text-decoration: none;
    font-size: var(--text-base);
    margin-top: 14px;
}
.invite-error { color: #ef4444; font-size: var(--text-sm); margin: 0; }

/* ── Playfield: participants pill (collapsed summary) ────────── */
.pf-participants-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 8px 8px;
    padding: 4px 10px 4px 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-ui, 'DM Sans'), sans-serif;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.pf-participants-pill:hover {
    border-color: var(--accent-teal, #00b4d8);
    background: rgba(0, 180, 216, 0.06);
    color: var(--text-primary);
}
.pf-pill-pips { display: inline-flex; align-items: center; gap: 2px; }
.pf-pill-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}
.pf-pill-more {
    margin-left: 3px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
}
.pf-pill-text { white-space: nowrap; }
.pf-pill-arrow { color: rgba(255, 255, 255, 0.4); font-size: var(--text-sm); }

/* Picker: list of current participants above the add-existing list */
.pf-part-picker-current {
    padding: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pf-part-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.85);
}
.pf-part-picker-row .pf-part-picker-name { flex: 1; color: var(--text-primary); font-size: var(--text-sm); }
.pf-part-picker-remove {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
}
.pf-part-picker-remove:hover { color: #ef4444; }
.pf-part-picker-empty {
    padding: 6px 8px;
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--text-xs);
    font-style: italic;
}
.pf-part-picker-section-label {
    padding: 6px 12px 4px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
}

/* ── Playfield: participants chip-list (legacy, kept for safety) ──── */
.pf-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.pf-participant {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px 2px 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: var(--text-2xs);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
}
.pfp-pip {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.4);
}
.pf-participant--planner  .pfp-pip,
.pf-part-picker-pip.pf-participant--planner  { background: #00b4d8; }
.pf-participant--client   .pfp-pip,
.pf-part-picker-pip.pf-participant--client   { background: #5b3e9c; }
.pf-participant--captain  .pfp-pip,
.pf-part-picker-pip.pf-participant--captain  { background: #e8912d; }
.pf-participant--supplier .pfp-pip,
.pf-part-picker-pip.pf-participant--supplier { background: #2d5a3d; }
.pf-participant--offshore .pfp-pip,
.pf-part-picker-pip.pf-participant--offshore { background: #c14a3c; }
.pfp-name { white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.pfp-del {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 0 2px;
    font-size: var(--text-sm);
    line-height: 1;
}
.pfp-del:hover { color: #ef4444; }
.pf-participant-add {
    width: 18px; height: 18px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: 1;
    padding: 0;
}
.pf-participant-add:hover {
    border-color: var(--accent-teal, #00b4d8);
    color: var(--accent-teal, #00b4d8);
}

/* Org picker popover */
.pf-part-picker {
    position: fixed;
    z-index: 1300;
    min-width: 220px;
    background: rgba(15, 25, 35, 0.96);
    border: 1px solid rgba(0, 180, 216, 0.4);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    overflow: hidden;
}
.pf-part-picker-header {
    padding: 8px 12px;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pf-part-picker-list {
    padding: 4px;
    max-height: 280px;
    overflow-y: auto;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.6);
}
.pf-part-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    color: #e6f7fb;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    font-size: var(--text-sm);
}
.pf-part-picker-item:hover { background: rgba(255, 255, 255, 0.06); }
.pf-part-picker-pip { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pf-part-picker-name { flex: 1; }
.pf-part-picker-type {
    font-size: var(--text-2xs);
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pf-part-picker-invite {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 12px 10px;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.7);
}
.pf-part-picker-invite summary {
    cursor: pointer;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    padding: 4px 0;
}
.pf-part-picker-invite summary:hover { color: var(--accent-teal, #00b4d8); }
.pf-part-picker-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.pf-part-picker-form input,
.pf-part-picker-form select {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #e6f7fb;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--text-sm);
    padding: 6px 8px;
    outline: none;
}
.pf-part-picker-form input:focus,
.pf-part-picker-form select:focus { border-color: var(--accent-teal, #00b4d8); }
.pf-part-picker-form button {
    background: var(--accent-teal, #00b4d8);
    color: #0b1620;
    border: 0;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}

/* Invitation preview modal */
.invite-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(8, 14, 22, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.invite-preview-card {
    width: min(560px, 100%);
    background: #f8f6f1;
    color: #1a1f26;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    font-family: 'DM Sans', sans-serif;
}
.invite-preview-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #ede8de;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.invite-preview-card h3 { margin: 0; font-size: var(--text-md); font-weight: 600; }
.invite-preview-close {
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: #5a6470;
    cursor: pointer;
}
.invite-preview-meta {
    margin: 16px 20px 0;
    font-size: var(--text-base);
    color: #3a4450;
}
.invite-preview-email {
    margin: 14px 20px;
    padding: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    font-size: var(--text-sm);
    color: #1a1f26;
    line-height: 1.5;
}
.invite-preview-email .ipe-from,
.invite-preview-email .ipe-to,
.invite-preview-email .ipe-subj { color: #5a6470; font-size: var(--text-xs); }
.invite-preview-email hr { margin: 8px 0; border: 0; border-top: 1px solid rgba(0,0,0,0.06); }
.invite-preview-email .ipe-body { font-size: var(--text-base); }
.ipe-link-box { display: flex; gap: 6px; margin-top: 10px; }
.ipe-link-box input {
    flex: 1;
    background: #ede8de;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-xs);
    color: #1a1f26;
    transition: border-color 0.2s;
}
.ipe-link-box button {
    background: #1a1f26;
    color: #f8f6f1;
    border: 0;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
.invite-preview-card footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 18px;
}
.invite-preview-open {
    color: #5a6470;
    font-size: var(--text-sm);
    text-decoration: none;
    align-self: center;
    margin-right: auto;
}
.invite-preview-open:hover { color: #1a1f26; text-decoration: underline; }
.invite-preview-done {
    background: #1a1f26;
    color: #f8f6f1;
    border: 0;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
}

/* ── Playfield: report selection ─────────────────────────────── */
.pf-header { display: flex; align-items: center; gap: 12px; }
.pf-selection-info {
    font-size: var(--text-xs);
    color: var(--text-muted, rgba(255,255,255,0.55));
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pf-report-btn {
    margin-left: auto;
    background: var(--accent-teal, #00b4d8);
    color: #0b1620;
    border: 0;
    border-radius: 4px;
    padding: 6px 14px;
    font-family: var(--font-ui, 'DM Sans'), sans-serif;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.05s;
}
.pf-report-btn:hover:not(:disabled) { transform: translateY(-1px); }
.pf-report-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.pf-select {
    appearance: none;
    width: 14px; height: 14px;
    border: 1.5px solid rgba(255,255,255,0.4);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    margin: 0 6px 0 0;
    flex-shrink: 0;
    position: relative;
}
.pf-select:checked {
    background: var(--accent-teal, #00b4d8);
    border-color: var(--accent-teal, #00b4d8);
}
.pf-select:checked::after {
    content: '';
    position: absolute;
    left: 3px; top: 0px;
    width: 4px; height: 8px;
    border: solid #0b1620;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.pf-project--selected {
    box-shadow: 0 0 0 1px var(--accent-teal, #00b4d8) inset;
}

/* ── Report overlay ──────────────────────────────────────────── */
/* NOTE: do NOT use flex centering here — when the inner content is taller
   than the viewport, flex centering hides the top of the content above the
   scroll region, so the user can't reach it. Use block + margin auto. */
.report-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(8, 14, 22, 0.85);
    backdrop-filter: blur(6px);
    overflow-y: auto;
    display: block;
    text-align: center;
}
.report-overlay[hidden] { display: none; }
.report-overlay-inner {
    width: min(960px, 100%);
    margin: 24px auto;
    background: #f8f6f1;       /* warm off-white — printable, professional */
    color: #1a1f26;
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    overflow: hidden;
    font-family: var(--font-ui, 'DM Sans'), sans-serif;
    text-align: left;
    display: inline-block;     /* shrink-wrap so text-align: center on parent works */
    vertical-align: top;
}
.report-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: #ede8de;
    gap: 16px;
    flex-wrap: wrap;
}
.report-toolbar-title { display: flex; align-items: center; gap: 12px; }
.report-tier-tag {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
    background: #1a1f26;
    color: #f8f6f1;
}
.report-tier-deep_dive { background: #0e7c8a; }
.report-tier-comparative { background: #5b3e9c; }
.report-tier-portfolio { background: #1a1f26; }
.report-meta { font-size: var(--text-xs); color: #5a6470; }
.report-toolbar-actions { display: flex; gap: 8px; align-items: center; }
.report-print-btn {
    background: #1a1f26;
    color: #f8f6f1;
    border: 0;
    border-radius: 4px;
    padding: 7px 16px;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.report-print-btn:hover { background: #2a2f36; }
.report-close-btn {
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: #5a6470;
    cursor: pointer;
    padding: 0 6px;
}
.report-close-btn:hover { color: #1a1f26; }

.report-body { padding: 32px 48px 48px; }
.report-title {
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.report-exec {
    font-size: 14px;
    line-height: 1.6;
    color: #3a4450;
    margin: 0 0 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.report-exec strong { color: #1a1f26; font-weight: 600; }

.report-section { margin: 32px 0; }
.report-section h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5a6470;
    margin: 0 0 16px;
    font-weight: 600;
}
.report-map-section { margin-top: 0; }
.report-map {
    height: 360px;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    background: #d4cfc4;
}

.report-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}
.report-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
    background: #ede8de;
    border-radius: 4px;
    border-left: 3px solid #1a1f26;
}
.kpi-val { font-size: 32px; font-weight: 600; line-height: 1; }
.kpi-lbl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: #5a6470; margin-top: 4px; }

.report-voyage-list { display: flex; flex-direction: column; gap: 12px; }
.report-voyage-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border-radius: 4px;
    border-left: 4px solid var(--proj-color, #00b4d8);
    break-inside: avoid;
    page-break-inside: avoid;
}
.voyage-photo {
    width: 120px; height: 80px;
    object-fit: cover;
    border-radius: 3px;
    background: #d4cfc4;
    flex-shrink: 0;
}
.voyage-photo-blank { display: block; }
.voyage-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.voyage-meta header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}
.voyage-vessel { font-size: var(--text-md); font-weight: 600; }
.voyage-status {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    border-radius: 3px;
    background: #ede8de;
    color: #5a6470;
}
.voyage-status-completed { background: #2d5a3d; color: #f8f6f1; }
.voyage-status-cancelled { background: #8b3030; color: #f8f6f1; }
.voyage-activity { font-size: var(--text-base); color: #1a1f26; }
.voyage-facility { font-size: var(--text-sm); color: #5a6470; }
.voyage-route { font-size: var(--text-sm); color: #3a4450; font-family: var(--font-data, 'JetBrains Mono'), monospace; }
.voyage-dates { font-size: var(--text-xs); color: #5a6470; margin-top: auto; }

.report-conflicts, .report-exceptions {
    margin: 0;
    padding-left: 20px;
    font-size: var(--text-base);
    line-height: 1.7;
}
.report-conflicts {
    list-style: none;
    padding-left: 0;
}
.report-conflict {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 10px 12px;
    border-left: 3px solid #c9a227;
    background: #fff;
    margin-bottom: 6px;
    border-radius: 3px;
    break-inside: avoid;
}
.report-conflict-active       { border-left-color: #c14a3c; }
.report-conflict-acknowledged { border-left-color: #c9a227; }
.report-conflict-resolved     { border-left-color: #8a939d; opacity: 0.85; }
.report-conflict-pair { font-size: var(--text-base); }
.report-conflict-sep { color: #5a6470; margin: 0 6px; }
.report-conflict-desc {
    grid-column: 1;
    font-size: var(--text-sm);
    color: #3a4450;
}
.report-conflict-meta {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    font-size: var(--text-xs);
    color: #5a6470;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.report-conflict-proj {
    font-weight: 400;
    color: #5a6470;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.report-conflicts-resolved-wrap {
    margin-top: 12px;
    font-size: var(--text-sm);
}
.report-conflicts-resolved-wrap summary {
    cursor: pointer;
    color: #5a6470;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 0;
    list-style: revert;
}
.report-conflicts-resolved-wrap summary:hover { color: #1a1f26; }
.report-conflicts-resolved { margin-top: 6px; }

.report-project-mini {
    margin: 16px 0;
    padding: 16px;
    background: #fff;
    border-radius: 4px;
    border-left: 4px solid var(--proj-color, #888);
    break-inside: avoid;
}
.report-mini-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.report-mini-head h3 { margin: 0; font-size: var(--text-md); font-weight: 600; }
.report-mini-stat { font-size: var(--text-xs); color: #5a6470; margin-left: auto; }
.report-color-dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; flex-shrink: 0;
}
.report-flag {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: #8b3030;
    color: #f8f6f1;
    padding: 2px 6px;
    border-radius: 3px;
}
.report-mini-list {
    margin: 0;
    padding-left: 20px;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: #3a4450;
}
.report-mini-more { color: #5a6470; font-style: italic; }

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.report-table th, .report-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.report-table th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a6470;
    font-size: var(--text-2xs);
    font-weight: 600;
}
.report-table td.report-flag { background: transparent; color: #8b3030; padding: 8px 10px; font-weight: 600; }

.report-footer {
    margin-top: 48px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-size: var(--text-2xs);
    color: #5a6470;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}

.report-loading, .report-error {
    color: #f8f6f1;
    text-align: center;
    padding: 80px 20px;
    font-size: 14px;
}
.report-error .report-close-btn {
    color: #f8f6f1;
    margin-left: 16px;
}

/* ── Print rules: when user hits Download PDF, hide everything except the report body */
@media print {
    body * { visibility: hidden !important; }
    #reportOverlay, #reportOverlay * { visibility: visible !important; }
    #reportOverlay {
        position: absolute !important;
        inset: 0 !important;
        background: #fff !important;
        backdrop-filter: none !important;
        overflow: visible !important;
    }
    .report-overlay-inner {
        width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    .report-toolbar { display: none !important; }
    .report-body { padding: 24px 32px !important; }
    .report-voyage-card, .report-project-mini {
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-left: 4px solid var(--proj-color, #888) !important;
    }
    .report-kpi { background: #f5f3ee !important; }
    /* Keep the screen height for print so Leaflet tiles align with the container
       (changing height here would clip tiles since Leaflet positions them in px). */
    .report-map { height: 360px !important; }
    @page { size: A4; margin: 12mm; }
}

/* ============================================================
   Motion — ambient liveness
   Subtle entrance animations + low-key "live" signals so the
   interface feels responsive without becoming noisy. Calibrated
   for a conservative ops-room audience: short durations, gentle
   easing, no springs or bounces. Honors prefers-reduced-motion.
   ============================================================ */

@keyframes helm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes helm-rise-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes helm-slide-in-right {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes helm-slide-in-left {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes helm-slide-in-bottom {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes helm-soft-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* ---- Modal & overlay entrances ---- */
.login-overlay,
.modal-overlay {
    animation: helm-fade-in 180ms var(--ease-out);
}
.login-overlay > .login-card,
.login-overlay > .schedule-modal-card,
.modal-overlay > .modal-panel {
    animation: helm-rise-in 240ms var(--ease-out);
}

/* ---- Side panels & drawers ---- */
.chat-panel             { animation: helm-slide-in-bottom 260ms var(--ease-out); }
.vessel-drawer,
.schedule-panel         { animation: helm-slide-in-right 260ms var(--ease-out); }
.facility-panel,
.weather-panel          { animation: helm-slide-in-left 260ms var(--ease-out); }
.vessel-peek            { animation: helm-fade-in 160ms var(--ease-out); }

/* ---- Inline cards & alerts ---- */
.simops-alerts          { animation: helm-rise-in 240ms var(--ease-out); }
.chat-event-card,
.chat-ref-card          { animation: helm-rise-in 220ms var(--ease-out); }

/* ---- Briefing card (KPI dropdown) ---- */
.briefing-card          { animation: helm-rise-in 200ms var(--ease-out); }

/* ---- Activity tray reveal ---- */
.chat-activity-tray:not([hidden]) {
    animation: helm-rise-in 200ms var(--ease-out);
}

/* ---- Toast (save feedback) ---- */
.toast {
    position: fixed;
    top: 60px;
    right: 16px;
    z-index: 10000;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: var(--font-data);
    font-size: 12px;
    letter-spacing: 0.02em;
    background: rgba(15, 23, 42, 0.92);
    color: var(--text-primary);
    border: 1px solid rgba(0, 180, 216, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
    pointer-events: none;
}
.toast-show {
    opacity: 1;
    transform: translateY(0);
}
.toast-error {
    border-color: rgba(239, 68, 68, 0.55);
    color: #fca5a5;
}

/* ---- Schedule card: tap-the-time + right-click context menu ---- */
.sched-time-editable {
    cursor: pointer;
    border-bottom: 1px dashed rgba(0, 180, 216, 0.35);
    padding-bottom: 1px;
    transition: background 120ms ease, border-color 120ms ease;
}
.sched-time-editable:hover {
    background: rgba(0, 180, 216, 0.08);
    border-bottom-color: var(--accent-teal);
}
.sched-ctx-menu {
    position: fixed;
    z-index: 10000;
    min-width: 140px;
    background: rgba(15, 23, 42, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 4px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-primary);
}
.sched-ctx-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: inherit;
    border: 0;
    padding: 7px 10px;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
}
.sched-ctx-menu button:hover {
    background: rgba(0, 180, 216, 0.15);
    color: #fff;
}
.sched-ctx-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 4px 2px;
}

/* ---- Quick-Add Strip (inline activity create) ---- */
.quick-add-strip {
    margin: 4px 12px 8px;
    padding: 10px 12px;
    background: var(--surface-04);
    border: 1px solid var(--edge-08);
    border-radius: 6px;
    position: relative;
    animation: helm-rise-in 180ms var(--ease-out);
}
.quick-add-strip .qa-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.quick-add-strip .qa-input {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    padding: 6px 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-ui);
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.quick-add-strip .qa-input:focus {
    border-color: var(--accent-teal);
    outline: none;
    background: rgba(15, 23, 42, 0.78);
}
.quick-add-strip .qa-field {
    position: relative;
    min-width: 0;
}
.quick-add-strip .qa-field-vessel {
    grid-column: 1 / -1;
}
.quick-add-strip .qa-select {
    cursor: pointer;
}
.quick-add-strip .qa-date {
    font-family: var(--font-data);
    font-size: 11px;
}
.quick-add-strip .qa-save-btn {
    grid-column: 1 / -1;
    background: var(--accent-teal);
    color: #fff;
    border: 0;
    padding: 7px 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 2px;
}
.quick-add-strip .qa-save-btn:hover {
    background: #00a0c2;
}
.quick-add-strip .qa-cancel-btn {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.quick-add-strip .qa-cancel-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}
.quick-add-strip .qa-hint {
    margin-top: 8px;
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: var(--font-data);
    line-height: 1.5;
}
.quick-add-strip .qa-hint kbd {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 10px;
    font-family: inherit;
    color: var(--text-primary);
}
.quick-add-strip .qa-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 200;
    max-height: 240px;
    overflow-y: auto;
}

/* ---- Home Facility Card (mobile-first 0-tap next arrivals) ---- */
.home-card {
    position: fixed;
    top: 56px;
    left: 12px;
    right: 12px;
    z-index: 800;
    background: var(--grad-panel);
    border: 1px solid var(--edge-08);
    border-radius: var(--radius-md);
    padding: 12px 14px 8px;
    color: var(--text-primary);
    font-family: var(--font-ui);
    box-shadow: var(--shadow-panel);
    backdrop-filter: blur(12px);
    animation: helm-rise-in 220ms var(--ease-out);
}
.home-card .hc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}
.home-card .hc-eyebrow {
    display: block;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-teal);
    margin-bottom: 2px;
}
.home-card .hc-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}
.home-card .hc-close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    border-radius: 4px;
}
.home-card .hc-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}
.home-card .hc-arrivals {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.home-card .hc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.home-card .hc-row:hover,
.home-card .hc-row:active {
    background: rgba(0, 180, 216, 0.10);
    border-color: rgba(0, 180, 216, 0.35);
}
.home-card .hc-lane {
    font-family: var(--font-data);
    font-size: 10px;
    letter-spacing: 0.10em;
    color: var(--accent-teal);
    min-width: 38px;
}
.home-card .hc-body {
    flex: 1;
    min-width: 0;
}
.home-card .hc-vessel {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-card .hc-sub {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.3;
}
.home-card .hc-empty {
    padding: 12px 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-data);
}

/* ---- Set-as-home-facility button (in facility dashboard) ---- */
.set-home-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 7px 10px;
    background: rgba(0, 180, 216, 0.08);
    border: 1px solid rgba(0, 180, 216, 0.30);
    border-radius: 5px;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 12px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.set-home-btn:hover {
    background: rgba(0, 180, 216, 0.15);
    border-color: var(--accent-teal);
}
.set-home-btn.is-home {
    background: rgba(0, 180, 216, 0.20);
    border-color: var(--accent-teal);
    color: var(--accent-teal);
}

/* ---- Subtle ambient pulse for SIMOPS conflict markers ----
   Applied via JS by toggling .simops-conflict-pulse on the marker
   element. Slow breathing to avoid feeling alarmist. */
@keyframes helm-conflict-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 74, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 107, 74, 0); }
}
.simops-conflict-pulse {
    animation: helm-conflict-breathe 2.4s ease-in-out infinite;
}

/* ---- Reduced motion: respect user preference ----
   Cuts all entrance animations and ambient pulses to near-zero
   for users who've opted out via OS settings. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Save feedback stays in the zone editor until persistence is confirmed. */
.ze-save-status { margin: 10px 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.ze-save-status.is-error { color: #fca5a5; }
#zoneEditor button:disabled { opacity: 0.5; cursor: wait; }
#zeDiscard[hidden] { display: none; }

.ts-axis-wrap:focus-visible { outline: 2px solid var(--accent-cyan, #00b4d8); outline-offset: -2px; }

/* Tile progress belongs beside the map controls and never blocks gestures. */
.basemap-status[hidden], .basemap-status button[hidden] { display: none; }
.basemap-status {
    position: absolute; right: 42px; top: 0; width: 180px; padding: 8px 10px;
    border: 1px solid var(--border-medium); border-radius: 6px;
    background: var(--bg-panel); color: var(--text-primary); font-size: 12px; line-height: 1.4;
}
.basemap-status .basemap-retry {
    display: block; margin-top: 6px; padding: 4px 8px; border-radius: 4px;
    border: 1px solid var(--border-medium); background: var(--bg-hover); color: var(--accent-teal); cursor: pointer;
}

/* Drawing tools open beside the toolbar, keeping every tool reachable on short screens. */
#drawMeasurePanel:not(.open) { display: none; }
#drawMeasurePanel.open {
    position: fixed; width: 200px; max-height: calc(100dvh - 68px); overflow-y: auto;
    margin: 0; padding: 6px; border: 1px solid var(--border-medium);
    border-radius: var(--radius-md); background: var(--bg-panel); z-index: 1200;
    box-shadow: 0 6px 24px rgba(0,0,0,.25); transition: none;
}
#drawMeasurePanel .tb-btn-label { overflow: visible; }
.measurement-panel[hidden], .measurement-actions button[hidden] { display: none; }
.measurement-panel {
    position: fixed; top: 104px; left: 192px; width: 310px;
    max-width: calc(100vw - 24px); max-height: calc(100dvh - 120px); overflow-y: auto;
    z-index: 1050; padding: 10px 12px; border: 1px solid var(--border-medium);
    border-radius: var(--radius-md); background: var(--bg-panel); color: var(--text-primary);
    box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 12px; line-height: 1.5;
}
.measurement-panel summary { font-weight: 600; }
.measurement-panel p { margin: 6px 0; }
#measurementResult { white-space: pre-line; overflow-wrap: anywhere; }
.measurement-note { color: var(--text-muted); }
.measurement-actions { display: flex; gap: 8px; margin-top: 8px; }
.measurement-actions button {
    padding: 6px 10px; border: 1px solid var(--border-medium); border-radius: 5px;
    background: var(--bg-hover); color: var(--text-primary); cursor: pointer;
}
.measurement-actions button:disabled { opacity: .5; cursor: default; }
.measurement-actions button:focus-visible { outline: 2px solid var(--accent-teal); }

/* Vessel working selection: bounded rows, independent of the map inspector. */
:root { --vessel-selection-color: var(--accent-amber); --vessel-focus-color: var(--accent-teal); }
.vessel-icon.vessel-selected { outline: 2px solid var(--vessel-selection-color); outline-offset: 4px; border-radius: 50%; }
/* Leaflet writes inline outline-style:none on pointer clicks. This ring represents
   selection, not keyboard focus, so it must survive that outline suppression. */
.vessel-icon.vessel-selected { outline-style: solid !important; }
.vessel-icon.vessel-focused { outline-width: 3px; box-shadow: 0 0 0 8px var(--bg-panel), 0 0 0 10px var(--vessel-focus-color); }
/* Selection is paint-only: changing membership must not resize a cached label. */
.vessel-label-button.vessel-selected { box-shadow: inset 0 -2px 0 var(--vessel-selection-color); }
.vessel-label-button.vessel-focused { box-shadow: inset 0 -2px 0 var(--vessel-selection-color), 0 2px 0 var(--vessel-focus-color); }
/* Above workspace drawers/sheets, below modal dialogs: the selection stays reachable. */
.selection-tray { position: fixed; right: 16px; bottom: 44px; width: min(390px, calc(100vw - 32px)); max-height: 44vh; overflow: auto; z-index: 1700; background: var(--bg-panel, #18252d); color: var(--text-primary, #edf3f5); border: 1px solid #56717c; border-radius: 8px; box-shadow: 0 4px 18px #0005; font-size: 12px; }
.selection-tray:not([open]) { width: fit-content; max-width: calc(100vw - 32px); }
body.has-time-slider .selection-tray { bottom: calc(var(--time-slider-height) + 12px); }
.selection-tray[hidden], .selection-tray [hidden] { display: none; }
.selection-tray > summary { position: sticky; top: 0; z-index: 2; padding: 8px 10px; cursor: pointer; background: var(--bg-panel); display: flex; align-items: center; gap: 8px; list-style: none; }
.selection-tray > summary::-webkit-details-marker { display: none; }
.selection-tray > summary::before { content: ''; width: 5px; height: 5px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(-45deg); margin-right: 3px; opacity: .7; }
.selection-tray[open] > summary::before { transform: rotate(45deg); }
.selection-tray > summary strong { flex: 1; white-space: nowrap; }
.selection-tray:not([open]) > summary button { display: none; }
.selection-tray > summary button { border: none; min-height: 28px; }
#selectionActionsToggle { display: inline-flex; align-items: center; gap: 6px; }
#selectionActionsToggle svg { transition: transform 120ms ease; }
#selectionActionsToggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    #selectionActionsToggle svg { transition: none; }
}

.release-note { position: fixed; top: 76px; right: 16px; z-index: 1800; width: min(350px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 42px 14px 16px; border: 1px solid var(--border-medium); border-radius: 10px; background: var(--bg-panel); color: var(--text-primary); box-shadow: 0 8px 28px #0003; font-size: 12px; line-height: 1.5; }
.release-note strong { display: block; margin-bottom: 6px; font-size: 13px; }
.release-note ul { padding-left: 16px; margin: 0; }
.release-note li + li { margin-top: 4px; }
.release-note button { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 5px; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
.release-note button:hover { background: var(--bg-hover); }
#selectionHelpToggle { color: var(--text-secondary); width: 24px; }
#selectionFocus[hidden] { display: none; }
.selection-help-popover { position: fixed; z-index: 1800; box-sizing: border-box; width: 280px; max-width: calc(100vw - 24px); padding: 10px; line-height: 1.6; background: var(--bg-panel, #22313a); border: 1px solid #56717c; border-radius: 5px; color: var(--text-secondary); box-shadow: 0 4px 18px #0005; pointer-events: none; }
.selection-action-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; margin: 0 8px 8px; padding: 6px; border: 1px solid #56717c55; border-radius: 6px; }
.selection-action-menu button { border: none !important; text-align: left; min-height: 32px; }
.selection-action-menu button:hover { background: #56717c22; }
.selection-action-caption { grid-column: 1 / -1; color: var(--text-secondary); padding: 6px 6px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.selection-tray summary:focus-visible { outline: 2px solid var(--vessel-focus-color); outline-offset: -3px; }
.selection-tray summary strong { margin-right: 8px; }
#selectionFocus { display: inline-block; max-width: 120px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selection-tray button { border: 1px solid #56717c; border-radius: 4px; background: transparent; color: inherit; padding: 4px 6px; cursor: pointer; }
.selection-tray button:focus-visible { outline: 2px solid var(--vessel-selection-color); outline-offset: 2px; }
.selection-tray button:disabled { opacity: .45; cursor: default; }
.selection-help { padding: 0 10px; line-height: 1.5; }
.selection-workspace-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px; }
.selection-project-dialog { box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-height: 85vh; padding: 18px; overflow: auto; border: 1px solid var(--text-dim); border-radius: 10px; background: var(--bg-panel); color: var(--text-primary); font-size: 13px; }
.selection-project-dialog { margin: auto; }
.selection-project-dialog::backdrop { background: #0008; }
.selection-schedule-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.selection-schedule-times label { min-width: 0; }
#selectionScheduleForm > select, #selectionScheduleNotes, .selection-schedule-times input { box-sizing: border-box; display: block; width: 100%; min-width: 0; margin: 6px 0 12px; }
#selectionScheduleNotes { border: 1px solid var(--text-dim); border-radius: 4px; padding: 8px; background: var(--bg-panel); color: inherit; font: inherit; resize: vertical; }
#selectionScheduleStatus:empty, #selectionScheduleReview:empty { display: none; }
.selection-schedule-hint, #selectionScheduleScope { color: var(--text-secondary); font-size: 12px; }
@media (max-width: 480px) { .selection-schedule-times { grid-template-columns: 1fr; gap: 0; } }
.selection-project-dialog [hidden] { display: none; }
.selection-project-heading, .selection-project-create, .selection-project-footer, .selection-project-dialog nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.selection-project-heading h2 { flex: 1; font-size: 17px; margin: 0; }
.selection-project-dialog button, .selection-project-dialog input, .selection-project-dialog select { border: 1px solid var(--text-dim); border-radius: 4px; background: var(--bg-panel); color: inherit; font: inherit; padding: 8px; }
.selection-project-dialog button { cursor: pointer; }
.selection-project-dialog button:disabled { opacity: .45; cursor: default; }
.selection-project-dialog :focus-visible { outline: 2px solid var(--vessel-focus-color); outline-offset: 2px; }
.selection-project-dialog > select { display: block; width: 100%; margin: 6px 0; }
.selection-project-create input { min-width: 0; flex: 1; }
.selection-project-dialog p { line-height: 1.5; }
.selection-project-row { padding: 10px 0; border-bottom: 1px solid #56717c55; }
.selection-project-row label { display: flex; gap: 10px; align-items: center; overflow-wrap: anywhere; }
.selection-project-row input { flex: none; accent-color: var(--vessel-selection-color); }
.selection-project-row small { display: block; margin: 4px 0; color: var(--text-secondary); }
.selection-project-dialog nav { justify-content: space-between; }
#selectionWorkspaceStatus { margin: 0 10px 8px; line-height: 1.5; color: var(--text-secondary); }
.selection-find { margin: 0 10px 10px; border: 1px solid #56717c; border-radius: 5px; padding: 8px; }
.selection-find > summary { cursor: pointer; }
.selection-find > label { display: block; margin-top: 10px; }
.selection-find > input, .selection-find > select { box-sizing: border-box; width: 100%; margin-top: 4px; padding: 7px; border: 1px solid #56717c; border-radius: 4px; background: var(--bg-panel); color: inherit; font: inherit; }
.selection-find .selection-workspace-actions { padding: 0; }
#selectionSourceScope { line-height: 1.5; color: var(--text-secondary); }
.selection-search-row { display: flex; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid #56717c55; cursor: pointer; }
.selection-search-row span { min-width: 0; overflow-wrap: anywhere; }
.selection-search-row input { flex: none; accent-color: var(--vessel-selection-color); }
.selection-search-row:focus-within { outline: 2px solid var(--vessel-focus-color); outline-offset: 1px; }
.selection-row { display: grid; grid-template-columns: 1fr; gap: 1px; margin: 6px 10px; padding: 5px 8px; border: 1px solid var(--vessel-selection-color); border-radius: 6px; background: color-mix(in srgb, var(--vessel-selection-color) 7%, var(--bg-panel)); cursor: pointer; }
.selection-row.focused { background: color-mix(in srgb, var(--vessel-focus-color) 12%, var(--bg-panel)); box-shadow: inset 0 0 0 2px var(--vessel-selection-color); outline: 2px solid var(--vessel-focus-color); outline-offset: 2px; }
.selection-row .selection-name { grid-column: 1 / -1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: none; font-weight: 600; }
.selection-status { grid-column: 1 / -1; overflow-wrap: anywhere; color: inherit; opacity: .8; }
.selection-tray nav { display: flex; justify-content: space-between; padding: 8px 10px; }
@media (max-width: 768px) {
    .selection-tray, body.has-time-slider .selection-tray { bottom: 144px; max-height: 32vh; }
}

/* Facility operations use the same quiet, collapsible hierarchy as the sidebar. */
.facility-tools { display:flex; gap:8px; margin:8px 0; flex-wrap:wrap; }
.facility-tools button, .facility-track-nearby { padding:4px 8px; border:1px solid var(--border-subtle); border-radius:5px; color:var(--text-muted); background:transparent; cursor:pointer; }
.facility-track-nearby { margin-left:8px; }
.facility-operation-group { border-top:1px solid var(--border-subtle); padding:8px 0; }
.facility-operation-group summary { cursor:pointer; font-size:var(--text-sm); overflow-wrap:anywhere; }
.facility-operation-group summary span { color:var(--text-muted); font-size:var(--text-xs); margin-left:4px; }
.facility-operation-row { display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left; gap:3px; padding:8px 0; border:0; background:transparent; color:var(--text-primary); cursor:pointer; overflow-wrap:anywhere; }
.facility-operation-row span, .facility-operation-row small { color:var(--text-muted); font-size:var(--text-xs); }
.facility-operation-row:hover { color:var(--accent-teal); }
.facility-panel { max-width:calc(100vw - 24px); background:var(--bg-panel); }
.facility-panel-title { min-width:0; overflow-wrap:anywhere; }

.facility-position-age { display:block; font-size:10px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; }

@media (max-width: 768px) { .facility-panel { max-width:100vw; } }

.tracking-panel { position:fixed; top:100px; right:12px; width:340px; max-width:calc(100vw - 24px); z-index:1800; background:var(--bg-panel); border:1px solid var(--border-medium); border-radius:10px; color:var(--text-primary); font:var(--text-sm) var(--font-ui); }
.tracking-panel[hidden], .tracking-panel [hidden] { display:none; }
.tracking-panel summary { padding:10px 12px; cursor:pointer; font-weight:600; }
.tracking-body { padding:0 12px 12px; max-height:42vh; overflow:auto; }
.tracking-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tracking-toolbar>span, #trackingHint, #trackingPins, .tracking-age { color:var(--text-muted); font-size:var(--text-xs); }
#trackingMessage:empty { display:none; }
.tracking-panel button { color:inherit; background:transparent; border:1px solid var(--border-medium); border-radius:5px; padding:5px 8px; cursor:pointer; }
.tracking-panel button:disabled { opacity:.5; cursor:default; }
#trackingActions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#trackingActionsToggle span { display:inline-block; }
#trackingActionsToggle[aria-expanded="true"] span { transform:rotate(180deg); }
.tracking-row { border-top:1px solid var(--border-subtle); padding:8px 0; overflow-wrap:anywhere; }
.tracking-row .tracking-name { border:0; padding:0; text-align:left; display:block; width:100%; font-weight:600; }
.tracking-reference { border-left:2px solid var(--accent-teal); padding-left:8px; }
.tracking-focused .tracking-name { color:var(--accent-teal); }
.tracking-age { display:block; margin-top:3px; }
.tracking-range { margin-top:4px; font-family:var(--font-data); font-size:var(--text-xs); }
.tracking-row-actions { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
#map.tracking-pick { cursor:crosshair; }
@media(max-width:768px){ .tracking-panel { top:auto; bottom:12px; z-index:3200; } .tracking-body{max-height:42vh;} .tracking-panel button{min-height:36px;} }

#trackingActionsToggle[aria-expanded="true"] span { display:inline-block; transform:rotate(180deg); }
#trackingShowRows { max-height:40vh; overflow:auto; }
#trackingReviewRows { max-height:40vh; overflow:auto; margin:12px 0; }
.tracking-review-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; padding:8px 0; border-bottom:1px solid var(--border); }
.tracking-review-row label { display:flex; align-items:center; gap:8px; overflow-wrap:anywhere; }
.tracking-review-row input { width:auto; flex:none; }
.tracking-review-row small { grid-column:1/-1; color:var(--text-secondary); }
#trackingReferenceDialog nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }

/* Keep the settled glass treatment; avoid resampling the moving map through
   every toolbar, tooltip and open panel on each camera-animation frame. */
body.helm-map-moving * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Explicit map navigation/selection, independent of saved drawings. */
.map-area-controls { position:fixed; top:54px; left:50%; transform:translateX(-50%); z-index:1100; max-width:calc(100vw - 120px); background:var(--bg-panel); color:var(--text-primary); border:1px solid var(--border-medium); border-radius:8px; padding:5px; box-shadow:var(--shadow-panel); font-size:12px; }
.area-modes, #areaOptions, .area-actions { display:inline-flex; align-items:center; gap:4px; }
#areaOptions[hidden], #areaHint[hidden] { display:none; }
.map-area-controls button, .map-area-controls select { font:inherit; color:inherit; background:transparent; border:1px solid transparent; border-radius:4px; padding:5px 8px; cursor:pointer; }
.map-area-controls button[aria-pressed="true"] { background:var(--teal-15); color:var(--accent-teal); border-color:var(--border-glow); }
.map-area-controls button:hover, .map-area-controls select:hover { background:var(--bg-hover); }
.map-area-controls button:focus-visible, .map-area-controls select:focus-visible, .map-area-controls summary:focus-visible { outline:2px solid var(--accent-teal); outline-offset:1px; }
#areaHint { display:block; padding:5px 6px; color:var(--text-muted); font-size:11px; }
#areaResult { max-width:350px; padding:5px; border-top:1px solid var(--border-subtle); }
#areaResult summary { cursor:pointer; }
#areaStatus { margin:7px 0; line-height:1.5; }
#areaUnknownWrap { display:block; margin:8px 0; }
#areaUnknownWrap[hidden] { display:none; }
.area-selecting, .area-selecting .leaflet-interactive, .area-selecting .leaflet-marker-icon, .area-selecting .vessel-label-button { cursor:crosshair !important; }
@media(max-width:768px) { .map-area-controls { top:62px; max-width:calc(100vw - 24px); width:max-content; } #areaResult { max-width:calc(100vw - 48px); } }

#map.area-selecting { touch-action:none; }

/* Project operating area: compact controls inside each project card. */
.pf-area-summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; margin:8px 0; font-size:11px; color:var(--text-muted); }
.pf-area-editor { margin:8px 0; font-size:12px; }
.pf-area-editor summary { cursor:pointer; }
.pf-area-editor form { display:grid; gap:8px; margin-top:8px; }
.pf-area-editor label { display:grid; gap:4px; min-width:0; }
.pf-area-editor input,.pf-area-editor select { width:100%; min-width:0; box-sizing:border-box; background:var(--bg-deep); color:var(--text-primary); border:1px solid var(--border-medium); padding:6px; border-radius:4px; }
.pf-area-editor fieldset { min-width:0; border:1px solid var(--border-medium); }
.pf-area-coordinates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.pf-area-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pf-area-editor p { margin:0; font-size:11px; color:var(--text-muted); }
.pf-area-editor .pf-area-error { color:var(--accent-red,#e66b6b); }
.pf-area-summary button,.pf-area-editor button { background:var(--bg-deep); color:var(--text-primary); border:1px solid var(--border-medium); padding:6px 8px; border-radius:4px; cursor:pointer; }
.pf-area-editor button:disabled { opacity:.6; cursor:wait; }