/* ── OffshoreLink design system tokens ──────────────────────────────────────
   Source: the OffshoreLink Design System (tokens.json, light theme). Single source of
   truth for colour, type, spacing, radius and shadow. Components reference these
   tokens — never literals. The app is a fixed light theme: components MUST NOT add
   their own prefers-color-scheme overrides (that caused theme conflicts where one
   page went dark while the rest stayed light). */
:root {
    /* grounds, lines, text */
    --surface:#f3f6f8; --surface-raised:#ffffff; --surface-sunken:#e7edf1;
    --line:#d3dce3; --line-strong:#748c9c;
    --ink:#0b2a3a; --ink-muted:#4a6070; --ink-faint:#5a7180;
    /* identity + actions */
    --navy:#0b2a3a; --navy-deep:#061c28;
    --brand:#0b2a3a; --brand-hover:#153e54; --on-brand:#ffffff;
    --sea:#0f6f7c; --sea-soft:#d8eff1; --on-sea:#ffffff; --link:var(--sea);
    --signal:#f2a900; --signal-text:#7a5200; --signal-soft:#fdf0cf; --on-signal:#0b2a3a;
    /* status */
    --ok:#1f7a45; --ok-soft:#dcf3e4;
    --danger:#b42323; --danger-soft:#fbe3e3; --on-danger:#ffffff;
    --focus-ring:#0f6f7c; --overlay:#0b2a3a99;
    /* The crew's notes on the flight log (logink): paper yellow, as on the iPad's drawing page. */
    --note:#ffe58a; --note-strip:#f2cf55; --note-edge:#d9b53a; --note-line:#b58a00; --note-ink:#3a2e00;
    /* type */
    --font-sans:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --sans:var(--font-sans); --mono:var(--font-mono);   /* names the shared M&B bundle reads */
    /* spacing (4px grid), radius, shadow, border */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px;
    --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
    --shadow-sm:0 1px 2px #0b2a3a14; --shadow-md:0 4px 16px #0b2a3a1f;
    --border-hairline:1px; --border-strong-w:2px;

    /* Older app token names, kept as aliases of the design-system tokens. */
    --panel:var(--surface-raised); --soft:var(--surface);
    --muted:var(--ink-muted); --teal:var(--sea);
    /* Flight / seat status — categorical, each paired with a word in the UI. */
    --st-draft:var(--ink-faint); --st-planned:#2f6fb0; --st-ready:var(--ok);
    --st-claimed:var(--signal-text); --st-flight:var(--sea); --st-done:#4a7a5a;
    --st-delay:var(--danger); --st-cancel:var(--ink-faint);
    --seat-left:#2f6fb0; --seat-right:#b5651d;
    /* Flight report FOB graph: the plan's Div fuel per stop (purple, the iPad's Palette.div). */
    --div:#7a4fb5;
    /* Company routes map (Data ▸ Company routes): planner route, windfarm route, EMODnet outline, waypoints. */
    --route:#2f6fb0; --route-soft:#dbe7f5; --farm:#5d7f3a; --farm-soft:#d9e8c8; --emod:#8a98a3; --emod-soft:#eef1f3;
    --wp-ifr:#185fa5; --wp-vfr:#1d9e75;
    /* aliases kept for components already using shorter status names */
    --draft:var(--st-draft); --planned:var(--st-planned); --ready:var(--st-ready);
    --claimed:var(--st-claimed); --flight:var(--st-flight); --done:var(--st-done);
    --left:var(--seat-left); --right:var(--seat-right);

    /* Bootstrap follows the design system */
    --bs-body-font-family:var(--font-sans); --bs-font-monospace:var(--font-mono);
    --bs-body-color:var(--ink); --bs-body-color-rgb:11,42,58; --bs-body-bg:var(--surface);
    --bs-emphasis-color:var(--ink); --bs-secondary-color:var(--ink-muted); --bs-tertiary-color:var(--ink-faint);
    --bs-secondary-bg:var(--surface-sunken); --bs-tertiary-bg:var(--surface);
    --bs-border-color:var(--line);
    --bs-primary:#0b2a3a; --bs-primary-rgb:11,42,58;
    --bs-info:#0f6f7c; --bs-info-rgb:15,111,124;
    --bs-success:#1f7a45; --bs-success-rgb:31,122,69;
    --bs-danger:#b42323; --bs-danger-rgb:180,35,35;
    --bs-warning:#f2a900; --bs-warning-rgb:242,169,0;
    --bs-secondary:#4a6070; --bs-secondary-rgb:74,96,112;
    --bs-link-color:var(--sea); --bs-link-color-rgb:15,111,124;
    --bs-link-hover-color:var(--brand-hover); --bs-link-hover-color-rgb:21,62,84;
    --bs-primary-text-emphasis:var(--ink); --bs-primary-bg-subtle:var(--sea-soft); --bs-primary-border-subtle:var(--line);
    --bs-success-text-emphasis:var(--ok); --bs-success-bg-subtle:var(--ok-soft);
    --bs-danger-text-emphasis:var(--danger); --bs-danger-bg-subtle:var(--danger-soft);
    --bs-warning-text-emphasis:var(--signal-text); --bs-warning-bg-subtle:var(--signal-soft);
    --bs-info-text-emphasis:var(--sea); --bs-info-bg-subtle:var(--sea-soft);
    --bs-border-radius:var(--radius-md); --bs-border-radius-sm:var(--radius-sm); --bs-border-radius-lg:var(--radius-lg);
}

