:root{ /* Company-branded colors (populated by theme). V8.2.3 (item 9): --navy uses safe_primary_colour which guarantees a dark colour suitable for white text. The original primary_colour is still available for accents where any colour works. */ --navy:#1a3a5c; --brand-primary:#1a3a5c; --accent:#1a3a5c; /* ── Design tokens — consistent across all pages ─────────────────────── */ /* Semantic score colors (4-band: excellent / satisfactory / needs-work / fail) */ --score-4: #1a7a4a; /* >=90 excellent */ --score-3: #2980b9; /* >=75 satisfactory */ --score-2: #e67e22; /* >=60 needs work */ --score-1: #c0392b; /* <60 unsatisfactory */ /* Tinted backgrounds paired with the score colors */ --score-4-bg: #e8f5e9; --score-3-bg: #eef4ff; --score-2-bg: #fff8ec; --score-1-bg: #fdecea; /* Neutral ink scale */ --ink: #222; --ink-2: #555; --ink-3: #888; --ink-muted: #aaa; /* Surface / borders */ --surface: #fff; --surface-2: #f8faff; --bg: #e8edf4; --border: #dce3ee; --border-soft: #eef0f5; /* Typography scale — three sizes */ --text-lg: 20px; /* page title / section headers */ --text-md: 13px; /* body text */ --text-sm: 11px; /* labels / metadata */ --text-kpi: 28px; /* big KPI numbers — the one exception */ --lh-tight: 1.2; --lh-body: 1.45; /* Layout */ --radius-sm: 5px; --radius: 8px; --radius-lg: 10px; --shadow-1: 0 2px 8px rgba(26,58,92,.08); --shadow-2: 0 4px 16px rgba(26,58,92,.12); --topbar-h: 54px; } /* Score pill (replaces inline hex ternaries everywhere) */ .score-pill{display:inline-block;font-weight:800;padding:1px 8px;border-radius:5px;font-size:var(--text-sm)} .score-4{color:var(--score-4)} .score-3{color:var(--score-3)} .score-2{color:var(--score-2)} .score-1{color:var(--score-1)} .bar-fill-4{background:var(--score-4)} .bar-fill-3{background:var(--score-3)} .bar-fill-2{background:var(--score-2)} .bar-fill-1{background:var(--score-1)} .score-bg-4{background:var(--score-4-bg)} .score-bg-3{background:var(--score-3-bg)} .score-bg-2{background:var(--score-2-bg)} .score-bg-1{background:var(--score-1-bg)} *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);font-size:var(--text-md);color:var(--ink);line-height:var(--lh-body)} /* ── System-wide themes ──────────────────────────────────────────────────── */ body[data-theme="day"]{background:#e8edf4;color:#222} body[data-theme="dusk"]{background:#e8e0d0;color:#2d2010} body[data-theme="dusk"] .card{background:#fdf6ec;border-color:#e6c97a} body[data-theme="dusk"] .topbar{background:var(--navy)} body[data-theme="dusk"] .page-wrap{background:transparent} body[data-theme="dusk"] .card-head{background:var(--navy)} body[data-theme="dusk"] table th{background:var(--navy)} body[data-theme="dusk"] .cl-sec-head{background:#f0e5cc} body[data-theme="dusk"] .cl-question{background:#fdf8f0} body[data-theme="dusk"] .cl-q-text{color:#3d2b00} body[data-theme="dusk"] input,body[data-theme="dusk"] select,body[data-theme="dusk"] textarea{background:#fdf6ec;border-color:#e6c97a;color:#3d2b00} body[data-theme="night"]{background:#111827;color:#e2e8f0} body[data-theme="night"] .card{background:#1e2a3a;border-color:#2d3f55;color:#e2e8f0} body[data-theme="night"] .card-head{background:#0d1f33} body[data-theme="night"] .card-body{background:#1e2a3a} body[data-theme="night"] .page-wrap{background:transparent} body[data-theme="night"] table{background:#1e2a3a;color:#e2e8f0} body[data-theme="night"] table th{background:#0d1f33;color:#e2e8f0} body[data-theme="night"] table td{border-color:#2d3f55;color:#cbd5e1} body[data-theme="night"] table tr:hover td{background:#253548} body[data-theme="night"] .topbar{background:#0a1628} body[data-theme="night"] input,body[data-theme="night"] select,body[data-theme="night"] textarea{background:#1e2a3a;border-color:#2d3f55;color:#e2e8f0} body[data-theme="night"] .btn-outline{background:#1e2a3a;color:#93c5fd;border-color:#2d3f55} body[data-theme="night"] .flash{background:#1e2a3a;color:#e2e8f0} body[data-theme="night"] .b-navy{background:#1e3a5f;color:#93c5fd} body[data-theme="night"] .cl-question{background:#1e2a3a;border-bottom-color:#2d3f55} body[data-theme="night"] .cl-q-text{color:#cbd5e1} body[data-theme="night"] .cl-sec-head{background:#253548;color:#e2e8f0} body[data-theme="night"] .cl-sec-head.open{background:var(--navy)} body[data-theme="night"] .cl-remark{background:#253548;border-color:#2d3f55;color:#e2e8f0} body[data-theme="night"] .kpi{background:#1e2a3a;border-color:#2d3f55} body[data-theme="night"] .dash-tab{color:#94a3b8} body[data-theme="night"] .dash-tab.active{color:#e2e8f0;border-bottom-color:#e2e8f0} /* Theme cycle button — V8.0.6: bumped contrast (was rgba .1, near-invisible). Now solid translucent fill + brighter border so the button is clearly readable on the dark navy topbar. */ .theme-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45); color:#fff;padding:3px 10px;border-radius:5px;cursor:pointer;font-size:11px; font-weight:600;min-width:68px;transition:background .15s;margin-right:4px} .theme-btn:hover{background:rgba(255,255,255,.32);border-color:#fff} /* V8.0.7: topbar z-index bumped from 100 → 1000 so its dropdowns (Operations, Admin) stack above page-level sticky filter bars (which use z-index:100 on /records and similar pages). The dropdown menu inside has z-index:200, but stacking-context rules meant a sibling-section sticky filter at the same z-index could occlude it in DOM order. Bumping the topbar context wins decisively. */ .topbar{background:var(--navy);color:#fff;display:flex;align-items:center;padding:0 24px;height:54px;position:sticky;top:0;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.2)} .topbar-logo{display:flex;align-items:center;gap:0px;text-decoration:none;overflow:hidden;max-width:260px} .logo-img{height:42px;max-width:200px;width:auto;object-fit:contain;object-position:left center;display:block;flex-shrink:0} .logo-ph{width:44px;height:36px;border:1.5px dashed rgba(255,255,255,.3);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;color:rgba(255,255,255,.35);text-align:center;flex-shrink:0} .topbar-title{color:#fff;font-size:15px;font-weight:700;letter-spacing:.3px} .topbar-nav{display:flex;gap:2px;margin-left:28px} .topbar-nav a{color:rgba(255,255,255,.75);text-decoration:none;padding:6px 12px;border-radius:5px;font-size:13px;transition:all .15s} .topbar-nav a:hover,.topbar-nav a.active{background:rgba(255,255,255,.15);color:#fff} .topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px} .user-chip{background:rgba(255,255,255,.12);padding:4px 11px;border-radius:14px;color:rgba(255,255,255,.85)} .role-badge{font-size:10px;background:rgba(255,255,255,.2);padding:2px 7px;border-radius:8px;margin-left:5px;text-transform:uppercase;letter-spacing:.3px} .topbar-right a{color:rgba(255,255,255,.6);text-decoration:none;padding:4px 10px;border-radius:5px} .topbar-right a:hover{background:rgba(255,255,255,.1);color:#fff} /* V8.2.7: global search bar */ .gs-wrap{position:relative;width:240px;max-width:240px} @media (max-width:1100px){.gs-wrap{width:160px}} @media (max-width:900px){.gs-wrap{display:none}} .gs-input{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18); color:#fff;padding:6px 10px 6px 32px;border-radius:6px;font-size:13px; transition:all .15s;outline:none} .gs-input::placeholder{color:rgba(255,255,255,.5)} .gs-input:focus{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)} .gs-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.5); font-size:14px;pointer-events:none} .gs-shortcut{position:absolute;right:8px;top:50%;transform:translateY(-50%); font-size:10px;color:rgba(255,255,255,.4);background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);padding:1px 6px;border-radius:4px;font-weight:600; pointer-events:none} .gs-input:focus + .gs-shortcut, .gs-wrap:focus-within .gs-shortcut{display:none} .gs-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0; background:#fff;border:1px solid #dce3ee;border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.18);z-index:1100;max-height:480px;overflow-y:auto} .gs-dropdown.open{display:block} .gs-loading{padding:14px;text-align:center;color:#888;font-size:12px} .gs-empty{padding:18px;text-align:center;color:#888;font-size:13px} .gs-cat{font-size:10px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.5px; padding:8px 12px 4px;border-top:1px solid #f0f0f0} .gs-cat:first-child{border-top:none} .gs-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer; text-decoration:none;color:#222;transition:background .1s} .gs-item:hover, .gs-item.gs-active{background:#f0f6ff} .gs-item-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-size:11px;font-weight:700;flex-shrink:0} .gs-icon-vessel{background:#e6f1fb;color:#185fa5} .gs-icon-officer{background:#eeedfe;color:#534ab7} .gs-icon-audit{background:#e1f5ee;color:#0f6e56} .gs-icon-port{background:#fff3e0;color:#854f0b} .gs-icon-recommendation{background:#fceeea;color:#993c1d} .gs-icon-questionnaire{background:#fbeaf0;color:#993556} .gs-icon-company{background:#f1efe8;color:#5f5e5a} .gs-item-body{flex:1;min-width:0} .gs-item-label{font-size:13px;font-weight:600;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gs-item-sub{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gs-item-badge{font-size:9px;font-weight:700;color:#888;background:#f1efe8; padding:2px 7px;border-radius:6px;text-transform:uppercase;flex-shrink:0} .gs-footer{padding:8px 12px;border-top:1px solid #f0f0f0;font-size:11px;color:#888; text-align:center;background:#fafbfc} .gs-footer a{color:var(--navy);text-decoration:none;font-weight:600} .gs-footer a:hover{text-decoration:underline} @media(max-width:900px){.gs-wrap{display:none}} .nav-dropdown{position:relative;display:inline-block} .nav-drop-trigger{color:rgba(255,255,255,.75);text-decoration:none;padding:6px 12px;border-radius:5px;font-size:13px;cursor:pointer;display:block;transition:all .15s} .nav-drop-trigger:hover,.nav-drop-trigger.active{background:rgba(255,255,255,.15);color:#fff} /* V8.6.1 (2026-05-13): dropdowns now stay open ~1.2 s after the cursor leaves the trigger so an accidental cursor drift doesn't dismiss the menu the user was reaching for. CSS can't transition `display`, so we use visibility + opacity + pointer-events instead. Hovering the menu itself also keeps it open (sticky), so the user can walk the cursor from trigger → menu items without losing it. */ .nav-drop-menu{position:absolute;top:100%;left:0;background:#1a3a5c;border:1px solid rgba(255,255,255,.1);border-radius:6px;min-width:200px;z-index:200;box-shadow:0 4px 16px rgba(0,0,0,.3);padding:4px 0;margin-top:2px; visibility:hidden; opacity:0; pointer-events:none; transition: opacity .15s ease, visibility 0s linear 1.2s, pointer-events 0s linear 1.2s; } .nav-drop-menu a{display:block;padding:8px 16px;color:rgba(255,255,255,.8);text-decoration:none;font-size:12px;white-space:nowrap} .nav-drop-menu a:hover{background:rgba(255,255,255,.1);color:#fff} .nav-drop-divider{height:1px;background:rgba(255,255,255,.1);margin:4px 0} .nav-dropdown:hover .nav-drop-menu, .nav-drop-menu:hover{ visibility:visible; opacity:1; pointer-events:auto; transition: opacity .15s ease, visibility 0s linear 0s, pointer-events 0s linear 0s; } .page-wrap{max-width:1400px;margin:0 auto;padding:20px} @media(max-width:768px){ .page-wrap{padding:10px 8px} .topbar{padding:0 10px;height:50px} .topbar-logo .logo-tagline{display:none} .topbar-nav{gap:4px} .topbar-nav a{padding:6px 8px;font-size:11px} .topbar-right .user-chip{display:none} table.dt{font-size:11px} table.dt th,table.dt td{padding:6px 8px} .card-head{font-size:12px;padding:8px 12px} h2{font-size:18px} } @media(max-width:480px){ .topbar-nav a span{display:none} .page-wrap{padding:8px 4px} } .flash-list{margin-bottom:12px} .flash{padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:6px;border-left:3px solid} .flash.success{background:#f0faf4;border-color:var(--accent);color:#1a5c30} .flash.error{background:#fff3f3;border-color:#c0392b;color:#7d1f1f} .card{background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.09);margin-bottom:16px;overflow:hidden} .card-head{background:var(--navy);color:#fff;padding:10px 18px;font-size:13px;font-weight:700;letter-spacing:.3px;display:flex;justify-content:space-between;align-items:center} .card-body{padding:18px 20px} .btn{display:inline-block;padding:8px 18px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:all .15s;text-align:center} .btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{opacity:.88} .btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{opacity:.88} .btn-outline{background:#fff;color:var(--navy);border:1px solid var(--navy)}.btn-outline:hover{background:#f4f8ff} .btn-danger{background:#fdecea;color:#c0392b;border:0.5px solid #f5c6c6} .btn-sm{padding:5px 12px;font-size:12px} label.fl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#666;margin-bottom:4px} input[type=text],input[type=date],input[type=time],input[type=email],input[type=password],select,textarea{width:100%;padding:8px 10px;border:1px solid #ccd0d9;border-radius:5px;font-size:14px;background:#fafbfc;color:#222;transition:border .15s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);background:#fff} input[readonly]{background:#f0f4fa;color:#666} /* V8.0.4 — Force option lists to always have readable contrast. Several places in the app style