/* ============================================================================
   PortFlow OPS — field app

   Dark-first, unlike the main app: this screen is read at 03:00 on a quay and in
   direct sun at noon, and the Night Watch dark palette is the better of the two
   in both. The tokens are copied from portflow.css rather than imported so the
   app has no dependency on the server's stylesheet — it has to boot from cache
   with no network at all.

   Every touch target is at least 44px. Several are far larger: the count button
   is sized for a gloved thumb, not a mouse.
   ============================================================================ */

:root {
    --pf-surface-0: #1b2532;
    --pf-surface-1: #0f1721;
    --pf-surface-2: #222e3d;
    --pf-surface-3: #2b3848;

    --pf-border: #2b3848;
    --pf-border-strong: #3d4d61;
    --pf-border-subtle: #26323f;

    --pf-text: #e7edf4;
    --pf-text-muted: #b0bccb;
    --pf-text-subtle: #7f8ea0;

    --pf-brand: #5aa9e6;
    --pf-card-bg: #131c27;

    --pf-band-darkgreen: #4ade80;
    --pf-band-darkgreen-bg: rgba(74, 222, 128, .16);
    --pf-band-green: #86efac;
    --pf-band-green-bg: rgba(134, 239, 172, .14);
    --pf-band-orange: #fb923c;
    --pf-band-orange-bg: rgba(251, 146, 60, .18);
    --pf-band-red: #f87171;
    --pf-band-red-bg: rgba(248, 113, 113, .18);
    --pf-band-none: #94a3b8;
    --pf-band-none-bg: rgba(148, 163, 184, .16);

    color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--pf-surface-1);
    color: var(--pf-text);
    font: 15px/1.45 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
    /* The app scrolls inside .ops-main; the document itself never does, or the bottom bar
       drifts away as the page moves. */
    overflow: hidden;
    overscroll-behavior: none;
}

/* ── Boot ────────────────────────────────────────────────────────────────── */

.ops-boot {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.ops-boot__mark {
    width: 76px;
    height: 76px;
    border: 3px solid var(--pf-brand);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--pf-brand);
}

.ops-boot__title { font-size: 19px; font-weight: 700; letter-spacing: .3px; }
.ops-boot__note { font-size: 13px; color: var(--pf-text-subtle); }

/* ── Shell ───────────────────────────────────────────────────────────────── */

.ops-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

.ops-appbar {
    flex: 0 0 auto;
    background: var(--pf-surface-0);
    border-bottom: 1px solid var(--pf-border);
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
}

.ops-appbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ops-appbar__vessel {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-appbar__meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--pf-text-muted);
}

.ops-main {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
}

/* ── Bottom tabs ─────────────────────────────────────────────────────────── */

.ops-tabs {
    flex: 0 0 auto;
    display: flex;
    background: var(--pf-surface-0);
    border-top: 1px solid var(--pf-border);
    padding-bottom: env(safe-area-inset-bottom);
}

.ops-tab {
    flex: 1;
    min-height: 52px;
    background: none;
    border: 0;
    border-top: 2px solid transparent;
    color: var(--pf-text-subtle);
    font-size: 11px;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
}

.ops-tab__icon { font-size: 18px; line-height: 1; }
.ops-tab--on { color: var(--pf-brand); border-top-color: var(--pf-brand); font-weight: 600; }

/* ── Chips ───────────────────────────────────────────────────────────────── */

.ops-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid transparent;
    background: var(--pf-band-none-bg);
    color: var(--pf-text-muted);
    /* Still a comfortable tap target despite being visually small. */
    min-height: 32px;
    cursor: pointer;
    white-space: nowrap;
}

.ops-chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.ops-chip--ok    { background: var(--pf-band-green-bg);     color: var(--pf-band-green); }
.ops-chip--busy  { background: var(--pf-band-none-bg);      color: var(--pf-brand); }
/* Amber, not red. Offline is the normal state of a phone on a quay, and a red badge every
   shift teaches people to ignore red. */
.ops-chip--warn  { background: var(--pf-band-orange-bg);    color: var(--pf-band-orange); }
/* Red is reserved for the case that needs a human: the server answered and said no. */
.ops-chip--bad   { background: var(--pf-band-red-bg);       color: var(--pf-band-red); }
.ops-chip--plain { background: var(--pf-surface-3);         color: var(--pf-text-muted); }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.ops-h1 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--pf-text-subtle);
    margin: 2px 0 10px;
    font-weight: 600;
}

.ops-card {
    background: var(--pf-surface-0);
    border: 1px solid var(--pf-border);
    border-radius: 11px;
    padding: 12px;
    margin-bottom: 10px;
    width: 100%;
    text-align: left;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    display: block;
}

.ops-card--tappable { cursor: pointer; min-height: 68px; }
.ops-card--tappable:active { background: var(--pf-surface-2); }