/* Operational figures: times, registrations, ICAO codes, weights, coordinates. */
.ol-mono, .font-monospace { font-family:var(--font-mono) !important; font-variant-numeric:tabular-nums; }

/* Bootstrap buttons in design-system colours */
.btn-primary { --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-color:var(--on-brand);
    --bs-btn-hover-bg:var(--brand-hover); --bs-btn-hover-border-color:var(--brand-hover); --bs-btn-hover-color:var(--on-brand);
    --bs-btn-active-bg:var(--brand-hover); --bs-btn-active-border-color:var(--brand-hover);
    --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand); }
.btn-outline-primary { --bs-btn-color:var(--brand); --bs-btn-border-color:var(--line-strong);
    --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand); --bs-btn-hover-color:var(--on-brand);
    --bs-btn-active-bg:var(--brand-hover); --bs-btn-active-border-color:var(--brand-hover); }
.btn-secondary, .btn-outline-secondary { --bs-btn-color:var(--ink); --bs-btn-bg:var(--surface-raised); --bs-btn-border-color:var(--line-strong);
    --bs-btn-hover-bg:var(--surface-sunken); --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:var(--line-strong);
    --bs-btn-active-bg:var(--surface-sunken); --bs-btn-active-color:var(--ink); }
.btn-danger { --bs-btn-bg:var(--danger); --bs-btn-border-color:var(--danger); --bs-btn-color:var(--on-danger);
    --bs-btn-hover-bg:#8f1b1b; --bs-btn-hover-border-color:#8f1b1b; }
.btn-outline-danger { --bs-btn-color:var(--danger); --bs-btn-border-color:var(--danger);
    --bs-btn-hover-bg:var(--danger); --bs-btn-hover-border-color:var(--danger); --bs-btn-hover-color:var(--on-danger); }
.btn-success { --bs-btn-bg:var(--ok); --bs-btn-border-color:var(--ok); --bs-btn-hover-bg:#17603a; --bs-btn-hover-border-color:#17603a; }
.btn-outline-success { --bs-btn-color:var(--ok); --bs-btn-border-color:var(--ok); --bs-btn-hover-bg:var(--ok); --bs-btn-hover-border-color:var(--ok); }
.btn-warning { --bs-btn-bg:var(--signal); --bs-btn-border-color:var(--signal); --bs-btn-color:var(--on-signal); --bs-btn-hover-bg:#d99700; --bs-btn-hover-border-color:#d99700; }
.btn-info, .btn-outline-info { --bs-btn-color:var(--sea); --bs-btn-border-color:var(--sea); --bs-btn-hover-bg:var(--sea); --bs-btn-hover-border-color:var(--sea); --bs-btn-hover-color:var(--on-sea); }
.btn-info { --bs-btn-bg:var(--sea); --bs-btn-color:var(--on-sea); }
/* ── Bootstrap in the OffshoreLink idiom ────────────────────────────────────────
   Precise, not soft: small radii, borders before shadows, uppercase labels, fixed control
   heights on a 4px grid. Restyles Bootstrap's own classes so every page follows. */

/* Type: page titles in `display`, panel titles in `title`, section headings in `heading`. */
h1, .h1 { font-size:28px; line-height:32px; font-weight:700; letter-spacing:-.015em; color:var(--ink); margin-bottom:var(--space-4); }
h2, .h2 { font-size:20px; line-height:26px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
h3, .h3 { font-size:16px; line-height:22px; font-weight:600; color:var(--ink); }
h4, .h4, h5, .h5 { font-size:14px; line-height:20px; font-weight:600; color:var(--ink); }
h6, .h6 { font-size:11px; line-height:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.text-muted, .text-secondary { color:var(--ink-muted) !important; }
.text-success { color:var(--ok) !important; }
.text-danger { color:var(--danger) !important; }
.text-warning { color:var(--signal-text) !important; }
.text-info, .text-primary { color:var(--sea) !important; }
.bg-success:not(.badge) { background-color:var(--ok) !important; }
.bg-danger:not(.badge) { background-color:var(--danger) !important; }
.bg-warning:not(.badge) { background-color:var(--signal) !important; }
.bg-light { background-color:var(--surface) !important; }
.small, small { font-size:12px; }
.fs-3 { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600 !important; }

/* Buttons: 36px (28px small), radius-md, 600 weight. */
.btn { --bs-btn-padding-y:0; --bs-btn-padding-x:var(--space-3); --bs-btn-font-size:14px; --bs-btn-font-weight:600;
    --bs-btn-border-radius:var(--radius-md); --bs-btn-line-height:20px;
    display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:36px; white-space:nowrap; }
.btn-sm, .btn-group-sm > .btn { --bs-btn-padding-x:var(--space-2); --bs-btn-font-size:12px; --bs-btn-border-radius:var(--radius-md); min-height:28px; }
.btn-lg { min-height:44px; }
.btn-link { --bs-btn-color:var(--sea); --bs-btn-hover-color:var(--brand-hover); text-decoration:none; font-weight:600; }
.btn:disabled, .btn.disabled { opacity:.5; }
.btn:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; box-shadow:none; }

/* Fields: 36px, line-strong border, raised ground, uppercase labels. */
.form-control, .form-select { min-height:36px; border-radius:var(--radius-sm); border-color:var(--line-strong);
    background-color:var(--surface-raised); color:var(--ink); font-size:14px; }
.form-control-sm, .form-select-sm { min-height:28px; font-size:12px; border-radius:var(--radius-sm); }
.form-control::placeholder { color:var(--ink-faint); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color:var(--surface-sunken); color:var(--ink-faint); }
.form-control:focus, .form-select:focus { border-color:var(--focus-ring); box-shadow:0 0 0 2px var(--surface-raised), 0 0 0 4px var(--focus-ring); }
.form-label, .col-form-label { font-size:11px; line-height:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:var(--space-1); }
.form-text { font-size:12px; color:var(--ink-muted); }
.form-check-input { border-color:var(--line-strong); }
.form-check-input:checked { background-color:var(--brand); border-color:var(--brand); }
.form-switch .form-check-input:checked { background-color:var(--sea); border-color:var(--sea); }
.input-group-text { background:var(--surface-sunken); border-color:var(--line-strong); color:var(--ink-muted); font-size:12px; }
.is-invalid, .form-control.is-invalid { border-color:var(--danger) !important; }
.invalid-feedback { color:var(--danger); font-size:12px; }

/* Tables: sunken uppercase header, hairline rows, 40px rows. */
.table { --bs-table-color:var(--ink); --bs-table-bg:var(--surface-raised); --bs-table-border-color:var(--line);
    --bs-table-striped-bg:var(--surface); --bs-table-hover-bg:var(--sea-soft); --bs-table-active-bg:var(--sea-soft); font-size:14px; }
.table > :not(caption) > * > * { padding:var(--space-2) var(--space-3); vertical-align:middle; }
.table-sm > :not(caption) > * > * { padding:var(--space-1) var(--space-2); }
.table > thead th, .table > thead td { background:var(--surface-sunken); font-size:11px; line-height:14px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); border-bottom:1px solid var(--line-strong); white-space:nowrap; }
.table-responsive, .table-bordered { border-radius:var(--radius-md); }

/* Cards and panels: raised ground, hairline border, radius-md, quiet shadow. */
.card { --bs-card-bg:var(--surface-raised); --bs-card-border-color:var(--line); --bs-card-border-radius:var(--radius-md);
    --bs-card-inner-border-radius:calc(var(--radius-md) - 1px); --bs-card-cap-bg:var(--surface-raised); --bs-card-spacer-x:var(--space-4); --bs-card-spacer-y:var(--space-4);
    box-shadow:var(--shadow-sm); }
.card-header { font-size:16px; line-height:22px; font-weight:600; border-bottom:1px solid var(--line); }
.card-footer { background:var(--surface); }
.list-group { --bs-list-group-border-color:var(--line); --bs-list-group-border-radius:var(--radius-md);
    --bs-list-group-active-bg:var(--sea-soft); --bs-list-group-active-color:var(--sea); --bs-list-group-active-border-color:var(--sea); }

/* Badges = the design system's StatusBadge: pill, uppercase label, soft ground + a dot. */
.badge { display:inline-flex; align-items:center; gap:var(--space-1); height:22px; padding:0 var(--space-2);
    border-radius:var(--radius-pill); font-size:11px; line-height:14px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; white-space:nowrap; vertical-align:middle; }
.badge.bg-success, .badge.text-bg-success { background:var(--ok-soft) !important; color:var(--ok) !important; }
.badge.bg-danger, .badge.text-bg-danger { background:var(--danger-soft) !important; color:var(--danger) !important; }
.badge.bg-warning, .badge.text-bg-warning { background:var(--signal-soft) !important; color:var(--signal-text) !important; }
.badge.bg-info, .badge.text-bg-info, .badge.bg-primary, .badge.text-bg-primary { background:var(--sea-soft) !important; color:var(--sea) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light { background:var(--surface-sunken) !important; color:var(--ink-muted) !important; }
.badge.bg-dark, .badge.text-bg-dark { background:var(--navy) !important; color:#fff !important; }
.badge[class*="bg-"]::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* Alerts: soft grounds with a coloured edge; text says what happened and what to do. */
.alert { --bs-alert-border-radius:var(--radius-md); border-width:1px; border-left-width:3px; font-size:14px; padding:var(--space-3) var(--space-4); }
.alert-danger { --bs-alert-bg:var(--danger-soft); --bs-alert-color:var(--danger); --bs-alert-border-color:var(--danger); }
.alert-warning { --bs-alert-bg:var(--signal-soft); --bs-alert-color:var(--signal-text); --bs-alert-border-color:var(--signal); }
.alert-success { --bs-alert-bg:var(--ok-soft); --bs-alert-color:var(--ok); --bs-alert-border-color:var(--ok); }
.alert-info, .alert-primary { --bs-alert-bg:var(--sea-soft); --bs-alert-color:var(--sea); --bs-alert-border-color:var(--sea); }
.alert-secondary, .alert-light { --bs-alert-bg:var(--surface-sunken); --bs-alert-color:var(--ink-muted); --bs-alert-border-color:var(--line-strong); }

/* Tabs and pills = the design system's Tabs: underline in `brand`, no boxes. */
.nav-tabs { --bs-nav-tabs-border-color:var(--line); gap:var(--space-6); }
.nav-tabs .nav-link { border:0; border-bottom:2px solid transparent; padding:var(--space-2) 0 var(--space-3); font-weight:600; color:var(--ink-muted); background:none; margin-bottom:-1px; }
.nav-tabs .nav-link:hover { color:var(--ink); border-color:transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color:var(--ink); background:none; border-color:transparent; border-bottom-color:var(--brand); }
.nav-pills { --bs-nav-pills-border-radius:var(--radius-md); --bs-nav-pills-link-active-bg:var(--brand); --bs-nav-pills-link-active-color:var(--on-brand); }
.nav-link { color:var(--sea); }

/* Dialogs, dropdowns, progress, pagination. */
.modal { --bs-modal-border-radius:var(--radius-lg); --bs-modal-border-color:var(--line); --bs-modal-bg:var(--surface-raised);
    --bs-modal-header-border-color:var(--line); --bs-modal-footer-border-color:var(--line); --bs-modal-box-shadow:var(--shadow-md); }
.modal-backdrop { --bs-backdrop-bg:#0b2a3a; --bs-backdrop-opacity:.6; }
.modal-title { font-size:20px; line-height:26px; font-weight:700; letter-spacing:-.01em; }
.dropdown-menu { --bs-dropdown-border-color:var(--line); --bs-dropdown-border-radius:var(--radius-md); --bs-dropdown-box-shadow:var(--shadow-md);
    --bs-dropdown-link-active-bg:var(--sea-soft); --bs-dropdown-link-active-color:var(--sea); font-size:14px; box-shadow:var(--shadow-md); }
.progress { --bs-progress-bg:var(--surface-sunken); --bs-progress-bar-bg:var(--sea); --bs-progress-border-radius:var(--radius-pill); }
.pagination { --bs-pagination-color:var(--sea); --bs-pagination-active-bg:var(--brand); --bs-pagination-active-border-color:var(--brand);
    --bs-pagination-border-color:var(--line); --bs-pagination-border-radius:var(--radius-md); }
.spinner-border { color:var(--sea); }
hr { border-color:var(--line); opacity:1; }


html, body {
    font-family: var(--font-sans);
    background: var(--surface);
    color: var(--ink);
    /* The flight-planner drawers slide off-screen to the right with translateX, which would
       otherwise open a window-level horizontal scrollbar (and that scrollbar draws over the
       fixed edge-tab rails). Clip horizontal overflow app-wide — no page ever scrolls sideways;
       wide content (tables, the flight log) scrolls inside its own container. `clip` (not
       `hidden`) so it doesn't turn the root into a scroll container and break sticky headers. */
    overflow-x: clip;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--link);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--focus-ring);
}

.content {
    padding-top: var(--space-6);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ok);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
    font-size: 12px;
    line-height: 16px;
}

/* ── Unhandled-error bar (Blazor) — a danger notice in the design-system voice ── */
#blazor-error-ui {
    color-scheme: light only;
    background: var(--danger-soft);
    color: var(--danger);
    border-top: 2px solid var(--danger);
    bottom: 0;
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--space-3) var(--space-12) var(--space-3) var(--space-6);
    position: fixed;
    width: 100%;
    z-index: 3000;
    font-weight: 600;
}

    #blazor-error-ui .reload {
        color: var(--danger);
        text-decoration: underline;
        margin-left: var(--space-2);
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: var(--space-4);
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        line-height: 1;
    }

