/* ── Brand colour tokens ─────────────────────────────────── */
:root {
  --mk-chrome:         #0d47a1;
  --mk-primary:        #1a73e8;
  --mk-primary-dark:   #0d47a1;
  --mk-primary-light:  #e8f0fe;
  --mk-primary-border: #c5d8fb;
  /* Generic focus-ring, matching --mk-primary's own hue. Needed as the
     fallback target for var(--module-focus, var(--mk-primary-focus))-style
     rules now that --psc-focus is PSC's own steel-slate ring rather
     than a copy of the app's default blue one (Session 81 continued). */
  --mk-primary-focus:  rgba(26,115,232,0.12);
}

/* ── Sidebar depth pattern ───────────────────────────────── */
#vm-sidebar { position: relative; isolation: isolate; }
#vm-sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  z-index: 0;
}
#vm-sidebar > * { position: relative; z-index: 1; }

/* ============================================================
   MarineKPI — Global Stylesheet
   Version 1.0
   Import in every page: <link rel="stylesheet" href="/marinekpi.css">
   ============================================================ */

/* ── Design Tokens ────────────────────────────────────────── */
:root {

    /* Platform base. Deliberately no web font (was 'Inter' via Google Fonts
       @import, removed 2026-08-13) — ships on slow/satellite links were
       stalling on that external, render-blocking fetch before the app UI
       could even paint. System-font stack renders instantly, no network
       round trip, and looks close enough to Inter that this is a pure
       reliability win, not a visual regression worth caring about. */
    --font-family:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-size-base:     13px;
    --font-size-sm:       11px;
    --font-size-md:       14px;
    --font-size-lg:       16px;
    --font-size-xl:       20px;
    --font-size-h1:       22px;

    --radius-sm:          4px;
    --radius-md:          6px;
    --radius-lg:          8px;
    --radius-xl:          12px;
    --radius-pill:        20px;

    --shadow-card:        0 1px 6px rgba(0,0,0,0.07);
    --shadow-modal:       0 8px 40px rgba(0,0,0,0.18);
    --shadow-dropdown:    0 4px 12px rgba(0,0,0,0.12);

    --transition:         0.15s ease;

    /* ── Neutral palette ── */
    --color-text:         #202124;
    --color-text-secondary: #5f6368;
    --color-text-muted:   #9aa0a6;
    --color-bg:           #f8f9fa;
    --color-bg-white:     #ffffff;
    --color-border:       #dadce0;
    --color-border-light: #f1f3f4;
    --color-divider:      #e8eaed;

    /* ── Module accent colours ── */
    /* Session 81 continued: PSC and SIRE moved to their own independent
       identities (were both silently sharing the app's generic blue by
       aliasing --mk-primary/--mk-chrome). Nav Audits joins the shared
       Audits green group instead. KPI + Near Miss moved from teal/amber
       to a shared rust-red, alongside Safety Meeting (--kpi-* is the
       canonical definition; --nm-* and Safety Meeting's .mk-module-shec
       alias it, see the "Module scope classes" section below). */

    /* PSC Inspections — Steel Slate (its own identity now, not the
       app's generic default blue) */
    --psc-primary:        #37474f;
    --psc-dark:           #263238;
    --psc-light:          #eceff1;
    --psc-border:         #b0bec5;
    --psc-focus:          rgba(55,71,79,0.12);

    /* KPI, Near Miss & Safety Meeting — Rust */
    --kpi-primary:        #9c4a3d;
    --kpi-dark:           #7d3a30;
    --kpi-light:          #f5e6e2;
    --kpi-border:         #e0b8ae;
    --kpi-focus:          rgba(156,74,61,0.12);

    /* Near Miss — aliases KPI's rust, see comment above */
    --nm-primary:         var(--kpi-primary);
    --nm-dark:            var(--kpi-dark);
    --nm-light:           var(--kpi-light);
    --nm-border:          var(--kpi-border);
    --nm-focus:           var(--kpi-focus);

    /* Nav Audits — aliases the Audits green group below (was
       incorrectly sharing PSC's old blue) */
    --nav-primary:        var(--audit-primary);
    --nav-dark:           var(--audit-dark);
    --nav-light:          var(--audit-light);
    --nav-border:         var(--audit-border);
    --nav-focus:          var(--audit-focus);

    /* Audits — Green. Covers all 9 audit/inspection modules (Nav, Cargo,
       Mooring, Safety, Engine, ISM, ISPS, MLC, Supdt) via the
       .mk-module-* selectors below, not just Safety/Cargo/Mooring as the
       name/original comment here used to imply. */
    --audit-primary:      #188038;
    --audit-dark:         #0d6630;
    --audit-light:        #e6f4ea;
    --audit-border:       #b7dfbf;
    --audit-focus:        rgba(24,128,56,0.12);

    /* RightShip — RightShip Brand Orange */
    --rs-primary:         #e8500a;
    --rs-dark:            #c44008;
    --rs-light:           #fff0e8;
    --rs-border:          #fdd0b3;
    --rs-focus:           rgba(232,80,10,0.12);

    /* SIRE — OCIMF Blue (their real brand navy, #1D4289 — checked
       live against ocimf.org's header/footer background, not guessed) */
    --sire-primary:       #1d4289;
    --sire-dark:          #15316b;
    --sire-light:         #e5e9f4;
    --sire-border:        #aebbdc;
    --sire-focus:         rgba(29,66,137,0.12);

    /* Status colours (shared across all modules) */
    --color-success:      #188038;
    --color-success-bg:   #e6f4ea;
    --color-success-border: #b7dfbf;

    --color-warning:      #b45309;
    --color-warning-bg:   #fff8e1;
    --color-warning-border: #ffe082;

    --color-danger:       #d93025;
    --color-danger-bg:    #fce8e6;
    --color-danger-border: #f5c6cb;

    --color-info:         var(--mk-primary);
    --color-info-bg:      var(--mk-primary-light);
    --color-info-border:  #c5d9f8;
    --color-purple:       #7c3aed;
    --color-purple-dark:  #5b21b6;
    --color-purple-bg:    #f3e8fd;
    --color-purple-border: #d5b3fa;
    --color-purple-focus: rgba(124,58,237,0.12);

    /* Fleet Analytics (MRM) — Teal. Reuses the exact values KPI used to
       hold before it moved to the shared rust family, since that teal
       was already well-tuned and otherwise unclaimed. */
    --mrm-primary: #0097a7;
    --mrm-dark:    #00737a;
    --mrm-light:   #e0f7fa;
    --mrm-border:  #b2ebf2;
    --mrm-focus:   rgba(0,151,167,0.12);

    /* 4-tier risk-severity scale (Near Miss analytics' risk-band badges —
       low/medium/high/extreme is a genuinely different shape from the
       3-tier success/warning/danger set above, not a duplicate of it). */
    --color-risk-low:      #1b5e20;
    --color-risk-low-bg:   #c8e6c9;
    --color-risk-medium:   #f57f17;
    --color-risk-medium-bg: #fff9c4;
    --color-risk-high:     #e65100;
    --color-risk-high-bg:  #ffcc80;
    --color-risk-extreme:  #b71c1c;
    --color-risk-extreme-bg: #ef9a9a;

    /* Analytics "where to focus" intelligence layer — status-* are
       aliases onto the existing success/warning/danger tokens (not a
       second, slightly-different red/amber/green trio) so this layer
       always matches the rest of the app's semantic colors exactly.
       cat-1..5 is a genuinely new ordered categorical set (MOU/country
       donut breakdowns etc.) with no existing equivalent. */
    --status-good:    var(--color-success);
    --status-good-bg: var(--color-success-bg);
    --status-warn:    var(--color-warning);
    --status-warn-bg: var(--color-warning-bg);
    --status-crit:    var(--color-danger);
    --status-crit-bg: var(--color-danger-bg);

    --cat-1: #2a78d6;
    --cat-2: #1baf7a;
    --cat-3: #eda100;
    --cat-4: #008300;
    --cat-5: #4a3aa7;
}

/* ============================================================
   DARK MODE — signed-in app only, Session 81. Applied via a
   data-theme="dark" attribute on <html> (see public/js/theme-init.js
   + nav.js's topbar toggle), never on the 3 public marketing pages
   (those use the separate --brand-* palette and stay fixed-dark
   year-round, see the "Admiralty Chart palette" block above).

   Scope is deliberately partial: this covers the CORE neutral/status
   tokens that marinekpi.css's shared components (.mk-card, .mk-btn,
   .mk-badge, .mk-table, form fields, nav.js's tab bar + change-password
   modal) already consistently reference via var() — so the shared
   chrome and any already-tokenized page goes fully dark correctly.

   All 9 per-module accent families now have real dark values (PSC,
   Audits, RightShip, SIRE, KPI/Near Miss/Safety Meeting's shared rust)
   — the last few (PSC/SIRE/Audits) landed once the module colour
   restructure below made them genuinely distinct identities instead of
   aliases of the app's generic blue. Still NOT covered: --cat-1..5
   (chart category colors) and --shadow-* (still valid rgba(0,0,0,x)
   shadows on a dark background, just less prominent — not broken, just
   not tuned). Hundreds of hardcoded hex values remain in individual
   pages' own inline <style> blocks and in public/js/*.js — those pages
   will look partially light-mode-y in dark mode until swept
   individually.
   ============================================================ */
:root[data-theme="dark"] {
    /* Tells the browser to render native form-control chrome (date-input
       calendar icon, spinner arrows, etc.) using its own dark variant —
       without this, those bits ignore our color tokens entirely and stay
       whatever the browser's light-mode default is (e.g. a black calendar
       icon, invisible against the dark navy input it sits in). */
    color-scheme: dark;

    --mk-chrome:         #7fb3ff;
    --mk-primary:        #5b9bf7;
    --mk-primary-dark:   #3d7fd9;
    --mk-primary-light:  rgba(91,155,247,0.16);
    --mk-primary-border: rgba(91,155,247,0.38);
    --mk-primary-focus:  rgba(91,155,247,0.25);

    --color-text:         #e8eaed;
    --color-text-secondary: #a8b0bb;
    --color-text-muted:   #7d8590;
    /* Navy-tinted rather than neutral slate — echoes #vm-sidebar/#vm-topbar's
       existing #1b2a4a -> #111e38 gradient instead of a generic dark grey,
       so the whole app reads as one cohesive navy brand instead of chrome
       and content looking like two different apps (Gaurav feedback). */
    --color-bg:           #0d1526;
    --color-bg-white:     #16233f;
    --color-border:       rgba(255,255,255,0.14);
    --color-border-light: rgba(255,255,255,0.07);
    --color-divider:      rgba(255,255,255,0.10);

    --color-success:        #4caf6e;
    --color-success-bg:     rgba(76,175,110,0.16);
    --color-success-border: rgba(76,175,110,0.38);

    --color-warning:        #e2a33d;
    --color-warning-bg:     rgba(226,163,61,0.16);
    --color-warning-border: rgba(226,163,61,0.38);

    --color-danger:        #f1685c;
    --color-danger-bg:     rgba(241,104,92,0.16);
    --color-danger-border: rgba(241,104,92,0.38);

    /* --color-info/-bg are var(--mk-primary)/var(--mk-primary-light)
       aliases declared in the base :root block above — they resolve
       live against the override above, no need to redeclare. Only the
       one non-aliased literal needs its own dark value. */
    --color-info-border:  rgba(91,155,247,0.38);
    --color-purple:       #a78bfa;
    --color-purple-dark:  #c4b5fd;
    --color-purple-bg:    rgba(167,139,250,0.16);
    --color-purple-border: rgba(167,139,250,0.38);
    --color-purple-focus: rgba(167,139,250,0.25);

    --mrm-primary: #26c6da;
    --mrm-dark:    #00acc1;
    --mrm-light:   rgba(38,198,218,0.16);
    --mrm-border:  rgba(38,198,218,0.38);
    --mrm-focus:   rgba(38,198,218,0.25);

    --color-risk-low:       #66bb6a;
    --color-risk-low-bg:    rgba(102,187,106,0.16);
    --color-risk-medium:    #ffca28;
    --color-risk-medium-bg: rgba(255,202,40,0.16);
    --color-risk-high:      #ffa726;
    --color-risk-high-bg:   rgba(255,167,38,0.16);
    --color-risk-extreme:   #ef5350;
    --color-risk-extreme-bg: rgba(239,83,80,0.16);

    /* Lighter than a "correct" proportional dark-mode shade would be —
       steel-slate is deliberately the one desaturated color in the whole
       module palette (every other module is a vivid hue), so it needs
       extra lightening here specifically for legibility in bar-fill /
       progress-indicator contexts (e.g. PSC Analytics' rank-row bars),
       not just text/badges. Found live: the original #90a4ae read as
       washed-out against the new navy page background. */
    --psc-primary: #c5d5e0;
    --psc-dark:    #a8bdcc;
    --psc-light:   rgba(144,164,174,0.16);
    --psc-border:  rgba(144,164,174,0.38);
    --psc-focus:   rgba(144,164,174,0.25);

    --kpi-primary: #d08a7d;
    --kpi-dark:    #e0988a;
    --kpi-light:   rgba(208,138,125,0.16);
    --kpi-border:  rgba(208,138,125,0.38);
    --kpi-focus:   rgba(208,138,125,0.25);

    --rs-primary: #ff8a50;
    --rs-dark:    #ff7043;
    --rs-light:   rgba(255,138,80,0.16);
    --rs-border:  rgba(255,138,80,0.38);

    --audit-primary: #4caf6e;
    --audit-dark:    #66bb6a;
    --audit-light:   rgba(76,175,110,0.16);
    --audit-border:  rgba(76,175,110,0.38);
    --audit-focus:   rgba(76,175,110,0.25);

    --sire-primary: #6b8fd6;
    --sire-dark:    #86a3e0;
    --sire-light:   rgba(107,143,214,0.16);
    --sire-border:  rgba(107,143,214,0.38);
    --sire-focus:   rgba(107,143,214,0.25);
    /* --nav-* / --nm-* alias --audit-* / --kpi-* in the base :root
       block above — they resolve live against the dark overrides here,
       no redeclare needed. */
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family:    var(--font-family);
    font-size:      var(--font-size-base);
    color:          var(--color-text);
    background:     var(--color-bg);
    margin:         0;
    padding:        0;
    -webkit-font-smoothing: antialiased;
}

/* Thin fixed accent strip along the very bottom of the viewport — with
   dark mode's near-black page background, a short page left the browser
   chrome/OS taskbar below it blending straight into the app with no
   visible edge (Gaurav: differentiate "end of our page" from "start of
   the taskbar"). Sits well clear of the vessel-chat FAB (bottom:24px, way
   above this) and below it in z-index, so it never competes with real UI. */
body::after {
    content: '';
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--mk-chrome);
    z-index: 500;
    pointer-events: none;
}

/* input/select/textarea don't inherit color/background from body like
   normal elements do — every browser's UA stylesheet gives them their
   own defaults (black text, white/Field background), so any bare native
   control with no page-specific class (search boxes, admin dropdowns,
   date pickers built without .mk-input/.mk-select) silently reverts to
   that default and reads as a jarring white patch or, worse, black-on-
   navy in dark mode. Low-specificity element selector, so any class that
   already sets its own colors (.mk-input, .mk-filter-row2 select, etc.)
   continues to win — this only fills the gap for the ones that don't. */
input, select, textarea {
    color:            var(--color-text);
    background-color: var(--color-bg-white);
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--color-text); }
p  { margin: 0; }
a  { color: var(--psc-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.page-title {
    font-size:   var(--font-size-xl);
    font-weight: 700;
    color:       var(--color-text);
    margin:      0 0 4px;
}
.page-subtitle {
    font-size:  var(--font-size-base);
    color:      var(--color-text-muted);
    margin:     0;
}

/* ── Cards ────────────────────────────────────────────────── */
.mk-card {
    background:    var(--color-bg-white);
    border:        1px solid var(--color-divider);
    border-radius: var(--radius-xl);
    box-shadow:    var(--shadow-card);
    overflow:      hidden;
    margin-bottom: 16px;
}
.mk-card-header {
    padding:        12px 24px;
    background:     var(--color-bg);
    border-bottom:  1px solid var(--color-divider);
    font-size:      var(--font-size-sm);
    font-weight:    700;
    color:          var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display:        flex;
    align-items:    center;
    gap:            8px;
}
.mk-card-header .step-num {
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
    color: white;
    background: var(--module-primary, var(--mk-primary));
}
.mk-card-body { padding: 24px; }

/* ── Form elements ────────────────────────────────────────── */
.mk-form-row { display: grid; gap: 20px; margin-bottom: 20px; }
.mk-form-row.col-1 { grid-template-columns: 1fr; }
.mk-form-row.col-2 { grid-template-columns: 1fr 1fr; }

.mk-field { display: flex; flex-direction: column; gap: 5px; }
.mk-field label {
    font-size:      var(--font-size-sm);
    font-weight:    700;
    color:          var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.mk-field label .req { color: var(--color-danger); margin-left: 2px; }

.mk-input,
.mk-select,
.mk-textarea {
    padding:     9px 12px;
    border:      1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size:   var(--font-size-md);
    font-family: var(--font-family);
    color:       var(--color-text);
    background:  var(--color-bg-white);
    width:       100%;
    transition:  border-color var(--transition), box-shadow var(--transition);
}
.mk-input:focus, .mk-select:focus, .mk-textarea:focus {
    outline:    none;
    border-color: var(--module-primary, var(--mk-primary));
    box-shadow: 0 0 0 3px var(--module-focus, var(--mk-primary-focus));
}
.mk-input.error, .mk-select.error { border-color: var(--color-danger); }
.mk-input[readonly], .mk-select[readonly] {
    background: var(--color-bg);
    color:      var(--color-text-secondary);
}
.mk-textarea { resize: vertical; min-height: 80px; }

/* ── Compact date input (Supdt. Inspections visit dates) ─────── */
.mk-input-compact {
    padding:   6px 8px;
    font-size: var(--font-size-sm);
}

/* ── Header card layout (Supdt. New Inspection / Edit Header only) ── */
.supdt-header-card {
    padding: 14px 20px 16px;
}
/* Two-column grid where one column spans both rows: the spanning column
   stretches to fill the full track height so its bottom edge lines up
   with the shorter column's last item (opt out with align-self:start
   on the shorter column's own items). Shared by the header card and
   the Add Finding box. */
.supdt-span-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

/* ── Root Cause (single-select) + Human Factors (multi-select) chips
   (Supdt. PIC Review) — same interaction pattern as PSC's cause/PIF
   chips, kept here per the project convention that CSS belongs in
   marinekpi.css rather than inline in a page's <style> block. ── */
.supdt-cause-chip {
    display:       inline-block;
    padding:       6px 10px;
    margin:        0 6px 6px 0;
    border:        1.5px solid var(--color-border);
    border-radius: 7px;
    font-size:     12px;
    line-height:   1.3;
    cursor:        pointer;
    transition:    all var(--transition);
}
.supdt-cause-chip:hover     { border-color: var(--module-primary, var(--mk-primary)); background: var(--module-light, var(--mk-primary-light)); }
.supdt-cause-chip.selected  { border-color: var(--module-primary, var(--mk-primary)); background: var(--module-primary, var(--mk-primary)); color: white; }
.supdt-cause-chip.ai-suggested { box-shadow: 0 0 0 2px #fbbc04; }

.supdt-pif-chip {
    display:       inline-block;
    padding:       4px 10px;
    margin:        0 6px 6px 0;
    border:        1px solid var(--color-border);
    border-radius: 11px;
    font-size:     12px;
    cursor:        pointer;
    user-select:   none;
    transition:    all var(--transition);
}
.supdt-pif-chip:hover    { border-color: var(--module-primary, var(--mk-primary)); color: var(--module-primary, var(--mk-primary)); }
.supdt-pif-chip.selected { border-color: var(--module-primary, var(--mk-primary)); background: var(--module-primary, var(--mk-primary)); color: white; }

/* ── Small inline icon button (edit/delete row actions) ───────── */
.icon-btn {
    background: none;
    border:     none;
    cursor:     pointer;
    font-size:  14px;
    line-height: 1;
    padding:    2px 4px;
    opacity:    0.65;
}
.icon-btn:hover { opacity: 1; }

/* ── Field-level data translation (see ui-utils.js wireTranslatable) ── */
.mk-translate-btn {
    background:    none;
    border:        none;
    cursor:        pointer;
    font-size:     13px;
    line-height:   1;
    padding:       1px 5px;
    margin-left:   6px;
    border-radius: 4px;
    opacity:       0.65;
    vertical-align: middle;
}
.mk-translate-btn:hover:not(:disabled) { opacity: 1; background: var(--color-bg); }
.mk-translate-btn:disabled { opacity: 0.4; cursor: default; }

.mk-translated-block {
    margin-top:    6px;
    padding:       8px 10px;
    background:    var(--color-bg);
    border:        1px dashed var(--mk-primary-border);
    border-radius: 6px;
}
.mk-translated-label {
    font-size:     11px;
    font-style:    italic;
    color:         var(--color-text-muted);
    margin-bottom: 4px;
}
.mk-translated-text {
    font-size:      13px;
    color:          var(--color-text);
    white-space:    pre-wrap;
}

/* List/table row preview (see ui-utils.js wireTranslatablePreview) —
   fixed-position popover instead of an inline block, since inserting a
   block after a <td> breaks table structure. */
.mk-translate-popover {
    position:      fixed;
    width:         280px;
    max-width:     calc(100vw - 16px);
    padding:       10px 12px;
    background:    var(--color-bg-white);
    border:        1px solid var(--mk-primary-border);
    border-radius: 8px;
    box-shadow:    0 8px 24px rgba(0,0,0,0.2);
    z-index:       1200;
}
.mk-translate-popover .mk-translated-text { white-space: normal; }

/* ── Buttons ──────────────────────────────────────────────── */
.mk-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 20px;
    border-radius: var(--radius-md);
    font-size:     var(--font-size-base);
    font-weight:   600;
    font-family:   var(--font-family);
    cursor:        pointer;
    border:        none;
    white-space:   nowrap;
    transition:    background var(--transition), color var(--transition), border-color var(--transition);
    text-decoration: none;
}
.mk-btn-primary {
    background: var(--module-primary, var(--mk-primary));
    color:      white;
}
.mk-btn-primary:hover {
    background: var(--module-dark, var(--mk-chrome));
    color:      white;
    text-decoration: none;
}
.mk-btn-outline {
    background:   var(--color-bg-white);
    color:        var(--color-text-secondary);
    border:       1px solid var(--color-border);
}
.mk-btn-outline:hover { background: var(--color-bg); }
.mk-btn-danger {
    background:   var(--color-bg-white);
    color:        var(--color-danger);
    border:       1px solid var(--color-danger);
}
.mk-btn-danger:hover  { background: var(--color-danger-bg); }
.mk-btn-success {
    background: var(--color-success);
    color:      white;
}
.mk-btn-success:hover { background: var(--audit-dark); }
.mk-btn-sm { padding: 5px 12px; font-size: var(--font-size-sm); }
.mk-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Badges / Pills ───────────────────────────────────────── */
.mk-badge {
    display:       inline-block;
    padding:       2px 9px;
    border-radius: var(--radius-pill);
    font-size:     var(--font-size-sm);
    font-weight:   700;
    text-transform: uppercase;
}
.mk-badge-success { background: var(--color-success-bg); color: var(--color-success); }
.mk-badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.mk-badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger);  }
.mk-badge-info    { background: var(--color-info-bg);    color: var(--color-info);    }
.mk-badge-draft   { background: var(--color-warning-bg); color: var(--color-warning); }
.mk-badge-muted   { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* Module accent badge — inherits --module-primary */
.mk-badge-module {
    background: var(--module-light, var(--mk-primary-light));
    color:      var(--module-primary, var(--mk-primary));
    border:     1px solid var(--module-border, var(--mk-primary-border));
}

/* ── Vessel identity chips — type (abbreviated) + age-at-event, sat
   next to a vessel name in a list row or detail header — quieter than
   .mk-badge since they're context, not a status. ────────────────── */
.mk-vessel-chip {
    display:        inline-block;
    padding:        1px 7px;
    margin-left:    6px;
    border-radius:  var(--radius-pill);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.3px;
    background:     var(--color-bg);
    color:          var(--color-text-muted);
    border:         1px solid var(--color-border);
    vertical-align:  middle;
}

/* ── Status chips (findings, actions etc.) ────────────────── */
.mk-status-open        { background: var(--color-danger-bg);  color: var(--color-danger);  }
.mk-status-in_progress { background: var(--color-warning-bg); color: var(--color-warning); }
.mk-status-closed      { background: var(--color-success-bg); color: var(--color-success); }
.mk-status-draft       { background: var(--color-warning-bg); color: var(--color-warning); }
.mk-status-submitted   { background: var(--color-warning-bg); color: var(--color-warning); }

/* ── Table ────────────────────────────────────────────────── */
.mk-table-wrap {
    background:    var(--color-bg-white);
    border-radius: var(--radius-lg);
    border:        1px solid var(--color-border);
    overflow:      hidden;
}
.mk-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); }
.mk-table thead { background: var(--color-bg); }
.mk-table th {
    padding:        10px 14px;
    text-align:     left;
    font-size:      var(--font-size-sm);
    font-weight:    700;
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom:  1px solid var(--color-border);
    white-space:    nowrap;
}
.mk-table td {
    padding:       11px 14px;
    border-bottom: 1px solid var(--color-border-light);
    color:         var(--color-text);
    vertical-align: middle;
}
.mk-table tr:last-child td { border-bottom: none; }
.mk-table tr:hover td      { background: var(--color-bg); }
.mk-table-empty {
    padding:    40px;
    text-align: center;
    color:      var(--color-text-muted);
    font-size:  var(--font-size-base);
}

/* ── Autocomplete dropdown ────────────────────────────────── */
.mk-ac-wrap { position: relative; }
.mk-ac-dropdown {
    display:       none;
    position:      absolute;
    top:           100%;
    left:          0;
    right:         0;
    z-index:       200;
    background:    var(--color-bg-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-dropdown);
    max-height:    220px;
    overflow-y:    auto;
}
.mk-ac-dropdown.open { display: block; }
.mk-ac-item {
    padding:       9px 12px;
    font-size:     var(--font-size-base);
    cursor:        pointer;
    color:         var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
}
.mk-ac-item:last-child { border-bottom: none; }
.mk-ac-item:hover      { background: var(--module-light, var(--mk-primary-light)); }
.mk-ac-sub { font-size: var(--font-size-sm); color: var(--color-text-muted); display: block; margin-top: 2px; }
.mk-ac-add {
    padding:     9px 12px;
    font-size:   var(--font-size-base);
    cursor:      pointer;
    color:       var(--module-primary, var(--mk-primary));
    font-weight: 600;
    border-top:  1px solid var(--color-divider);
    background:  var(--module-light, var(--mk-primary-light));
}
.mk-ac-add:hover { filter: brightness(0.97); }

/* ── Modal ────────────────────────────────────────────────── */
.mk-modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.4);
    z-index:    1000;
    display:    none;
    align-items: center;
    justify-content: center;
}
.mk-modal-overlay.open { display: flex; }
.mk-modal {
    background:    var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding:       24px;
    width:         560px;
    max-width:     95vw;
    max-height:    90vh;
    overflow-y:    auto;
    box-shadow:    var(--shadow-modal);
}
.mk-modal h3 { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); margin: 0 0 16px; }
.mk-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ── Timeline (3-step progress) ───────────────────────────── */
.mk-timeline { display: flex; align-items: center; gap: 0; margin-bottom: 20px; }
.mk-tl-step  { display: flex; align-items: center; gap: 8px; flex: 1; }
.mk-tl-dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-base); font-weight: 700; flex-shrink: 0;
    border: 2px solid var(--color-border);
    background: var(--color-bg-white); color: var(--color-text-muted);
}
.mk-tl-dot.done   { background: var(--color-success); border-color: var(--color-success); color: white; }
.mk-tl-dot.active { background: var(--module-primary, var(--mk-primary)); border-color: var(--module-primary, var(--mk-primary)); color: white; }
.mk-tl-label      { font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; }
.mk-tl-label.done  { color: var(--color-success); }
.mk-tl-label.active { color: var(--module-primary, var(--mk-primary)); font-weight: 700; }
.mk-tl-line { flex: 1; height: 2px; background: var(--color-border); margin: 0 4px; }
.mk-tl-line.done { background: var(--color-success); }

/* ── Toolbar (list page header) ───────────────────────────── */
.mk-toolbar {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-bottom: 14px;
    flex-wrap:   wrap;
}
.mk-toolbar h1 { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); margin: 0; flex: 1; min-width: 140px; }
.mk-toolbar-input {
    padding:       7px 12px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size:     var(--font-size-base);
    font-family:   var(--font-family);
    background:    var(--color-bg-white);
    color:         var(--color-text);
}
.mk-toolbar-input:focus { outline: none; border-color: var(--module-primary, var(--mk-primary)); }

/* ── Notification / Alert boxes ───────────────────────────── */
.mk-alert { padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--font-size-base); }
.mk-alert-info    { background: var(--color-info-bg);    border: 1px solid var(--color-info-border);    color: var(--color-info);    }
.mk-alert-success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success); }
.mk-alert-warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); color: var(--color-warning); }
.mk-alert-danger  { background: var(--color-danger-bg);  border: 1px solid var(--color-danger-border);  color: var(--color-danger);  }
.mk-flex-between {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.mk-flex-between .mk-flex-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Locked / disabled section (e.g. Findings before draft is saved) ── */
.mk-locked-msg {
    padding:    18px 20px;
    text-align: center;
    font-size:  13px;
    color:      var(--color-text-muted);
}
.mk-locked {
    opacity:        0.5;
    pointer-events: none;
}

/* ── Page header (detail pages) ───────────────────────────── */
.mk-page-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.mk-page-header-left { flex: 1; min-width: 200px; }
.mk-page-header h1 { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); margin: 0 0 4px; }
.mk-page-header .sub { font-size: var(--font-size-base); color: var(--color-text-muted); }
.mk-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.mk-back-btn {
    color:          var(--color-text-secondary);
    text-decoration: none;
    font-size:      var(--font-size-base);
    display:        flex;
    align-items:    center;
    gap:            4px;
    padding:        6px 10px;
    border-radius:  var(--radius-md);
    transition:     background var(--transition);
}
.mk-back-btn:hover { background: var(--color-bg); text-decoration: none; }

/* ── Form actions bar ─────────────────────────────────────── */
.mk-form-actions {
    padding:     20px 24px;
    border-top:  1px solid var(--color-border-light);
    display:     flex;
    align-items: center;
    gap:         12px;
    background:  var(--color-bg);
}

/* ── Results bar ──────────────────────────────────────────── */
.mk-results-bar { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 10px; }
.mk-results-bar strong { color: var(--color-text); }

/* ── Module scope classes ─────────────────────────────────── */
/* Add class="mk-module-psc" (or rs/kpi/nm etc.) to <body> or wrapper div.
   All --module-* variables then resolve to that module's colours automatically. */

.mk-module-psc {
    --module-primary: var(--psc-primary);
    --module-dark:    var(--psc-dark);
    --module-light:   var(--psc-light);
    --module-border:  var(--psc-border);
    --module-focus:   var(--psc-focus);
}
.mk-module-kpi {
    --module-primary: var(--kpi-primary);
    --module-dark:    var(--kpi-dark);
    --module-light:   var(--kpi-light);
    --module-border:  var(--kpi-border);
    --module-focus:   var(--kpi-focus);
}
.mk-module-nm {
    --module-primary: var(--nm-primary);
    --module-dark:    var(--nm-dark);
    --module-light:   var(--nm-light);
    --module-border:  var(--nm-border);
    --module-focus:   var(--nm-focus);
}
.mk-module-nav {
    --module-primary: var(--nav-primary);
    --module-dark:    var(--nav-dark);
    --module-light:   var(--nav-light);
    --module-border:  var(--nav-border);
    --module-focus:   var(--nav-focus);
}
/* The 9 real audit/inspection modules sharing the Audits green
   (Session 81 continued) — Nav above already gets this via its own
   --nav-* alias; these 8 previously had NO matching selector at all
   (their real <body> classes never matched ".mk-module-audit", the
   name the original --audit-* comment implied — a genuine pre-existing
   bug, not something dark mode caused: their shared buttons/badges
   were silently falling back to PSC's color in light mode too). */
.mk-module-cargo, .mk-module-mooring, .mk-module-safety,
.mk-module-engine, .mk-module-ism, .mk-module-isps,
.mk-module-mlc, .mk-module-supdt {
    --module-primary: var(--audit-primary);
    --module-dark:    var(--audit-dark);
    --module-light:   var(--audit-light);
    --module-border:  var(--audit-border);
    --module-focus:   var(--audit-focus);
}
/* Safety Meeting joins KPI/Near Miss's shared rust. */
.mk-module-shec {
    --module-primary: var(--kpi-primary);
    --module-dark:    var(--kpi-dark);
    --module-light:   var(--kpi-light);
    --module-border:  var(--kpi-border);
    --module-focus:   var(--kpi-focus);
}
/* Same wiring gap as the 8 Audits modules had — real body classes with
   no matching selector, silently falling back to the generic default.
   Own identities, not part of the PSC/SIRE/Audits/rust scheme. */