.ops-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.ops-card__head strong { font-size: 16px; }

.ops-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 14px;
    font-size: 12.5px;
    color: var(--pf-text-subtle);
}

.ops-kv { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0 10px; }
.ops-kv > div { display: flex; flex-direction: column; }
.ops-kv span { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--pf-text-subtle); }
.ops-kv strong { font-size: 17px; }

/* ── Notes and empties ───────────────────────────────────────────────────── */

.ops-note {
    border-radius: 8px;
    padding: 9px 11px;
    margin: 8px 0;
    font-size: 12.5px;
    background: var(--pf-band-none-bg);
    color: var(--pf-text-muted);
}

.ops-note--warn { background: var(--pf-band-orange-bg); color: var(--pf-band-orange); }

.ops-empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--pf-text-muted);
}

.ops-empty__icon { font-size: 40px; margin-bottom: 8px; opacity: .65; }
.ops-muted { color: var(--pf-text-subtle); font-size: 13px; }

/* ── Sign-in ─────────────────────────────────────────────────────────────── */

.ops-signin__title {
    text-align: center;
    font-size: 21px;
    margin: 26px 0 4px;
}

.ops-signin { max-width: 380px; margin: 0 auto; padding: 8px 4px 24px; }
.ops-signin__lead { text-align: center; color: var(--pf-text-muted); font-size: 13.5px; margin-bottom: 18px; }
.ops-signin__who { text-align: center; font-size: 18px; font-weight: 700; margin-bottom: 12px; }

.ops-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--pf-text-subtle);
    margin: 12px 0 5px;
}

.ops-input,
.ops-pin {
    width: 100%;
    min-height: 52px;
    border-radius: 10px;
    border: 1px solid var(--pf-border-strong);
    background: #132538;
    color: var(--pf-text);
    padding: 0 14px;
    font-family: inherit;
    font-size: 16px; /* 16px or iOS Safari zooms the whole page on focus */
}

.ops-pin {
    text-align: center;
    letter-spacing: 10px;
    font-size: 24px;
    margin-bottom: 14px;
}

.ops-btn-primary { min-height: 52px; font-size: 16px; }

.ops-linkbtn {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    background: none;
    border: 0;
    color: var(--pf-brand);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.ops-signin__msg {
    margin-top: 14px;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    background: var(--pf-band-none-bg);
    color: var(--pf-text-muted);
}

.ops-signin__msg--bad { background: var(--pf-band-red-bg); color: var(--pf-band-red); }

/* ── Blazor's own error strip ────────────────────────────────────────────── */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--pf-band-red-bg);
    color: var(--pf-band-red);
    padding: 12px 16px;
    font-size: 13px;
}

#blazor-error-ui .dismiss { float: right; cursor: pointer; }
#blazor-error-ui .reload { color: inherit; text-decoration: underline; }

/* ============================================================================
   SUPERVISOR SCREENS — hatch grid, delays, shift
   ============================================================================ */

/* ── Summary strip ───────────────────────────────────────────────────────── */

.ops-summary { display: flex; justify-content: space-between; align-items: baseline; }
.ops-summary__right { text-align: right; }
.ops-summary__big { font-size: 23px; font-weight: 700; letter-spacing: -.4px; }
.ops-summary__lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--pf-text-subtle);
}

.ops-bar {
    height: 9px;
    border-radius: 5px;
    background: var(--pf-surface-3);
    overflow: hidden;
    margin: 9px 0 8px;
}

.ops-bar--sm { height: 6px; margin: 7px 0 6px; }
.ops-bar > i { display: block; height: 100%; background: var(--pf-brand); }
.ops-bar > i.working { background: var(--pf-band-green); }
.ops-bar > i.delayed { background: var(--pf-band-red); }
.ops-bar > i.idle    { background: var(--pf-band-orange); }
.ops-bar > i.waiting { background: var(--pf-band-none); }

/* Three buckets, side by side, always visible. The colours are the KPI band tokens because
   these values genuinely carry KPI meaning — which is the one place they may be used. */
.ops-delaysplit { display: flex; gap: 6px; }

.ops-dl {
    flex: 1;
    text-align: center;
    border-radius: 7px;
    padding: 6px 2px;
    font-size: 13px;
    font-weight: 700;
}

.ops-dl small {
    display: block;
    font-weight: 400;
    font-size: 9.5px;
    opacity: .85;
    margin-top: 2px;
}

.ops-dl--wd { background: var(--pf-band-red-bg);    color: var(--pf-band-red); }
.ops-dl--lb { background: var(--pf-band-orange-bg); color: var(--pf-band-orange); }
.ops-dl--op { background: var(--pf-band-none-bg);   color: var(--pf-text-muted); }