.blazor-error-boundary {
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: var(--danger);
    font-weight: 600;
}

    .blazor-error-boundary::after {
        content: "This part of the page failed to load. Reload the page to try again.";
    }

/* ── Start-up screen: the mark on navy with a thin load bar (replaces Blazor's ring) ── */
.ol-boot {
    position: fixed;
    inset: 0;
    background: var(--navy-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    z-index: 5000;
}

    .ol-boot img {
        width: 220px;
        max-width: 60vw;
        height: auto;
    }

.ol-boot-bar {
    width: 220px;
    max-width: 60vw;
    height: 3px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

    .ol-boot-bar::after {
        content: "";
        display: block;
        height: 100%;
        width: var(--blazor-load-percentage, 0%);
        background: var(--signal);
        transition: width 0.1s ease-out;
    }

.ol-boot-text {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, 0.6);
}

    .ol-boot-text::after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    font-family: var(--font-mono);
    color: var(--ink);
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    padding: 0 4px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Auth: login wall ──────────────────────────────────────────────────────── */
.ops-bare {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy-deep);
    padding: 1rem;
}

.ops-login-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: var(--space-8) var(--space-6);
}

/* Stacked lockup (helicopter over the wordmark) — the wordmark is outlines, never typed. */
.ops-login-logo {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    margin: 0 auto var(--space-4);
}