.mk-module-intel {
    --module-primary: var(--color-purple);
    --module-dark:    var(--color-purple-dark);
    --module-light:   var(--color-purple-bg);
    --module-border:  var(--color-purple-border);
    --module-focus:   var(--color-purple-focus);
}
.mk-module-mrm {
    --module-primary: var(--mrm-primary);
    --module-dark:    var(--mrm-dark);
    --module-light:   var(--mrm-light);
    --module-border:  var(--mrm-border);
    --module-focus:   var(--mrm-focus);
}
.mk-module-rs {
    --module-primary: var(--rs-primary);
    --module-dark:    var(--rs-dark);
    --module-light:   var(--rs-light);
    --module-border:  var(--rs-border);
    --module-focus:   var(--rs-focus);
}
.mk-module-sire {
    --module-primary: var(--sire-primary);
    --module-dark:    var(--sire-dark);
    --module-light:   var(--sire-light);
    --module-border:  var(--sire-border);
    --module-focus:   var(--sire-focus);
}


/* ============================================================
   STICKY LAYOUT — List pages, Analytics, Detail pages
   All modules inherit these. Per-module colour comes from
   --module-primary etc. set on <body> or a wrapper.
   ============================================================ */

/* ── Layout constants (mirrors nav.js fixed heights) ── */
:root {
    --nav-topbar-h:  52px;
    --nav-tabbar-h:  44px;
    --nav-total-h:   96px;   /* topbar + tabbar — used for all sticky offsets */
    --nav-sidebar-w: 210px;
}

/* ── Sticky toolbar (title + search + vessel/year + New button) ── */
.mk-sticky-toolbar {
    position:   sticky;
    top:        var(--nav-total-h);
    z-index:    90;
    background: var(--color-bg);   /* matches page background */
    padding:    10px 0 6px;        /* breathing room top and bottom */
    margin:     -10px 0 0;         /* pull up to eliminate gap with content edge */
}

/* ── Table with sticky thead ── */
/* The table-wrap must NOT have overflow:hidden — use overflow:visible */
.mk-table-wrap-sticky {
    background:    var(--color-bg-white);
    border-radius: var(--radius-lg);
    border:        1px solid var(--color-border);
    overflow:      visible;   /* allows thead to sticky */
}

.mk-table-wrap-sticky table {
    width:           100%;
    border-collapse: separate;   /* separate required for sticky thead border */
    border-spacing:  0;
    font-size:       var(--font-size-base);
}

.mk-table-wrap-sticky thead th {
    position:       sticky;
    /* Locks right under the fixed nav bar. The +118px this used to carry
       assumed an .mk-sticky-toolbar (tab bar) sitting between nav and the
       table — none of the 14 pages using this class actually have one, so
       that gap left rows scrolling up into empty space before the header
       ever caught them (Session 98). */
    top:            var(--nav-total-h);
    z-index:        88;
    background:     var(--color-bg);
    padding:        10px 14px;
    text-align:     left;
    font-size:      var(--font-size-sm);
    font-weight:    700;
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space:    nowrap;
    border-bottom:  2px solid var(--color-border);
    /* Bottom border needs to be on the th itself since border-collapse:separate */
}

.mk-table-wrap-sticky td {
    padding:        11px 14px;
    border-bottom:  1px solid var(--color-border-light);
    color:          var(--color-text);
    vertical-align: middle;
}
.mk-table-wrap-sticky tbody tr:last-child td { border-bottom: none; }
.mk-table-wrap-sticky tbody tr:hover td      { background: var(--color-bg); }

/* ── Sortable column headers ── */
.mk-sort-th {
    cursor:      pointer;
    user-select: none;
    white-space: nowrap;
}
.mk-sort-th:hover { color: var(--module-primary, var(--mk-primary)); }

/* Sort arrow — shown via ::after pseudo-element */
.mk-sort-th::after {
    content:      ' ↕';
    font-size:    10px;
    color:        var(--color-text-muted);
    opacity:      0.5;
    margin-left:  2px;
}
.mk-sort-th.asc::after  { content: ' ▲'; color: var(--module-primary, var(--mk-primary)); opacity: 1; }
.mk-sort-th.desc::after { content: ' ▼'; color: var(--module-primary, var(--mk-primary)); opacity: 1; }


/* Comment thread inside side panel */
.mk-comment-thread {
    flex:       1;
    overflow-y: auto;
    padding:    12px 16px;
    min-height: 120px;
    max-height: 320px;
    display:    flex;
    flex-direction: column;
    gap:        10px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.mk-comment-thread::-webkit-scrollbar       { width: 3px; }
.mk-comment-thread::-webkit-scrollbar-track { background: transparent; }
.mk-comment-thread::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

.mk-comment-bubble { display: flex; flex-direction: column; gap: 2px; }
.mk-comment-meta   { font-size: 11px; color: var(--color-text-muted); }
.mk-comment-meta .sender { font-weight: 700; color: var(--color-text-secondary); }
.mk-comment-text {
    background:    var(--color-bg);
    border-radius: var(--radius-md);
    padding:       8px 12px;
    font-size:     var(--font-size-base);
    color:         var(--color-text);
    line-height:   1.5;
    display:       inline-block;
    max-width:     92%;
}
.mk-comment-text.mine {
    background: var(--module-light, var(--mk-primary-light));
    align-self:  flex-end;
}

.mk-comment-input-row {
    padding:     10px 14px;
    border-top:  1px solid var(--color-border-light);
    display:     flex;
    gap:         8px;
    flex-shrink: 0;
}
.mk-comment-input-row textarea {
    flex:        1;
    padding:     8px 10px;
    border:      1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size:   var(--font-size-base);
    font-family: var(--font-family);
    resize:      none;
    min-height:  60px;
}
.mk-comment-input-row textarea:focus {
    outline:      none;
    border-color: var(--module-primary, var(--mk-primary));
    box-shadow:   0 0 0 2px var(--module-focus, var(--mk-primary-focus));
}

/* ── No-tabbar pages: correct all sticky offsets ── */
/* Apply class no-tabbar to <body> on any page that nav.js renders without a tabbar.
   Overrides --nav-total-h from 96px (topbar+tabbar) to 52px (topbar only). */
.no-tabbar {
    --nav-total-h: 52px;
}

/* ── Analytics sticky tab+filter zone ── */
.mk-analytics-sticky-top {
    position:   sticky;
    top:        var(--nav-total-h);
    z-index:    90;
    background: var(--color-bg);
    padding:    10px 0 0;
    margin:     -10px 0 0;
}
/* The tab bar inside analytics sticky zone */
.mk-analytics-sticky-top .tab-bar,
.mk-analytics-sticky-top .mk-tab-bar {
    margin-bottom: 0;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1px solid var(--color-border);
    border-bottom: none;
}
/* Filter bar directly below tabs, also sticky */
.mk-analytics-filter {
    position:   sticky;
    top:        calc(var(--nav-total-h) + 54px);  /* below tab bar */
    z-index:    89;
    background: var(--color-bg-white);
    border:     1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding:    12px 18px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}


/* ========== PULSE MODULE ========== */

.pulse-header {
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-divider);
  padding: 20px 24px 16px;
  position: sticky;
  top: var(--nav-total-h);
  z-index: 50;
}

.pulse-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pulse-icon { font-size: 32px; line-height: 1; }

.pulse-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.pulse-subtitle { font-size: 12px; color: var(--text-muted); margin: 0; }

/* Module chips sit above everything else (moved up per Gaurav's redesign
   ask, Session 78) — filters-first, then the search box. Filters (chips/
   vessel/date presets/date pickers) are always visible now, not gated
   behind a first search the way they used to be — a filter you can't see
   until after you've already searched blind isn't a filter, it's a
   surprise. */
.pulse-search-wrap { display: flex; gap: 8px; margin-bottom: 0; margin-top: 12px; }

.pulse-search-input-wrap { position: relative; flex: 1; }
.pulse-search-input {
  width: 100%;
  padding: 10px 40px 10px 16px;
  font-size: 15px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.pulse-search-input:focus { border-color: var(--mk-primary); }
.pulse-search-clear-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pulse-search-clear-icon:hover { background: var(--color-divider); color: var(--color-text); }

.pulse-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
/* .mk-input/.mk-select default to width:100% for standalone form fields —
   inside this flex filter row that makes each one claim the full row,
   forcing everything onto its own line. Size them to content instead. */
.pulse-filters .mk-input,
.pulse-filters .mk-select {
  width: auto;
  flex: 0 0 auto;
}
.pulse-filters select.mk-input,
.pulse-filters input[type="text"].mk-input {
  min-width: 160px;
}

.pulse-date-presets { display: flex; gap: 4px; }

.pulse-module-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Uniform active/inactive look, no per-module hue — the individual
   badge colors (.badge-psc etc. below) still identify a module once
   it's inside a result row; the toggle chips up here are just an
   on/off control, not a second place to relearn 14 colors. */
.pulse-chip {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--color-border);
  transition: all 0.15s;
  user-select: none;
  background: var(--color-bg);
  color: var(--color-text-secondary);
}
.pulse-chip.active {
  background: var(--mk-primary);
  color: #fff;
  border-color: var(--mk-primary);
}
.pulse-chip.inactive { opacity: 0.6; }
.pulse-chip:hover { border-color: var(--mk-primary); }

/* Stats bar — clickable vessel/module breakdown chips above the results
   table (Gaurav: "how do we show this data so visually the user can draw
   patterns"). Click one to filter the table to just that vessel/module;
   click again to clear. Purely a client-side re-filter of the already-
   fetched result set, no extra request. */
.pulse-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 24px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.pulse-stats-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pulse-stats-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  margin-right: 2px;
}
.pulse-stat-chip {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-secondary);
  user-select: none;
  transition: all 0.15s;
}
.pulse-stat-chip:hover { border-color: var(--mk-primary); }
.pulse-stat-chip.active {
  background: var(--mk-primary);
  color: #fff;
  border-color: var(--mk-primary);
}