/* ── Hatch grid ──────────────────────────────────────────────────────────── */

.ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ops-hatch {
    background: var(--pf-surface-0);
    border: 1px solid var(--pf-border);
    border-left-width: 3px;
    border-radius: 10px;
    padding: 9px 10px;
    text-align: left;
    color: inherit;
    font-family: inherit;
    /* Comfortably tappable with a glove on. */
    min-height: 104px;
    cursor: pointer;
}

.ops-hatch:active { background: var(--pf-surface-2); }
.ops-hatch--working { border-left-color: var(--pf-band-green); }
.ops-hatch--delayed { border-left-color: var(--pf-band-red); }
.ops-hatch--idle    { border-left-color: var(--pf-band-orange); }
.ops-hatch--waiting { border-left-color: var(--pf-band-none); }

.ops-hatch--add {
    border: 1.5px dashed var(--pf-border-strong);
    color: var(--pf-text-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
}

.ops-hatch__plus { font-size: 22px; line-height: 1; }
.ops-hatch__head { display: flex; justify-content: space-between; align-items: center; }
.ops-hatch__id { font-size: 16px; font-weight: 700; }
.ops-hatch__gang { font-size: 10.5px; font-weight: 600; color: var(--pf-text-subtle); }

.ops-hatch__grade {
    font-size: 10.5px;
    color: var(--pf-text-subtle);
    margin: 2px 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-hatch__n { font-size: 18px; font-weight: 700; line-height: 1.1; }
.ops-hatch__n span { font-size: 11px; font-weight: 400; color: var(--pf-text-subtle); }
.ops-hatch__state { font-size: 10.5px; font-weight: 600; }
.ops-hatch__state--working { color: var(--pf-band-green); }
.ops-hatch__state--delayed { color: var(--pf-band-red); }
.ops-hatch__state--idle    { color: var(--pf-band-orange); }
.ops-hatch__state--waiting { color: var(--pf-text-subtle); }

/* ── Actions ─────────────────────────────────────────────────────────────── */

.ops-actions { margin-top: 12px; }
.ops-actions__row { display: flex; gap: 8px; margin-top: 8px; }

/* Full width and red-banded. A squall does not wait for navigation. */
.ops-btn-stop {
    min-height: 54px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .4px;
    background: var(--pf-band-red-bg) !important;
    border: 1px solid var(--pf-band-red) !important;
    color: var(--pf-band-red) !important;
}

/* ── Sheets ──────────────────────────────────────────────────────────────── */

.ops-sheet { padding: 2px 0 8px; }
.ops-sheet__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ops-sheet__foot { margin-top: 12px; font-size: 12px; }

.ops-startrow { display: flex; gap: 8px; align-items: center; }
.ops-startrow .ops-input { flex: 1; }

.ops-textarea { padding: 10px 14px; min-height: 62px; line-height: 1.4; resize: vertical; }

.ops-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }

.ops-choice {
    flex: 1 1 88px;
    min-height: 56px;
    border-radius: 9px;
    border: 1px solid var(--pf-border-strong);
    background: var(--pf-surface-2);
    color: var(--pf-text);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
}

.ops-choice small { font-size: 10.5px; color: var(--pf-text-subtle); }
.ops-choice--on { border-color: var(--pf-brand); background: rgba(90, 169, 230, .14); }

/* ── Delay reason picker ─────────────────────────────────────────────────── */

.ops-reasons { margin-bottom: 6px; }
.ops-reasons__group { margin-bottom: 12px; }

.ops-reasons__head {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--pf-text-subtle);
    margin-bottom: 6px;
}

/* The grouping is the lesson: a supervisor learns which hours come back to them by reading
   the headings every time they log a stoppage. */
.ops-reasons__head--deduct  { color: var(--pf-band-green); }
.ops-reasons__head--partial { color: var(--pf-band-orange); }

.ops-reason {
    display: inline-block;
    min-height: 44px;
    margin: 0 6px 6px 0;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--pf-border-strong);
    background: var(--pf-surface-2);
    color: var(--pf-text-muted);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.ops-reason--deduct  { border-color: rgba(74, 222, 128, .45); color: var(--pf-band-green); }
.ops-reason--partial { border-color: rgba(251, 146, 60, .45); color: var(--pf-band-orange); }

.ops-reason--on {
    background: var(--pf-brand);
    border-color: var(--pf-brand);
    color: #06203a;
    font-weight: 700;
}

.ops-note--good { background: var(--pf-band-green-bg); color: var(--pf-band-green); }
.ops-note--bad  { background: var(--pf-band-red-bg);   color: var(--pf-band-red); }

/* ── Previous shifts / queue rows ────────────────────────────────────────── */

.ops-past {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--pf-border-subtle);
    font-size: 13.5px;
}