.ops-login-card h1 {
    font-size: 1.4rem;
    margin: 0 0 0.25rem;
}

.ops-login-sub {
    color: var(--ink-muted);
    font-size: 0.9rem;
    text-align: center;
    margin: 0 0 1.25rem;
}

.ops-login-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0.75rem 0 0.25rem;
}

.ops-login-btn {
    width: 100%;
    margin-top: 1.25rem;
}

.ops-login-error {
    margin-top: 0.9rem;
    color: var(--danger);
    background: var(--danger-soft);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.ops-403 {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--ink-muted);
}

/* ── Admin: users ──────────────────────────────────────────────────────────── */
.ops-users-add {
    margin-bottom: 1.5rem;
}

.ops-users-add h2 {
    font-size: 1rem;
    color: var(--ink-muted);
}

.ops-users-addrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ops-users-addrow .form-control { max-width: 200px; }
.ops-users-addrow .form-select { max-width: 140px; }

.ops-users-table .form-select { max-width: 140px; }
.ops-users-actions { white-space: nowrap; }
.ops-users-pwrow td { display: flex; gap: 0.5rem; align-items: center; background: var(--surface); }
.ops-users-pwrow .form-control { max-width: 240px; }

.ops-danger { color: var(--danger); }

.ops-users-notice {
    margin: 0.5rem 0 1rem;
    background: var(--sea-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* Flight-plan map: permanent waypoint labels (subtle, no bubble). */
.leaflet-tooltip.fp-wplabel {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink);
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
}
.leaflet-tooltip.fp-wplabel::before { display: none; }
/* Zoom gate: hide route-stop names when zoomed far out so they don't clutter together. */
.leaflet-container.fp-labels-off .leaflet-tooltip.fp-wplabel { display: none; }
/* Permanent name label on every waypoint in the planner's Waypoints layer. */
.leaflet-tooltip.wp-name {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 9px;
    font-weight: 600;
    color: var(--sea);
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
}
.leaflet-tooltip.wp-name::before { display: none; }

/* Leg direction arrows, on-map wind arrow, and alternate label along the diversion line. */
.fp-arrow { background: none !important; border: none !important; }
.fp-arrow span { pointer-events: none; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.fp-wind { background: none !important; border: none !important; position: relative; width: 116px; height: 116px; }
.fp-wind-svg { position: absolute; left: 0; top: 0; overflow: visible;
    filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff); }
.fp-wind-lbl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 9px);
    font-size: 11px; font-weight: 700; color: var(--sea); background: rgba(255,255,255,.85);
    border-radius: 4px; padding: 0 3px; white-space: nowrap; }