/* Module badges */
.pulse-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-psc     { background: #fee2e2; color: #991b1b; }
.badge-nav     { background: #dbeafe; color: #1e40af; }
.badge-vdr     { background: #ede9fe; color: #5b21b6; }
.badge-safety  { background: #ffedd5; color: #9a3412; }
.badge-cargo   { background: #cffafe; color: #155e75; }
.badge-mooring { background: #d1fae5; color: #065f46; }
.badge-nm      { background: #f1f5f9; color: #475569; }
.badge-rs      { background: #fef3c7; color: #92400e; }
.badge-sire    { background: #e0e7ff; color: #3730a3; }
.badge-engine  { background: #fef9c3; color: #854d0e; }
.badge-ism     { background: #e0f2fe; color: #075985; }
.badge-isps    { background: #fce7f3; color: #9d174d; }
.badge-mlc     { background: #ecfccb; color: #3f6212; }
.badge-supdt   { background: #e7e5e4; color: #44403c; }
.badge-kpi     { background: #dcfce7; color: #15803d; }

/* Dark-mode overrides for the module badges above — same hue family per
   module, but full-saturation pastel-on-white reads as a glaring light
   patch against the dark navy page, so swap to a muted tinted background
   with a brightened foreground (same pattern as --color-danger-bg etc.). */
:root[data-theme="dark"] .badge-psc     { background: rgba(241,104,92,0.18); color: #f1685c; }
:root[data-theme="dark"] .badge-nav     { background: rgba(91,155,247,0.18); color: #5b9bf7; }
:root[data-theme="dark"] .badge-vdr     { background: rgba(183,148,246,0.18); color: #b794f6; }
:root[data-theme="dark"] .badge-safety  { background: rgba(255,154,92,0.18);  color: #ff9a5c; }
:root[data-theme="dark"] .badge-cargo   { background: rgba(77,208,225,0.18);  color: #4dd0e1; }
:root[data-theme="dark"] .badge-mooring { background: rgba(76,175,110,0.18);  color: #4caf6e; }
:root[data-theme="dark"] .badge-nm      { background: rgba(148,163,184,0.18); color: #94a3b8; }
:root[data-theme="dark"] .badge-rs      { background: rgba(226,163,61,0.18);  color: #e2a33d; }
:root[data-theme="dark"] .badge-sire    { background: rgba(139,147,240,0.18); color: #8b93f0; }
:root[data-theme="dark"] .badge-engine  { background: rgba(212,178,60,0.18);  color: #d4b23c; }
:root[data-theme="dark"] .badge-ism     { background: rgba(79,195,247,0.18);  color: #4fc3f7; }
:root[data-theme="dark"] .badge-isps    { background: rgba(244,114,182,0.18); color: #f472b6; }
:root[data-theme="dark"] .badge-mlc     { background: rgba(163,217,119,0.18); color: #a3d977; }
:root[data-theme="dark"] .badge-supdt   { background: rgba(168,162,158,0.18); color: #a8a29e; }
:root[data-theme="dark"] .badge-kpi     { background: rgba(102,187,106,0.18); color: #66bb6a; }

/* Bar fill colours */
.fill-psc { background: #ef4444; }
.fill-nav { background: #3b82f6; }
.fill-nm  { background: #94a3b8; }
.fill-rs  { background: #f59e0b; }

/* Results bar */
.pulse-results-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-white);
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Results table — replaced the old free-form card list (Session 78) with
   a plain sortable mk-table so vessel/date/severity/status can each be
   sorted, same convention as every other module's list page. */
#resultsTable tbody tr { cursor: pointer; }
.pulse-result-excerpt {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 520px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pulse-result-excerpt mark {
  background: #fef08a;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.pulse-status-open   { font-size: 11px; color: #dc2626; font-weight: 600; white-space: nowrap; }
.pulse-status-closed { font-size: 11px; color: #16a34a; font-weight: 600; white-space: nowrap; }
.pulse-severity      { font-size: 11px; color: var(--color-text-muted); }
.pulse-fleet-repeat  { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 8px; white-space: nowrap; color: var(--status-crit); background: var(--status-crit-bg); }

/* Detail slide-in panel */
.pulse-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 200;
}
.pulse-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 95vw;
  height: 100vh;
  background: var(--color-bg-white);
  z-index: 201;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pulse-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-light);
}
.pulse-detail-content { padding: 20px; overflow-y: auto; flex: 1; }

.pulse-detail-field  { margin-bottom: 16px; }
.pulse-detail-label  {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.pulse-detail-value  { font-size: 13px; color: var(--text-primary); line-height: 1.6; }

/* Crew Performance tab */
.pulse-crew-avg-strip { display: flex; gap: 16px; padding: 14px 0; margin-bottom: 4px; }
.pulse-crew-avg-stat  { background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: 8px; padding: 10px 18px; }
.pulse-crew-avg-stat .stat-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pulse-crew-avg-stat .stat-value { font-size: 20px; font-weight: 700; color: var(--color-text); }

.pulse-crew-row { cursor: pointer; }
.pulse-crew-expand-icon { display: inline-block; transition: transform 0.15s ease; color: var(--color-text-muted); }
.pulse-crew-row.expanded .pulse-crew-expand-icon { transform: rotate(90deg); }

.pulse-crew-vs-avg { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.pulse-crew-vs-avg.better { color: var(--color-success); background: var(--color-success-bg); }
.pulse-crew-vs-avg.worse  { color: var(--color-danger);  background: var(--color-danger-bg); }
.pulse-crew-vs-avg.even   { color: var(--color-text-muted); background: var(--color-bg); }

.pulse-crew-detail-row td { background: var(--color-bg); padding: 0; }
.pulse-crew-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 14px 20px; }
.pulse-crew-module-card { background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: 6px; padding: 10px 12px; }
.pulse-crew-module-card .module-name  { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; }
.pulse-crew-module-card .module-stats { display: flex; gap: 12px; font-size: 12px; color: var(--color-text-muted); }
.pulse-crew-module-card .module-stats b { color: var(--color-text); }
.pulse-crew-module-card.no-data { opacity: 0.4; }

/* Top 5 Searches (Search tab) */
.pulse-top-searches-header { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); padding: 18px 24px 10px; }
.pulse-top-searches { display: flex; flex-direction: column; gap: 8px; padding: 0 24px 24px; max-width: 480px; }
.pulse-top-search-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: 8px; cursor: pointer; }
.pulse-top-search-row:hover { border-color: var(--color-border); background: var(--color-bg); }
.pulse-top-search-rank { font-size: 12px; font-weight: 700; color: var(--color-text-muted); width: 16px; flex-shrink: 0; }
.pulse-top-search-term { font-size: 13px; font-weight: 600; color: var(--color-text); flex: 1; }
.pulse-top-search-uses { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; }

/* ============================================================
   AI Health tab — redesigned. Colored scope/period pill chips,
   an Overall Fleet Analysis hero banner, 5 stacked category rows
   each holding a horizontal strip of module tiles (or, for Near
   Miss/KPI which have no children, the row itself is the tile),
   staleness badges everywhere, and a click-to-expand modal for
   full text instead of the old inline accordion.
   ============================================================ */

.pulse-ai-controls { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 18px 24px 6px; }
.pulse-ai-control-group { display: flex; align-items: center; gap: 10px; }
.pulse-ai-control-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--color-text-muted); }

/* Bigger, colored pill chips — scope and period both use this pattern */
.pulse-pill { appearance: none; border: none; cursor: pointer; padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; font-family: var(--font-family); transition: all .15s ease; }
.pulse-pill.p-fleet.active  { background: var(--mk-primary); color: #fff; box-shadow: 0 2px 8px rgba(26,115,232,.3); }
.pulse-pill.p-pic.active    { background: #ede9fe; color: #5b21b6; }
.pulse-pill.p-ship.active   { background: #dcfce7; color: #15803d; }
.pulse-pill.p-type.active   { background: #fef3c7; color: #92400e; }
.pulse-pill.p-period.active { background: var(--mk-primary); color: #fff; }
.pulse-pill.inactive        { background: var(--color-bg); color: var(--color-text-secondary); }
.pulse-pill.inactive:hover  { background: var(--color-divider); }

/* Staleness badge — semantic color, not the accent hue */
.pulse-staleness { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pulse-staleness::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pulse-staleness.fresh { background: var(--color-success-bg); color: var(--color-success); }
.pulse-staleness.fresh::before { background: var(--color-success); }
.pulse-staleness.aging { background: var(--color-warning-bg); color: var(--color-warning); }
.pulse-staleness.aging::before { background: var(--color-warning); }
.pulse-staleness.stale { background: var(--color-danger-bg); color: var(--color-danger); }
.pulse-staleness.stale::before { background: var(--color-danger); }
.pulse-staleness.never { background: var(--color-border-light); color: var(--color-text-muted); }
.pulse-staleness.never::before { background: var(--color-text-muted); }
.pulse-period-tag { font-size: 10.5px; color: var(--color-text-muted); font-weight: 600; }

/* Overall Fleet Analysis — hero banner */
.pulse-ai-overall { margin: 16px 24px 0; background: linear-gradient(135deg, var(--mk-chrome) 0%, #123a72 100%); border-radius: 14px; padding: 20px 22px; color: #fff; cursor: pointer; position: relative; overflow: hidden; }
/* Dark mode: --mk-chrome itself goes light (#7fb3ff, tuned for readable
   link/icon text on a dark page), which turns this gradient into a
   light-blue-to-navy card that clashes with the rest of the dark UI
   instead of belonging to it. Pin it to the sidebar's own navy gradient
   instead so this "hero" card reads as part of the app's chrome, the
   same way the sidebar/topbar already do, rather than picking up
   --mk-chrome's dark value which was never meant for a large fill. */
:root[data-theme="dark"] .pulse-ai-overall { background: linear-gradient(135deg, #1b2a4a 0%, #0d1526 100%); }
.pulse-ai-overall::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.08), transparent 60%); pointer-events: none; }
.pulse-ai-overall-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; position: relative; }
.pulse-ai-overall-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #a9c2f0; margin-bottom: 4px; }
.pulse-ai-overall-title { font-size: 18px; font-weight: 700; text-wrap: balance; }
.pulse-ai-overall-excerpt { font-size: 12.5px; line-height: 1.65; color: #d9e4f7; margin-top: 9px; max-width: 660px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pulse-ai-overall-cta { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; }
.pulse-ai-overall-cta:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.pulse-ai-overall-cta:disabled { opacity: .45; cursor: not-allowed; }
.pulse-ai-overall-meta { display: flex; align-items: center; gap: 10px; margin-top: 13px; position: relative; flex-wrap: wrap; }
.pulse-ai-overall .pulse-staleness { background: rgba(255,255,255,.16); color: #fff; }
.pulse-ai-overall .pulse-staleness::before { background: #7cd992; }
.pulse-ai-overall .pulse-staleness.never::before { background: rgba(255,255,255,.5); }
.pulse-ai-overall .pulse-period-tag { color: #b6c8ea; }

/* 5 stacked category rows */
.pulse-ai-rows { display: flex; flex-direction: column; gap: 14px; padding: 0 24px 24px; }
.pulse-cat-row { background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: 12px; overflow: hidden; }
.pulse-ai-cat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; }
.pulse-ai-cat-head.has-children { border-bottom: 1px solid var(--color-divider); }
.pulse-cat-titles { flex: 1; min-width: 0; }
.pulse-cat-title { font-size: 14.5px; font-weight: 700; color: var(--color-text); }
.pulse-ai-cat-sub { font-size: 11.5px; color: var(--color-text-muted); margin-top: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pulse-cat-refresh { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 7px; cursor: pointer; flex-shrink: 0; font-family: var(--font-family); }
.pulse-cat-refresh:hover:not(:disabled) { background: var(--color-divider); }
.pulse-cat-refresh:disabled { opacity: .4; cursor: not-allowed; }

.pulse-tile-strip { display: flex; gap: 10px; padding: 12px 18px 16px; overflow-x: auto; }
.pulse-tile { flex: 1 1 150px; min-width: 150px; background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: 9px; padding: 11px 12px; cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.pulse-tile:hover { border-color: var(--mk-primary); transform: translateY(-1px); }
.pulse-tile-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; margin-bottom: 7px; }
.pulse-tile-excerpt { font-size: 11.5px; line-height: 1.5; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 47px; }
.pulse-tile-excerpt.empty { color: var(--color-text-muted); font-style: italic; }
.pulse-tile-foot { margin-top: 8px; }

/* Leaf-only rows (Near Miss, KPI) — the row body itself is the clickable tile */
.pulse-leaf-body { padding: 13px 18px 16px; cursor: pointer; }
.pulse-leaf-body:hover .pulse-leaf-excerpt { color: var(--color-text); }
.pulse-leaf-excerpt { font-size: 12.5px; line-height: 1.6; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Full-text modal */
.pulse-ai-modal-overlay { position: fixed; inset: 0; background: rgba(20,22,24,.5); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 24px; }
.pulse-ai-modal { background: var(--color-bg-white); border-radius: 14px; width: 100%; max-width: 640px; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.pulse-ai-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 14px; border-bottom: 1px solid var(--color-divider); }
.pulse-ai-modal-title { font-size: 16px; font-weight: 700; color: var(--color-text); }
.pulse-ai-modal-tags { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pulse-ai-modal-close { background: none; border: none; font-size: 20px; color: var(--color-text-muted); cursor: pointer; line-height: 1; padding: 2px; }
.pulse-ai-modal-close:hover { color: var(--color-text); }
.pulse-ai-modal-body { padding: 18px 22px; overflow-y: auto; font-size: 13px; line-height: 1.75; color: var(--color-text-secondary); white-space: pre-wrap; }
.pulse-ai-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--color-divider); }
.pulse-ai-modal-refresh { background: var(--mk-primary); color: #fff; border: none; font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-family: var(--font-family); }
.pulse-ai-modal-refresh:hover:not(:disabled) { background: var(--mk-chrome); }
.pulse-ai-modal-refresh:disabled { opacity: .4; cursor: not-allowed; }

/* Feedback (👍/👎 + optional comment) — sits between the analysis text
   and the refresh footer, only affects this cached result, not model
   behaviour (see routes/pulse.js buildSteeringNote for the honest
   version of what feedback actually does). */
.pulse-ai-feedback { padding: 4px 22px 14px; border-top: 1px solid var(--color-divider); }
.pulse-ai-feedback-row { display: flex; align-items: center; gap: 10px; padding-top: 12px; }
.pulse-ai-feedback-label { font-size: 11.5px; color: var(--color-text-muted); }
.pulse-ai-feedback-btn { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 7px; font-size: 15px; padding: 4px 10px; cursor: pointer; line-height: 1; }
.pulse-ai-feedback-btn:hover:not(:disabled) { background: var(--color-divider); }
.pulse-ai-feedback-btn:disabled { opacity: .5; cursor: default; }
.pulse-ai-feedback-btn.selected { border-color: var(--mk-primary); background: var(--mk-primary-light); }
.pulse-ai-feedback-note { font-size: 11.5px; color: var(--color-text-muted); }
.pulse-ai-feedback-comment { margin-top: 10px; }
.pulse-ai-feedback-comment textarea { width: 100%; min-height: 56px; resize: vertical; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; font-family: var(--font-family); font-size: 12.5px; color: var(--color-text); }
.pulse-ai-feedback-comment-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* AI Slide Panel (left side) */
.pulse-ai-slide-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 500px;
    max-width: 95vw;
    height: 100vh;
    background: var(--color-bg-white);
    z-index: 201;
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pulse-ai-slide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: #e0e9ff;
    font-weight: 600;
    font-size: 14px;
    color: #1e40af;
}

.pulse-ai-slide-meta {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    background:var(--mk-primary-light);
}

.pulse-ai-slide-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.pulse-ai-slide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-light);
}

.pulse-ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
    gap: 16px;
}

.pulse-ai-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e0e9ff;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: pulse-spin 0.8s linear infinite;
}

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

.pulse-ai-slide-content strong {
    color: var(--text-primary);
}

.pulse-ai-slide-content br + strong {
    display: inline-block;
    margin-top: 8px;
}


/* ========== HOME PAGE ========== */

.section-title {
    font-size: 14px; font-weight: 700; color:var(--color-text); margin: 0 0 12px;
}

/* ── Fleet Position Map ───────────────────────── */
#fleet-map {
  height: 420px;
  width: 100%;
  border-radius: 8px;
  z-index: 0;
}

.mk-vessel-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--color-bg-white);
    border: 2px solid #1b2a4a;
    box-shadow: 0 0 6px rgba(201,168,76,0.5);
    position: relative;
}
.mk-vessel-dot-wrap {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

.mk-vessel-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(30,30,30,0.9) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', sans-serif !important;
    white-space: nowrap !important;
    padding: 0 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* ── Sidebar dark theme ────────────────────────────────────── */
#vm-sidebar {
  background: var(--mk-chrome);
  border-right: 1px solid rgba(255,255,255,0.08);
}
#vm-sidebar .nav-section-label { color: rgba(255,255,255,0.35); }
#vm-sidebar .nav-divider        { border-color: rgba(255,255,255,0.08); }
#vm-sidebar .sidebar-bottom     { color: rgba(255,255,255,0.3); border-top-color: rgba(255,255,255,0.08); }

/* ── AI Enhance button (ui-utils.js aiButtonsHtml/wireAiFieldButtons) ── */
.mk-ai-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.15s;
  line-height: 1.6;
}
.mk-ai-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mk-ai-btn-enhance-solid {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border: none;
}
.mk-ai-btn-enhance-solid:hover:not(:disabled) { opacity: 0.85; }
.mk-ai-suggested {
  box-shadow: 0 0 0 2px rgba(99,102,241,0.35) !important;
  border-color: #6366f1 !important;
}
/* One shared style for every "AI Suggest" button (fills in new fields —
   category, recommended action, root cause, preventive measures —
   distinct from Enhance, which polishes text already in a field). Was
   two unrelated inline-styled looks: a solid #7c3aed "+ AI Suggest" used
   at office-review time, and a gradient "✦ Suggest" at finding-entry
   time that happened to reuse Enhance's own gradient, making the two
   actions visually indistinguishable. Standardized on the solid color
   (it already covered more call sites) — callers still set their own
   font-size/padding for the tighter finding-entry layout via a local
   style attribute layered on top of this class. */
.mk-ai-suggest-btn {
  background: #7c3aed;
  color: white;
  border: none;
}
.mk-ai-suggest-btn:hover:not(:disabled) { opacity: 0.85; }
.mk-ai-suggest-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Shared Filter Bar (ui-utils.js) ─────────────────────── */
.mk-filter-bar {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mk-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.mk-chip {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-border-light);
  cursor: pointer;
  user-select: none;
  border: none;
  transition: background 0.15s, color 0.15s;
}

.mk-chip:hover { background: var(--color-divider); }

.mk-chip.mk-chip-active {
  background: var(--mk-primary);
  color: #fff;
}

.mk-chip.mk-chip-custom {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.mk-cal-btn {
  margin-left: 4px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background:var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}

.mk-cal-btn.mk-cal-active {
  border-color: var(--mk-primary);
  background: var(--mk-primary-light);
}

.mk-filter-daterange {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0 2px;
}

.mk-filter-daterange label {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.mk-filter-daterange input[type=date] {
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color:var(--color-text);
}

.mk-date-clear-btn {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background:var(--color-bg);
  font-size: 12px;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.mk-filter-row2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mk-filter-row2 select {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color:var(--color-text);
  background: var(--color-bg-white);
}

.mk-filter-row2 select:focus {
  outline: none;
  border-color: var(--mk-primary);
}

.mk-filter-search {
  flex: 1;
  min-width: 180px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color:var(--color-text);
}

.mk-filter-search:focus {
  outline: none;
  border-color: var(--mk-primary);
}

.mk-results-bar {
  font-size: 12px;
  color: #9aa0a6;
  margin-bottom: 8px;
}

/* ── Sortable table headers ───────────────────────────────── */
.mk-sortable thead th {
  cursor: pointer;
  user-select: none;
}

.mk-sortable thead th::after {
  content: '↕';
  display: inline-block;
  width: 10px;
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.4;
}

.mk-sortable thead th.mk-sort-asc::after  { content: '▲'; opacity: 1; }
.mk-sortable thead th.mk-sort-desc::after { content: '▼'; opacity: 1; }


/* ── RightShip Module ─────────────────────────────────────── */
.risq-badge    { display:inline-block; background: var(--color-warning-bg); color: var(--color-warning); border-radius:8px; padding:1px 7px; font-size:11px; font-weight:700; }
.findings-pill { display:inline-block; min-width:26px; text-align:center; background: var(--color-danger-bg); color: var(--color-danger); border-radius:10px; padding:2px 8px; font-size:12px; font-weight:700; }
.findings-pill.zero { background: var(--color-success-bg); color: var(--color-success); }
.port-sub { font-size:11px; color:#9aa0a6; margin-top:2px; }

/* ── RightShip breadcrumb back link ──────────────────────── */
.rs-back-link { color: #666; text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 6px; }
.rs-back-link:hover { color: #1a73e8; }

/* ── RightShip inspections table row hover ───────────────── */
#rs-table tbody tr:hover td { background:var(--mk-primary-light); }

/* ── Dashboard shared ────────────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-header h1 { font-size: 20px; font-weight: 700; color:var(--color-text); margin: 0; }
.page-header p  { font-size: 13px; color: #9aa0a6; margin: 4px 0 0; }

.btn-new-insp { display: inline-block; background: #1a73e8; color: white; padding: 8px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn-new-insp:hover { background: #0d47a1; text-decoration: none; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.rs-kpi-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 24px; }

.kpi-box { background: var(--color-bg-white); border-radius: 8px; border: 1px solid var(--color-border); padding: 16px 20px; }
.kpi-box-amber { border-color: var(--color-warning); background: var(--color-warning-bg); }
.kpi-box-label { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; }
.rs-kpi-strip .kpi-box .kpi-box-label { margin-bottom: 8px; }

.kpi-metrics { display: flex; flex-wrap: wrap; }
.kpi-metric { flex: 1; text-align: center; min-width: 70px; }
.kpi-metric + .kpi-metric { border-left: 1px solid var(--color-border-light); }

.kpi-val { font-size: 26px; font-weight: 700; color:var(--color-text); line-height: 1; margin-bottom: 2px; }
.rs-kpi-strip .kpi-val { font-size: 28px; }
.kpi-val.blue  { color: #1a73e8; }
.kpi-val.green { color: var(--color-success); }
.kpi-val.amber { color: var(--color-warning); }
.kpi-val.red   { color: var(--color-danger); }
.kpi-metric-label { font-size: 10px; color: #9aa0a6; text-transform: uppercase; letter-spacing: 0.4px; }

.kpi-ly { font-size: 11px; color: #bdc1c6; margin-top: 10px; border-top: 1px solid var(--color-border-light); padding-top: 8px; display: flex; justify-content: space-around; }
.kpi-ly span { text-align: center; }
.kpi-ly-year { font-size: 10px; color: #dadce0; display: block; margin-top: 1px; }

.section-label { font-size: 11px; font-weight: 700; color: #9aa0a6; text-transform: uppercase; letter-spacing: 0.8px; margin: 0 0 12px; }
.rsd-section-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: #bdc1c6; font-size: 11px; }

/* ── Dashboard inspection list card ──────────────────────── */
.insp-list-card { background: var(--color-bg-white); border-radius: 8px; border: 1px solid var(--color-border); overflow: hidden; margin-bottom: 20px; }
.insp-list-card table { width: 100%; border-collapse: separate; border-spacing: 0; }
.insp-list-card thead th { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.6px; padding: 14px 16px; text-align: left; background:var(--color-bg); border-bottom:2px solid var(--color-divider); white-space: nowrap; }
.insp-list-card tbody td { padding: 12px 16px; border-bottom: 1px solid var(--color-border-light); font-size: 13px; vertical-align: middle; }
.insp-list-card tbody tr:last-child td { border-bottom: none; }
.insp-list-card tbody tr { cursor: pointer; transition: background 0.1s; }
.insp-list-card tbody tr:hover td { background:var(--color-bg); }
/* Row colour coding by inspection state */
.insp-list-card tbody tr.row-detention td { background: #fff0f0; }
.insp-list-card tbody tr.row-detention:hover td { background: #ffe0e0; }
.insp-list-card tbody tr.row-draft td { background: #fffbf0; }
.insp-list-card tbody tr.row-draft:hover td { background: #fff3d0; }
.insp-list-card tbody tr.row-closed td { color: var(--color-text-muted); }
.insp-list-card tbody tr.row-closed:hover td { background:var(--color-bg); }
/* Inspection-status badges — scoped to .insp-list-card because
   .status-closed alone (without the unrelated .status-chip base class
   used elsewhere for finding-level statuses) would otherwise collide
   with that system's identically-named .status-closed rule. */
.insp-list-card .status-draft     { background: #fff3cd; color: var(--color-warning); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.insp-list-card .status-awaiting  { background: var(--mk-primary-light); color: var(--mk-primary); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.insp-list-card .status-closed    { background: var(--color-success-bg); color: var(--color-success); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.insp-list-card .detained-tag     { background: var(--color-danger-bg); color: var(--color-danger); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
/* Near Miss's own workflow states — different from PSC's draft/awaiting/
   closed, no collision since these exact names aren't used elsewhere. */
.insp-list-card .status-submitted, .insp-list-card .status-investigation_requested { background: #fff3cd; color: var(--color-warning); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.insp-list-card .status-reviewed, .insp-list-card .status-investigation_submitted  { background: var(--mk-primary-light); color: var(--mk-primary); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
/* Near Miss risk-level badges (separate concept from PSC's numeric
   risk_rating — a tiered low/medium/high/extreme classification). */
.insp-list-card .risk-badge, .insp-list-card .status-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; white-space: nowrap; display: inline-block; }
.insp-list-card .risk-low      { background: var(--color-success-bg); color: var(--color-success); }
.insp-list-card .risk-medium   { background: #fff3cd; color: var(--color-warning); }
.insp-list-card .risk-high,
.insp-list-card .risk-extreme  { background: var(--color-danger-bg); color: var(--color-danger); }
.insp-list-card .risk-pending  { background: var(--color-border-light); color: var(--color-text-muted); }
.obs-badge { display: inline-block; min-width: 24px; text-align: center; padding: 2px 6px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.obs-zero  { background: var(--color-success-bg); color: var(--color-success); }
.obs-some  { background: var(--color-danger-bg); color: var(--color-danger); }
.empty-msg { text-align: center; color: #9aa0a6; font-size: 13px; padding: 40px; }
.rsd-loading, .loading { color: #9aa0a6; font-size: 13px; text-align: center; padding: 60px; }
.rsd-date-cell { white-space: nowrap; font-weight: 600; }
.rsd-open-count { color: var(--color-warning); font-weight: 700; }
.rsd-zero { color: #9aa0a6; }

/* ── Ship audit dashboard (window.renderShipAuditDashboard) ─── */
.ship-dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.ship-dash-tile { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 8px; padding: 16px; }
.ship-dash-tile-label { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; }
.ship-dash-tile-row { display: flex; gap: 24px; }
.ship-dash-tile-num { font-size: 24px; font-weight: 700; color: var(--color-text); }
.ship-dash-tile-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ── Fleet grid & vessel cards ───────────────────────────── */
.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 28px; }
.vessel-card { background: var(--color-bg-white); border-radius: 8px; border: 1px solid var(--color-border); padding: 16px 20px; cursor: pointer; transition: box-shadow 0.15s; text-decoration: none; display: block; color: inherit; }
.vessel-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-color: #1a73e8; text-decoration: none; }
.vc-name { font-size: 14px; font-weight: 700; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-deliv-year { font-weight: 400; font-size: 11px; color: #9aa0a6; }
.vc-imo  { font-size: 11px; color: #9aa0a6; margin-bottom: 12px; }
.vc-stats { display: flex; gap: 0; border-top: 1px solid var(--color-border-light); padding-top: 10px; margin-bottom: 10px; }
.vc-stat { flex: 1; text-align: center; }
.vc-stat + .vc-stat { border-left: 1px solid var(--color-border-light); }
.vs-val { font-size: 17px; font-weight: 700; color:var(--color-text); line-height: 1; margin-bottom: 2px; }
.vs-val.green { color: var(--color-success); }
.vs-val.amber { color: var(--color-warning); }
.vs-val.red   { color: var(--color-danger); }
.vs-label { font-size: 10px; color: #9aa0a6; text-transform: uppercase; letter-spacing: 0.4px; }
.vc-last-insp  { font-size: 11px; padding-top: 8px; border-top: 1px solid var(--color-border-light); display: flex; align-items: center; gap: 6px; }
.vc-last-label { color: #9aa0a6; }
.last-green { color: var(--color-success); font-weight: 600; }
.last-amber { color: var(--color-warning); font-weight: 600; }
.last-red   { color: var(--color-danger); font-weight: 700; }
.last-none  { color: #9aa0a6; }
.vc-info-line { font-size: 11px; color: #9aa0a6; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border-light); }

/* ── PIC blocks ──────────────────────────────────────────── */
.pic-block { background: var(--color-bg-white); border-radius: 8px; border: 1px solid var(--color-border); margin-bottom: 20px; overflow: hidden; }
.pic-block-hdr { background:var(--color-bg); border-bottom:1px solid var(--color-divider); padding: 12px 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sum-kpi { text-align: center; min-width: 80px; }
.sum-kpi-val { font-size: 22px; font-weight: 700; color: var(--mk-primary); }
.sum-kpi-val.blue  { color: var(--mk-primary); }
.sum-kpi-val.green { color: var(--color-success); }
.sum-kpi-val.amber { color: var(--color-warning); }
.sum-kpi-val.red   { color: var(--color-danger); }
.sum-kpi-lbl { font-size: 11px; color: #9aa0a6; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.4px; }

.pic-stats {
    display: flex;
    gap: 16px;
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
    align-items: center;
}
.pic-stats strong {
    color: var(--color-text);
    font-size: 13px;
    margin-left: 3px;
}
/* Opt-in modifier for a longer stats list that should drop to its own
   full-width row when the header wraps, instead of staying pinned
   right (e.g. Near Miss's 3-stat PIC header). */
.pic-stats--wrap { margin-left: 0; width: 100%; margin-top: 4px; }
.pic-block-hdr-unassigned { background: #fff8e1; border-color: #f9ab00; }
.pic-avatar { width: 28px; height: 28px; border-radius: 50%; background: #1a73e8; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pic-avatar-unassigned { background: #9aa0a6; }
.pic-name { font-size: 14px; font-weight: 700; color:var(--color-text); }
.pic-name-unassigned { color: var(--color-warning); }
.pic-vessel-count { font-size: 12px; color: #9aa0a6; margin-left: auto; }
.pic-block-body { padding: 16px 20px; }

/* ── PSC admin detention summary box ─────────────────────── */
.detention-box { background: var(--color-bg-white); border-radius: 8px; border: 1px solid var(--color-border); padding: 16px 20px; }
.detention-box-label { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; }

/* ── Near Miss admin recent high-risk feed ───────────────────── */
.highrisk-box { background: var(--color-bg-white); border-radius: 8px; border: 1px solid var(--color-border); padding: 16px 20px; }
.highrisk-box-label { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; }
.hr-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--color-border-light); text-decoration: none; color: inherit; }
.hr-item:last-child { border-bottom: none; }
.hr-vessel { font-size: 12px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-meta { font-size: 11px; color: var(--color-text-muted); }
.hr-band-extreme { color: var(--color-danger); }
.hr-band-high    { color: var(--color-warning); }

/* ── Dashboard trend chart card ──────────────────────────── */
.chart-card { background: var(--color-bg-white); border-radius: 8px; border: 1px solid var(--color-border); padding: 16px 20px; margin-bottom: 24px; }
.chart-card h3 { font-size: 14px; font-weight: 700; color:var(--color-text); margin: 0 0 4px; }
.chart-card .chart-sub { font-size: 11px; color: #9aa0a6; margin: 0 0 14px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; font-size: 12px; color: var(--color-text-secondary); }
.chart-legend-item { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ── Audit-type strip dashboard (Nav / Mooring / Safety Audit) ──
   Three-way ships/company/external breakdown — each strip shows
   last-audit-date (RAG coloured against per-company thresholds),
   this-year vs 3-year stats, and (company/external) fleet coverage. */
.strips-row       { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.admin-strips-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.admin-two-col    { display: grid; grid-template-columns: 65fr 35fr; gap: 20px; align-items: start; }
.admin-right      { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }

.strip { border-radius: 10px; margin-bottom: 18px; overflow: hidden; border:1px solid var(--color-divider); display: flex; flex-direction: column; height: 100%; }
.strips-row .strip, .admin-strips-row .strip { margin-bottom: 0; }
.strip-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.strip-ships    .strip-header { background: #e8f0fe; color: #1a73e8; border-bottom: 2px solid #1a73e8; }
.strip-company  .strip-header { background: var(--color-warning-bg); color: var(--color-warning); border-bottom: 2px solid #f9ab00; }
.strip-external .strip-header { background: #f3e8fd; color: #7c3aed; border-bottom: 2px solid #7c3aed; }
.strip-body { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-bg-white); }
.strip-body.single { grid-template-columns: 1fr; }
.strip-panel { padding: 16px 20px; }
.strip-panel + .strip-panel { border-left: 1px solid var(--color-border-light); }
.strip-panel-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #9aa0a6; margin-bottom: 10px; }

.metric-row { display: flex; gap: 0; }
.metric { flex: 1; padding: 6px 10px 6px 0; min-width: 0; }
.metric + .metric { border-left: 1px solid var(--color-border-light); padding-left: 10px; }
.metric-val { font-size: 22px; font-weight: 700; color:var(--color-text); line-height: 1.1; }
.metric-val.blue   { color: #1a73e8; }
.metric-val.amber  { color: var(--color-warning); }
.metric-val.red    { color: var(--color-danger); }
.metric-val.green  { color: var(--color-success); }
.metric-val.purple { color: #7c3aed; }
.metric-lbl { font-size: 10px; color: #9aa0a6; margin-top: 2px; }

.coverage-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; background: var(--color-border-light); color: var(--color-text-secondary); }
.coverage-pill.good  { background: var(--color-success-bg); color: var(--color-success); }
.coverage-pill.amber { background: var(--color-warning-bg); color: var(--color-warning); }
.coverage-pill.red   { background: var(--color-danger-bg); color: var(--color-danger); }

.date-badge { font-size: 12px; font-weight: 600; padding: 2px 0; }
.date-badge.green { color: var(--color-success); }
.date-badge.amber { color: var(--color-warning); }
.date-badge.red   { color: var(--color-danger); }
.date-badge.none  { color: #9aa0a6; }

/* ── Compliance alerts ────────────────────────────────────── */
.alerts-card { background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.alerts-card-hdr { padding: 12px 16px; background: var(--color-danger-bg); border-bottom: 1px solid #f5c6c6; font-size: 13px; font-weight: 700; color: #c62828; }
.alerts-all-good { padding: 14px 16px; font-size: 13px; color: var(--color-success); font-weight: 600; }
.alert-row-compact { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 16px; border-bottom: 1px solid var(--color-border-light); gap: 8px; }
.alert-row-compact:last-child { border-bottom: none; }
.alert-vessel-col { flex: 1; min-width: 0; }
.alert-status-col { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.alert-vessel { font-size: 13px; font-weight: 600; color:var(--color-text); }
.alert-type   { font-size: 11px; color: #9aa0a6; }
.alert-meta   { font-size: 11px; color: #9aa0a6; }
.alert-badge  { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.alert-badge.amber { background: var(--color-warning-bg); color: var(--color-warning); }
.alert-badge.red   { background: var(--color-danger-bg); color: var(--color-danger); }

/* ── Multi-date vessel card body (per audit-type last date) ── */
.vc-meta { font-size: 11px; color: #9aa0a6; margin-bottom: 10px; }
.vc-audits { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-bottom: 8px; }
.vc-audit  { font-size: 10px; }
.vc-audit-lbl { color: #9aa0a6; margin-bottom: 1px; }
.vc-findings-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.open-findings-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--color-danger-bg); color: var(--color-danger); }
.open-findings-badge.zero { background: var(--color-success-bg); color: var(--color-success); }
.pic-count { font-size: 12px; color: #9aa0a6; }

/* ── Responsive: rs-kpi-strip ────────────────────────────── */
@media (max-width: 1000px) { .rs-kpi-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .rs-kpi-strip { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Analytics shared styles (used by rs-analytics and future
   analytics pages that cannot use inline <style> blocks)
   ============================================================ */

/* ── Tab bar ─────────────────────────────────────────────────── */
.mk-tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--color-divider); background: var(--color-bg-white); }
.mk-tab-btn { padding: 10px 22px; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); border: none; background: none; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color var(--transition); white-space: nowrap; font-family: var(--font-family); }
.mk-tab-btn:hover { color: var(--color-text); }
.mk-tab-btn.active { color: var(--module-primary, var(--mk-primary)); border-bottom-color: var(--module-primary, var(--mk-primary)); }

/* ── Filter bar ──────────────────────────────────────────────── */
.an-filter-bar { background: var(--color-bg-white); border-bottom: 1px solid var(--color-divider); padding: 10px 18px; display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.an-fg { display: flex; flex-direction: column; gap: 4px; }
.an-fg label { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.an-fg select, .an-fg input[type=date] { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 13px; background: var(--color-bg-white); font-family: var(--font-family); color: var(--color-text); }
.an-fg select:focus, .an-fg input[type=date]:focus { outline: none; border-color: var(--module-primary, var(--mk-primary)); }
.an-preset-row { display: flex; gap: 4px; align-items: flex-end; }
.an-preset-btn { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 12px; cursor: pointer; background: var(--color-bg-white); font-family: var(--font-family); color: var(--color-text-secondary); }
.an-preset-btn:hover { border-color: var(--module-primary, var(--mk-primary)); color: var(--module-primary, var(--mk-primary)); }
.an-preset-btn.active { background: var(--module-primary, var(--mk-primary)); color: #fff; border-color: var(--module-primary, var(--mk-primary)); }

/* ── Card ────────────────────────────────────────────────────── */
.an-card { background: var(--color-bg-white); border-radius: var(--radius-lg); border: 1px solid var(--color-divider); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 16px; }
.an-card-hdr { padding: 12px 18px; border-bottom: 1px solid var(--color-border-light); display: flex; align-items: center; justify-content: space-between; }
.an-card-hdr h3 { font-size: 12px; font-weight: 700; color: var(--color-text-muted); margin: 0; text-transform: uppercase; letter-spacing: 0.5px; }
.an-card-body { padding: 16px 18px; }
.an-card-body-flush { padding: 0; }
.an-two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.an-chart-wrap { position: relative; height: 240px; }

/* ── Matrix table ────────────────────────────────────────────── */
.an-matrix-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-matrix-table th { background: var(--color-bg); padding: 9px 14px; text-align: left; font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--color-border-light); white-space: nowrap; }
.an-matrix-table td { padding: 10px 14px; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.an-matrix-table tr:last-child td { border-bottom: none; }

/* ── Deep dive KPIs ──────────────────────────────────────────── */
.an-dive-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.an-dive-card { background: var(--color-bg-white); border-radius: var(--radius-lg); border: 1px solid var(--color-divider); padding: 12px 16px; box-shadow: var(--shadow-card); }
.an-dive-num { font-size: 22px; font-weight: 700; color: var(--module-primary, var(--mk-primary)); }
.an-dive-lbl { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ── Utilities ───────────────────────────────────────────────── */
.an-empty { text-align: center; padding: 40px 20px; color: var(--color-text-muted); font-size: 13px; }
.an-loading { text-align: center; padding: 30px 20px; color: var(--color-text-muted); font-size: 13px; }

/* ── Analytics page content wrapper ─────────────────────────── */
.an-content { padding: 20px 24px; max-width: 1400px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .an-two-col   { grid-template-columns: 1fr; }
    .an-dive-strip { grid-template-columns: repeat(2, 1fr); }
}

/* PSC Compare tab chip selector */
.cmp-type-btn { transition: all 0.15s; }
.cmp-type-btn:hover { opacity: 0.85; }

/* Vessel map popup */
.mk-vessel-popup-wrap .leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: none;
    padding: 0;
    overflow: hidden;
}
.mk-vessel-popup-wrap .leaflet-popup-content {
    margin: 0;
    min-width: 220px;
}
.mk-vessel-popup-wrap .leaflet-popup-tip-container {
    margin-top: -1px;
}
.mk-vessel-popup {
    font-family: 'Segoe UI', sans-serif;
}
.mk-vessel-popup-title {
    font-size: 14px; font-weight: 700; color: white;
    padding: 10px 14px 2px;
    background: linear-gradient(135deg, #1b2a4a 0%, #162238 100%);
    border-bottom: 2px solid #c9a84c;
}
.mk-vessel-popup-sub {
    font-size: 10px; color: rgba(255,255,255,0.6);
    padding: 0 14px 10px;
    background: linear-gradient(135deg, #1b2a4a 0%, #162238 100%);
}
.mk-vessel-popup-rows {
    padding: 8px 14px;
}
.mk-vessel-popup-row {
    display: flex; justify-content: space-between;
    padding: 5px 0; border-bottom: 1px solid var(--color-border-light);
    font-size: 12px;
}
.mk-vessel-popup-row:last-child { border-bottom: none; }
.mk-vessel-popup-label {
    color: #9aa0a6; font-size: 11px; margin-right: 10px; flex-shrink: 0;
}
.mk-vessel-popup-value {
    color:var(--color-text); font-weight: 500; text-align: right;
}

/* Vessel strip below map */
.vessel-strip-wrap {
    display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 20px;
}
.vstrip-pic-label {
    width: 100%; font-size: 11px; font-weight: 700;
    color: #9aa0a6; text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 4px; margin-top: 8px;
}
.vstrip-pic-label:first-child { margin-top: 0; }
.vstrip-pic-row {
    display: flex; flex-wrap: wrap; gap: 10px; width: 100%;
}
.vessel-chip {
    padding: 10px 14px; border-radius: 8px;
    border: 1px solid var(--color-border); background: var(--color-bg-white);
    cursor: pointer; transition: all 0.15s; min-width: 160px;
}
.vessel-chip:hover {
    border-color: #c9a84c; background: #fffdf5;
    box-shadow: 0 2px 8px rgba(201,168,76,0.15);
}
.vchip-name {
    font-size: 13px; font-weight: 600; color:var(--color-text); margin-bottom: 4px;
}
.vchip-login { font-size: 11px; }
.vchip-login--recent { color: var(--color-success); }
.vchip-login--stale  { color: #f9ab00; }
.vchip-login--never  { color: #9aa0a6; }

.vchip-position { font-size: 11px; margin-top: 2px; }
.vchip-position--fresh { color: var(--color-success); }
.vchip-position--aging { color: #f9ab00; }
.vchip-position--stale { color: var(--color-danger); }
.vchip-update-btn { margin-top: 8px; width: 100%; }

/* ── Home To-Do (PIC expanded list) ─────────────────────────── */
.home-todo-item {
    display: block; padding: 12px 20px; border-bottom: 1px solid #f0f2f5;
    text-decoration: none; color: inherit; transition: background 0.15s;
}
.home-todo-item:last-child { border-bottom: none; }
.home-todo-item:hover { background:var(--color-bg); }
.home-todo-item-main {
    display: flex; align-items: center; gap: 8px; margin-bottom: 3px;
}
.home-todo-item-module {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 2px 8px; border-radius: 8px; background:var(--color-divider); color: var(--color-text-secondary);
}
.home-todo-item-vessel { font-size: 13px; font-weight: 600; color:var(--color-text); }
.home-todo-item-reason { font-size: 12px; color: var(--color-text-secondary); }

/* ── Supdt. Inspection — ship response / PIC review (Part 5) ─── */
.supdt-status-bar {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background:var(--color-bg);
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
}
.supdt-status-bar span { font-weight: 600; }
.supdt-status-open      { color: var(--color-warning); }
.supdt-status-responded { color: var(--color-info); }
.supdt-status-sentback  { color: var(--color-danger); }
.supdt-status-closed    { color: var(--color-success); }

.supdt-rejection-callout {
    background: #fff8e1;
    border-left: 4px solid #f59e0b;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 13px;
}

.supdt-evidence-btn {
    color: #6b7280;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.supdt-pic-edit-form {
    padding: 16px;
    background:var(--mk-primary-light);
    border-radius: 6px;
    margin-top: 8px;
}

/* ── Vessel Officers (sign-on/sign-off log) ─────────────────── */
.vo-vessel-card { margin-bottom: 20px; }
.vo-vessel-card .mk-card-header { display: flex; align-items: center; gap: 10px; }
.vo-vessel-imo { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 400; }
.vo-signoff-btn {
    background: none; border: 1px solid var(--color-border); color: var(--color-text-secondary);
    padding: 4px 12px; border-radius: var(--radius-sm); font-size: var(--font-size-sm);
    cursor: pointer; white-space: nowrap;
}
.vo-signoff-btn:hover { background: var(--color-bg); }
.vo-signoff-row { display: none; }
.vo-signoff-row.open { display: table-row; }
.vo-signoff-row td { background: var(--color-bg); padding: 10px 14px; }
.vo-signoff-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vo-sign-on-form {
    display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border-light);
}
.vo-sign-on-form .mk-field { flex: 1; min-width: 160px; }
.vo-sign-on-form .mk-ac-wrap { position: relative; }

/* ── KPI Builder (admin setup) ──────────────────────────────── */
.kpib-section-title {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.kpib-section-title h3 { font-size: var(--font-size-md); font-weight: 700; color: var(--color-text); }
.kpib-categories { display: flex; flex-wrap: wrap; gap: 10px; }
.kpib-cat-chip {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    cursor: pointer; font-size: var(--font-size-base); font-weight: 600;
    color: var(--color-text-secondary); background: var(--color-bg-white);
    transition: all var(--transition);
}
.kpib-cat-chip:hover { border-color: var(--kpi-primary); }
.kpib-cat-chip.active {
    background: var(--kpi-light); border-color: var(--kpi-primary); color: var(--kpi-dark);
}
.kpib-cat-chip .mk-badge { font-size: 10px; }
.kpib-empty { text-align: center; padding: 32px; color: var(--color-text-muted); font-size: var(--font-size-base); }
.kpib-field-code { font-family: monospace; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.kpib-field-child { padding-left: 20px; color: var(--color-text-secondary); }
.kpib-field-child::before { content: '↳ '; color: var(--color-text-muted); }
.kpib-formula { font-family: monospace; font-size: var(--font-size-sm); background: var(--color-bg); padding: 2px 8px; border-radius: var(--radius-sm); }
.kpib-formula-missing { font-size: var(--font-size-sm); color: var(--color-text-muted); font-style: italic; }
.kpib-picker-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.kpib-picker-item {
    padding: 10px 14px; border-bottom: 1px solid var(--color-border-light); cursor: pointer;
    display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.kpib-picker-item:last-child { border-bottom: none; }
.kpib-picker-item:hover { background: var(--kpi-light); }
.kpib-picker-item.selected { background: var(--kpi-light); border-left: 3px solid var(--kpi-primary); }
.kpib-picker-code { font-family: monospace; font-size: var(--font-size-sm); color: var(--color-text-muted); min-width: 60px; }
.kpib-mode-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.kpib-mode-btn {
    flex: 1; padding: 8px; text-align: center; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-size-base); font-weight: 600;
    color: var(--color-text-secondary); background: var(--color-bg-white);
}
.kpib-mode-btn.active { background: var(--kpi-light); border-color: var(--kpi-primary); color: var(--kpi-dark); }

/* ── KPI Entry (ship-facing, rebuilt) ───────────────────────── */
.kpie-category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.kpie-cat-tab {
    padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--color-border);
    background: var(--color-bg-white); cursor: pointer; font-size: var(--font-size-base); font-weight: 600;
    color: var(--color-text-secondary); display: flex; align-items: center; gap: 8px;
}
.kpie-cat-tab:hover { border-color: var(--kpi-primary); }
.kpie-cat-tab.active { background: var(--kpi-primary); border-color: var(--kpi-primary); color: white; }
.kpie-cat-tab .kpie-tab-count {
    font-size: 10px; background: rgba(255,255,255,0.25); border-radius: var(--radius-pill); padding: 1px 7px;
}
.kpie-cat-tab:not(.active) .kpie-tab-count { background: var(--color-bg); color: var(--color-text-muted); }
.kpie-panel { display: none; }
.kpie-panel.active { display: block; }
.kpie-field-row {
    display: flex; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--color-border-light); gap: 14px;
}
.kpie-field-row:last-child { border-bottom: none; }
.kpie-field-row:hover { background: var(--kpi-light); }
.kpie-field-row.kpie-child { padding-left: 34px; background: var(--color-bg); }
.kpie-field-row.kpie-parent { font-weight: 600; }
.kpie-field-code { font-size: 10px; font-weight: 700; color: var(--color-text-muted); font-family: monospace; min-width: 40px; }
.kpie-field-label { flex: 1; font-size: var(--font-size-base); color: var(--color-text); line-height: 1.4; }
.kpie-field-input input, .kpie-field-input select {
    width: 130px; padding: 7px 10px; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); font-size: var(--font-size-base); font-weight: 600; text-align: right;
}
.kpie-field-input input:focus, .kpie-field-input select:focus { outline: none; border-color: var(--kpi-primary); }
.kpie-field-input input[readonly] { background: var(--color-bg); color: var(--color-text-muted); cursor: not-allowed; }
.kpie-field-input textarea {
    width: 100%; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font-size: var(--font-size-base); font-family: inherit; resize: vertical; min-height: 60px;
}
.kpie-auto-badge {
    font-size: 10px; background: var(--color-success-bg); color: var(--color-success);
    padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 700; margin-left: auto;
}
.kpie-action-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kpie-save-status { font-size: var(--font-size-base); color: var(--color-text-muted); margin-left: auto; }
.kpie-notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kpie-notes-grid textarea { min-height: 70px; resize: vertical; }
.kpie-history-item { padding: 12px 18px; border-bottom: 1px solid var(--color-border-light); font-size: var(--font-size-base); }
.kpie-history-item:last-child { border-bottom: none; }
.kpie-history-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 4px; }
.kpie-history-item.rejection { background: var(--color-danger-bg); }
.kpie-history-item.rejection .kpie-history-meta { color: var(--color-danger); font-weight: 700; }
.kpie-history-item.reply .kpie-history-meta { color: var(--kpi-dark); font-weight: 700; }
.kpie-reply-row { display: flex; gap: 8px; align-items: flex-end; padding: 14px 18px; border-top: 1px solid var(--color-border-light); }
.kpie-reply-row textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--font-size-base); font-family: inherit; resize: none; height: 56px; }
.kpie-reply-row textarea:focus { outline: none; border-color: var(--kpi-primary); }

/* ── KPI Dashboard (ship-facing) ─────────────────────────────── */
.kpid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 480px)); gap: 12px; margin-bottom: 20px; }
.kpid-card { background: var(--color-bg-white); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: 16px 20px; }
.kpid-card-title { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: 10px; }
.kpid-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 12px; margin-bottom: 8px; }
.kpid-stat-value { font-size: 20px; font-weight: 700; color: var(--color-text); line-height: 1; }
.kpid-stat-value.kpid-stat-lg { font-size: 28px; }
.kpid-stat-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }
.kpid-card-prior { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.kpid-filing-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }
.kpid-filing-title { font-size: var(--font-size-base); color: var(--color-text-secondary); }
.kpid-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.kpid-table-wrap { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 12px; }
.kpid-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); table-layout: fixed; }
.kpid-table th { text-align: center; padding: 10px 4px; font-weight: 600; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); }
.kpid-table th:first-child { text-align: left; padding-left: 16px; width: 64px; }
.kpid-table td { padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--color-border-light); }
.kpid-table tr:last-child td { border-bottom: none; }
.kpid-table td:first-child { text-align: left; padding-left: 16px; font-weight: 600; }
.kpid-cell {
    width: 30px; height: 30px; margin: 0 auto; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
    border: 1px solid transparent; cursor: pointer;
}
.kpid-cell.not_started { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text-muted); }
.kpid-cell.draft       { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.kpid-cell.submitted   { background: var(--color-info-bg); border-color: var(--color-info); color: var(--color-info); }
.kpid-cell.needs_response { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.kpid-cell.closed      { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.kpid-cell.future      { background: var(--color-bg); border-color: var(--color-border-light); color: var(--color-border); cursor: default; }
.kpid-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.kpid-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: -1px; }

/* ── KPI Dashboard — office (PIC / admin), PSC-dashboard-inspired ─── */
.kpid-concerns-box { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 20px; }
.kpid-concerns-title { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; }
.kpid-concerns-list { max-height: 220px; overflow-y: auto; }
.kpid-concerns-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border-light); text-decoration: none; color: inherit; }
.kpid-concerns-item:last-child { border-bottom: none; }
.kpid-concerns-item:hover { background: var(--color-bg); }
.kpid-concerns-icon { font-size: 15px; flex-shrink: 0; color: var(--color-danger); }
.kpid-concerns-vessel { font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); }
.kpid-concerns-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.kpid-concerns-empty { font-size: var(--font-size-base); color: var(--color-success); padding: 6px 0; }

.kpid-section-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 20px 0 10px; }

.kpid-pic-block { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; }
.kpid-pic-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.kpid-pic-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--kpi-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.kpid-pic-name { font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); }
.kpid-pic-count { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.kpid-pic-stats { display: flex; gap: 14px; margin-left: auto; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.kpid-pic-body { padding: 16px 20px; }

.kpid-vessel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.kpid-vessel-card { display: block; background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; text-decoration: none; color: inherit; }
.kpid-vessel-card:hover { border-color: var(--kpi-primary); }
.kpid-vessel-name { font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); }
.kpid-vessel-imo { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 10px; }
.kpid-vessel-stats { display: flex; border-top: 1px solid var(--color-border-light); padding-top: 10px; }
.kpid-vessel-stat { flex: 1; text-align: center; }
.kpid-vessel-stat + .kpid-vessel-stat { border-left: 1px solid var(--color-border-light); }
.kpid-vessel-stat-val { font-size: 16px; font-weight: 700; line-height: 1; margin-bottom: 2px; }
.kpid-vessel-stat-label { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.kpid-vessel-last { font-size: var(--font-size-sm); margin-top: 8px; color: var(--color-text-muted); }

/* ── KPI Records (per-vessel drill-down for PIC/admin approval) ──── */
.kpir-vessel-section { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; scroll-margin-top: 16px; }
.kpir-vessel-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.kpir-vessel-header h2 { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); }
.kpir-vessel-header .imo { font-size: var(--font-size-base); color: var(--color-text-muted); }

/* ── MRM Key Objectives page ──────────────────────────────────── */
.mrmobj-page { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
.mrmobj-pageheader { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.mrmobj-back { font-size: var(--font-size-sm); color: var(--mk-primary); text-decoration: none; font-weight: 600; }
.mrmobj-back:hover { text-decoration: underline; }
.mrmobj-pageheader h1 { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); margin: 6px 0 0; }
.mrmobj-mod-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); }
.mrmobj-target-line { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.mrmobj-current { font-weight: 700; }
.mrmobj-current.met { color: var(--color-success); }
.mrmobj-current.not-met { color: var(--color-danger); }
.mrmobj-current.unknown { color: var(--color-text-muted); font-weight: 400; }
.mrmobj-row-actions { display: flex; gap: 12px; white-space: nowrap; }
.mrmobj-row-actions a { font-size: 12px; color: var(--mk-primary); cursor: pointer; text-decoration: none; font-weight: 600; }
.mrmobj-row-actions a:hover { text-decoration: underline; }
.mrmobj-row-actions a.danger { color: var(--color-danger); }
.mrmobj-edit-row td { background: var(--color-bg); padding: 16px; }
.mrmobj-edit-form { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.mrmobj-edit-form label { font-size: 10.5px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; display: block; margin-bottom: 3px; }
.mrmobj-form-row { display: flex; gap: 10px; }
.mrmobj-form-row > div { flex: 1; }
.mrmobj-form-actions { display: flex; gap: 10px; margin-top: 4px; }
.mrmobj-log-section { margin-top: 36px; }
.mrmobj-log-section h2 { font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.mrmobj-action-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.mrmobj-action-badge.added { background: var(--color-success-bg); color: var(--color-success); }
.mrmobj-action-badge.retired { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.mrmobj-action-badge.deleted { background: var(--color-danger-bg); color: var(--color-danger); }

/* ── MRM Report Builder detail page (config / review / final) ──── */
.mrmrpt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.mrmrpt-toolbar-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); margin: 0; }
.mrmrpt-toolbar-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.mrmrpt-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mrmrpt-config-form { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px; max-width: 720px; }
.mrmrpt-config-form label { font-size: 10.5px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; display: block; margin-bottom: 6px; }
.mrmrpt-config-field { margin-bottom: 18px; }
.mrmrpt-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mrmrpt-module-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.mrmrpt-module-check input { margin: 0; }
.mrmrpt-form-row { display: flex; gap: 14px; }
.mrmrpt-form-row > div { flex: 1; }

.mrmrpt-section { background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow-card); page-break-inside: avoid; }
.mrmrpt-section.excluded { opacity: 0.5; }
.mrmrpt-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-light); }
.mrmrpt-section-header h2 { font-size: 18px; font-weight: 700; color: var(--color-text); margin: 0; }
.mrmrpt-include-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.mrmrpt-chart-row { display: flex; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.mrmrpt-chart-col { flex: 1; min-width: 260px; }
.mrmrpt-chart-col h4 { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); margin: 0 0 8px; }
.mrmrpt-bar-row { display: grid; grid-template-columns: 70px 1fr 34px; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12px; }
.mrmrpt-bar-label { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrmrpt-bar-track { background: var(--color-bg); border-radius: 3px; height: 14px; overflow: hidden; }
.mrmrpt-bar-fill { background: var(--mk-primary); height: 100%; border-radius: 3px; }
.mrmrpt-bar-fill.open { background: var(--color-danger); }
.mrmrpt-bar-value { text-align: right; color: var(--color-text-muted); font-weight: 600; }
.mrmrpt-objective-box { background: var(--color-info-bg); border: 1px solid var(--color-info-border, var(--color-border)); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--color-text); margin-bottom: 14px; }
.mrmrpt-objective-box strong { text-transform: uppercase; font-size: 10px; letter-spacing: 0.4px; display: block; margin-bottom: 3px; color: var(--color-info); }
.mrmrpt-ai-box { background: var(--mk-primary-light); border: 1px solid var(--mk-primary-border); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.mrmrpt-ai-box strong { text-transform: uppercase; font-size: 10px; letter-spacing: 0.4px; display: block; margin-bottom: 5px; color: var(--mk-primary-dark); }
.mrmrpt-ai-box textarea { width: 100%; border: none; background: transparent; font-family: var(--font-family); font-size: 13px; color: var(--color-text); resize: vertical; min-height: 60px; padding: 0; }
.mrmrpt-6point { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mrmrpt-field label { font-size: 10.5px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; display: block; margin-bottom: 4px; }
.mrmrpt-field textarea, .mrmrpt-field .mrmrpt-static { width: 100%; font-size: 13px; font-family: var(--font-family); color: var(--color-text); }
.mrmrpt-field .mrmrpt-static { white-space: pre-wrap; padding: 8px 0; min-height: 20px; }
.mrmrpt-field .mrmrpt-static:empty::before { content: '—'; color: var(--color-text-muted); }

/* ── Report style toggle (Dashboard vs. Board) ────────────────── */
.mrmrpt-style-toggle { display: flex; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; }
.mrmrpt-style-toggle button { padding: 7px 14px; font-size: 12px; font-weight: 600; background: var(--color-bg-white); color: var(--color-text-secondary); border: none; cursor: pointer; }
.mrmrpt-style-toggle button + button { border-left: 1px solid var(--color-border); }
.mrmrpt-style-toggle button.active { background: var(--mk-primary); color: #fff; }

/* ── Report "Board" style — Tufte-inspired serif/print look for
   presentations (findings + commentary + charts read as a document,
   not a dashboard). Opt-in via the toggle above, scoped entirely to
   [data-report-style="board"] so it can never leak into any other
   page. Chart *colors* for this style come from the "navy" entry in
   CHART_PALETTES (ui-utils.js) via activeChartPalette() — deliberately
   not the company's admin-chosen palette, since Board's whole identity
   is one consistent muted look, not a per-company brand color. ────── */
[data-report-style="board"] { font-family: Georgia, 'Times New Roman', serif; background: #fdfcf9; color: #2b2621; }
[data-report-style="board"] h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: #2b2621; }
[data-report-style="board"] .mrmrpt-section { background: transparent; border: none; border-bottom: 1px solid #ddd6c8; border-radius: 0; box-shadow: none; padding: 22px 2px; }
[data-report-style="board"] .mrmrpt-section:last-child { border-bottom: none; }
[data-report-style="board"] .mrmrpt-section-header { border-bottom: 1px solid #ddd6c8; }
[data-report-style="board"] .mrmrpt-section-header h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; color: #2b2621; }
[data-report-style="board"] .mrmrpt-chart-col h4 { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b6255; }
[data-report-style="board"] .mrmrpt-objective-box,
[data-report-style="board"] .mrmrpt-ai-box { background: transparent; border: none; border-left: 3px solid #a67c3d; border-radius: 0; padding: 4px 0 4px 14px; }
[data-report-style="board"] .mrmrpt-objective-box strong,
[data-report-style="board"] .mrmrpt-ai-box strong { font-family: var(--font-family); }
[data-report-style="board"] .mrmrpt-field label { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b6255; }
[data-report-style="board"] .an-card,
[data-report-style="board"] .mrm-attn-tile,
[data-report-style="board"] .aeff-card,
[data-report-style="board"] .mrm-ext-card { background: transparent; border: 1px solid #ddd6c8; box-shadow: none; border-radius: 2px; }

/* ── Fleet Analytics (MRM) — cross-module dashboard ──────────────
   Sections below reuse the shared .an-card/.an-card-hdr/.an-filter-bar
   component (this file's Analytics section, ~line 2100) instead of the
   page's old bespoke .card/.card-hdr block with a per-module rainbow
   top-border — that mismatch (every other analytics page uses .an-card;
   this page didn't) was the actual "out of place" issue, not the data.
   Category color still lives inside charts/heat cells, same as every
   other analytics page — just not smeared across card chrome too. */
.mrm-dash-section { margin-bottom: 22px; }

/* Attention strip */
.mrm-attn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .mrm-attn-grid { grid-template-columns: repeat(2,1fr); } }
.mrm-attn-tile { background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-card); text-decoration: none; display: block; color: inherit; cursor: pointer; transition: border-color .12s; }
.mrm-attn-tile:hover { border-color: var(--mk-primary-border); }
.mrm-attn-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); margin-bottom: 8px; }
.mrm-attn-value { font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mrm-attn-value.ok      { color: var(--color-success); }
.mrm-attn-value.warn    { color: var(--color-warning); }
.mrm-attn-value.bad     { color: var(--color-danger); }
.mrm-attn-value.neutral { color: var(--color-text); }
.mrm-attn-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 5px; }


/* External Inspections — PSC/SIRE/RISQ comparison */
.mrm-ext-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .mrm-ext-grid { grid-template-columns: 1fr; } }
.mrm-ext-card { background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-card); }
.mrm-ext-card h4 { font-size: 12.5px; font-weight: 700; color: var(--color-text); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.mrm-ext-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.mrm-ext-metric-val { font-size: 18px; font-weight: 700; color: var(--color-text); line-height: 1; font-variant-numeric: tabular-nums; }
.mrm-ext-metric-val.danger { color: var(--color-danger); }
.mrm-ext-metric-label { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 3px; }
.mrm-ext-trend { font-size: 11px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-light); color: var(--color-text-muted); }
.mrm-ext-trend .up   { color: var(--color-danger); font-weight: 600; }
.mrm-ext-trend .down { color: var(--color-success); font-weight: 600; }
.mrm-ext-chart-wrap { position: relative; height: 160px; margin-top: 10px; }
.mrm-ext-legend-note { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--color-text-muted); margin-top: 8px; }
.mrm-d-badge { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 3px; background: var(--color-danger-bg); color: var(--color-danger); font-size: 10px; font-weight: 800; }

/* Cost of Non-Conformity — psc_inspections.detention_hrs/delays_hrs */
.mrm-cost-grid { display: grid; grid-template-columns: 260px 1fr; gap: 12px; align-items: start; }
@media (max-width: 820px) { .mrm-cost-grid { grid-template-columns: 1fr; } }
.mrm-cost-stats { display: flex; flex-direction: column; gap: 12px; }
.mrm-cost-vessel-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--color-text-secondary); padding: 6px 0; border-top: 1px solid var(--color-border-light); }
.mrm-cost-vessel-row:first-of-type { border-top: none; }
.mrm-cost-vessel-name { color: var(--color-text); }
.mrm-cost-vessel-hrs { font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* TMSA Audit Coverage — one combined chart, not six near-duplicate cards */
.mrm-tmsa-chart-wrap { position: relative; height: 280px; }

/* Fleet Heat Grid — vessel x module */
.mrm-heat-scroll { overflow-x: auto; }
.mrm-heat-table { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.mrm-heat-table th, .mrm-heat-table td { padding: 7px 9px; text-align: center; white-space: nowrap; }
.mrm-heat-table thead th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border-light); }
.mrm-heat-table thead th.mrm-heat-vessel-col { text-align: left; }
.mrm-heat-table tbody td.mrm-heat-vessel-col { text-align: left; font-weight: 600; color: var(--color-text); background: var(--color-bg-white); }
.mrm-heat-table tbody tr td { border-bottom: 1px solid var(--color-border-light); }
.mrm-heat-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 5px; border-radius: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mrm-heat-cell.n0 { background: transparent; color: var(--color-text-muted); font-weight: 400; }
.mrm-heat-cell.n1 { background: #fff8e1; color: var(--color-warning); }
.mrm-heat-cell.n2 { background: #fff3cd; color: var(--color-warning); }
.mrm-heat-cell.n3 { background: var(--color-danger-bg); color: var(--color-danger); }
.mrm-heat-total-col { font-weight: 800; color: var(--color-text); border-left: 2px solid var(--color-border-light); }

/* Dark-mode overrides for the heat-grid's two amber tiers — both are
   pale-yellow hexes tuned for a white table (#fff8e1/#fff3cd), so on the
   dark navy table they read as glaring yellow/orange rectangles instead
   of a subtle heat step. n3 is untouched — it already uses the
   dark-aware --color-danger-bg token. Same idea as the Pulse badge
   overrides above: keep the hue family, swap to a muted rgba tint with
   n2 at roughly double n1's alpha so the two tiers stay visually
   distinct against dark. */
:root[data-theme="dark"] .mrm-heat-cell.n1 { background: rgba(226,163,61,0.16); }
:root[data-theme="dark"] .mrm-heat-cell.n2 { background: rgba(226,163,61,0.32); }

/* Where the issues concentrate — per-module top categories + repeat/overdue */
.mrm-sig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mrm-sig-card { background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 13px 15px; box-shadow: var(--shadow-card); }
.mrm-sig-mod { font-size: 12px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.mrm-sig-flags { display: flex; gap: 12px; font-size: 11px; color: var(--color-text-muted); margin-bottom: 10px; }
.mrm-sig-flags b { color: var(--color-text); }
.mrm-sig-flags .flag-bad b { color: var(--color-danger); }
.mrm-sig-flags a { color: var(--mk-primary); text-decoration: none; }
.mrm-sig-flags a:hover { text-decoration: underline; }
.mrm-sig-cat-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--color-text-secondary); padding: 4px 0; border-top: 1px solid var(--color-border-light); }
.mrm-sig-cat-row:first-of-type { border-top: none; }
.mrm-sig-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrm-sig-cat-count { font-weight: 700; color: var(--color-text); flex-shrink: 0; }
.mrm-sig-empty { font-size: 11.5px; color: var(--color-text-muted); }

/* Audit Effectiveness — self-audit trend vs. external/company trend */
.aeff-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aeff-legend-item { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--color-border); color: var(--color-text-secondary); background: var(--color-bg-white); }
.aeff-legend-item.improving { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.aeff-legend-item.catching-early { background: var(--mk-primary-light); border-color: var(--mk-primary-border); color: var(--mk-primary-dark); }
.aeff-legend-item.underreporting { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.aeff-legend-item.rising { background: #fff8e1; border-color: #ffe082; color: var(--color-warning); }

.aeff-card { background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-card); }
.aeff-card-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.aeff-card-hdr h4 { font-size: 13px; font-weight: 700; color: var(--color-text); margin: 0; }
.aeff-verdict-badge { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.aeff-verdict-badge.improving { background: var(--color-success-bg); color: var(--color-success); }
.aeff-verdict-badge.catching-early { background: var(--mk-primary-light); color: var(--mk-primary-dark); }
.aeff-verdict-badge.underreporting { background: var(--color-danger-bg); color: var(--color-danger); }
.aeff-verdict-badge.rising { background: #fff8e1; color: var(--color-warning); }
.aeff-verdict-badge.stable, .aeff-verdict-badge.insufficient-data { background: var(--color-bg); color: var(--color-text-muted); }
.aeff-verdict-text { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 12px; }
.aeff-chart-wrap { position: relative; height: 200px; }
.aeff-stat-row { display: flex; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-light); }
.aeff-stat { font-size: 11.5px; color: var(--color-text-muted); }
.aeff-stat b { display: block; font-size: 15px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.aeff-stat b.down { color: var(--color-success); }
.aeff-stat b.up { color: var(--color-danger); }
.aeff-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.aeff-no-external { font-size: 12px; color: var(--color-text-muted); background: var(--color-bg); border-radius: var(--radius-md); padding: 8px 12px; margin-top: 10px; }

/* Standard Objectives — one row per audit, type a target */
.pageheader-sub { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }
.std-obj-savebar { display: flex; align-items: center; gap: 10px; }
.std-obj-dirty-note { font-size: 12px; color: var(--color-warning); font-weight: 600; }
.std-obj-grp { margin-bottom: 20px; }
.std-obj-grp:last-child { margin-bottom: 0; }
.std-obj-grp-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.std-obj-grp-hd h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); margin: 0; }
.std-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.std-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); padding: 9px 14px; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.std-table td { padding: 10px 14px; border-bottom: 1px solid var(--color-border-light); font-size: 13px; color: var(--color-text); vertical-align: middle; }
.std-table tbody tr:last-child td { border-bottom: none; }
.std-table tbody tr:hover td { background: var(--color-bg); }
.std-row-scope { font-weight: 600; }
.std-row-scope .metric { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-muted); margin-top: 1px; }
.dir-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.dir-pill.more { background: var(--mk-primary-light); color: var(--mk-primary-dark); border-color: var(--mk-primary-border); }
.std-current-val { color: var(--color-text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }
.std-target-wrap { display: flex; align-items: center; gap: 6px; }
.std-target-input { width: 72px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; color: var(--color-text); background: var(--color-bg-white); text-align: right; font-variant-numeric: tabular-nums; }
.std-target-input:focus { outline: none; border-color: var(--mk-primary); box-shadow: 0 0 0 3px var(--mk-primary-light); }
.std-target-input.changed { border-color: var(--mk-primary); background: var(--mk-primary-light); }
.std-target-unit { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.std-empty-row td { color: var(--color-text-muted); font-style: italic; font-size: 12.5px; }

/* ── Print (shared — hides nav chrome, keeps page content) ─────── */
@media print {
    .no-print { display: none !important; }
    #vm-sidebar, #vm-topbar, #vm-tabbar { display: none !important; }
    #vm-page-content {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }
    .mk-card { box-shadow: none !important; border: 1px solid #ccc; }
    .mrmrpt-section { box-shadow: none !important; border: 1px solid #ccc; }
    @page { size: landscape; margin: 12mm; }
}

/* ── Safety Meeting (SHEC) — shec-meeting-detail.js ─────────────
   Scoped to this module's own class names (checked against the rest
   of the sheet first — none of these collide with an existing rule). */
.topic-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px;
    border-radius: var(--radius-pill); font-size: 12px; border: 1.5px solid var(--color-border);
    color: var(--color-text-secondary); background: var(--color-bg-white);
}
.topic-chip .num {
    width: 16px; height: 16px; border-radius: 50%; background: var(--color-border);
    color: var(--color-bg-white); font-size: 9px; font-weight: 700; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.topic-chip.active {
    border-color: var(--module-primary, var(--mk-primary));
    background: var(--module-light, var(--mk-primary-light));
    color: var(--module-dark, var(--mk-chrome));
    font-weight: 600;
}
.topic-chip.active .num { background: var(--module-primary, var(--mk-primary)); }

.agenda-panel { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); margin-top: 14px; overflow: hidden; }
.agenda-panel-head {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    background: var(--module-light, var(--mk-primary-light)); color: var(--module-dark, var(--mk-chrome));
    font-weight: 600; font-size: 13px;
}
.agenda-panel-head .num {
    width: 20px; height: 20px; border-radius: 50%; background: var(--module-primary, var(--mk-primary));
    color: white; font-size: 11px; font-weight: 700; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.agenda-panel-body { padding: 16px; }

.pull-box { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; }
.pull-box-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-text-muted); margin-bottom: 8px; }
.pull-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; border-top: 1px solid var(--color-border-light); }
.pull-item:first-child { border-top: none; }
.pull-item .desc { color: var(--color-text); }
.pull-item .meta { color: var(--color-text-muted); font-size: 11px; white-space: nowrap; }

.stat-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.stat-pill { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 6px 12px; font-size: 12px; color: var(--color-text-secondary); }
.stat-pill b { color: var(--color-text); font-size: 14px; }

.check-list-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-border-light); }
.check-list-item:first-child { border-top: none; }
.check-list-item .label { font-size: 13px; }

.status-chip { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.status-open      { background: var(--color-danger-bg);  color: var(--color-danger);  }
.status-responded { background: var(--color-warning-bg); color: var(--color-warning); }
.status-closed    { background: var(--color-success-bg); color: var(--color-success); }

.present-y { color: var(--color-success); font-weight: 700; }
.present-n { color: var(--color-text-muted); }

/* ── Presenter role landing page (Session 71) ──────────────── */
.presenter-header { padding: 32px 32px 8px; }
.presenter-header h1 { margin: 0; font-size: 22px; color: var(--color-text); }
.presenter-sub { margin: 4px 0 0; font-size: 13px; color: var(--color-text-muted); }
.presenter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 16px 32px 32px; }
.presenter-box {
    background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: var(--radius-md, 10px);
    padding: 20px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px;
    transition: border-color .12s ease, transform .12s ease;
}
.presenter-box:hover { border-color: var(--mk-primary); transform: translateY(-2px); }
.presenter-box-title { font-size: 15px; font-weight: 700; color: var(--color-text); }
.presenter-box-sub { font-size: 12px; color: var(--color-text-muted); }
.presenter-empty { padding: 40px 32px; color: var(--color-text-muted); font-size: 13px; }

/* ============================================================
   PUBLIC BRAND IDENTITY — landing.html, login.html,
   platform-overview.html. Deliberately a separate palette from the
   internal app tokens above (navy/cyan/gold vs. the app's blue/green/
   amber/red) — these are the public marketing/auth pages, not signed-
   in app UI. To reskin all 3 pages at once later, change the values
   here rather than touch the pages themselves.
   ============================================================ */
:root {
    --brand-navy:        #1B2A4A;
    --brand-navy-mid:    #162238;  /* nav.js's own topbar gradient end color, same brand navy family */
    --brand-navy-deep:   #141F36;
    --brand-navy-dark:   #111e38;
    --brand-cyan:        #2BB5C8;
    --brand-cyan-dark:   #1A8FA0;
    --brand-gold:        #c9a84c;
    --brand-white:       #ffffff;
    --brand-off-white:   #F4F7FB;
    --brand-text-muted:  #5A7090;
    --brand-text-faint:  #8AA0B8;
    --brand-border:      rgba(27,42,74,0.1);
    --brand-font:         'DM Sans', sans-serif;
    --brand-heading-font: 'Playfair Display', serif;
    --brand-mono-font:    'DM Mono', monospace;

    /* "Admiralty Chart" palette — landing.html, platform-overview.html and
       (as of its Session 81 redesign) login.html all alias onto this block
       locally. Deliberately additive to the tokens above rather than
       replacing them, since other app pages still read the original navy/
       off-white names for their own (non-chart) styling. --brand-cyan and
       --brand-gold above are reused as-is (same hex the chart design calls
       for), so only the genuinely new values are added here. Note: all 3
       chart pages override --brand-cyan/--brand-rust locally with brighter
       values (#44C9E4 / #F0964F) rather than changing them here — brand-cyan
       is also read by nothing else, but keeping the override page-local
       avoids ever having two different "true" values for the same token
       name in one file. */
    --brand-paper:        #0F1D36;
    --brand-surface:      #0A1526;
    --brand-ink:          #EAF1FA;
    --brand-muted:        #90A6C7;
    --brand-line:         rgba(234,241,250,0.15);
    --brand-line-soft:    rgba(234,241,250,0.12);
    --brand-line-strong:  rgba(234,241,250,0.25);
    --brand-rust:         #d9824f;
    --brand-cyan-hover:   #7fd6e2;
}


/* ============================================================
   Shared nav chrome (topbar / sidebar / module tab bar / change-
   password modal) — moved here from nav.js's NAV_CSS template-
   string injection (Session 92). It used to become a <style> tag
   only after nav.js fully downloaded and executed; as a real
   stylesheet the browser's preload scanner fetches and parses it
   in parallel with everything else instead, same fix shape as the
   Session 87 Google Fonts issue. Appended (not inserted earlier in
   the file) deliberately: nav.js injected this LAST at runtime, so
   on any equal-specificity collision with an earlier rule in this
   file it always won — appending here preserves that same order.
   ============================================================ */

    * { box-sizing: border-box; }

    /* "" TOPBAR "" */
    #vm-topbar {
        position: fixed; top: 0; left: 0; right: 0; height: 52px;
        background: linear-gradient(135deg, #1b2a4a 0%, #162238 100%); color: white;
        display: flex; align-items: center; padding: 0 20px; gap: 0;
        z-index: 300; border-bottom: 3px solid #c9a84c; box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3), 0 6px 24px rgba(201,168,76,0.15);
    }
    #vm-topbar .brand { font-size: 16px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; flex-shrink: 0; }
    #vm-topbar .topbar-divider {
        width: 1px; height: 22px; background: rgba(255,255,255,0.3);
        margin: 0 14px; flex-shrink: 0;
    }
    #vm-topbar .company-name {
        font-size: 12px; color: rgba(255,255,255,0.8);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
    }
    #vm-topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; flex-shrink: 0; }
    #vm-topbar .user-info {
        display: flex; align-items: center; gap: 8px;
        cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.2s;
    }
    #vm-topbar .user-info:hover { background: rgba(255,255,255,0.15); }
    #vm-topbar .user-badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
    #vm-topbar .logout-btn {
        background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
        color: white; padding: 5px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; transition: background 0.2s;
    }
    #vm-topbar .logout-btn:hover { background: rgba(255,255,255,0.25); }

    #vm-topbar .topbar-icon-btn {
        display: flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
        background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
        color: white; text-decoration: none; font-size: 13px; font-weight: 700;
        transition: background 0.2s;
    }
    #vm-topbar .topbar-icon-btn:hover { background: rgba(255,255,255,0.25); }
    #vm-topbar .topbar-lang-btn { font-size: 10px; letter-spacing: 0.3px; }

    /* "" LANGUAGE SWITCHER "" */
    .vm-lang-wrap { position: relative; flex-shrink: 0; }
    .vm-lang-dropdown {
        display: none; position: absolute; top: 36px; right: 0; min-width: 130px;
        background: var(--color-bg-white, #ffffff); border: 1px solid var(--color-border, #dadce0);
        border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 500;
        overflow: hidden; padding: 4px 0;
    }
    .vm-lang-dropdown.open { display: block; }
    .vm-lang-item {
        display: block; width: 100%; text-align: left; padding: 8px 14px;
        font-size: 13px; background: none; border: none; cursor: pointer;
        color: var(--color-text, #202124);
    }
    .vm-lang-item:hover { background: var(--color-bg, #f1f3f4); }
    .vm-lang-item.active { font-weight: 700; color: var(--mk-primary); }

    #vm-topbar .topbar-todo-btn {
        position: relative; display: flex; align-items: center; gap: 6px;
        padding: 5px 12px; border-radius: 4px; font-size: 13px; color: white;
        text-decoration: none; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
        transition: background 0.2s;
    }
    #vm-topbar .topbar-todo-btn:hover { background: rgba(255,255,255,0.25); }
    #vm-topbar .topbar-todo-badge {
        background: #d93025; color: white; font-size: 10px; font-weight: 700;
        min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
        display: flex; align-items: center; justify-content: center;
    }

    /* "" SHIP TOPBAR: vessel name + officer pill "" */
    .ship-vessel-block {
        display: flex; align-items: center; gap: 10px;
    }
    .ship-vessel-name {
        font-size: 13px; font-weight: 700; color: white; white-space: nowrap;
    }
    .ship-vessel-imo {
        font-size: 11px; color: rgba(255,255,255,0.6); white-space: nowrap;
    }
    .ship-position-pill {
        font-size: 10px; padding: 3px 9px; border-radius: 10px; cursor: pointer;
        white-space: nowrap; font-weight: 600; border: none;
    }
    .ship-position-pill--fresh { background: rgba(24,128,56,0.3); color: #8fe3ab; }
    .ship-position-pill--aging { background: rgba(249,171,0,0.3); color: #ffcc66; }
    .ship-position-pill--stale { background: rgba(217,48,37,0.3); color: #ff8a80; }
    /* "" SIDEBAR "" */
    #vm-sidebar {
        position: fixed; top: 52px; left: 0; bottom: 0; width: 210px;
        background: linear-gradient(180deg, #1b2a4a 0%, #111e38 100%); border-right: 1px solid rgba(255,255,255,0.08);
        overflow-y: auto; z-index: 200; box-shadow: 4px 0 20px rgba(0,0,0,0.3);
        display: flex; flex-direction: column;
    }

    .nav-section-label {
        padding: 14px 18px 4px;
        font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.3);
        text-transform: uppercase; letter-spacing: 1px;
    }

    .nav-group-toggle {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 18px 4px; cursor: pointer; user-select: none;
        font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.3);
        text-transform: uppercase; letter-spacing: 1px; transition: color 0.15s;
    }
    .nav-group-toggle:hover { color: rgba(255,255,255,0.55); }
    .nav-group-chevron { display: inline-block; font-size: 9px; transition: transform 0.15s; }
    .nav-audits-group.expanded .nav-group-chevron { transform: rotate(90deg); }
    .nav-group-items { display: none; }
    .nav-audits-group.expanded .nav-group-items { display: block; }

    .nav-item {
        display: flex; align-items: center; gap: 10px; padding: 9px 18px;
        font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.7); cursor: pointer;
        border-left: 3px solid transparent; transition: all 0.15s; text-decoration: none;
    }
    .nav-item:hover:not(.nav-item-soon) { background: rgba(255,255,255,0.08); color: #ffffff; }
    .nav-item.active { color: #ffffff; border-left-color: #c9a84c; background: rgba(255,255,255,0.1); font-weight: 600; }
    .nav-item-soon { opacity: 0.35; cursor: default; pointer-events: none; }
    .nav-item-soon:hover { background: none !important; }

    .nav-label { flex: 1; }
    .nav-item-alert-badge {
        background: #d93025; color: white; font-size: 10px; font-weight: 700;
        min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }

    .nav-divider { border: none; border-top: 1px solid rgba(255,255,255,0.2); margin: 5px 0; }

    /* Fixed to the bottom edge rather than pushed in below the topbar —
       avoids recalculating every other fixed-position offset (sidebar,
       tab bar, #vm-page-content margin-top) just for a banner that only
       shows up while a super_admin is impersonating someone. */
    #vm-impersonate-banner {
        position: fixed; left: 210px; right: 0; bottom: 0; z-index: 400;
        background: #7c3aed; color: white; font-size: 13px;
        display: flex; align-items: center; justify-content: center; gap: 14px;
        padding: 8px 16px; box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    }
    #vm-impersonate-banner button {
        background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4);
        color: white; padding: 4px 14px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600;
    }
    #vm-impersonate-banner button:hover { background: rgba(255,255,255,0.35); }

    .sidebar-bottom {
        margin-top: auto; padding: 12px 18px;
        border-top: 1px solid rgba(255,255,255,0.1);
        font-size: 11px; color: rgba(255,255,255,0.3); text-align: center;
    }

    /* "" MOBILE / RESPONSIVE (Session 97 continued) ""
       Sidebar is fixed-open on desktop (unchanged above); below 768px it
       goes off-canvas and the hamburger button (hidden on desktop) slides
       it in over the content, with a tap-to-close backdrop. Nothing here
       affects desktop layout — every rule is inside this one query. */
    .vm-hamburger-btn { display: none; }
    @media (max-width: 768px) {
        #vm-topbar { padding: 0 12px; gap: 0; }
        #vm-topbar .company-name { display: none; }
        #vm-topbar .brand { font-size: 14px; }
        .vm-hamburger-btn {
            display: flex; align-items: center; justify-content: center;
            width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
            background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
            color: white; font-size: 16px; line-height: 1; cursor: pointer; margin-right: 10px;
        }
        #vm-sidebar {
            transform: translateX(-100%);
            transition: transform 0.2s ease;
            width: 240px;
            z-index: 350;
        }
        #vm-sidebar.mobile-open { transform: translateX(0); }
        #vm-sidebar-backdrop {
            display: none; position: fixed; inset: 0; top: 52px;
            background: rgba(0,0,0,0.4); z-index: 340;
        }
        #vm-sidebar-backdrop.open { display: block; }
        #vm-tabbar { left: 0; overflow-x: auto; }
        #vm-page-content { margin-left: 0; padding: 14px; }
        #vm-page-content.has-tabbar { margin-top: 96px; }
        #vm-impersonate-banner { left: 0; flex-wrap: wrap; text-align: center; }
        .mk-table-wrap { overflow-x: auto; }
    }

    /* "" MODULE TAB BAR "" */
    #vm-tabbar {
        position: fixed; top: 52px; left: 210px; right: 0; height: 44px;
        background: var(--color-bg-white, #ffffff); border-bottom: 1px solid var(--color-border, #dadce0);
        display: flex; align-items: center; padding: 0 20px; gap: 2px;
        z-index: 100;
    }
    #vm-tabbar.hidden { display: none; }

    .vm-tab {
        display: flex; align-items: center; height: 44px; padding: 0 18px;
        font-size: 13px; font-weight: 500; color: var(--color-text-secondary, #5f6368);
        border-bottom: 2px solid transparent;
        cursor: pointer; text-decoration: none; white-space: nowrap;
        transition: color 0.15s;
    }
    .vm-tab:hover { color: var(--mk-primary); }
    .vm-tab.active { color: var(--mk-primary); border-bottom-color: var(--mk-primary); font-weight: 600; }

    /* "" PAGE CONTENT "" */
    #vm-page-content {
        margin-left: 210px;
        margin-top: 52px;
        padding: 24px;
        min-height: calc(100vh - 52px);
    }
    #vm-page-content.has-tabbar {
        margin-top: 96px;
        min-height: calc(100vh - 96px);
    }

    /* Scoped to .user-badge (topbar only) — bare .badge-admin/-pic/-ship
       are reused for unrelated role badges in admin.html's Crew Manager
       and superadmin-impersonate.html's picker, which must NOT pick up
       these topbar-navy-specific colors just because this stylesheet
       (injected at runtime, so it loads after those pages' own <style>)
       otherwise wins the cascade on equal specificity. */
    .user-badge.badge-super { background: #7c3aed; color: white; }
    .user-badge.badge-admin { background: #fce8b2; color: #b45309; }
    .user-badge.badge-pic   { background: #d2e3fc; color: var(--mk-primary); }
    .user-badge.badge-ship  { background: #ceead6; color: #188038; }

    /* "" CHANGE PASSWORD MODAL "" */
    #vm-pw-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,0.45); z-index: 1000;
        align-items: center; justify-content: center;
    }
    #vm-pw-overlay.open { display: flex; }
    #vm-pw-modal {
        background: var(--color-bg-white, #ffffff); border-radius: 10px; padding: 28px 32px;
        width: 100%; max-width: 400px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }
    #vm-pw-modal h3 { margin: 0 0 4px; font-size: 17px; color: var(--mk-chrome); }
    #vm-pw-modal p  { margin: 0 0 20px; font-size: 12px; color: var(--color-text-secondary, #6c757d); }
    .vm-pw-forced-note { margin: -12px 0 16px !important; padding: 8px 12px; background: var(--color-warning-bg, #fef7e0); color: var(--color-warning, #7a5c00); border-radius: 4px; font-size: 12px !important; }
    .vm-pw-field { margin-bottom: 14px; }
    .vm-pw-field label { display: block; font-size: 11px; font-weight: 700; color: var(--color-text-secondary, #6c757d); text-transform: uppercase; margin-bottom: 5px; }
    .vm-pw-field input {
        width: 100%; padding: 9px 12px; border: 1px solid var(--color-border, #dadce0);
        border-radius: 4px; font-size: 14px; font-family: 'Segoe UI', sans-serif;
        background: var(--color-bg-white, #ffffff); color: var(--color-text, #202124);
    }
    .vm-pw-field input:focus { outline: none; border-color: var(--mk-primary); box-shadow: 0 0 0 2px rgba(26,115,232,0.15); }
    .vm-pw-input-wrap { position: relative; }
    .vm-pw-input-wrap input { padding-right: 38px; }
    .vm-pw-toggle {
        position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
        background: none; border: none; cursor: pointer; font-size: 16px;
        padding: 0; line-height: 1; opacity: 0.6;
    }
    .vm-pw-msg { font-size: 13px; padding: 9px 12px; border-radius: 4px; margin-bottom: 14px; display: none; }
    .vm-pw-msg.error   { background: var(--color-danger-bg, #fce8e6); color: var(--color-danger, #d93025); display: block; }
    .vm-pw-msg.success { background: var(--color-success-bg, #ceead6); color: var(--color-success, #188038); display: block; }
    .vm-pw-actions { display: flex; gap: 10px; margin-top: 4px; }
    .vm-pw-actions button { flex: 1; padding: 10px; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; }
    .vm-pw-cancel { background: var(--color-bg, #f1f3f4); color: var(--color-text-secondary, #5f6368); }
    .vm-pw-cancel:hover { background: var(--color-border-light, #e8eaed); }
    .vm-pw-save   { background: var(--mk-primary); color: white; }
    .vm-pw-save:hover { background: var(--mk-chrome); }
    .vm-pw-save:disabled { background: #ccc; cursor: not-allowed; }


/* ============================================================
   Migrated from inline <style> blocks, Session 100 (2026-08-20).
   Every selector below is scoped under that page's own body
   class (.pg-<page> for pages that didn't already have a
   distinguishing body class, or the existing module class for
   pages that did) so nothing here can leak onto any other page
   sharing this file, regardless of how generic the original
   class/element names were (this codebase has been bitten by
   exactly that before — see Session 50's .pulse-cat-head
   collision note in CLAUDE.md).
   ============================================================ */

/* ---- landing.html (scope: .pg-landing) ---- */

  .pg-landing {
    /* Local aliases onto marinekpi.css's shared --brand-* tokens (see its
       "Admiralty Chart palette" comment) — keeps this page's CSS below
       readable without renaming every var(), while still tracing back to
       one reskinnable source of truth. --cyan-dim is a translucent-cyan
       overlay used only on this page, not a standalone brand color. */
    --paper: var(--brand-paper);
    --surface: var(--brand-surface);
    --ink: var(--brand-ink);
    --muted: var(--brand-muted);
    --line: var(--brand-line);
    --line-soft: var(--brand-line-soft);
    --line-strong: var(--brand-line-strong);
    --gold: var(--brand-gold);
    /* Brightened from --brand-rust/--brand-cyan (partner feedback: felt dull
       on the dark background). Overridden locally rather than in
       marinekpi.css's shared tokens, since login.html reads --brand-cyan
       too, on a light background where this brighter value would hurt
       contrast instead of helping it. */
    --rust: #F0964F;
    --cyan: #44C9E4;
    --cyan-hover: var(--brand-cyan-hover);
    --cyan-dim: rgba(43,181,200,0.4);
    --radius-btn: 3px;
    --max: 1140px;
    --max-narrow: 1000px;
  }

  .pg-landing * { margin: 0; padding: 0; box-sizing: border-box; }

  .pg-landing { scroll-behavior: smooth; }

  body.pg-landing {
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    background-image:
      linear-gradient(rgba(234,241,250,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(234,241,250,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    /* overrides marinekpi.css's shared body padding-bottom, reserved for
       the internal app's vessel-chat FAB, which doesn't exist here. */
    padding: 0;
  }

  /* marinekpi.css sets a global h1-h4 { color: var(--color-text) } for the
     light-background app pages — dark navy text, unreadable on this page's
     dark background. Override with the light ink color. */
  .pg-landing h1, .pg-landing h2, .pg-landing h3, .pg-landing h4 { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--ink); }

  .pg-landing a { color: var(--cyan); text-decoration: none; }
  .pg-landing a:hover, .pg-landing a:focus-visible { color: var(--cyan-hover); }

  .pg-landing img { max-width: 100%; display: block; }

  .pg-landing :focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
  }

  .pg-landing .wrap { max-width: var(--max); margin: 0 auto; padding-left: 40px; padding-right: 40px; }
  .pg-landing .wrap-narrow { max-width: var(--max-narrow); margin: 0 auto; padding-left: 40px; padding-right: 40px; }

  .pg-landing .mono { font-family: 'DM Mono', monospace; }
  .pg-landing .label {
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .pg-landing .btn {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--radius-btn);
    padding: 13px 28px;
    text-decoration: none;
    border: 1px solid var(--cyan);
    cursor: pointer;
  }
  .pg-landing .btn-primary { background: var(--cyan); color: var(--paper); }
  .pg-landing .btn-primary:hover, .pg-landing .btn-primary:focus-visible { background: var(--cyan-hover); border-color: var(--cyan-hover); color: var(--paper); }
  .pg-landing .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
  .pg-landing .btn-ghost:hover, .pg-landing .btn-ghost:focus-visible { border-color: var(--cyan); color: var(--cyan); }
  .pg-landing .btn-pill {
    background: var(--cyan);
    color: var(--paper);
    border-radius: var(--radius-btn);
    padding: 8px 18px;
    font-size: 12px;
  }
  .pg-landing .btn-pill:hover, .pg-landing .btn-pill:focus-visible { background: var(--cyan-hover); color: var(--paper); }

  /* ---------- Nav ---------- */
  .pg-landing .site-nav {
    margin: 20px 20px 0;
    border: 1.5px solid var(--line-strong);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
    background: rgba(15,29,54,0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .pg-landing .corner { position: absolute; width: 10px; height: 10px; border: 0 solid var(--cyan); }
  .pg-landing .corner.tl { top: -5px; left: -5px; border-left-width: 1.5px; border-top-width: 1.5px; }
  .pg-landing .corner.tr { top: -5px; right: -5px; border-right-width: 1.5px; border-top-width: 1.5px; }
  .pg-landing .corner.bl { bottom: -5px; left: -5px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
  .pg-landing .corner.br { bottom: -5px; right: -5px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

  .pg-landing .brand { display: flex; align-items: center; gap: 12px; }
  .pg-landing .brand-name { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700; letter-spacing: 0.02em; }
  .pg-landing .brand-tagline { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

  .pg-landing .nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
    font-family: 'DM Mono', monospace;
    flex-wrap: wrap;
  }
  .pg-landing .section-links { display: flex; gap: 22px; }
  .pg-landing .nav-links a:not(.btn-pill) { font-size: 11.5px; color: var(--muted); text-decoration: none; }
  .pg-landing .nav-links a:not(.btn-pill):hover, .pg-landing .nav-links a:not(.btn-pill):focus-visible { color: var(--ink); }

  .pg-landing .nav-toggle { display: none; }

  /* ---------- Hero ---------- */
  .pg-landing .hero { position: relative; padding: 64px 40px 80px; }
  .pg-landing .hero-inner { max-width: var(--max-narrow); margin: 0 auto; position: relative; }
  .pg-landing .hero-copy { max-width: 560px; position: relative; z-index: 1; }
  .pg-landing .fig-caption {
    font-family: 'DM Mono', monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 20px;
  }
  .pg-landing .hero h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.15;
    margin-bottom: 10px;
  }
  .pg-landing .hero-subhead {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, 2.4vw, 24px);
    color: var(--cyan);
    margin-bottom: 22px;
  }
  .pg-landing .hero-body {
    font-size: 16px;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.8;
    max-width: 480px;
    margin-bottom: 36px;
  }
  .pg-landing .hero-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-family: 'DM Mono', monospace;
    font-size: 12.5px;
    margin-bottom: 44px;
  }
  .pg-landing .dash-rule {
    width: 60px;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(234,241,250,0.4) 0 6px, transparent 6px 11px);
    display: none;
  }
  .pg-landing .hero-cta-row .caption { color: var(--muted); }

  .pg-landing .stat-row {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    font-family: 'DM Mono', monospace;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    max-width: 560px;
  }
  .pg-landing .stat-num { font-size: 26px; font-weight: 700; }
  .pg-landing .stat-label { font-size: 11px; color: var(--muted); margin-top: 4px; }

  .pg-landing .hero-inset { width: 400px; max-width: 100%; position: relative; margin: 40px auto 0; }
  .pg-landing .hero-inset .tape {
    position: absolute;
    top: -14px; left: 36px;
    width: 56px; height: 22px;
    background: rgba(201,168,76,0.5);
    transform: rotate(-3deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 2;
  }
  .pg-landing .hero-inset .frame {
    transform: rotate(1.2deg);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    box-shadow: 0 22px 50px rgba(0,0,0,0.5);
    position: relative;
  }
  .pg-landing .hero-inset .frame-label {
    padding: 8px 14px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--cyan);
    border-bottom: 1px solid var(--cyan-dim);
  }
  .pg-landing .hero-inset img { width: 100%; height: 240px; object-fit: cover; object-position: top left; }
  .pg-landing .hero-inset .under-caption {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    margin-top: 10px;
    text-align: right;
  }

  @media (min-width: 900px) {
    .pg-landing .hero { padding: 76px 40px 96px; }
    .pg-landing .hero-inner { min-height: 420px; }
    .pg-landing .hero-inset { position: absolute; top: 0; right: 0; margin: 0; }
    .pg-landing .dash-rule { display: block; }
  }

  /* ---------- Section shell ---------- */
  .pg-landing .section { padding: 56px 40px 64px; border-top: 1.5px solid var(--line); }
  .pg-landing .section-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
  .pg-landing .chart-section-title { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; }
  .pg-landing .section-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pg-landing .section-intro { font-size: 14.5px; color: var(--muted); max-width: 760px; line-height: 1.8; margin: 12px 0 40px; }

  /* ---------- Log entry ---------- */
  .pg-landing .log-entry { max-width: var(--max-narrow); margin: 0 auto; padding: 0 40px 64px; }
  .pg-landing .log-panel { border: 1px solid rgba(234,241,250,0.18); padding: 36px 24px 32px; position: relative; background: rgba(234,241,250,0.03); }
  @media (min-width: 640px) { .pg-landing .log-panel { padding: 36px 40px 32px; } }
  .pg-landing .log-tab {
    position: absolute;
    top: -11px; left: 24px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rust);
    background: var(--paper);
    padding: 2px 10px;
  }
  .pg-landing .log-body { font-size: 15.5px; font-weight: 300; color: var(--ink); line-height: 1.85; margin-bottom: 28px; max-width: 820px; }
  .pg-landing .log-points { display: grid; grid-template-columns: 1fr; gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
  @media (min-width: 720px) { .pg-landing .log-points { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
  .pg-landing .log-point-label {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 8px;
  }
  .pg-landing .log-point-body { font-size: 13px; color: var(--muted); line-height: 1.7; }

  /* ---------- Bordered grid cards ---------- */
  .pg-landing .card-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  @media (min-width: 640px) {
    .pg-landing .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
    .pg-landing .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 960px) {
    .pg-landing .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .pg-landing .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  }
  .pg-landing .card { padding: 22px 22px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .pg-landing .card-icon { margin-bottom: 12px; display: block; }
  .pg-landing .card-title { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
  .pg-landing .card-body { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
  .pg-landing .card-num { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; color: var(--rust); margin-bottom: 10px; }

  /* ---------- Lifecycle ---------- */
  .pg-landing .lifecycle { position: relative; padding: 8px 0 0; margin-top: 44px; }
  .pg-landing .lifecycle-line {
    position: absolute;
    top: 21px; left: 9%; right: 9%;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(234,241,250,0.3) 0 8px, transparent 8px 14px);
    display: none;
  }
  @media (min-width: 720px) { .pg-landing .lifecycle-line { display: block; } }
  .pg-landing .lifecycle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; position: relative; }
  @media (min-width: 720px) { .pg-landing .lifecycle-grid { grid-template-columns: repeat(5, 1fr); } }
  .pg-landing .stage { text-align: center; }
  .pg-landing .stage-dot {
    width: 27px; height: 27px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--ink);
    margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
  }
  .pg-landing .stage.is-final .stage-dot { background: var(--cyan); border-color: var(--cyan); color: var(--paper); font-weight: 500; }
  .pg-landing .stage-name { font-size: 13px; font-weight: 500; }
  .pg-landing .stage-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
  .pg-landing .lifecycle-note { text-align: center; font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; color: var(--rust); margin-top: 28px; }

  /* ---------- Demo reel ---------- */
  .pg-landing .reel-wrap { max-width: 660px; margin: 36px auto 0; }
  .pg-landing .mk-reel {
    position: relative;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    cursor: pointer;
    --run: paused;
    --play-op: 1;
  }
  .pg-landing .mk-reel:hover, .pg-landing .mk-reel:focus-within { --run: running; --play-op: 0; }
  .pg-landing .reel-chrome { padding: 11px 14px; display: flex; align-items: center; gap: 7px; background: var(--surface); border-bottom: 1px solid var(--cyan-dim); }
  .pg-landing .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
  .pg-landing .dot.red { background: #ff5f57; }
  .pg-landing .dot.yellow { background: #febc2e; }
  .pg-landing .dot.green { background: #28c840; }
  .pg-landing .reel-url { margin-left: 8px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pg-landing .reel-time {
    margin-left: auto; flex-shrink: 0;
    font-family: 'DM Mono', monospace;
    font-size: 10.5px;
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    border-radius: 4px;
    padding: 2px 8px;
  }
  .pg-landing .reel-frames { position: relative; height: 260px; }
  @media (min-width: 500px) { .pg-landing .reel-frames { height: 340px; } }
  .pg-landing .reel-frame { position: absolute; inset: 0; animation: mk-crossfade 9s infinite; animation-play-state: var(--run); }
  .pg-landing .reel-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .pg-landing .reel-tag {
    position: absolute; bottom: 14px; left: 14px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--cyan);
    background: rgba(10,21,38,0.85);
    border: 1px solid var(--cyan-dim);
    padding: 4px 10px;
    border-radius: 4px;
  }
  .pg-landing .reel-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: var(--play-op); transition: opacity 0.25s; pointer-events: none; }
  .pg-landing .reel-play-btn { width: 60px; height: 60px; border-radius: 50%; background: rgba(10,21,38,0.6); border: 1.5px solid rgba(234,241,250,0.6); display: flex; align-items: center; justify-content: center; }
  .pg-landing .reel-play-triangle { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid var(--ink); margin-left: 4px; }
  .pg-landing .reel-progress-track { height: 3px; background: rgba(43,181,200,0.15); position: relative; }
  .pg-landing .reel-progress-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--cyan); animation: mk-progress 9s linear infinite; animation-play-state: var(--run); }
  .pg-landing .reel-hint { font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--muted); text-align: center; margin-top: 10px; }

  @keyframes mk-crossfade { 0% { opacity: 1; } 12% { opacity: 1; } 17% { opacity: 0; } 83% { opacity: 0; } 88% { opacity: 1; } 100% { opacity: 1; } }
  @keyframes mk-progress { 0% { width: 0%; } 100% { width: 100%; } }
  @media (prefers-reduced-motion: reduce) {
    .pg-landing .reel-frame, .pg-landing .reel-progress-bar { animation: none !important; }
    .pg-landing .reel-frame:nth-child(1) { opacity: 1; }
    .pg-landing .reel-frame:nth-child(2), .pg-landing .reel-frame:nth-child(3) { opacity: 0; }
  }

  /* ---------- Chart index ---------- */
  .pg-landing .index-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    font-family: 'DM Mono', monospace;
    font-size: 12.5px;
    border-top: 1px solid var(--line-strong);
  }
  @media (min-width: 640px) { .pg-landing .index-list { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
  .pg-landing .index-row { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
  .pg-landing .index-ref { color: var(--rust); font-weight: 500; width: 30px; flex-shrink: 0; }
  .pg-landing .index-name { color: var(--ink); }
  .pg-landing .index-cta {
    margin-top: 32px;
    font-family: 'DM Mono', monospace;
    font-size: 12.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  /* ---------- Floating walkthrough CTA ---------- */
  .pg-landing .float-cta {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 22px 11px;
  }
  @media (max-width: 720px) {
    .pg-landing .float-cta {
      writing-mode: horizontal-tb;
      right: 16px;
      left: 16px;
      top: auto;
      bottom: 16px;
      transform: none;
      text-align: center;
      padding: 13px 28px;
    }
  }

  /* ---------- Footer ---------- */
  .pg-landing .site-footer { background: var(--surface); padding: 40px 40px; text-align: center; border-top: 1.5px solid var(--line); }
  .pg-landing .footer-line { font-family: 'Playfair Display', serif; font-size: 19px; font-style: italic; margin-bottom: 20px; }
  .pg-landing .footer-cta { margin-bottom: 28px; }
  .pg-landing .footer-credit { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); }
  .pg-landing .footer-credit strong { color: var(--ink); }

  /* ---------- Small screens: nav collapses ---------- */
  @media (max-width: 720px) {
    .pg-landing .nav-links { gap: 14px; }
    .pg-landing .nav-links .section-links { display: none; width: 100%; }
    .pg-landing .site-nav.is-open .section-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      order: 3;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }
    .pg-landing .nav-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px; height: 32px;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: var(--radius-btn);
      color: var(--ink);
    }
  }

  /* ── LANGUAGE SWITCHER (shared structure from i18n-public.js) ── */
  .pg-landing .mk-lang-switch { position: relative; }
  .pg-landing .mk-lang-btn {
    font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500;
    letter-spacing: 0.08em; color: var(--muted); background: transparent;
    border: 1px solid var(--line); border-radius: var(--radius-btn);
    padding: 5px 10px; cursor: pointer; transition: color 0.2s, border-color 0.2s;
  }
  .pg-landing .mk-lang-btn:hover { color: var(--cyan); border-color: var(--cyan); }
  .pg-landing .mk-lang-menu {
    display: none; position: absolute; top: 32px; right: 0;
    min-width: 130px; background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--radius-btn); box-shadow: 0 12px 30px rgba(0,0,0,0.5); z-index: 150;
    overflow: hidden; padding: 4px 0;
  }
  .pg-landing .mk-lang-switch.open .mk-lang-menu { display: block; }
  .pg-landing .mk-lang-item {
    display: block; width: 100%; text-align: left; padding: 8px 14px;
    font-size: 13px; background: none; border: none; cursor: pointer; color: var(--ink);
    font-family: 'DM Sans', sans-serif;
  }
  .pg-landing .mk-lang-item:hover { background: rgba(234,241,250,0.06); }
  .pg-landing .mk-lang-item.active { color: var(--cyan); font-weight: 500; }

/* ---- platform-overview.html (scope: .pg-platform-overview) ---- */

  .pg-platform-overview {
    /* Same local aliases as landing.html — trace back to marinekpi.css's
       shared --brand-* "Admiralty Chart palette" block. */
    /* Light-mode take on the same "Admiralty Chart" system — deliberately
       NOT aliased onto --brand-paper/-surface/-ink/etc (those are the dark
       values landing.html/login.html use). Same chart-paper design
       language (fonts, corner brackets, card grids, DM Mono eyebrow
       labels), but this page reads as a distinct parchment-on-white sheet
       rather than the dark navy chart, per Gaurav's request that the two
       pages look distinctly different while sharing the same style. */
    --paper: #F4F0E4;
    --surface: #FFFFFF;
    --ink: #1B2A4A;
    --muted: #5A7090;
    --line: rgba(27,42,74,0.15);
    --line-soft: rgba(27,42,74,0.10);
    --line-strong: rgba(27,42,74,0.28);
    --gold: var(--brand-gold);
    /* Darker than landing.html's brightened dark-mode rust/cyan — those
       values (#F0964F/#44C9E4) were tuned for legibility against a dark
       background and would wash out against this light one. --cyan reuses
       --brand-cyan-dark, already defined in marinekpi.css for exactly this
       kind of on-light use. */
    --rust: #C2622E;
    --cyan: #1A8FA0;
    --cyan-hover: #167988;
    --cyan-dim: rgba(26,143,160,0.35);
    --radius-btn: 3px;
    --max: 1140px;
    --max-narrow: 1000px;

    /* The preserved Explorer script (svgDonut/renderModule) still reads a
       handful of marinekpi.css's internal app tokens directly via var() —
       redefining them here, page-scoped, keeps that JS untouched while
       making its output legible against this page's own palette (aliased
       to --ink/--muted/--line above, not --brand-ink/etc, since this page
       runs its own light values rather than the dark brand ones). */
    --color-text: var(--ink);
    --color-text-muted: var(--muted);
    --color-border-light: var(--line);
    --mk-primary: var(--cyan);
  }

  .pg-platform-overview * { margin: 0; padding: 0; box-sizing: border-box; }
  .pg-platform-overview { scroll-behavior: smooth; }
  body.pg-platform-overview {
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    background-image:
      linear-gradient(rgba(27,42,74,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(27,42,74,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    padding: 0;
  }
  .pg-platform-overview a { color: var(--cyan); text-decoration: none; }
  .pg-platform-overview a:hover, .pg-platform-overview a:focus-visible { color: var(--cyan-hover); }
  .pg-platform-overview img { max-width: 100%; display: block; }
  .pg-platform-overview :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .pg-platform-overview h1, .pg-platform-overview h2, .pg-platform-overview h3, .pg-platform-overview h4 { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--ink); }
  .pg-platform-overview p { color: var(--muted); }

  .pg-platform-overview .wrap { max-width: var(--max); margin: 0 auto; padding-left: 40px; padding-right: 40px; }
  .pg-platform-overview .wrap-narrow { max-width: var(--max-narrow); margin: 0 auto; padding-left: 40px; padding-right: 40px; }
  .pg-platform-overview .mono { font-family: 'DM Mono', monospace; }

  .pg-platform-overview .btn {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--radius-btn);
    padding: 13px 28px;
    text-decoration: none;
    border: 1px solid var(--cyan);
    cursor: pointer;
  }
  .pg-platform-overview .btn-primary { background: var(--cyan); color: var(--paper); }
  .pg-platform-overview .btn-primary:hover, .pg-platform-overview .btn-primary:focus-visible { background: var(--cyan-hover); border-color: var(--cyan-hover); color: var(--paper); }
  .pg-platform-overview .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
  .pg-platform-overview .btn-ghost:hover, .pg-platform-overview .btn-ghost:focus-visible { border-color: var(--cyan); color: var(--cyan); }
  .pg-platform-overview .btn-pill { background: var(--cyan); color: var(--paper); border-radius: var(--radius-btn); padding: 8px 18px; font-size: 12px; }
  .pg-platform-overview .btn-pill:hover, .pg-platform-overview .btn-pill:focus-visible { background: var(--cyan-hover); color: var(--paper); }

  /* ---------- Nav (shared with landing.html) ---------- */
  .pg-platform-overview .site-nav {
    margin: 20px 20px 0;
    border: 1.5px solid var(--line-strong);
    padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    position: sticky; top: 0; z-index: 100; flex-wrap: wrap;
    background: rgba(244,240,228,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .pg-platform-overview .corner { position: absolute; width: 10px; height: 10px; border: 0 solid var(--cyan); }
  .pg-platform-overview .corner.tl { top: -5px; left: -5px; border-left-width: 1.5px; border-top-width: 1.5px; }
  .pg-platform-overview .corner.tr { top: -5px; right: -5px; border-right-width: 1.5px; border-top-width: 1.5px; }
  .pg-platform-overview .corner.bl { bottom: -5px; left: -5px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
  .pg-platform-overview .corner.br { bottom: -5px; right: -5px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
  .pg-platform-overview .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
  .pg-platform-overview .brand-name { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700; letter-spacing: 0.02em; display: block; }
  .pg-platform-overview .brand-tagline { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; display: block; }
  .pg-platform-overview .nav-links { display: flex; align-items: center; gap: 22px; font-family: 'DM Mono', monospace; flex-wrap: wrap; }
  .pg-platform-overview .section-links { display: flex; gap: 22px; }
  .pg-platform-overview .nav-links a:not(.btn-pill) { font-size: 11.5px; color: var(--muted); text-decoration: none; }
  .pg-platform-overview .nav-links a:not(.btn-pill):hover, .pg-platform-overview .nav-links a:not(.btn-pill):focus-visible { color: var(--ink); }
  .pg-platform-overview .nav-toggle { display: none; }

  /* ---------- Section shell ---------- */
  .pg-platform-overview .section { padding: 56px 40px 64px; border-top: 1.5px solid var(--line); }
  .pg-platform-overview .section-head-center { max-width: 700px; margin: 0 auto 44px; text-align: center; }
  .pg-platform-overview .fig-caption {
    font-family: 'DM Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--rust); margin-bottom: 14px;
  }
  .pg-platform-overview .section-head-center h2 { font-size: 26px; margin-bottom: 12px; }
  .pg-platform-overview .section-head-center p { font-size: 14.5px; line-height: 1.8; }

  /* ---------- Hero ---------- */
  .pg-platform-overview .hero { position: relative; padding: 64px 40px 72px; }
  .pg-platform-overview .hero-inner { max-width: var(--max-narrow); margin: 0 auto; text-align: center; }
  .pg-platform-overview .hero h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.18; margin: 0 auto 10px; max-width: 780px; }
  .pg-platform-overview .hero h1 .accent { color: var(--cyan); font-style: italic; font-weight: 500; }
  .pg-platform-overview .hero .sub { max-width: 620px; margin: 0 auto 36px; font-size: 15.5px; line-height: 1.8; }
  .pg-platform-overview .hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
  .pg-platform-overview .stat-row {
    display: flex; gap: 40px; flex-wrap: wrap; justify-content: center;
    font-family: 'DM Mono', monospace; border-top: 1px solid var(--line); padding-top: 24px;
    max-width: 700px; margin: 0 auto;
  }
  .pg-platform-overview .stat-num { font-size: 24px; font-weight: 700; color: var(--ink); text-align: center; }
  .pg-platform-overview .stat-label { font-size: 11px; color: var(--muted); margin-top: 4px; text-align: center; }

  /* ---------- Logic / lifecycle (shared visual recipe with landing.html) ---------- */
  .pg-platform-overview .card-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  @media (min-width: 640px) { .pg-platform-overview .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } .pg-platform-overview .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 960px) { .pg-platform-overview .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .pg-platform-overview .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
  .pg-platform-overview .card { padding: 22px 22px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .pg-platform-overview .card-num { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; color: var(--rust); margin-bottom: 10px; }
  .pg-platform-overview .card-title { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
  .pg-platform-overview .card-body { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
  .pg-platform-overview .card-icon { margin-bottom: 12px; display: block; }

  .pg-platform-overview .lifecycle { position: relative; padding: 8px 0 0; margin-top: 44px; }
  .pg-platform-overview .lifecycle-line {
    position: absolute; top: 21px; left: 9%; right: 9%; height: 1px;
    background: repeating-linear-gradient(90deg, rgba(27,42,74,0.22) 0 8px, transparent 8px 14px);
    display: none;
  }
  @media (min-width: 720px) { .pg-platform-overview .lifecycle-line { display: block; } }
  .pg-platform-overview .lifecycle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; position: relative; }
  @media (min-width: 720px) { .pg-platform-overview .lifecycle-grid { grid-template-columns: repeat(5, 1fr); } }
  .pg-platform-overview .stage { text-align: center; }
  .pg-platform-overview .stage-dot {
    width: 27px; height: 27px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink);
    margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', monospace; font-size: 11px;
  }
  .pg-platform-overview .stage.is-final .stage-dot { background: var(--cyan); border-color: var(--cyan); color: var(--paper); font-weight: 500; }
  .pg-platform-overview .stage-name { font-size: 13px; font-weight: 500; color: var(--ink); }
  .pg-platform-overview .stage-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
  .pg-platform-overview .lifecycle-note { text-align: center; font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; color: var(--rust); margin-top: 28px; }

  /* ---------- Legend / AI copilot ---------- */
  .pg-platform-overview .lang-callout {
    margin-top: 32px; display: flex; gap: 20px; align-items: flex-start;
    padding: 26px 28px; border: 1px solid var(--line-strong); background: rgba(27,42,74,0.03);
  }
  .pg-platform-overview .lang-callout-icon {
    flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--cyan);
    display: flex; align-items: center; justify-content: center; font-size: 19px;
  }
  .pg-platform-overview .lang-callout h3 { font-size: 16px; margin-bottom: 8px; }
  .pg-platform-overview .lang-callout p { font-size: 13.5px; line-height: 1.7; }
  .pg-platform-overview .lang-callout em { color: var(--ink); font-style: normal; font-weight: 500; }

  .pg-platform-overview .usp-demo { margin-top: 40px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 20px 50px rgba(27,42,74,0.14); overflow: hidden; }
  .pg-platform-overview .usp-demo-head { padding: 11px 16px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--cyan-dim); }
  .pg-platform-overview .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
  .pg-platform-overview .dot-r { background: #ff5f57; } .pg-platform-overview .dot-y { background: #febc2e; } .pg-platform-overview .dot-g { background: #28c840; }
  .pg-platform-overview .usp-demo-head span { margin-left: 8px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); }
  .pg-platform-overview .usp-demo-body { padding: 26px 28px; }
  .pg-platform-overview .field-block { max-width: 720px; margin: 0 auto; }
  .pg-platform-overview .field-block label { font-family: 'DM Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .pg-platform-overview .field-box {
    margin-top: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: 14px 16px;
    font-size: 14px; background: var(--paper); color: var(--ink); min-height: 56px;
  }
  .pg-platform-overview .ai-btn-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .pg-platform-overview .ai-btn {
    font-family: 'DM Mono', monospace; font-size: 11.5px; font-weight: 500; padding: 7px 14px;
    border-radius: var(--radius-btn); border: 1px solid var(--cyan-dim); background: transparent; color: var(--cyan);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  }
  .pg-platform-overview .ai-btn:hover { background: var(--cyan); color: var(--paper); }
  .pg-platform-overview .demo-toggle { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; flex-wrap: wrap; }
  .pg-platform-overview .demo-toggle button {
    font-family: 'DM Mono', monospace; font-size: 11.5px; font-weight: 500; padding: 8px 15px;
    border-radius: var(--radius-btn); border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer;
  }
  .pg-platform-overview .demo-toggle button.active { background: var(--cyan); color: var(--paper); border-color: var(--cyan); }

  .pg-platform-overview .real-proof { margin-top: 44px; }
  .pg-platform-overview .real-proof-label { text-align: center; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); margin-bottom: 18px; }
  .pg-platform-overview .real-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 820px) { .pg-platform-overview .real-proof-grid { grid-template-columns: 1fr; } }

  /* ---------- Mock frames (Explorer screenshots + illustrative checklists) ---------- */
  .pg-platform-overview .mock-frame { border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 20px 50px rgba(27,42,74,0.14); overflow: hidden; }
  .pg-platform-overview .mock-bar { padding: 9px 14px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--cyan-dim); }
  .pg-platform-overview .mock-url { margin-left: 8px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pg-platform-overview .mock-body { padding: 18px; font-size: 12.5px; color: var(--ink); }
  .pg-platform-overview .mock-caption { padding: 8px 16px; font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--muted); text-align: right; border-top: 1px solid var(--line); }
  .pg-platform-overview .mock-shot-wrap { height: 400px; overflow: hidden; cursor: zoom-in; position: relative; background: var(--paper); }
  .pg-platform-overview .mock-shot-wrap img { width: 100%; display: block; object-fit: cover; object-position: top center; }
  .pg-platform-overview .mock-shot-wrap::after {
    content: "🔍 Click to view full screenshot"; position: absolute; right: 10px; bottom: 10px;
    background: rgba(10,21,38,0.85); border: 1px solid var(--cyan-dim); color: var(--cyan);
    font-family: 'DM Mono', monospace; font-size: 10.5px; padding: 4px 10px; border-radius: var(--radius-btn);
    opacity: 0; transition: opacity 0.15s; pointer-events: none;
  }
  .pg-platform-overview .mock-shot-wrap:hover::after { opacity: 1; }

  .pg-platform-overview .chk-cat { margin-bottom: 12px; }
  .pg-platform-overview .chk-cat-head { display: flex; justify-content: space-between; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink); margin-bottom: 6px; }
  .pg-platform-overview .chk-bar { height: 6px; border-radius: 100px; background: var(--line); overflow: hidden; }
  .pg-platform-overview .chk-bar i { display: block; height: 100%; background: var(--cyan); border-radius: 100px; }

  /* ---------- Explorer ---------- */
  .pg-platform-overview .explorer { border: 1px solid var(--line-strong); background: rgba(27,42,74,0.02); }
  .pg-platform-overview .explorer-top {
    background: var(--surface); padding: 14px 22px; display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--line-strong);
  }
  .pg-platform-overview .crumbs { display: flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 12.5px; flex-wrap: wrap; }
  .pg-platform-overview .crumb { cursor: pointer; padding: 4px 12px; border-radius: var(--radius-btn); color: var(--muted); border: 1px solid transparent; transition: all 0.15s ease; }
  .pg-platform-overview .crumb:hover { color: var(--ink); border-color: var(--line-strong); }
  .pg-platform-overview .crumb.current { color: var(--rust); font-weight: 500; cursor: default; }
  .pg-platform-overview .crumb.current:hover { border-color: transparent; }
  .pg-platform-overview .crumb-sep { color: var(--muted); opacity: 0.6; }
  .pg-platform-overview .back-btn {
    font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; color: var(--ink);
    background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
    padding: 7px 14px; cursor: pointer; display: flex; align-items: center; gap: 6px;
  }
  .pg-platform-overview .back-btn:hover { border-color: var(--cyan); color: var(--cyan); }
  .pg-platform-overview .explorer-body { padding: 36px; min-height: 480px; transition: opacity 0.15s ease; }

  .pg-platform-overview .view-intro { max-width: 640px; margin: 0 auto 32px; text-align: center; }
  .pg-platform-overview .view-intro h3 { font-size: 21px; }
  .pg-platform-overview .view-intro p { margin-top: 8px; font-size: 14px; }

  .pg-platform-overview .cat-grid, .pg-platform-overview .mod-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  @media (min-width: 640px) { .pg-platform-overview .cat-grid, .pg-platform-overview .mod-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 960px) { .pg-platform-overview .cat-grid, .pg-platform-overview .mod-grid { grid-template-columns: repeat(3, 1fr); } }
  .pg-platform-overview .cat-card, .pg-platform-overview .mod-card {
    padding: 22px 24px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    cursor: pointer; text-align: left; transition: background 0.15s ease; position: relative;
  }
  .pg-platform-overview .cat-card:hover, .pg-platform-overview .mod-card:hover { background: rgba(27,42,74,0.04); }
  .pg-platform-overview .cat-card .cat-icon { font-size: 24px; margin-bottom: 14px; }
  .pg-platform-overview .cat-card h4, .pg-platform-overview .mod-card h4 { font-size: 15.5px; margin-bottom: 8px; font-weight: 500; font-family: 'DM Sans', sans-serif; }
  .pg-platform-overview .cat-card p, .pg-platform-overview .mod-card p { font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
  .pg-platform-overview .cat-card .count {
    font-family: 'DM Mono', monospace; font-size: 10.5px; font-weight: 500; color: var(--rust);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .pg-platform-overview .cat-card .go { position: absolute; right: 20px; bottom: 22px; color: var(--cyan); font-size: 18px; opacity: 0; transform: translateX(-6px); transition: all 0.15s ease; }
  .pg-platform-overview .cat-card:hover .go { opacity: 1; transform: translateX(0); }
  .pg-platform-overview .mod-card .badge, .pg-platform-overview .badge {
    display: inline-block; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); color: var(--rust);
  }
  .pg-platform-overview .cat-shared-note {
    background: rgba(194,98,46,0.08); border: 1px solid rgba(194,98,46,0.3); border-radius: var(--radius-btn);
    padding: 14px 18px; font-size: 13px; color: var(--ink); margin-bottom: 28px;
  }

  .pg-platform-overview .mod-detail { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
  @media (min-width: 900px) { .pg-platform-overview .mod-detail { grid-template-columns: 1.05fr 1fr; } }
  .pg-platform-overview .mod-detail-left h3 { font-size: 24px; margin-bottom: 6px; }
  .pg-platform-overview .mod-detail-left .tagline { color: var(--cyan); font-weight: 500; font-size: 14px; margin-bottom: 16px; font-style: italic; font-family: 'Playfair Display', serif; }
  .pg-platform-overview .mod-detail-left .desc { font-size: 13.8px; color: var(--muted); margin-bottom: 22px; line-height: 1.7; }
  .pg-platform-overview .feat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .pg-platform-overview .feat-list li { display: flex; gap: 12px; font-size: 13.3px; color: var(--ink); align-items: flex-start; }
  .pg-platform-overview .feat-list .tick {
    width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--cyan); color: var(--cyan); flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; margin-top: 1px;
  }

  /* ---------- Roles / chart key ---------- */
  /* (reuses .card-grid.cols-3 / .card above) */

  /* ---------- CTA + footer ---------- */
  .pg-platform-overview .cta-panel { text-align: center; padding: 48px 40px; border: 1px solid var(--line-strong); background: var(--surface); }
  .pg-platform-overview .cta-panel .footer-line { font-family: 'Playfair Display', serif; font-size: 19px; font-style: italic; margin-bottom: 10px; color: var(--ink); }
  .pg-platform-overview .cta-panel p { max-width: 480px; margin: 0 auto 26px; font-size: 13.5px; line-height: 1.7; }
  .pg-platform-overview .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

  .pg-platform-overview .site-footer { background: var(--surface); padding: 28px 40px; text-align: center; border-top: 1.5px solid var(--line); }
  .pg-platform-overview .footer-credit { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); max-width: 720px; margin: 0 auto; line-height: 1.7; }

  /* ---------- Floating walkthrough CTA (shared with landing.html) ---------- */
  .pg-platform-overview .float-cta {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    box-shadow: 0 10px 30px rgba(27,42,74,0.25);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 22px 11px;
  }
  @media (max-width: 720px) {
    .pg-platform-overview .float-cta {
      writing-mode: horizontal-tb;
      right: 16px;
      left: 16px;
      top: auto;
      bottom: 16px;
      transform: none;
      text-align: center;
      padding: 13px 28px;
    }
  }

  /* ---------- Lightbox ---------- */
  .pg-platform-overview .lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(6,10,20,0.9); align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; }
  .pg-platform-overview .lightbox.open { display: flex; }
  .pg-platform-overview .lightbox img { max-width: 100%; max-height: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.6); cursor: default; }
  .pg-platform-overview .lightbox-close {
    position: absolute; top: 20px; right: 28px; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(234,241,250,0.08); border: 1px solid var(--line-strong); color: var(--ink);
    font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .pg-platform-overview .lightbox-close:hover { background: rgba(234,241,250,0.16); }

  /* ---------- Small screens: nav collapses (shared with landing.html) ---------- */
  @media (max-width: 720px) {
    .pg-platform-overview .nav-links { gap: 14px; }
    .pg-platform-overview .nav-links .section-links { display: none; width: 100%; }
    .pg-platform-overview .site-nav.is-open .section-links {
      display: flex; flex-direction: column; gap: 12px; width: 100%; order: 3;
      margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
    }
    .pg-platform-overview .nav-toggle {
      display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
      background: transparent; border: 1px solid var(--line); border-radius: var(--radius-btn); color: var(--ink);
    }
  }

  /* ── LANGUAGE SWITCHER (shared structure from i18n-public.js) ── */
  .pg-platform-overview .mk-lang-switch { position: relative; }
  .pg-platform-overview .mk-lang-btn {
    font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500;
    letter-spacing: 0.08em; color: var(--muted); background: transparent;
    border: 1px solid var(--line); border-radius: var(--radius-btn);
    padding: 5px 10px; cursor: pointer; transition: color 0.2s, border-color 0.2s;
  }
  .pg-platform-overview .mk-lang-btn:hover { color: var(--cyan); border-color: var(--cyan); }
  .pg-platform-overview .mk-lang-menu {
    display: none; position: absolute; top: 32px; right: 0;
    min-width: 130px; background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--radius-btn); box-shadow: 0 12px 30px rgba(27,42,74,0.25); z-index: 150;
    overflow: hidden; padding: 4px 0;
  }
  .pg-platform-overview .mk-lang-switch.open .mk-lang-menu { display: block; }
  .pg-platform-overview .mk-lang-item {
    display: block; width: 100%; text-align: left; padding: 8px 14px;
    font-size: 13px; background: none; border: none; cursor: pointer; color: var(--ink);
    font-family: 'DM Sans', sans-serif;
  }
  .pg-platform-overview .mk-lang-item:hover { background: rgba(27,42,74,0.05); }
  .pg-platform-overview .mk-lang-item.active { color: var(--cyan); font-weight: 500; }

/* ---- vdr-audit-detail.html (scope: .pg-vdr-audit-detail) ---- */

/* ── Page layout ── */
.pg-vdr-audit-detail .page-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.pg-vdr-audit-detail .back-btn { color:var(--color-text-secondary); text-decoration:none; font-size:13px; display:flex; align-items:center; gap:4px; padding:6px 10px; border-radius:6px; }
.pg-vdr-audit-detail .back-btn:hover { background:var(--color-border-light); }
.pg-vdr-audit-detail .page-title { font-size:18px; font-weight:700; color:var(--vdr-primary-dark); flex:1; }
.pg-vdr-audit-detail .header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ── Audit status bar ── */
.pg-vdr-audit-detail .status-bar {
    background: var(--color-bg-white); border:1px solid var(--color-divider); border-radius:10px;
    padding:14px 20px; margin-bottom:20px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.pg-vdr-audit-detail .status-bar .ref { font-size:13px; font-weight:700; color:var(--vdr-primary-dark); }
.pg-vdr-audit-detail .status-bar .vessel { font-size:13px; color:var(--color-text-secondary); }
.pg-vdr-audit-detail .status-bar .period { font-size:12px; color:var(--color-text-muted); }
.pg-vdr-audit-detail .status-bar .spacer { flex:1; }
.pg-vdr-audit-detail .status-bar .actions { display:flex; gap:8px; }

/* ── Tabs ── */
.pg-vdr-audit-detail .tab-bar {
    display:flex; gap:0; border-bottom:2px solid var(--color-divider);
    margin-bottom:20px; overflow-x:auto;
}
.pg-vdr-audit-detail .tab-btn {
    padding:10px 20px; font-size:13px; font-weight:600; color:var(--color-text-secondary);
    background:none; border:none; border-bottom:3px solid transparent;
    cursor:pointer; white-space:nowrap; transition:all 0.15s; margin-bottom:-2px;
}
.pg-vdr-audit-detail .tab-btn:hover { color:var(--vdr-primary); }
.pg-vdr-audit-detail .tab-btn.active { color:var(--vdr-primary-dark); border-bottom-color:var(--vdr-primary); }
.pg-vdr-audit-detail .tab-pane { display:none; }
.pg-vdr-audit-detail .tab-pane.active { display:block; }

/* ── Form elements (detail tabs) ── */
.pg-vdr-audit-detail .detail-card {
    background: var(--color-bg-white); border:1px solid var(--color-divider); border-radius:10px;
    margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,0.06); overflow:hidden;
}
.pg-vdr-audit-detail .detail-card-hdr {
    padding:12px 18px; border-bottom:1px solid var(--color-border-light);
    font-size:11px; font-weight:700; color:var(--color-text-secondary);
    text-transform:uppercase; letter-spacing:0.7px;
    display:flex; align-items:center; justify-content:space-between;
}
.pg-vdr-audit-detail .detail-card-body { padding:18px; }
.pg-vdr-audit-detail .field-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.pg-vdr-audit-detail .field-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:12px; }
.pg-vdr-audit-detail .field-grid-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; margin-bottom:12px; }
.pg-vdr-audit-detail .field-full { grid-column:1/-1; }
.pg-vdr-audit-detail .f-lbl { font-size:10px; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.pg-vdr-audit-detail .f-val { font-size:13px; color:var(--color-text); font-weight:500; min-height:20px; }
.pg-vdr-audit-detail .f-val.muted { color:var(--color-text-muted); font-style:italic; }
.pg-vdr-audit-detail .f-inp, .pg-vdr-audit-detail .f-sel, .pg-vdr-audit-detail .f-ta {
    width:100%; padding:8px 10px; border:1px solid var(--color-border); border-radius:6px;
    font-size:13px; font-family:'Segoe UI',sans-serif; color:var(--color-text);
    background: var(--color-bg-white); box-sizing:border-box;
}
.pg-vdr-audit-detail .f-inp:focus, .pg-vdr-audit-detail .f-sel:focus, .pg-vdr-audit-detail .f-ta:focus { outline:none; border-color:var(--vdr-primary); box-shadow:0 0 0 3px rgba(2,119,189,0.1); }
.pg-vdr-audit-detail .f-ta { resize:vertical; min-height:88px; line-height:1.5; }
.pg-vdr-audit-detail .save-row { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--color-border-light); }
.pg-vdr-audit-detail .btn-save-sec { background:var(--vdr-primary); color:white; border:none; padding:8px 20px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.pg-vdr-audit-detail .btn-save-sec:hover { background:var(--vdr-primary-dark); }
.pg-vdr-audit-detail .save-msg { font-size:12px; }
.pg-vdr-audit-detail .save-msg.ok { color:var(--vdr-gp); }
.pg-vdr-audit-detail .save-msg.err { color:var(--vdr-nc); }

/* ── Data quality chips ── */
.pg-vdr-audit-detail .dq-chips { display:flex; gap:6px; flex-wrap:wrap; }
.pg-vdr-audit-detail .dq-chip {
    padding:5px 12px; border:1.5px solid var(--color-border); border-radius:16px;
    font-size:12px; font-weight:600; color:var(--color-text-secondary); background: var(--color-bg-white);
    cursor:pointer; transition:all 0.15s; user-select:none;
}
.pg-vdr-audit-detail .dq-chip:hover { border-color:var(--vdr-primary); }
.pg-vdr-audit-detail .dq-chip.selected-good { background:var(--vdr-gp-bg); border-color:var(--vdr-gp); color:var(--vdr-gp); }
.pg-vdr-audit-detail .dq-chip.selected-warn { background:var(--vdr-obs-bg); border-color:var(--vdr-obs); color:var(--vdr-obs); }
.pg-vdr-audit-detail .dq-chip.selected-bad { background:var(--vdr-nc-bg); border-color:var(--vdr-nc); color:var(--vdr-nc); }

/* ── Timeline table ── */
.pg-vdr-audit-detail .timeline-table { width:100%; border-collapse:collapse; }
.pg-vdr-audit-detail .timeline-table th { font-size:11px; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; padding:8px 10px; border-bottom:2px solid var(--color-border-light); text-align:left; }
.pg-vdr-audit-detail .timeline-table td { padding:8px 10px; border-bottom:1px solid var(--color-bg); vertical-align:top; }
.pg-vdr-audit-detail .timeline-table tr:last-child td { border-bottom:none; }
.pg-vdr-audit-detail .tl-time-inp { width:80px; padding:5px 8px; border:1px solid var(--color-border); border-radius:5px; font-size:12px; font-family:'Segoe UI',sans-serif; }
.pg-vdr-audit-detail .tl-detail-inp { width:100%; padding:5px 8px; border:1px solid var(--color-border); border-radius:5px; font-size:12px; font-family:'Segoe UI',sans-serif; }
.pg-vdr-audit-detail .tl-channel-inp { width:120px; padding:5px 8px; border:1px solid var(--color-border); border-radius:5px; font-size:12px; font-family:'Segoe UI',sans-serif; }
.pg-vdr-audit-detail .tl-time-inp:focus, .pg-vdr-audit-detail .tl-detail-inp:focus, .pg-vdr-audit-detail .tl-channel-inp:focus { outline:none; border-color:var(--vdr-primary); }
.pg-vdr-audit-detail .btn-tl-del { background:none; border:none; color:var(--vdr-nc); font-size:16px; cursor:pointer; padding:2px 6px; border-radius:4px; }
.pg-vdr-audit-detail .btn-tl-del:hover { background:var(--vdr-nc-bg); }
.pg-vdr-audit-detail .btn-tl-add { background:none; border:2px dashed var(--color-border); color:var(--vdr-primary); font-size:13px; font-weight:600; padding:10px; border-radius:8px; width:100%; cursor:pointer; transition:all 0.15s; margin-top:8px; }
.pg-vdr-audit-detail .btn-tl-add:hover { border-color:var(--vdr-primary); background:var(--vdr-primary-bg); }

/* ── Bridge team table ── */
.pg-vdr-audit-detail .bt-table { width:100%; border-collapse:collapse; }
.pg-vdr-audit-detail .bt-table th { font-size:11px; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; padding:8px 10px; border-bottom:2px solid var(--color-border-light); text-align:left; white-space:nowrap; }
.pg-vdr-audit-detail .bt-table td { padding:8px 10px; border-bottom:1px solid var(--color-bg); vertical-align:middle; }
.pg-vdr-audit-detail .bt-table tr:last-child td { border-bottom:none; }
.pg-vdr-audit-detail .bt-inp { width:100%; padding:6px 8px; border:1px solid var(--color-border); border-radius:5px; font-size:12px; font-family:'Segoe UI',sans-serif; }
.pg-vdr-audit-detail .bt-inp:focus { outline:none; border-color:var(--vdr-primary); }
.pg-vdr-audit-detail .bt-num { width:70px; }
.pg-vdr-audit-detail .bt-check { width:24px; height:24px; cursor:pointer; }
.pg-vdr-audit-detail .rank-pill { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; background:var(--vdr-primary-bg); color:var(--vdr-primary-dark); }

/* ── Findings ── */
.pg-vdr-audit-detail .finding-card { border:1px solid var(--color-divider); border-radius:8px; margin-bottom:10px; overflow:hidden; background: var(--color-bg-white); }
.pg-vdr-audit-detail .finding-card.sev-nc { border-left:4px solid var(--vdr-nc); }
.pg-vdr-audit-detail .finding-card.sev-observation { border-left:4px solid var(--vdr-obs); }
.pg-vdr-audit-detail .finding-card.sev-good_practice { border-left:4px solid var(--vdr-gp); }
.pg-vdr-audit-detail .finding-hdr { padding:12px 16px; background: var(--color-bg-white); display:flex; align-items:flex-start; gap:12px; cursor:pointer; transition:background 0.15s; }
.pg-vdr-audit-detail .finding-hdr:hover { background:var(--color-bg); }
.pg-vdr-audit-detail .finding-num { font-size:11px; font-weight:700; color:var(--color-text-muted); min-width:28px; padding-top:2px; }
.pg-vdr-audit-detail .finding-meta { flex:1; min-width:0; }
.pg-vdr-audit-detail .finding-cat { font-size:10px; color:var(--color-text-muted); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; }
.pg-vdr-audit-detail .finding-title-text { font-size:13px; font-weight:700; color:var(--color-text); }
.pg-vdr-audit-detail .finding-desc-preview { font-size:12px; color:var(--color-text-secondary); margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pg-vdr-audit-detail .finding-hdr-right { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
.pg-vdr-audit-detail .finding-body { display:none; border-top:1px solid var(--color-border-light); }
.pg-vdr-audit-detail .finding-body.open { display:block; }
.pg-vdr-audit-detail .finding-section { padding:14px 16px; border-bottom:1px solid var(--color-bg); }
.pg-vdr-audit-detail .finding-section:last-child { border-bottom:none; }
.pg-vdr-audit-detail .fs-label { font-size:10px; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.pg-vdr-audit-detail .pif-chips { display:flex; flex-wrap:wrap; gap:5px; }
.pg-vdr-audit-detail .pif-chip {
    padding:4px 10px; border:1.5px solid var(--color-border); border-radius:14px;
    font-size:11px; font-weight:600; color:var(--color-text-secondary); background: var(--color-bg-white);
    cursor:pointer; transition:all 0.15s; user-select:none;
}
.pg-vdr-audit-detail .pif-chip:hover { border-color:var(--vdr-primary); color:var(--vdr-primary); }
.pg-vdr-audit-detail .pif-chip.on { background:var(--vdr-primary); border-color:var(--vdr-primary); color:white; }

/* Finding actions bar */
.pg-vdr-audit-detail .finding-actions { padding:10px 16px; background:var(--color-bg); border-top:1px solid var(--color-border-light); display:flex; gap:8px; align-items:center; }
.pg-vdr-audit-detail .btn-finding-edit { background:var(--vdr-primary); color:white; border:none; padding:6px 14px; border-radius:5px; font-size:12px; font-weight:600; cursor:pointer; }
.pg-vdr-audit-detail .btn-finding-edit:hover { background:var(--vdr-primary-dark); }
.pg-vdr-audit-detail .btn-finding-close { background:none; border:1px solid var(--color-border); color:var(--color-text-secondary); padding:6px 12px; border-radius:5px; font-size:12px; font-weight:600; cursor:pointer; }
.pg-vdr-audit-detail .btn-finding-close:hover { background:var(--vdr-gp-bg); border-color:var(--vdr-gp); color:var(--vdr-gp); }
.pg-vdr-audit-detail .btn-finding-del { background:none; border:1px solid var(--color-danger-border); color:var(--vdr-nc); padding:6px 12px; border-radius:5px; font-size:12px; font-weight:600; cursor:pointer; margin-left:auto; }
.pg-vdr-audit-detail .btn-finding-del:hover { background:var(--vdr-nc-bg); }

/* Add finding btn */
.pg-vdr-audit-detail .add-finding-btn { width:100%; padding:12px; border:2px dashed var(--color-border); border-radius:8px; background:none; cursor:pointer; font-size:13px; color:var(--vdr-primary); font-weight:600; transition:all 0.15s; margin-top:4px; }
.pg-vdr-audit-detail .add-finding-btn:hover { border-color:var(--vdr-primary); background:var(--vdr-primary-bg); }

/* ── Finding modal ── */
.pg-vdr-audit-detail .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:500; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; }
.pg-vdr-audit-detail .modal-overlay.open { display:flex; }
.pg-vdr-audit-detail .modal { background: var(--color-bg-white); border-radius:12px; width:100%; max-width:700px; box-shadow:0 8px 32px rgba(0,0,0,0.2); max-height:calc(100vh - 80px); overflow-y:auto; }
.pg-vdr-audit-detail .modal-hdr { padding:16px 22px; border-bottom:1px solid var(--color-divider); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background: var(--color-bg-white); z-index:10; }
.pg-vdr-audit-detail .modal-title { font-size:15px; font-weight:700; color:var(--vdr-primary-dark); }
.pg-vdr-audit-detail .modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--color-text-muted); padding:2px 6px; border-radius:4px; }
.pg-vdr-audit-detail .modal-close:hover { background:var(--color-border-light); }
.pg-vdr-audit-detail .modal-body { padding:20px 22px; }
.pg-vdr-audit-detail .modal-footer { padding:14px 22px; border-top:1px solid var(--color-border-light); display:flex; gap:10px; background:var(--color-bg); border-radius:0 0 12px 12px; justify-content:flex-end; }
.pg-vdr-audit-detail .modal-msg { font-size:13px; padding:8px 12px; border-radius:6px; margin-bottom:12px; display:none; }
.pg-vdr-audit-detail .modal-msg.err { background:var(--vdr-nc-bg); color:var(--vdr-nc); display:block; }
.pg-vdr-audit-detail .mfg { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.pg-vdr-audit-detail .mfg label { font-size:11px; font-weight:700; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.5px; }
.pg-vdr-audit-detail .mfg label .req { color:var(--vdr-nc); }
.pg-vdr-audit-detail .mfg select, .pg-vdr-audit-detail .mfg input, .pg-vdr-audit-detail .mfg textarea { padding:8px 10px; border:1px solid var(--color-border); border-radius:6px; font-size:13px; font-family:'Segoe UI',sans-serif; background: var(--color-bg-white); width:100%; box-sizing:border-box; }
.pg-vdr-audit-detail .mfg select:focus, .pg-vdr-audit-detail .mfg input:focus, .pg-vdr-audit-detail .mfg textarea:focus { outline:none; border-color:var(--vdr-primary); }
.pg-vdr-audit-detail .mfg textarea { resize:vertical; min-height:80px; line-height:1.5; }
.pg-vdr-audit-detail .mfg-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pg-vdr-audit-detail .mfg-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.pg-vdr-audit-detail .modal-div { font-size:10px; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.8px; padding-bottom:8px; border-bottom:1px solid var(--color-border-light); margin:16px 0 12px; }
.pg-vdr-audit-detail .pif-chips-modal { display:flex; flex-wrap:wrap; gap:6px; }
.pg-vdr-audit-detail .channel-chips { display:flex; flex-wrap:wrap; gap:5px; }
.pg-vdr-audit-detail .btn-modal-save { background:var(--vdr-primary); color:white; border:none; padding:8px 22px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.pg-vdr-audit-detail .btn-modal-save:hover { background:var(--vdr-primary-dark); }
.pg-vdr-audit-detail .btn-modal-cancel { background:none; border:1px solid var(--color-border); color:var(--color-text-secondary); padding:8px 16px; border-radius:6px; font-size:13px; cursor:pointer; }
.pg-vdr-audit-detail .btn-modal-cancel:hover { background:var(--color-border-light); }

/* ── Skills ── */
.pg-vdr-audit-detail .skills-table { width:100%; border-collapse:collapse; }
.pg-vdr-audit-detail .skills-table th { font-size:11px; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; padding:8px 12px; border-bottom:2px solid var(--color-border-light); text-align:left; }
.pg-vdr-audit-detail .skills-table td { padding:10px 12px; border-bottom:1px solid var(--color-bg); font-size:13px; vertical-align:middle; }
.pg-vdr-audit-detail .skills-table tr:last-child td { border-bottom:none; }
.pg-vdr-audit-detail .skills-table .item-num { color:var(--color-text-muted); font-size:11px; width:30px; }
.pg-vdr-audit-detail .score-btns { display:flex; gap:4px; }
.pg-vdr-audit-detail .score-btn {
    padding:4px 12px; border:1.5px solid var(--color-border); border-radius:6px;
    font-size:12px; font-weight:700; cursor:pointer; background: var(--color-bg-white);
    color:var(--color-text-secondary); transition:all 0.15s;
}
.pg-vdr-audit-detail .score-btn:hover { border-color:var(--vdr-primary); }
.pg-vdr-audit-detail .score-btn.s3 { }
.pg-vdr-audit-detail .score-btn.s2 { }
.pg-vdr-audit-detail .score-btn.s1 { }
.pg-vdr-audit-detail .score-btn.sna { }
.pg-vdr-audit-detail .score-btn.sel.s3 { background:var(--vdr-gp-bg); border-color:var(--vdr-gp); color:var(--vdr-gp); }
.pg-vdr-audit-detail .score-btn.sel.s2 { background:var(--vdr-primary-bg); border-color:var(--vdr-primary); color:var(--vdr-primary); }
.pg-vdr-audit-detail .score-btn.sel.s1 { background:var(--vdr-obs-bg); border-color:var(--vdr-obs); color:var(--vdr-obs); }
.pg-vdr-audit-detail .score-btn.sel.sna { background:var(--color-border-light); border-color:var(--color-text-muted); color:var(--color-text-muted); }
.pg-vdr-audit-detail .skills-summary { background:var(--color-bg); border-radius:8px; padding:16px 20px; margin-bottom:16px; display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.pg-vdr-audit-detail .skills-score-big { font-size:28px; font-weight:700; color:var(--vdr-primary-dark); }
.pg-vdr-audit-detail .skills-score-sub { font-size:12px; color:var(--color-text-muted); margin-top:2px; }
.pg-vdr-audit-detail .safe-chips { display:flex; gap:8px; }
.pg-vdr-audit-detail .safe-chip {
    padding:6px 16px; border:2px solid var(--color-border); border-radius:8px;
    font-size:12px; font-weight:700; cursor:pointer; background: var(--color-bg-white); color:var(--color-text-secondary); transition:all 0.15s;
}
.pg-vdr-audit-detail .safe-chip:hover { border-color:var(--vdr-primary); }
.pg-vdr-audit-detail .safe-chip.yes-sel { background:var(--vdr-gp-bg); border-color:var(--vdr-gp); color:var(--vdr-gp); }
.pg-vdr-audit-detail .safe-chip.no-sel { background:var(--vdr-nc-bg); border-color:var(--vdr-nc); color:var(--vdr-nc); }
.pg-vdr-audit-detail .safe-chip.marg-sel { background:var(--vdr-obs-bg); border-color:var(--vdr-obs); color:var(--vdr-obs); }

/* ── Report tab ── */
.pg-vdr-audit-detail .report-action-card { background: var(--color-bg-white); border:1px solid var(--color-divider); border-radius:10px; padding:24px; margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.pg-vdr-audit-detail .report-action-title { font-size:14px; font-weight:700; color:var(--vdr-primary-dark); margin-bottom:16px; }
.pg-vdr-audit-detail .drive-input-row { display:flex; gap:10px; align-items:center; }
.pg-vdr-audit-detail .drive-input-row input { flex:1; padding:8px 11px; border:1px solid var(--color-border); border-radius:6px; font-size:13px; font-family:'Segoe UI',sans-serif; }
.pg-vdr-audit-detail .drive-input-row input:focus { outline:none; border-color:var(--vdr-primary); }

/* ── Status lifecycle ── */
.pg-vdr-audit-detail .lifecycle-card { background: var(--color-bg-white); border:1px solid var(--color-divider); border-radius:10px; padding:20px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.pg-vdr-audit-detail .lifecycle-title { font-size:13px; font-weight:700; color:var(--color-text-secondary); margin-bottom:14px; text-transform:uppercase; letter-spacing:0.5px; }
.pg-vdr-audit-detail .lifecycle-steps { display:flex; align-items:center; gap:0; margin-bottom:20px; }
.pg-vdr-audit-detail .lc-step { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
.pg-vdr-audit-detail .lc-dot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; border:2px solid var(--color-border); background: var(--color-bg-white); color:var(--color-text-muted); }
.pg-vdr-audit-detail .lc-dot.done { background:var(--vdr-primary); border-color:var(--vdr-primary); color:white; }
.pg-vdr-audit-detail .lc-dot.active { background:var(--vdr-primary-bg); border-color:var(--vdr-primary); color:var(--vdr-primary); }
.pg-vdr-audit-detail .lc-label { font-size:10px; font-weight:700; text-transform:uppercase; color:var(--color-text-muted); }
.pg-vdr-audit-detail .lc-label.done, .pg-vdr-audit-detail .lc-label.active { color:var(--vdr-primary); }
.pg-vdr-audit-detail .lc-line { flex:1; height:2px; background:var(--color-border); margin-bottom:18px; }
.pg-vdr-audit-detail .lc-line.done { background:var(--vdr-primary); }
.pg-vdr-audit-detail .status-actions { display:flex; gap:10px; flex-wrap:wrap; }
.pg-vdr-audit-detail .btn-status { padding:9px 20px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all 0.15s; }
.pg-vdr-audit-detail .btn-to-submitted { background:var(--vdr-primary); color:white; }
.pg-vdr-audit-detail .btn-to-submitted:hover { background:var(--vdr-primary-dark); }
.pg-vdr-audit-detail .btn-to-closed { background:var(--vdr-gp); color:white; }
.pg-vdr-audit-detail .btn-to-closed:hover { background:#1b5e20; }
.pg-vdr-audit-detail .btn-to-draft { background:none; border:1px solid var(--color-border); color:var(--color-text-secondary); }
.pg-vdr-audit-detail .btn-to-draft:hover { background:var(--color-border-light); }

/* ── Empty / loading ── */
.pg-vdr-audit-detail .empty-findings { text-align:center; padding:40px 20px; color:var(--color-text-muted); font-size:13px; }
.pg-vdr-audit-detail .empty-findings .ei { font-size:32px; margin-bottom:10px; }
.pg-vdr-audit-detail .loading { text-align:center; padding:40px; color:var(--color-text-muted); font-size:13px; }

/* ---- nm-analytics-vessel.html (scope: .mk-module-nm) ---- */

        .mk-module-nm * { box-sizing: border-box; }

        body.mk-module-nm {
            margin: 0;
            padding: 0;
            font-family: var(--font-family, 'Inter', 'Segoe UI', Arial, sans-serif);
            background: var(--color-bg);
            color: var(--color-text);
        }

        .mk-module-nm .page-wrapper { display: flex; min-height: 100vh; }
        .mk-module-nm #sidebar-container { flex-shrink: 0; }

        .mk-module-nm .main-content {
            flex: 1;
            padding: 32px;
            overflow-x: auto;
        }

        .mk-module-nm .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .mk-module-nm .page-header h1 {
            font-size: 22px;
            font-weight: 600;
            color: var(--mk-primary-dark);
            margin: 0;
        }

        /* ── Tab bar ── */
        .mk-module-nm .tab-bar {
            display: flex;
            gap: 4px;
            margin-bottom: 24px;
            border-bottom: 2px solid var(--color-border);
            flex-wrap: wrap;
        }

        .mk-module-nm .tab-bar a {
            padding: 10px 18px;
            font-size: 13px;
            font-weight: 500;
            color: var(--color-text-muted);
            text-decoration: none;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
            transition: color 0.2s;
        }

        .mk-module-nm .tab-bar a:hover { color: var(--mk-primary); }

        .mk-module-nm .tab-bar a.active {
            color: var(--mk-primary);
            border-bottom-color: var(--mk-primary);
            font-weight: 600;
        }

        /* ── Vessel selector ── */
        .mk-module-nm .vessel-selector {
            background: var(--color-bg-white);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            padding: 16px 20px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        .mk-module-nm .vessel-selector label {
            font-size: 12px;
            font-weight: 600;
            color: var(--color-text-secondary);
            text-transform: uppercase;
        }

        .mk-module-nm .vessel-selector select {
            border: 1px solid var(--color-border);
            border-radius: 6px;
            padding: 8px 12px;
            font-size: 14px;
            font-family: inherit;
            color: var(--color-text);
            min-width: 200px;
        }

        .mk-module-nm .vessel-selector select:focus {
            outline: none;
            border-color: var(--mk-primary);
        }

        /* ── KPI row ── */
        .mk-module-nm .kpi-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 14px;
            margin-bottom: 24px;
        }

        .mk-module-nm .kpi-card {
            background: var(--color-bg-white);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .mk-module-nm .kpi-card .kpi-value {
            font-size: 26px;
            font-weight: 700;
            color: var(--mk-primary-dark);
        }

        .mk-module-nm .kpi-card .kpi-label {
            font-size: 11px;
            color: var(--color-text-muted);
            text-transform: uppercase;
        }

        .mk-module-nm .kpi-card.extreme .kpi-value { color: var(--color-risk-extreme); }
        .mk-module-nm .kpi-card.high    .kpi-value { color: var(--color-risk-high); }
        .mk-module-nm .kpi-card.open    .kpi-value { color: var(--mk-primary); }

        /* ── Charts ── */
        .mk-module-nm .charts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 24px;
        }

        .mk-module-nm .chart-card {
            background: var(--color-bg-white);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            padding: 20px;
        }

        .mk-module-nm .chart-card.wide {
            grid-column: 1 / -1;
        }

        .mk-module-nm .chart-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--mk-primary-dark);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin: 0 0 16px 0;
        }

        .mk-module-nm .chart-wrap {
            position: relative;
            height: 240px;
        }

        .mk-module-nm .chart-wrap.tall { height: 300px; }

        .mk-module-nm .no-data {
            text-align: center;
            padding: 48px;
            color: var(--color-text-muted);
            font-size: 14px;
        }

        /* ── Vessel comparison table ── */
        .mk-module-nm .compare-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .mk-module-nm .compare-table th {
            background: var(--color-border-light);
            padding: 10px 12px;
            text-align: left;
            font-size: 11px;
            font-weight: 600;
            color: var(--color-text-secondary);
            text-transform: uppercase;
            border-bottom: 1px solid var(--color-border);
        }

        .mk-module-nm .compare-table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--color-border-light);
        }

        .mk-module-nm .compare-table tr.highlight {
            background: var(--mk-primary-light);
            font-weight: 600;
        }

        .mk-module-nm .badge {
            display: inline-block;
            padding: 3px 9px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .mk-module-nm .band-low { background:var(--color-risk-low-bg); color:var(--color-risk-low); }
        .mk-module-nm .band-medium { background:var(--color-risk-medium-bg); color:var(--color-risk-medium); }
        .mk-module-nm .band-high { background:var(--color-risk-high-bg); color:var(--color-risk-high); }
        .mk-module-nm .band-extreme { background:var(--color-risk-extreme-bg); color:var(--color-risk-extreme); }
    

/* ---- vision.html (scope: .pg-vision) ---- */

  /* Local aliases onto marinekpi.css's shared --brand-* tokens — same
     convention as landing.html, so this page reskins from one source. */
  .pg-vision {
    --paper: var(--brand-paper);
    --surface: var(--brand-surface);
    --ink: var(--brand-ink);
    --muted: var(--brand-muted);
    --line: var(--brand-line);
    --line-soft: var(--brand-line-soft);
    --line-strong: var(--brand-line-strong);
    --gold: var(--brand-gold);
    --rust: #F0964F;
    --cyan: #44C9E4;
    --cyan-hover: var(--brand-cyan-hover);
    --cyan-dim: rgba(43,181,200,0.4);
    --radius-btn: 3px;
    --max: 1140px;
    --max-narrow: 1000px;
  }

  .pg-vision * { margin: 0; padding: 0; box-sizing: border-box; }
  .pg-vision { scroll-behavior: smooth; }

  body.pg-vision {
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    background-image:
      linear-gradient(rgba(234,241,250,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(234,241,250,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    padding: 0;
  }

  .pg-vision h1, .pg-vision h2, .pg-vision h3, .pg-vision h4 { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--ink); }
  .pg-vision a { color: var(--cyan); text-decoration: none; }
  .pg-vision a:hover, .pg-vision a:focus-visible { color: var(--cyan-hover); }
  .pg-vision :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

  .pg-vision .wrap-narrow { max-width: var(--max-narrow); margin: 0 auto; padding-left: 40px; padding-right: 40px; }

  .pg-vision .btn {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--radius-btn);
    padding: 13px 28px;
    text-decoration: none;
    border: 1px solid var(--cyan);
    cursor: pointer;
  }
  .pg-vision .btn-primary { background: var(--cyan); color: var(--paper); }
  .pg-vision .btn-primary:hover, .pg-vision .btn-primary:focus-visible { background: var(--cyan-hover); border-color: var(--cyan-hover); color: var(--paper); }
  .pg-vision .btn-pill { background: var(--cyan); color: var(--paper); border-radius: var(--radius-btn); padding: 8px 18px; font-size: 12px; }
  .pg-vision .btn-pill:hover, .pg-vision .btn-pill:focus-visible { background: var(--cyan-hover); color: var(--paper); }

  /* ---------- Nav (identical to landing.html) ---------- */
  .pg-vision .site-nav {
    margin: 20px 20px 0;
    border: 1.5px solid var(--line-strong);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
    background: rgba(15,29,54,0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .pg-vision .corner { position: absolute; width: 10px; height: 10px; border: 0 solid var(--cyan); }
  .pg-vision .corner.tl { top: -5px; left: -5px; border-left-width: 1.5px; border-top-width: 1.5px; }
  .pg-vision .corner.tr { top: -5px; right: -5px; border-right-width: 1.5px; border-top-width: 1.5px; }
  .pg-vision .corner.bl { bottom: -5px; left: -5px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
  .pg-vision .corner.br { bottom: -5px; right: -5px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

  .pg-vision .brand { display: flex; align-items: center; gap: 12px; }
  .pg-vision .brand-name { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700; letter-spacing: 0.02em; }
  .pg-vision .brand-tagline { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

  .pg-vision .nav-links { display: flex; align-items: center; gap: 22px; font-family: 'DM Mono', monospace; flex-wrap: wrap; }
  .pg-vision .section-links { display: flex; gap: 22px; }
  .pg-vision .nav-links a:not(.btn-pill) { font-size: 11.5px; color: var(--muted); text-decoration: none; }
  .pg-vision .nav-links a:not(.btn-pill):hover, .pg-vision .nav-links a:not(.btn-pill):focus-visible { color: var(--ink); }
  .pg-vision .nav-toggle { display: none; }

  /* ---------- Hero ---------- */
  .pg-vision .hero { position: relative; padding: 64px 40px 40px; }
  .pg-vision .hero-inner { max-width: var(--max-narrow); margin: 0 auto; position: relative; }
  .pg-vision .hero-copy { max-width: 640px; position: relative; z-index: 1; }
  .pg-vision .fig-caption {
    font-family: 'DM Mono', monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 20px;
  }
  .pg-vision .hero h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.18;
    margin-bottom: 22px;
  }
  .pg-vision .hero-body {
    font-size: 16px;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.8;
    max-width: 620px;
  }

  @media (min-width: 900px) { .pg-vision .hero { padding: 76px 40px 48px; } }

  /* ---------- Log panels (reused from landing.html's philosophy block) ---------- */
  .pg-vision .log-entry { max-width: var(--max-narrow); margin: 0 auto; padding: 0 40px 40px; }
  .pg-vision .log-panel { border: 1px solid rgba(234,241,250,0.18); padding: 36px 24px 32px; position: relative; background: rgba(234,241,250,0.03); }
  @media (min-width: 640px) { .pg-vision .log-panel { padding: 36px 40px 32px; } }
  .pg-vision .log-tab {
    position: absolute;
    top: -11px; left: 24px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rust);
    background: var(--paper);
    padding: 2px 10px;
  }
  .pg-vision .log-body { font-size: 15.5px; font-weight: 300; color: var(--ink); line-height: 1.85; margin-bottom: 0; max-width: 820px; }
  .pg-vision .log-body + .log-body { margin-top: 16px; }
  .pg-vision .log-points { display: grid; grid-template-columns: 1fr; gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 28px; }
  @media (min-width: 720px) { .pg-vision .log-points { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
  .pg-vision .log-point-label {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 8px;
  }
  .pg-vision .log-point-body { font-size: 13px; color: var(--muted); line-height: 1.7; }
  .pg-vision .log-byline { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--cyan); margin-top: 18px; }

  /* ---------- Footer (identical to landing.html) ---------- */
  .pg-vision .site-footer { background: var(--surface); padding: 40px 40px; text-align: center; border-top: 1.5px solid var(--line); }
  .pg-vision .footer-line { font-family: 'Playfair Display', serif; font-size: 19px; font-style: italic; margin-bottom: 20px; }
  .pg-vision .footer-cta { margin-bottom: 28px; }
  .pg-vision .footer-credit { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); }
  .pg-vision .footer-credit strong { color: var(--ink); }

  /* ---------- Small screens: nav collapses ---------- */
  @media (max-width: 720px) {
    .pg-vision .nav-links { gap: 14px; }
    .pg-vision .nav-links .section-links { display: none; width: 100%; }
    .pg-vision .site-nav.is-open .section-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      order: 3;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }
    .pg-vision .nav-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px; height: 32px;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: var(--radius-btn);
      color: var(--ink);
    }
  }

  /* ── LANGUAGE SWITCHER (shared structure from i18n-public.js) ── */
  .pg-vision .mk-lang-switch { position: relative; }
  .pg-vision .mk-lang-btn {
    font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500;
    letter-spacing: 0.08em; color: var(--muted); background: transparent;
    border: 1px solid var(--line); border-radius: var(--radius-btn);
    padding: 5px 10px; cursor: pointer; transition: color 0.2s, border-color 0.2s;
  }
  .pg-vision .mk-lang-btn:hover { color: var(--cyan); border-color: var(--cyan); }
  .pg-vision .mk-lang-menu {
    display: none; position: absolute; top: 32px; right: 0;
    min-width: 130px; background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--radius-btn); box-shadow: 0 12px 30px rgba(0,0,0,0.5); z-index: 150;
    overflow: hidden; padding: 4px 0;
  }
  .pg-vision .mk-lang-switch.open .mk-lang-menu { display: block; }
  .pg-vision .mk-lang-item {
    display: block; width: 100%; text-align: left; padding: 8px 14px;
    font-size: 13px; background: none; border: none; cursor: pointer; color: var(--ink);
    font-family: 'DM Sans', sans-serif;
  }
  .pg-vision .mk-lang-item:hover { background: rgba(234,241,250,0.06); }
  .pg-vision .mk-lang-item.active { color: var(--cyan); font-weight: 500; }

/* ---- login.html (scope: .pg-login) ---- */

        .pg-login {
            /* Same local aliases as landing.html/platform-overview.html, onto
               marinekpi.css's shared "Admiralty Chart" --brand-* tokens —
               login.html now matches that dark theme instead of the older
               navy/white-card look. */
            --paper: var(--brand-paper);
            --surface: var(--brand-surface);
            --ink: var(--brand-ink);
            --muted: var(--brand-muted);
            --line: var(--brand-line);
            --line-strong: var(--brand-line-strong);
            --gold: var(--brand-gold);
            /* Brightened from --brand-rust/--brand-cyan — same override as
               landing.html/platform-overview.html, kept local rather than in
               marinekpi.css since this page is the only other reader of
               --brand-cyan, and it now sits on the same dark background. */
            --cyan: #44C9E4;
            --cyan-hover: var(--brand-cyan-hover);
            --cyan-dim: rgba(68,201,228,0.35);
            --radius-btn: 3px;
            /* Local override of marinekpi.css's shared --brand-* web fonts
               (DM Sans/Playfair Display/DM Mono, all Google Fonts) with
               system stacks — this page is the one ships hit first, on the
               slowest links, and can't afford a render-blocking external
               font fetch before the login form even appears. landing.html/
               platform-overview.html are left on the real web fonts since
               those are marketing pages viewed over normal internet. */
            --brand-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
            --brand-heading-font: Georgia, 'Times New Roman', serif;
            --brand-mono-font: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
        }
        .pg-login * { box-sizing: border-box; margin: 0; padding: 0; }
        body.pg-login {
            font-family: var(--brand-font);
            background: var(--paper);
            background-image:
                linear-gradient(rgba(234,241,250,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(234,241,250,0.04) 1px, transparent 1px);
            background-size: 40px 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 0; /* overrides marinekpi.css's shared body padding-bottom
                           (reserved for the internal app's vessel-chat FAB,
                           which doesn't exist on this public page) */
        }

        .pg-login .login-wrap {
            width: 100%;
            max-width: 440px;
            padding: 24px;
            position: relative;
            z-index: 1;
        }

        .pg-login .login-card {
            background: var(--surface);
            border: 1px solid var(--line-strong);
            border-radius: var(--radius-btn);
            box-shadow: 0 22px 50px rgba(0,0,0,0.5);
            padding: 44px 40px 36px;
            border-top: 3px solid var(--gold);
            position: relative;
        }
        .pg-login .corner { position: absolute; width: 10px; height: 10px; border: 0 solid var(--cyan); }
        .pg-login .corner.tl { top: -5px; left: -5px; border-left-width: 1.5px; border-top-width: 1.5px; }
        .pg-login .corner.tr { top: -5px; right: -5px; border-right-width: 1.5px; border-top-width: 1.5px; }
        .pg-login .corner.bl { bottom: -5px; left: -5px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
        .pg-login .corner.br { bottom: -5px; right: -5px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

        /* ── LOGO ── */
        .pg-login .logo { text-align: center; margin-bottom: 36px; }
        .pg-login .logo-badge-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
        .pg-login .brand-name {
            font-family: var(--brand-heading-font);
            font-size: 22px; font-weight: 700;
            letter-spacing: 0.02em;
            color: var(--ink);
            display: block; margin-bottom: 6px;
        }
        .pg-login .brand-sub {
            font-family: var(--brand-mono-font);
            font-size: 9.5px; letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ── FORM ── */
        .pg-login .field { margin-bottom: 20px; }
        .pg-login .field label {
            display: block; font-family: var(--brand-mono-font); font-size: 11px; font-weight: 500;
            color: var(--muted); text-transform: uppercase;
            letter-spacing: 0.08em; margin-bottom: 8px;
        }
        .pg-login .field input {
            width: 100%; padding: 13px 15px;
            border: 1.5px solid var(--line-strong);
            border-radius: var(--radius-btn); font-size: 15px;
            font-family: var(--brand-font);
            background: rgba(234,241,250,0.03);
            color: var(--ink);
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .pg-login .field input::placeholder { color: var(--muted); opacity: 0.7; }
        .pg-login .field input:focus {
            outline: none;
            border-color: var(--cyan);
            box-shadow: 0 0 0 3px var(--cyan-dim);
        }

        .pg-login .login-btn {
            width: 100%; padding: 14px;
            background: var(--cyan); color: var(--paper);
            border: 1px solid var(--cyan); border-radius: var(--radius-btn);
            font-size: 13px; font-weight: 500;
            font-family: var(--brand-mono-font); letter-spacing: 0.02em;
            cursor: pointer; transition: background 0.2s, border-color 0.2s;
            margin-top: 4px;
        }
        .pg-login .login-btn:hover { background: var(--cyan-hover); border-color: var(--cyan-hover); }
        .pg-login .login-btn:disabled { background: var(--line); border-color: var(--line); color: var(--muted); cursor: not-allowed; }

        .pg-login .error-msg {
            background: rgba(255,95,87,0.12); color: #ff9a91;
            padding: 11px 14px; border-radius: var(--radius-btn);
            font-size: 13px; margin-top: 14px; display: none;
            border-left: 3px solid #ff5f57;
        }
        .pg-login .error-msg.show { display: block; }

        .pg-login .forgot-link {
            text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted);
        }
        .pg-login .forgot-link a {
            color: var(--cyan); text-decoration: none; cursor: pointer; font-weight: 500;
        }
        .pg-login .forgot-link a:hover { color: var(--cyan-hover); text-decoration: underline; }

        .pg-login .back-link { text-align: center; margin-top: 14px; }
        .pg-login .back-link a {
            font-size: 13px; color: var(--muted); text-decoration: none;
            transition: color 0.2s;
        }
        .pg-login .back-link a:hover { color: var(--cyan); }

        .pg-login .footer-text {
            text-align: center; font-family: var(--brand-mono-font); font-size: 10.5px;
            color: var(--muted); margin-top: 24px;
        }

        /* ── MODAL ── */
        .pg-login .modal-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(6,10,20,0.85); z-index: 100;
            align-items: center; justify-content: center;
        }
        .pg-login .modal-overlay.show { display: flex; }
        .pg-login .modal {
            background: var(--surface); border: 1px solid var(--line-strong);
            border-radius: var(--radius-btn); padding: 36px;
            width: 100%; max-width: 400px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            text-align: center; border-top: 3px solid var(--cyan);
        }
        .pg-login .modal .icon { font-size: 38px; margin-bottom: 14px; }
        .pg-login .modal h3 {
            font-size: 19px; font-weight: 700;
            color: var(--ink); margin-bottom: 10px;
            font-family: var(--brand-heading-font);
        }
        .pg-login .modal p { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 8px; }
        .pg-login .modal .contact-box {
            background: rgba(234,241,250,0.03); border-radius: var(--radius-btn); padding: 16px;
            margin: 18px 0; font-size: 13px; color: var(--ink);
            line-height: 1.8; border-left: 3px solid var(--cyan);
            text-align: left;
        }
        .pg-login .modal .contact-box strong { color: var(--ink); font-weight: 500; }
        .pg-login .modal-close-btn {
            background: var(--cyan); color: var(--paper); border: 1px solid var(--cyan);
            padding: 11px 32px; border-radius: var(--radius-btn); font-size: 13px;
            font-weight: 500; cursor: pointer; margin-top: 4px;
            font-family: var(--brand-mono-font); letter-spacing: 0.02em; transition: background 0.2s, border-color 0.2s;
        }
        .pg-login .modal-close-btn:hover { background: var(--cyan-hover); border-color: var(--cyan-hover); }

        /* ── LANGUAGE SWITCHER (shared structure from i18n-public.js, styled
           locally per page like everything else on this brand palette) ── */
        .pg-login .mk-lang-switch { position: relative; }
        .pg-login .mk-lang-btn {
            font-family: var(--brand-mono-font); font-size: 11px; font-weight: 500;
            letter-spacing: 0.08em; color: var(--muted); background: transparent;
            border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
            padding: 5px 12px; cursor: pointer; transition: color 0.2s, border-color 0.2s;
        }
        .pg-login .mk-lang-btn:hover { color: var(--cyan); border-color: var(--cyan); }
        .pg-login .mk-lang-menu {
            display: none; position: absolute; top: 32px; left: 50%; transform: translateX(-50%);
            min-width: 130px; background: var(--surface); border: 1px solid var(--line-strong);
            border-radius: var(--radius-btn); box-shadow: 0 12px 30px rgba(0,0,0,0.5); z-index: 50;
            overflow: hidden; padding: 4px 0;
        }
        .pg-login .mk-lang-switch.open .mk-lang-menu { display: block; }
        .pg-login .mk-lang-item {
            display: block; width: 100%; text-align: left; padding: 8px 14px;
            font-size: 13px; background: none; border: none; cursor: pointer; color: var(--ink);
        }
        .pg-login .mk-lang-item:hover { background: rgba(234,241,250,0.06); }
        .pg-login .mk-lang-item.active { color: var(--cyan); font-weight: 500; }
    

/* ---- intelligence.html (scope: .mk-module-intel) ---- */

        /* ── Top chrome — plain flow, no sticky needed ──
           Table has its own scroll container below, so everything
           above it stays visible naturally. ── */
        .mk-module-intel .intel-sticky-top {
            background: var(--color-bg);
            padding-bottom: 6px;
        }

        /* ── Toolbar row inside sticky block ── */
        .mk-module-intel .intel-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px 8px;
            border-bottom: 1px solid var(--color-border-light);
        }
        .mk-module-intel .intel-toolbar h1 {
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: var(--color-text);
            margin: 0;
        }

        /* ── Module selector ── */
        .mk-module-intel .intel-module-bar {
            display: flex;
            gap: 8px;
            padding: 10px 20px 6px;
            flex-wrap: wrap;
            border-bottom: 1px solid var(--color-border-light);
        }
        .mk-module-intel .intel-module-btn {
            padding: 5px 16px;
            border-radius: 20px;
            border: 1px solid var(--color-border);
            background: var(--color-bg-white);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            color: var(--color-text-secondary);
            transition: all 0.15s;
        }
        .mk-module-intel .intel-module-btn.active {
            background: var(--mk-primary);
            color: white;
            border-color: var(--mk-primary);
        }
        .mk-module-intel .intel-module-btn.coming-soon {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .mk-module-intel .intel-module-btn.coming-soon:hover::after {
            content: ' — Coming Soon';
            font-weight: 400;
            font-size: 11px;
        }

        /* ── KPI strip ── */
        .mk-module-intel .intel-kpi-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 10px 20px 6px;
        }
        .mk-module-intel .intel-kpi-card {
            background: var(--color-bg-white);
            border-radius: 8px;
            border: 1px solid var(--color-divider);
            box-shadow: var(--shadow-card);
            padding: 10px 16px;
        }
        .mk-module-intel .intel-kpi-num { font-size: 22px; font-weight: 700; color: var(--mk-primary); }
        .mk-module-intel .intel-kpi-num.red { color: var(--color-danger); }
        .mk-module-intel .intel-kpi-num.amber { color: var(--color-warning); }
        .mk-module-intel .intel-kpi-lbl { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

        /* ── Filter bar inside sticky block ── */
        .mk-module-intel .intel-filter-bar {
            padding: 8px 20px 4px;
            display: flex;
            align-items: flex-end;
            gap: 12px;
            flex-wrap: wrap;
            border-top: 1px solid var(--color-border-light);
            background: var(--color-bg);
        }
        .mk-module-intel .intel-results-bar {
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
            padding: 2px 20px 4px;
        }
        .mk-module-intel .intel-results-bar strong { color: var(--color-text); }

        /* ── Filter label ── */
        .mk-module-intel .mk-filter-label {
            font-size: 11px; font-weight: 700;
            color: var(--color-text-secondary);
            text-transform: uppercase; letter-spacing: 0.5px;
        }

        /* ── Search icon ── */
        .mk-module-intel .search-icon {
            position: absolute; left: 9px; top: 50%;
            transform: translateY(-50%);
            color: var(--color-text-muted); font-size: 14px;
            pointer-events: none;
        }

        /* ── Table wrapper — own scroll container, same pattern as TDS ──
           max-height bounds the table to the visible viewport area.
           overflow-y:auto gives it its own scrollbar.
           thead sticky top:0 works within this container. ── */
        .mk-module-intel .intel-table-wrap {
            background: var(--color-bg-white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-border);
            margin: 8px 0 24px;
            overflow-x: auto;
            overflow-y: auto;
            max-height: calc(100vh - 320px);
        }

        .mk-module-intel .intel-table-wrap table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--font-size-base);
        }
        .mk-module-intel .intel-table-wrap thead th {
            position: sticky;
            top: 0;
            z-index: 5;
            background: var(--color-bg);
            padding: 10px 14px;
            text-align: left;
            font-size: var(--font-size-sm);
            font-weight: 700;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            border-bottom: 2px solid var(--color-border);
        }
        .mk-module-intel .intel-table-wrap td {
            padding: 11px 14px;
            border-bottom: 1px solid var(--color-border-light);
            color: var(--color-text);
            vertical-align: middle;
        }
        .mk-module-intel .intel-table-wrap tbody tr:last-child td { border-bottom: none; }
        .mk-module-intel .intel-table-wrap tbody tr:hover td { background: var(--color-bg); }

        /* ── Sort arrows ── */
        .mk-module-intel .mk-sort-th { cursor: pointer; user-select: none; white-space: nowrap; }
        .mk-module-intel .mk-sort-th:hover { color: var(--mk-primary); }
        .mk-module-intel .mk-sort-th::after { content: ' ↕'; font-size: 10px; color: var(--color-text-muted); opacity: 0.5; margin-left: 2px; }
        .mk-module-intel .mk-sort-th.asc::after { content: ' ↑'; color: var(--mk-primary); opacity: 1; }
        .mk-module-intel .mk-sort-th.desc::after { content: ' ↓'; color: var(--mk-primary); opacity: 1; }

        /* ── Tags ── */
        .mk-module-intel .psc-code-tag {
            display: inline-block; background: var(--color-bg);
            color: var(--color-text-secondary); padding: 2px 7px;
            border-radius: 4px; font-size: 11px; font-weight: 700; font-family: monospace;
        }
        .mk-module-intel .cat-tag {
            display: inline-block; background: var(--mk-primary-light); color: var(--mk-primary, #1967d2);
            padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600;
        }

        /* ── office-col: hidden for ship role ── */
        .mk-module-intel .ship-view .office-col { display: none; }
    

/* ---- admin.html (scope: .pg-admin) ---- */

        .pg-admin .page-title { font-size: 22px; font-weight: 700; color: var(--mk-primary-dark); margin-bottom: 24px; }

        /* TABS */
        .pg-admin .tab-bar {
            display: flex; gap: 0; margin-bottom: 24px;
            border-bottom: 2px solid var(--color-border);
        }
        .pg-admin .tab-btn {
            padding: 12px 24px; border: none; background: none;
            font-size: 14px; font-weight: 500; color: var(--color-text-secondary);
            cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
        }
        .pg-admin .tab-btn.active { color: var(--mk-primary); border-bottom-color: var(--mk-primary); font-weight: 600; }
        .pg-admin a.tab-btn { text-decoration: none; display: inline-block; }
        .pg-admin .tab-content { display: none; }
        .pg-admin .tab-content.active { display: block; }

        /* External Auditor filter pills */
        .pg-admin .ea-filter-pill { padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--color-border);background: var(--color-bg-white);color:var(--color-text-secondary);transition:all 0.15s; }
        .pg-admin .ea-filter-pill:hover { border-color:var(--mk-primary);color:var(--mk-primary); }
        .pg-admin .ea-filter-pill.active { background:var(--mk-primary-light);border-color:var(--mk-primary);color:var(--mk-primary); }
        /* Auditors tab: Company vs External top-level toggle */
        .pg-admin .auditor-type-pill { padding:6px 16px;border-radius:14px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--color-border);background: var(--color-bg-white);color:var(--color-text-secondary);transition:all 0.15s; }
        .pg-admin .auditor-type-pill:hover { border-color:var(--mk-primary);color:var(--mk-primary); }
        .pg-admin .auditor-type-pill.active { background:var(--mk-primary);border-color:var(--mk-primary);color:white; }
        /* Type chips in modal */
        .pg-admin .ea-type-chip { padding:6px 14px;border-radius:14px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--color-border);background: var(--color-bg-white);color:var(--color-text-secondary);transition:all 0.15s; }
        .pg-admin .ea-type-chip.selected[data-type="nav"] { background:var(--mk-primary-light);border-color:var(--mk-primary);color:var(--mk-primary); }
        .pg-admin .ea-type-chip.selected[data-type="rightship"] { background:var(--rs-light);border-color:var(--rs-primary);color:var(--rs-primary); }
        .pg-admin .ea-type-chip.selected[data-type="sire"] { background:var(--color-success-bg);border-color:var(--color-success);color:var(--color-success); }
        .pg-admin .ea-type-chip.selected[data-type="class"] { background:var(--color-purple-bg);border-color:var(--color-purple);color:var(--color-purple); }
        .pg-admin .ea-type-chip.selected[data-type="flag"] { background:var(--kpi-light);border-color:var(--kpi-primary);color:var(--kpi-primary); }
        /* Role badges in table */
        .pg-admin .ea-role-badge { display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;margin-right:4px; }
        .pg-admin .ea-role-nav { background:var(--mk-primary-light);color:var(--mk-primary); }
        .pg-admin .ea-role-rightship { background:var(--rs-light);color:var(--rs-primary); }
        .pg-admin .ea-role-sire { background:var(--color-success-bg);color:var(--color-success); }
        .pg-admin .ea-role-class { background:var(--color-purple-bg);color:var(--color-purple); }
        .pg-admin .ea-role-flag { background:var(--kpi-light);color:var(--kpi-primary); }

        /* CARDS */
        .pg-admin .card { background: var(--color-bg-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; overflow: hidden; }
        .pg-admin .card-header { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
        .pg-admin .card-header h3 { font-size: 15px; font-weight: 600; color: var(--mk-primary-dark); }

        /* TABLE */
        .pg-admin table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .pg-admin th { background: var(--color-border-light); padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; }
        .pg-admin td { padding: 12px 14px; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
        .pg-admin tr:last-child td { border-bottom: none; }
        .pg-admin tr:hover td { background: var(--color-bg); }

        /* BADGES */
        .pg-admin .badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
        .pg-admin .badge-admin { background: var(--color-warning-bg); color: var(--color-warning); }
        .pg-admin .badge-pic { background: var(--mk-primary-light); color: var(--mk-primary); }
        .pg-admin .badge-ship { background: var(--color-success-bg); color: var(--color-success); }
        .pg-admin .badge-active { background: var(--color-success-bg); color: var(--color-success); }
        .pg-admin .badge-inactive { background: var(--color-danger-bg); color: var(--color-danger); }

        /* BUTTONS */
        .pg-admin .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; transition: 0.2s; }
        .pg-admin .btn-primary { background: var(--mk-primary); color: white; }
        .pg-admin .btn-primary:hover { background: var(--mk-primary-dark); }
        .pg-admin .btn-danger { background: var(--color-danger); color: white; }
        .pg-admin .btn-outline { background: var(--color-bg-white); border: 1px solid var(--color-border); color: var(--color-text); }
        .pg-admin .btn-outline:hover { background: var(--color-bg); }
        .pg-admin .btn-sm { padding: 5px 11px; font-size: 12px; }
        .pg-admin .btn-warn { background: var(--color-warning-bg); border: 1px solid var(--color-warning); color: var(--color-warning); }
        .pg-admin .btn-warn:hover { background: var(--color-warning-bg); }

        /* FORMS */
        .pg-admin .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .pg-admin .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
        .pg-admin .field { margin-bottom: 4px; }
        .pg-admin .field label { display: block; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
        .pg-admin .field input, .pg-admin .field select, .pg-admin .field textarea {
            width: 100%; padding: 9px 11px; border: 1px solid var(--color-border);
            border-radius: 4px; font-size: 14px; font-family: var(--font-family);
        }
        .pg-admin .field input:focus, .pg-admin .field select:focus { outline: none; border-color: var(--mk-primary); }
        .pg-admin .field .hint { font-size: 11px; color: var(--color-text-secondary); margin-top: 3px; }

        /* VESSEL SELECTOR */
        .pg-admin .vessel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
        .pg-admin .vessel-chip { background: var(--mk-primary-light); color: var(--mk-primary); padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
        .pg-admin .vessel-selector { border: 1px solid var(--color-border); border-radius: 4px; max-height: 180px; overflow-y: auto; }
        .pg-admin .vessel-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--color-border-light); cursor: pointer; }
        .pg-admin .vessel-option:last-child { border-bottom: none; }
        .pg-admin .vessel-option:hover { background: var(--color-bg); }
        .pg-admin .vessel-option input[type=checkbox], .pg-admin .vessel-option input[type=radio] { width: 16px; height: 16px; cursor: pointer; }
        .pg-admin .vessel-option label { cursor: pointer; font-size: 13px; }
        .pg-admin .vessel-option .imo-tag { font-size: 11px; color: var(--color-text-secondary); margin-left: auto; }

        /* MODAL */
        .pg-admin .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; align-items: center; justify-content: center; }
        .pg-admin .modal-overlay.show { display: flex; }
        .pg-admin .modal { background: var(--color-bg-white); border-radius: 8px; width: 580px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,0.2); }
        .pg-admin .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
        .pg-admin .modal-header h3 { font-size: 17px; font-weight: 600; }
        .pg-admin .modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--color-text-secondary); line-height: 1; }
        .pg-admin .modal-body { padding: 24px; }
        .pg-admin .modal-footer { padding: 16px 24px; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: 10px; }

        /* ALERTS */
        .pg-admin .alert { padding: 12px 16px; border-radius: 4px; font-size: 13px; margin-bottom: 16px; display: none; }
        .pg-admin .alert.show { display: block; }
        .pg-admin .alert-success { background: var(--color-success-bg); color: var(--color-success); }
        .pg-admin .alert-error { background: var(--color-danger-bg); color: var(--color-danger); }

        /* STATS */
        .pg-admin .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
        .pg-admin .stat-card { background: var(--color-bg-white); border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .pg-admin .stat-card .stat-num { font-size: 32px; font-weight: 700; color: var(--mk-primary); }
        .pg-admin .stat-card .stat-label { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; }

        /* AUTOCOMPLETE (crew search in user list context) */
        .pg-admin .autocomplete-wrapper { position: relative; }
        .pg-admin .autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg-white); border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 4px 4px; max-height: 180px; overflow-y: auto; z-index: 10; display: none; }
        .pg-admin .autocomplete-list.show { display: block; }
        .pg-admin .autocomplete-item { padding: 9px 12px; cursor: pointer; font-size: 13px; }
        .pg-admin .autocomplete-item:hover { background: var(--color-border-light); }

        /* RESET PW SECTION */
        .pg-admin .reset-section { background: var(--color-warning-bg); border: 1px solid var(--color-warning); border-radius: 6px; padding: 16px; margin-top: 20px; }
        .pg-admin .reset-section h4 { font-size: 13px; font-weight: 700; color: var(--color-warning); margin-bottom: 12px; }

    

/* ---- superadmin.html (scope: .pg-superadmin) ---- */

        .pg-superadmin .page-title { font-size: 22px; font-weight: 700; color: var(--mk-primary-dark); margin-bottom: 6px; }
        .pg-superadmin .page-sub { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 20px; }

        .pg-superadmin .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
        .pg-superadmin .stat-card { background: var(--color-bg-white); border-radius: 8px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .pg-superadmin .stat-card .num { font-size: 30px; font-weight: 700; color: var(--mk-primary); }
        .pg-superadmin .stat-card .lbl { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }

        .pg-superadmin .card { background: var(--color-bg-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; overflow: hidden; }
        .pg-superadmin .card-header { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
        .pg-superadmin .card-header h3 { font-size: 15px; font-weight: 600; color: var(--mk-primary-dark); }

        .pg-superadmin .toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
        .pg-superadmin .toolbar input[type=text] { padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; width: 220px; }
        .pg-superadmin .type-filter { display: flex; gap: 6px; }
        .pg-superadmin .type-filter button { padding: 6px 14px; border: 1px solid var(--color-border); background: var(--color-bg-white); border-radius: 4px; font-size: 13px; cursor: pointer; }
        .pg-superadmin .type-filter button.active { background: var(--mk-primary); color: white; border-color: var(--mk-primary); }

        .pg-superadmin table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .pg-superadmin th { background: var(--color-border-light); padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; }
        .pg-superadmin td { padding: 12px 14px; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
        .pg-superadmin tr:last-child td { border-bottom: none; }
        .pg-superadmin tr:hover td { background: var(--color-bg); }
        .pg-superadmin tr.editing-row td { background: var(--mk-primary-light); }

        .pg-superadmin .badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
        .pg-superadmin .badge-active { background: var(--color-success-bg); color: var(--color-success); }
        .pg-superadmin .badge-suspended { background: var(--color-danger-bg); color: var(--color-danger); }
        .pg-superadmin .badge-internal { background: var(--color-border-light); color: var(--color-text-secondary); }
        .pg-superadmin .badge-demo { background: var(--color-purple-bg); color: var(--color-purple); }
        .pg-superadmin .badge-customer { background: var(--mk-primary-light); color: var(--mk-primary); }

        .pg-superadmin .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; transition: 0.2s; }
        .pg-superadmin .btn-primary { background: var(--mk-primary); color: white; }
        .pg-superadmin .btn-primary:hover { background: var(--mk-primary-dark); }
        .pg-superadmin .btn-outline { background: var(--color-bg-white); border: 1px solid var(--color-border); color: var(--color-text); }
        .pg-superadmin .btn-outline:hover { background: var(--color-bg); }
        .pg-superadmin .btn-sm { padding: 5px 11px; font-size: 12px; }
        .pg-superadmin .btn-purple { background: var(--color-purple); color: white; }
        .pg-superadmin .btn-purple:hover { background: var(--color-purple-dark); }

        .pg-superadmin .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; align-items: center; justify-content: center; }
        .pg-superadmin .modal-overlay.show { display: flex; }
        .pg-superadmin .modal { background: var(--color-bg-white); border-radius: 8px; width: 640px; max-width: 95vw; max-height: 92vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,0.2); }
        .pg-superadmin .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
        .pg-superadmin .modal-header h3 { font-size: 17px; font-weight: 600; }
        .pg-superadmin .modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--color-text-secondary); }
        .pg-superadmin .modal-body { padding: 24px; }
        .pg-superadmin .modal-footer { padding: 16px 24px; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: 10px; }

        .pg-superadmin .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
        .pg-superadmin .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
        .pg-superadmin .field label { display: block; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
        .pg-superadmin .field input, .pg-superadmin .field select, .pg-superadmin .field textarea {
            width: 100%; padding: 9px 11px; border: 1px solid var(--color-border);
            border-radius: 4px; font-size: 14px; font-family: var(--font-family);
        }
        .pg-superadmin .field input:focus, .pg-superadmin .field select:focus { outline: none; border-color: var(--mk-primary); }
        .pg-superadmin .field .hint { font-size: 11px; color: var(--color-text-secondary); margin-top: 3px; }

        .pg-superadmin .alert { padding: 12px 16px; border-radius: 4px; font-size: 13px; margin-bottom: 16px; display: none; }
        .pg-superadmin .alert.show { display: block; }
        .pg-superadmin .alert-success { background: var(--color-success-bg); color: var(--color-success); }
        .pg-superadmin .alert-error { background: var(--color-danger-bg); color: var(--color-danger); }

        .pg-superadmin .section-title { font-size: 13px; font-weight: 700; color: var(--mk-primary-dark); margin: 20px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); }

        .pg-superadmin .user-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border-light); }
        .pg-superadmin .user-row:last-child { border-bottom: none; }
        .pg-superadmin .user-info { flex: 1; }
        .pg-superadmin .user-info .uname { font-weight: 600; font-size: 13px; }
        .pg-superadmin .user-info .urole { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
        .pg-superadmin .reset-inline { display: flex; gap: 6px; align-items: center; }
        .pg-superadmin .reset-inline input { padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 12px; width: 140px; }
        .pg-superadmin .reset-inline button { padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; border: 1px solid var(--color-warning); background: var(--color-warning-bg); color: var(--color-warning); cursor: pointer; white-space: nowrap; }
        .pg-superadmin .reset-inline button:hover { background: var(--color-warning-bg); }
        .pg-superadmin .reset-msg { font-size: 11px; margin-top: 3px; }

        .pg-superadmin .add-admin-section { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; padding: 16px; margin-top: 16px; }
        .pg-superadmin .add-admin-section h4 { font-size: 13px; font-weight: 700; color: var(--mk-primary-dark); margin-bottom: 12px; }

        .pg-superadmin .statement-result { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; padding: 16px; margin-top: 16px; }
        .pg-superadmin .statement-result .total { font-size: 20px; font-weight: 700; color: var(--mk-primary-dark); }
        .pg-superadmin .statement-list { font-size: 12px; margin-top: 10px; }
        .pg-superadmin .statement-list .row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--color-border-light); }
    

/* ---- vdr-analytics.html (scope: .pg-vdr-analytics) ---- */

.pg-vdr-analytics .tab-bar { display:flex; border-bottom:2px solid var(--color-divider); margin-bottom:24px; gap:0; }
.pg-vdr-analytics .tab-btn { padding:10px 22px; font-size:13px; font-weight:600; color:var(--color-text-muted); border:none; background:none; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all 0.15s; white-space:nowrap; }
.pg-vdr-analytics .tab-btn:hover { color:var(--vdr-primary-dark); background:var(--color-bg); }
.pg-vdr-analytics .tab-btn.active { color:var(--vdr-primary-dark); border-bottom-color:var(--vdr-primary); }
.pg-vdr-analytics .tab-pane { display:none; }
.pg-vdr-analytics .tab-pane.active { display:block; }

.pg-vdr-analytics .filter-bar { background: var(--color-bg-white); border:1px solid var(--color-divider); border-radius:10px; padding:12px 18px; margin-bottom:20px; display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.pg-vdr-analytics .fg { display:flex; flex-direction:column; gap:4px; }
.pg-vdr-analytics .fg label { font-size:11px; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.pg-vdr-analytics .fg select, .pg-vdr-analytics .fg input { padding:7px 10px; border:1px solid var(--color-border); border-radius:6px; font-size:13px; background:var(--color-bg); font-family:'Segoe UI',sans-serif; }
.pg-vdr-analytics .fg select:focus { outline:none; border-color:var(--vdr-primary); background: var(--color-bg-white); }

.pg-vdr-analytics .kpi-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:20px; }
.pg-vdr-analytics .kpi-card { background: var(--color-bg-white); border-radius:8px; border:1px solid var(--color-divider); padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.pg-vdr-analytics .kpi-num { font-size:24px; font-weight:700; color:var(--vdr-primary); }
.pg-vdr-analytics .kpi-num.red { color:var(--vdr-nc); }
.pg-vdr-analytics .kpi-num.amber { color:var(--vdr-obs); }
.pg-vdr-analytics .kpi-num.green { color:var(--vdr-gp); }
.pg-vdr-analytics .kpi-lbl { font-size:11px; color:var(--color-text-muted); margin-top:2px; }

.pg-vdr-analytics .card { background: var(--color-bg-white); border-radius:10px; border:1px solid var(--color-divider); box-shadow:0 1px 4px rgba(0,0,0,0.06); overflow:hidden; margin-bottom:16px; }
.pg-vdr-analytics .card-hdr { padding:12px 18px; border-bottom:1px solid var(--color-border-light); display:flex; align-items:center; justify-content:space-between; }
.pg-vdr-analytics .card-hdr h3 { font-size:14px; font-weight:700; color:var(--vdr-primary-dark); margin:0; }
.pg-vdr-analytics .card-body { padding:18px; }
.pg-vdr-analytics .two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.pg-vdr-analytics .chart-wrap { position:relative; height:240px; }
.pg-vdr-analytics .chart-wrap-tall { position:relative; height:300px; }

.pg-vdr-analytics .fleet-table { width:100%; border-collapse:collapse; font-size:13px; }
.pg-vdr-analytics .fleet-table th { background:var(--color-bg); padding:9px 14px; text-align:left; font-size:10px; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.5px; border-bottom:2px solid var(--color-border-light); white-space:nowrap; }
.pg-vdr-analytics .fleet-table td { padding:10px 14px; border-bottom:1px solid var(--color-border-light); vertical-align:middle; }
.pg-vdr-analytics .fleet-table tr:last-child td { border-bottom:none; }
.pg-vdr-analytics .fleet-table tr:hover td { background:var(--color-bg); cursor:pointer; }

.pg-vdr-analytics .score-pill-sm { display:inline-block; padding:2px 8px; border-radius:8px; font-size:11px; font-weight:700; }
.pg-vdr-analytics .score-exc { background:var(--vdr-gp-bg); color:var(--vdr-gp); }
.pg-vdr-analytics .score-good { background:var(--vdr-primary-bg); color:var(--vdr-primary); }
.pg-vdr-analytics .score-avg { background:var(--vdr-obs-bg); color:var(--vdr-obs); }
.pg-vdr-analytics .score-low { background:var(--vdr-nc-bg); color:var(--vdr-nc); }

.pg-vdr-analytics .empty-state { text-align:center; padding:40px; color:var(--color-text-muted); font-size:13px; }
.pg-vdr-analytics .loading { text-align:center; padding:40px; color:var(--color-text-muted); font-size:13px; }

/* PIF chips in analytics */
.pg-vdr-analytics .pif-freq-item { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--color-bg); }
.pg-vdr-analytics .pif-freq-item:last-child { border-bottom:none; }
.pg-vdr-analytics .pif-id { font-size:11px; font-weight:700; color:var(--vdr-primary); min-width:40px; }
.pg-vdr-analytics .pif-name { font-size:12px; color:var(--color-text-secondary); flex:1; }
.pg-vdr-analytics .pif-bar-bg { width:120px; height:6px; background:var(--color-border-light); border-radius:3px; }
.pg-vdr-analytics .pif-bar-fill { height:6px; border-radius:3px; background:var(--vdr-primary); }
.pg-vdr-analytics .pif-cnt { font-size:13px; font-weight:700; color:var(--color-text); min-width:24px; text-align:right; }

/* Benchmark band */
.pg-vdr-analytics .benchmark-band { background:var(--vdr-primary-bg); border-radius:8px; padding:12px 16px; font-size:13px; color:var(--vdr-primary-dark); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.pg-vdr-analytics .benchmark-band strong { font-size:20px; }

/* ---- todo.html (scope: .pg-todo) ---- */

        .pg-todo .page-title { font-size: 20px; font-weight: 700; color: var(--color-text); margin: 0 0 4px; }
        .pg-todo .page-sub { font-size: 13px; color: var(--color-text-muted); margin: 0 0 20px; }

        .pg-todo .todo-tab-bar {
            display: flex; gap: 0; margin-bottom: 20px;
            border-bottom: 2px solid var(--color-border);
        }
        .pg-todo .todo-tab-btn {
            padding: 10px 22px; border: none; background: none;
            font-size: 14px; font-weight: 500; color: var(--color-text-secondary);
            cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
        }
        .pg-todo .todo-tab-btn.active { color: var(--mk-primary); border-bottom-color: var(--mk-primary); font-weight: 600; }
        .pg-todo .todo-tab-content { display: none; }
        .pg-todo .todo-tab-content.active { display: block; }

        .pg-todo .todo-empty {
            background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 8px;
            padding: 40px 24px; text-align: center; color: var(--color-text-secondary); font-size: 14px;
        }
        .pg-todo .todo-empty .todo-empty-big { font-size: 28px; margin-bottom: 8px; }

        .pg-todo .todo-item {
            background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 8px;
            padding: 14px 18px; margin-bottom: 10px;
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            text-decoration: none; color: inherit;
        }
        .pg-todo .todo-item:hover { border-color: var(--mk-primary); background: var(--mk-primary-light); }
        .pg-todo .todo-item-main { display: flex; flex-direction: column; gap: 3px; }
        .pg-todo .todo-item-module {
            font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
            color: var(--mk-primary); background: var(--mk-primary-light); padding: 2px 8px; border-radius: 10px;
            display: inline-block; width: fit-content;
        }
        .pg-todo .todo-item-vessel { font-size: 14px; font-weight: 600; color: var(--color-text); }
        .pg-todo .todo-item-reason { font-size: 12px; color: var(--color-text-secondary); }
        .pg-todo .todo-item-arrow { font-size: 18px; color: var(--color-text-muted); flex-shrink: 0; }

        .pg-todo .planner-table-wrap { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 8px; overflow-x: auto; }
        .pg-todo .planner-table { border-collapse: collapse; width: 100%; }
        .pg-todo .planner-table th, .pg-todo .planner-table td {
            padding: 10px 14px; text-align: left; font-size: 13px;
            border-bottom: 1px solid var(--color-border-light); white-space: nowrap;
        }
        .pg-todo .planner-table th {
            font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted);
            background: var(--color-bg);
        }
        .pg-todo .planner-module-cell { font-weight: 600; color: var(--color-text); }
        .pg-todo .planner-audit-type { font-size: 11px; color: var(--color-text-muted); font-weight: 400; }
        .pg-todo .planner-cell-green { color: var(--color-success); }
        .pg-todo .planner-cell-amber { color: var(--color-warning); font-weight: 600; }
        .pg-todo .planner-cell-red { color: var(--color-danger); font-weight: 700; }
        .pg-todo .planner-cell-days { font-size: 11px; display: block; }
    

/* ---- nm-analytics.html (scope: .mk-module-nm) ---- */

        .mk-module-nm .page-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 8px; flex-wrap: wrap; gap: 12px;
        }
        .mk-module-nm .page-header h1 { font-size: 22px; font-weight: 600; color: var(--mk-primary-dark); margin: 0; }

        /* ── Tab bar ── */
        .mk-module-nm .tab-bar {
            display: flex; gap: 4px; margin-bottom: 0;
            border-bottom: 2px solid var(--color-border); flex-wrap: wrap;
        }
        .mk-module-nm .tab-bar a {
            padding: 10px 18px; font-size: 13px; font-weight: 500;
            color: var(--color-text-muted); text-decoration: none;
            border-bottom: 3px solid transparent; margin-bottom: -2px;
            transition: color 0.2s;
        }
        .mk-module-nm .tab-bar a:hover { color: var(--mk-primary); }
        .mk-module-nm .tab-bar a.active {
            color: var(--mk-primary); border-bottom-color: var(--mk-primary); font-weight: 600;
        }

        /* ── KPI row ── */
        .mk-module-nm .kpi-row {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 14px; margin-bottom: 24px;
        }
        .mk-module-nm .kpi-card {
            background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 10px;
            padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
        }
        .mk-module-nm .kpi-card .kpi-value { font-size: 26px; font-weight: 700; color: var(--mk-primary-dark); }
        .mk-module-nm .kpi-card .kpi-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; }
        .mk-module-nm .kpi-card.extreme .kpi-value { color: var(--color-risk-extreme); }
        .mk-module-nm .kpi-card.high    .kpi-value { color: var(--color-risk-high); }
        .mk-module-nm .kpi-card.open    .kpi-value { color: var(--mk-primary); }

        /* ── Charts ── */
        .mk-module-nm .charts-grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 20px; margin-bottom: 24px;
        }
        .mk-module-nm .chart-card {
            background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 10px;
            padding: 20px;
        }
        .mk-module-nm .chart-card.wide { grid-column: 1 / -1; }
        .mk-module-nm .chart-title {
            font-size: 13px; font-weight: 600; color: var(--mk-primary-dark);
            text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 16px 0;
        }
        .mk-module-nm .chart-wrap { position: relative; height: 240px; }
        .mk-module-nm .chart-wrap.tall { height: 300px; }
    

/* ---- vdr-new.html (scope: .pg-vdr-new) ---- */

/* ── Arrow picker (date/time/offset) ── */
.pg-vdr-new .arrow-wrap {
    display: flex; align-items: center;
    border: 1px solid var(--color-border); border-radius: 8px;
    overflow: hidden; background: var(--color-bg-white); width: fit-content;
}
.pg-vdr-new .arrow-btn {
    background: var(--color-bg); border: none; padding: 10px 14px;
    font-size: 16px; cursor: pointer; color: var(--color-text-secondary);
    transition: background 0.15s; line-height: 1; flex-shrink: 0;
}
.pg-vdr-new .arrow-btn:hover { background: var(--vdr-primary-bg); color: var(--vdr-primary); }
.pg-vdr-new .arrow-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pg-vdr-new .arrow-display {
    padding: 8px 16px; text-align: center; min-width: 160px;
    border-left: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider);
}
.pg-vdr-new .arrow-display.narrow { min-width: 100px; }
.pg-vdr-new .arrow-main { font-size: 14px; font-weight: 600; color: var(--color-text); }
.pg-vdr-new .arrow-hint { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ── VDR type chips ── */
.pg-vdr-new .type-chips { display: flex; gap: 8px; }
.pg-vdr-new .type-chip {
    padding: 8px 20px; border: 2px solid var(--color-border); border-radius: 8px;
    font-size: 13px; font-weight: 700; color: var(--color-text-secondary);
    background: var(--color-bg-white); cursor: pointer; transition: all 0.15s;
    letter-spacing: 0.5px;
}
.pg-vdr-new .type-chip:hover { border-color: var(--vdr-primary); color: var(--vdr-primary); }
.pg-vdr-new .type-chip.selected {
    background: var(--vdr-primary); border-color: var(--vdr-primary); color: white;
}

/* ── APT indicator ── */
.pg-vdr-new .apt-indicator {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 16px;
    font-size: 12px; font-weight: 600; margin-top: 6px;
}
.pg-vdr-new .apt-ok { background: var(--vdr-gp-bg); color: var(--vdr-gp); }
.pg-vdr-new .apt-warn { background: var(--vdr-obs-bg); color: var(--vdr-obs); }
.pg-vdr-new .apt-overdue { background: var(--vdr-nc-bg); color: var(--vdr-nc); }

/* ── Row layout ── */
.pg-vdr-new .picker-row {
    display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.pg-vdr-new .picker-row .form-group { flex: 1; min-width: 140px; }

/* ---- superadmin-modules.html (scope: .pg-superadmin-modules) ---- */

        /* Module-group color coding for the matrix below — page-specific,
           not shared with any other module. */
        .pg-superadmin-modules {
            --blue: #1a73e8; --blue-bg: #e6f1fb;
            --teal: #0f6e56; --teal-bg: #e1f5ee;
            --coral: #993c1d; --coral-bg: #faece7;
        }
        .pg-superadmin-modules :root[data-theme="dark"] {
            --blue: #5b9bf7; --blue-bg: rgba(91,155,247,0.16);
            --teal: #4dd0b3; --teal-bg: rgba(77,208,179,0.16);
            --coral: #e08968; --coral-bg: rgba(224,137,104,0.16);
        }

        .pg-superadmin-modules .page-title { font-size: 22px; font-weight: 700; color: var(--mk-primary-dark); margin-bottom: 6px; }
        .pg-superadmin-modules .page-sub { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 20px; }

        .pg-superadmin-modules .card { background: var(--color-bg-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
        .pg-superadmin-modules .card-header { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
        .pg-superadmin-modules .card-header h3 { font-size: 15px; font-weight: 600; color: var(--mk-primary-dark); }

        .pg-superadmin-modules .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .pg-superadmin-modules .toolbar input[type=text] { padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; width: 200px; }
        .pg-superadmin-modules .type-filter { display: flex; gap: 6px; }
        .pg-superadmin-modules .type-filter button { padding: 6px 14px; border: 1px solid var(--color-border); background: var(--color-bg-white); border-radius: 4px; font-size: 13px; cursor: pointer; }
        .pg-superadmin-modules .type-filter button.active { background: var(--mk-primary); color: white; border-color: var(--mk-primary); }

        .pg-superadmin-modules #matrix-wrap { overflow: auto; max-height: 70vh; }
        .pg-superadmin-modules table { border-collapse: collapse; font-size: 13px; }
        .pg-superadmin-modules th, .pg-superadmin-modules td { border-bottom: 1px solid var(--color-border-light); }
        .pg-superadmin-modules th { font-weight: 500; }
        .pg-superadmin-modules .company-col { position: sticky; left: 0; z-index: 3; background: var(--color-bg-white); text-align: left; padding: 10px 16px; min-width: 190px; }
        .pg-superadmin-modules thead th.company-col { z-index: 4; background: var(--color-border-light); }
        .pg-superadmin-modules thead th { position: sticky; top: 0; background: var(--color-bg-white); padding: 8px 10px; }
        .pg-superadmin-modules .grp-blue { background: var(--blue-bg); color: var(--blue); }
        .pg-superadmin-modules .grp-teal { background: var(--teal-bg); color: var(--teal); }
        .pg-superadmin-modules .grp-coral { background: var(--coral-bg); color: var(--coral); }
        .pg-superadmin-modules .grp-header { cursor: pointer; font-weight: 600; white-space: nowrap; }
        .pg-superadmin-modules .sub-header { font-weight: 400; font-size: 11px; color: var(--color-text-secondary); background: var(--color-bg); }
        .pg-superadmin-modules td.cell { text-align: center; padding: 8px 10px; }
        .pg-superadmin-modules tbody tr:hover td { background: var(--color-bg); }
        .pg-superadmin-modules tbody tr:hover td.company-col { background: var(--color-bg); }
        .pg-superadmin-modules .company-name { font-weight: 600; }
        .pg-superadmin-modules .company-type { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
        .pg-superadmin-modules input[type=checkbox] { cursor: pointer; width: 15px; height: 15px; }
    

/* ---- vdr-dashboard.html (scope: .pg-vdr-dashboard) ---- */

.pg-vdr-dashboard .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.pg-vdr-dashboard .stat-card {
    background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: 10px;
    padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: flex; flex-direction: column; gap: 6px;
}
.pg-vdr-dashboard .stat-label { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.pg-vdr-dashboard .stat-value { font-size: 32px; font-weight: 700; color: var(--vdr-primary-dark); line-height: 1; }
.pg-vdr-dashboard .stat-sub { font-size: 12px; color: var(--color-text-muted); }
.pg-vdr-dashboard .stat-card.warn .stat-value { color: var(--vdr-obs); }
.pg-vdr-dashboard .stat-card.danger .stat-value { color: var(--vdr-nc); }

.pg-vdr-dashboard .section-title {
    font-size: 14px; font-weight: 700; color: var(--vdr-primary-dark);
    margin-bottom: 14px; margin-top: 4px;
}
.pg-vdr-dashboard .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pg-vdr-dashboard .dash-card {
    background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: 10px;
    padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.pg-vdr-dashboard .recent-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--color-border-light);
    cursor: pointer; transition: background 0.1s;
}
.pg-vdr-dashboard .recent-row:last-child { border-bottom: none; }
.pg-vdr-dashboard .recent-row:hover { background: var(--color-bg); margin: 0 -20px; padding: 10px 20px; }
.pg-vdr-dashboard .recent-vessel { font-size: 13px; font-weight: 600; color: var(--color-text); flex: 1; }
.pg-vdr-dashboard .recent-ref { font-size: 11px; color: var(--vdr-primary); font-weight: 600; }
.pg-vdr-dashboard .recent-date { font-size: 11px; color: var(--color-text-muted); }
.pg-vdr-dashboard .cat-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pg-vdr-dashboard .cat-name { font-size: 12px; color: var(--color-text-secondary); width: 200px; flex-shrink: 0; }
.pg-vdr-dashboard .cat-track { flex: 1; background: var(--color-border-light); border-radius: 4px; height: 8px; overflow: hidden; }
.pg-vdr-dashboard .cat-fill { height: 100%; background: var(--vdr-primary); border-radius: 4px; transition: width 0.4s; }
.pg-vdr-dashboard .cat-count { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); width: 24px; text-align: right; flex-shrink: 0; }
.pg-vdr-dashboard .empty-dash { text-align: center; padding: 30px; color: var(--color-text-muted); font-size: 13px; }

/* ---- superadmin-usage.html (scope: .pg-superadmin-usage) ---- */

        .pg-superadmin-usage .page-title { font-size: 22px; font-weight: 700; color: var(--mk-primary-dark); margin-bottom: 6px; }
        .pg-superadmin-usage .page-sub { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 20px; }

        .pg-superadmin-usage .toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
        .pg-superadmin-usage .toolbar select { padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; min-width: 200px; }
        .pg-superadmin-usage .month-nav { display: flex; align-items: center; gap: 10px; }
        .pg-superadmin-usage .month-nav button { padding: 6px 12px; border: 1px solid var(--color-border); background: var(--color-bg-white); border-radius: 4px; cursor: pointer; font-size: 14px; }
        .pg-superadmin-usage .month-label { font-weight: 600; font-size: 15px; min-width: 130px; text-align: center; }

        .pg-superadmin-usage .card { background: var(--color-bg-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 20px; }

        .pg-superadmin-usage .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
        .pg-superadmin-usage .cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; padding-bottom: 6px; }
        .pg-superadmin-usage .cal-day { border: 1px solid var(--color-border); border-radius: 6px; min-height: 64px; padding: 6px 8px; cursor: pointer; position: relative; }
        .pg-superadmin-usage .cal-day.empty { border: none; cursor: default; }
        .pg-superadmin-usage .cal-day:hover:not(.empty) { border-color: var(--mk-primary); }
        .pg-superadmin-usage .cal-day.selected { border-color: var(--mk-primary); background: var(--mk-primary-light); }
        .pg-superadmin-usage .cal-day .dnum { font-size: 12px; font-weight: 600; }
        .pg-superadmin-usage .cal-day .calls { font-size: 18px; font-weight: 700; color: var(--mk-primary); margin-top: 4px; }
        .pg-superadmin-usage .cal-day .calls.zero { color: var(--color-text-muted); font-weight: 400; font-size: 12px; }
        .pg-superadmin-usage .cal-day .err-dot { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); }

        .pg-superadmin-usage #day-detail { display: none; }
        .pg-superadmin-usage .user-block { border: 1px solid var(--color-border); border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; }
        .pg-superadmin-usage .user-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .pg-superadmin-usage .user-block-head .uname { font-weight: 600; font-size: 13px; }
        .pg-superadmin-usage .user-block-head .meta { font-size: 12px; color: var(--color-text-secondary); }
        .pg-superadmin-usage .action-list { font-size: 12px; max-height: 160px; overflow-y: auto; }
        .pg-superadmin-usage .action-row { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid var(--color-border-light); }
        .pg-superadmin-usage .action-row .err { color: var(--color-danger); font-weight: 600; }
    

/* ---- superadmin-impersonate.html (scope: .pg-superadmin-impersonate) ---- */

        .pg-superadmin-impersonate .page-title { font-size: 22px; font-weight: 700; color: var(--mk-primary-dark); margin-bottom: 6px; }
        .pg-superadmin-impersonate .page-sub { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 20px; }
        .pg-superadmin-impersonate .toolbar { display: flex; gap: 10px; margin-bottom: 20px; }
        .pg-superadmin-impersonate .toolbar input { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; width: 280px; }
        .pg-superadmin-impersonate .company-group { background: var(--color-bg-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 16px; overflow: hidden; }
        .pg-superadmin-impersonate .company-group-head { padding: 12px 18px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); font-weight: 600; font-size: 13px; color: var(--mk-primary-dark); }
        .pg-superadmin-impersonate .user-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--color-border-light); }
        .pg-superadmin-impersonate .user-row:last-child { border-bottom: none; }
        .pg-superadmin-impersonate .uname { font-weight: 600; font-size: 13px; }
        .pg-superadmin-impersonate .badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 700; margin-left: 8px; }
        .pg-superadmin-impersonate .badge-admin { background: var(--color-warning-bg); color: var(--color-warning); }
        .pg-superadmin-impersonate .badge-pic { background: var(--mk-primary-light); color: var(--mk-primary); }
        .pg-superadmin-impersonate .badge-ship { background: var(--color-success-bg); color: var(--color-success); }
        .pg-superadmin-impersonate .meta { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
        .pg-superadmin-impersonate .btn { padding: 6px 16px; border: 1px solid var(--color-border); background: var(--color-bg-white); border-radius: 4px; font-size: 12px; cursor: pointer; }
        .pg-superadmin-impersonate .btn:hover { background: var(--color-bg); }
    

/* ---- superadmin-tickets.html (scope: .pg-superadmin-tickets) ---- */

        .pg-superadmin-tickets .page-title { font-size: 22px; font-weight: 700; color: var(--mk-primary-dark); margin-bottom: 6px; }
        .pg-superadmin-tickets .page-sub { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 20px; }
        .pg-superadmin-tickets .card { background: var(--color-bg-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
        .pg-superadmin-tickets .card-header { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
        .pg-superadmin-tickets .card-header h3 { font-size: 15px; font-weight: 600; color: var(--mk-primary-dark); }
        .pg-superadmin-tickets table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .pg-superadmin-tickets th { background: var(--color-border-light); padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; }
        .pg-superadmin-tickets td { padding: 12px 14px; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
        .pg-superadmin-tickets tr:last-child td { border-bottom: none; }
        .pg-superadmin-tickets tr:hover td { background: var(--color-bg); }
        .pg-superadmin-tickets .badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
        .pg-superadmin-tickets .badge-active { background: var(--color-success-bg); color: var(--color-success); }
        .pg-superadmin-tickets .badge-trial { background: var(--color-warning-bg); color: var(--color-warning); }