.ops-past:last-child { border-bottom: 0; }
.ops-past small { display: block; color: var(--pf-text-subtle); font-size: 11px; }
.ops-past__n { text-align: right; font-weight: 700; }

/* ============================================================================
   COORDINATOR — counter first
   ============================================================================ */

.ops-ctx {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: var(--pf-surface-0);
    border: 1px solid var(--pf-border);
    border-radius: 11px;
    padding: 10px 12px;
    margin-bottom: 9px;
}

.ops-ctx__who { font-size: 16px; font-weight: 700; }
.ops-ctx__what { font-size: 11.5px; color: var(--pf-text-subtle); margin-top: 2px; }

.ops-tally { display: flex; gap: 9px; margin-bottom: 10px; }

.ops-tl {
    flex: 1;
    background: var(--pf-surface-0);
    border: 1px solid var(--pf-border);
    border-radius: 11px;
    padding: 10px;
    text-align: center;
}

.ops-tl__n { font-size: 26px; font-weight: 700; letter-spacing: -.6px; line-height: 1.05; }

.ops-tl__u {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--pf-text-subtle);
}

/* The count target. Roughly half the viewport on a 375x812 handset, because this is the one
   thing a coordinator does four hundred times a shift — with a glove on, in sun glare. Nothing
   else on the screen is allowed to compete with it for the thumb. */
.ops-count {
    width: 100%;
    min-height: 200px;
    border-radius: 15px;
    border: 2px solid var(--pf-brand);
    background: var(--pf-band-darkgreen-bg);
    color: var(--pf-band-darkgreen);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}

.ops-count:active { background: rgba(74, 222, 128, .3); }
.ops-count:disabled { opacity: .45; }
.ops-count__plus { font-size: 62px; font-weight: 300; line-height: .82; }
.ops-count__word { font-size: 20px; font-weight: 700; letter-spacing: 1.6px; }

.ops-count__hint {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--pf-text-muted);
    letter-spacing: 0;
}

.ops-count__row { display: flex; gap: 8px; margin: 9px 0 10px; }
.ops-btn-multi { min-height: 48px; font-size: 16px; font-weight: 700; }
.ops-btn-undo  { min-height: 48px; }

.ops-input--big { font-size: 22px; text-align: center; letter-spacing: 1px; }
.ops-choice--wide { flex: 1 1 100%; flex-direction: row; gap: 10px; justify-content: flex-start; padding: 0 14px; }

/* ── Trucks ──────────────────────────────────────────────────────────────── */

.ops-truckrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--pf-border-subtle);
}

.ops-truckrow:last-child { border-bottom: 0; }
.ops-truckrow strong { font-size: 15px; }
.ops-truckrow small { display: block; font-size: 11.5px; color: var(--pf-text-subtle); margin-top: 2px; }
.ops-truckrow__n { text-align: right; font-size: 15px; font-weight: 700; white-space: nowrap; }
.ops-truckrow__n small { font-weight: 400; }

/* A truck already under the grab cannot be started again — the button says so rather than
   silently doing nothing. */
.ops-choice--busy { opacity: .45; }

/* ── Radzen dialogs, themed to the app ───────────────────────────────────── */
/* Radzen's standard-base.css paints its dialog surfaces light, so every bottom sheet in this
   app — delay, gang assign, volume, truck end — came up white against a dark shell. Jarring at
   any time and genuinely bad at 03:00 on a quay, where a full-screen white panel destroys night
   vision for the next minute.

   Overriding the --rz-* variables rather than the rules, which is the same approach portflow.css
   takes on the server side. */

.rz-dialog,
.rz-dialog-wrapper .rz-dialog {
    --rz-dialog-background-color: var(--pf-surface-0);
    --rz-dialog-color: var(--pf-text);
    --rz-dialog-title-background-color: var(--pf-surface-0);
    --rz-dialog-title-color: var(--pf-text);

    background: var(--pf-surface-0) !important;
    color: var(--pf-text) !important;
    border: 1px solid var(--pf-border-strong);
    border-radius: 14px;
}

.rz-dialog-titlebar,
.rz-dialog-title {
    background: var(--pf-surface-0) !important;
    color: var(--pf-text) !important;
    border-bottom: 1px solid var(--pf-border);
}

.rz-dialog-content { background: var(--pf-surface-0) !important; color: var(--pf-text) !important; }
.rz-dialog-titlebar-close { color: var(--pf-text-muted) !important; }
.rz-dialog-mask { background: rgba(4, 9, 15, .72) !important; }

/* The sheets are bottom-anchored on a phone: a dialog centred in the viewport puts its actions
   under the thumb's reach on a tall handset. */
@media (max-width: 640px) {
    .rz-dialog-wrapper .rz-dialog {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-height: 88dvh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        margin: 0;
    }
}