.fp-altlbl { background: none !important; border: none !important; color: var(--signal-text); font-weight: 700; font-size: 10px;
    white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.wp-hint { background: var(--panel); border: 0.5px solid var(--line); border-radius: 6px; padding: 4px 9px;
    font-size: 12px; color: var(--muted); box-shadow: 0 1px 5px rgba(0,0,0,.18); }
/* Vessel popup coordinate block: DDM shown by default, DD/DMS on expand. */
.fpv-coord summary { list-style: none; cursor: pointer; }
.fpv-coord summary::-webkit-details-marker { display: none; }
.fpv-coord summary .car { color: var(--ink-faint); margin-left: 5px; font-size: 9px; display: inline-block; transition: transform .15s ease; }
.fpv-coord[open] summary .car { transform: rotate(180deg); }

/* Route-point hover minus — drop a stop from the route by clicking it. */
.fp-dot .fp-rm { position: absolute; top: -8px; right: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 1px solid var(--danger); color: var(--danger); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); opacity: 0; visibility: hidden; transition: opacity .1s ease; cursor: pointer; z-index: 1000; }
.fp-dot:hover .fp-rm { opacity: 1; visibility: visible; }
.fp-dot .fp-rm:hover { background: var(--danger); color: #fff; }
.fp-dot .fp-rm svg { width: 9px; height: 9px; display: block; }

/* Company routes map labels (Leaflet DOM is created by wwwroot/fmsroutes.js, outside component CSS scope). */
.leaflet-tooltip.cr-lbl, .leaflet-tooltip.cr-wp, .leaflet-tooltip.cr-farmname {
    background:transparent; border:0; box-shadow:none; padding:0; font-family:var(--font-mono); font-size:11px; font-weight:700;
    color:var(--ink); text-shadow:0 0 3px var(--surface-raised), 0 0 3px var(--surface-raised), 0 0 2px var(--surface-raised); }
.leaflet-tooltip.cr-wp { font-weight:600; font-size:10px; color:var(--ink-muted); }
.leaflet-tooltip.cr-farmname { font-family:var(--font-sans); font-size:12px; font-weight:800; color:var(--farm); }
.leaflet-tooltip.cr-lbl::before, .leaflet-tooltip.cr-wp::before, .leaflet-tooltip.cr-farmname::before { display:none; }
/* Vessel label "NAME · 10:48Z": position older than 1 h → amber text (never red). */
.leaflet-tooltip.cr-vlbl { background:color-mix(in srgb, var(--surface-raised) 85%, transparent); border:0; box-shadow:none; padding:1px 5px;
    border-radius:var(--radius-sm); font:700 11px var(--font-sans); color:var(--ink); white-space:nowrap; }
.leaflet-tooltip.cr-vlbl::before { display:none; }
.leaflet-tooltip.cr-vlbl.old { color:var(--signal-text); }
.cr-vsub { color:var(--ink-muted); font-size:11px; }
.cr-handle { width:16px; height:16px; border-radius:50%; border:3px solid; box-sizing:border-box; cursor:grab; }
/* Overlap picker: every farm under a tap, as a list at the tap point (fmsroutes.js showList). Rows ≥ 44 px for a finger. */
.cr-olist { position:absolute; z-index:1000; width:260px; max-width:calc(100% - 12px); max-height:calc(100% - 12px); overflow-y:auto;
    background:var(--surface-raised); border:1px solid var(--line-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:4px 0; }
.cr-olh { padding:4px 12px 6px; font:700 10.5px var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.cr-olist button { display:grid; grid-template-columns:22px minmax(0,1fr); gap:0 9px; align-items:center; width:100%; min-height:44px; padding:5px 12px;
    border:0; border-top:1px solid var(--line); background:none; color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.cr-olist button:hover, .cr-olist button:focus-visible { background:var(--sea-soft); outline:none; }
.cr-olist b { font:700 13.5px var(--font-sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr-olist small { grid-column:2; color:var(--ink-muted); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr-olist .cr-sw { grid-row:1 / 3; }
.cr-sw { width:22px; height:12px; display:inline-block; box-sizing:border-box; }
.cr-sw.emod { background:var(--emod-soft); border:1.5px dashed var(--emod); }
.cr-sw.conv { background:transparent; border:1.5px dashed var(--emod); }
.cr-sw.picked { background:var(--sea-soft); border:2px solid var(--sea); }
.cr-sw.farm { background:var(--farm-soft); border:1.5px solid var(--farm); }