/* DERMAGA — Vessel Registry. Ported from the React prototype; styles scoped under .vms. */

/* Design tokens live on :root so modal/drawer content (loaded into a
   display:contents turbo-frame) inherits them too — not just .vms. */
:root{
  /* Theme: Harbor — navy + sea-blue on a cool ice ground (chosen 2026-07-05). */
  --ink:#0e2233; --mut:#5a7387; --line:#d7e2ec; --bg:#e9eff6; --panel:#ffffff;
  --sea:#1c6ba8; --sea-deep:#0b3a5c; --teal:#2bb3c0; --ok:#2f9e6f; --warn:#c9821b; --danger:#d64545;
  --shadow:0 1px 2px rgba(16,42,66,.06),0 10px 26px rgba(16,42,66,.08);
  --radius:14px;
  /* Permukaan kolom isian. Ditokenkan supaya dark mode ikut berubah — dulu
     nilainya hardcoded, jadi SEMUA input tetap putih dan teksnya nyaris tak
     terbaca saat tema gelap. */
  --field-bg:#fcfdfe; --field-bg-focus:#ffffff; --field-label:#324a5e;
  --soft-line:#eef2f6; --soft-bg:#fbfdff;
  --font:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html,body{margin:0; padding:0}
body{font-family:var(--font); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
input,select,textarea,button{font-family:inherit; color:inherit}
turbo-frame#modal{display:contents}

.vms{
  display:grid; grid-template-columns:248px 1fr; min-height:100vh;
  background:var(--bg); color:var(--ink);
}
/* Vessel free-text fields render in CAPITAL as you type (scoped to .caps forms;
   enum selects & .no-upper excluded). Projects keep mixed case. */
.caps .field input:not([type=number]):not(.no-upper),
.caps .field textarea:not(.no-upper){text-transform:uppercase}

/* z-index lifts the whole rail's stacking context above .main so the notif
   dropdown (child, z-index:200) paints over dashboard cards instead of behind
   them; stays under the scrim/drawer (z-index 40+) so modals still cover it. */
.rail{background:linear-gradient(180deg,var(--sea-deep),#072a44); color:#cfe0ee; padding:20px 16px;
  display:flex; flex-direction:column; gap:16px; position:sticky; top:0; z-index:20; height:100vh; height:100dvh;}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0}
.brand-mark{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff;}
.brand-logo{width:44px; height:44px; border-radius:11px; background:#fff; display:grid; place-items:center; overflow:hidden; flex-shrink:0; padding:3px}
.brand-logo img{width:100%; height:100%; object-fit:contain}
.brand-name{font-weight:800; letter-spacing:.14em; font-size:15px; color:#fff}
.brand-sub{font-size:11px; color:#86a8c4; letter-spacing:.05em}
/* Sidebar menu search — filters the (long) nav list as you type. */
.nav-search{position:relative; display:flex; align-items:center; margin:12px 0 6px; flex-shrink:0}
.nav-search .lucide{position:absolute; left:11px; color:#6f93b0; pointer-events:none}
.nav-search input{width:100%; font:inherit; font-size:13px; color:#fff; padding:9px 12px 9px 34px;
  border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
  outline:none; transition:.15s}
.nav-search input::placeholder{color:#7f9db6}
.nav-search input:focus{border-color:#59b0e8; background:rgba(255,255,255,.1); box-shadow:0 0 0 3px rgba(89,176,232,.15)}
.nav-search input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.nav-empty{color:#7f9db6; font-size:12.5px; padding:10px 13px; margin:0}
/* .nav-item/.nav-sec set display:flex, which would override the [hidden] attr —
   re-assert it so the JS menu filter can actually hide rows. */
.nav-item[hidden], .nav-sec[hidden]{display:none}

.nav{display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain; margin-right:-8px; padding-right:8px;}
/* slim, translucent scrollbar so it reads cleanly on the deep-blue rail */
.nav{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent}
.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:8px}
.nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.nav::-webkit-scrollbar-track{background:transparent}
.nav-item{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px; font-size:14px; font-weight:500; color:#a9c3d8; cursor:pointer; transition:.15s;}
.nav-item:hover{background:rgba(255,255,255,.07); color:#fff}
.nav-item.active{background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 3px 0 0 #59b0e8}
.nav-group{display:flex; flex-direction:column; gap:4px; margin:6px 0; padding-left:9px; border-left:1px solid rgba(255,255,255,.1)}
.nav-label{display:flex; align-items:center; gap:7px; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:#6f93b0; font-weight:700; padding:6px 13px 2px}
.nav-label .lucide{opacity:.8}
.nav-item.sub{font-size:13.5px; padding:9px 13px}
/* Section header dividing the rail into module groups (full-size items below). */
.nav-sec{display:flex; align-items:center; gap:7px; font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; color:#6f93b0; font-weight:700; padding:5px 13px 3px; margin-top:12px;
  border-top:1px solid rgba(255,255,255,.07); padding-top:11px}
.nav-sec:first-child{margin-top:0; border-top:0; padding-top:5px}
.nav-sec .lucide{opacity:.85}
.rail-foot{margin-top:0; flex-shrink:0; font-size:11px; color:#5d83a1; letter-spacing:.04em}

.main{padding:26px 30px 40px; min-width:0}

/* --- Desktop global top bar: bell pinned top-right, spanning the content
   column (offset by the 248px rail; full width when the rail is collapsed).
   Hidden below 1000px, where the sticky .mobilebar carries the bell. --- */
.deskbar{position:fixed; top:0; left:248px; right:0; height:52px; z-index:19;
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:0 26px; background:var(--panel); border-bottom:1px solid var(--line)}
html.rail-collapsed .deskbar{left:0}
/* Ruang untuk bilah tetap di atas. Ditulis `.vms > .main` — BUKAN `.main` —
   karena spesifisitasnya harus mengalahkan kelas halaman seperti `.fr-page`
   yang memakai shorthand `padding`. Dengan `.main` saja, aturan mana pun yang
   datang belakangan dan menulis `padding:` akan mengembalikan padding-top ke
   nilai bawaannya, dan bilah 52px itu menimbun isi paling atas halaman —
   yang selalu berupa tombol "kembali". Gejalanya halus: halamannya tampak
   normal, hanya jalan pulangnya yang hilang. */
@media(min-width:1001px){ .vms > .main{padding-top:74px} }
@media(max-width:1000px){ .deskbar{display:none} }
/* Recolor the bell for the light bar (the shared .bell-btn is tuned for the
   deep-blue rail), and open its dropdown leftward so it never overflows. */
.deskbar .bell-btn{background:var(--bg); color:var(--sea-deep)}
.deskbar .bell-btn:hover{background:#e7eef4; color:var(--sea-deep)}
.deskbar .bell-badge{box-shadow:0 0 0 2px var(--panel)}
.deskbar .notif-menu{left:auto; right:0}

/* --- Desktop collapsible rail (state persists on <html>.rail-collapsed) --- */
/* ARMessage notification bell — prominent in the top header (desktop brand row
   + mobile top bar). Pushed to the right; red badge shows unread count. */
.bell-btn{position:relative; margin-left:auto; flex-shrink:0; display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:10px; color:#cfe0ee; text-decoration:none;
  background:rgba(255,255,255,.08); transition:.15s}
.bell-btn:hover{background:rgba(255,255,255,.18); color:#fff}
.bell-btn.has-unread{color:#fff; animation:bell-nudge 2.4s ease-in-out 1}
.bell-badge{position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px;
  display:grid; place-items:center; border-radius:9px; background:var(--danger,#dc2626); color:#fff;
  font-size:10.5px; font-weight:800; line-height:1; box-shadow:0 0 0 2px var(--sea-deep,#0a3a5c)}
@keyframes bell-nudge{10%,30%{transform:rotate(-12deg)}20%,40%{transform:rotate(12deg)}50%{transform:rotate(0)}}
/* When the bell sits in the brand row, the collapse button follows it (no auto). */
.brand .notif + .rail-collapse{margin-left:0}
.notif{position:relative; margin-left:auto; display:flex}

/* Notification center dropdown (light card overlaying content). */
.notif-menu{position:absolute; top:calc(100% + 8px); left:0; width:340px; max-width:92vw; z-index:200;
  background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 48px rgba(7,42,68,.28); overflow:hidden}
.notif-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px; border-bottom:1px solid var(--line); font-weight:700; font-size:13.5px; color:var(--sea-deep)}
.notif-head > span{display:flex; align-items:center; gap:7px}
.notif-clear{display:inline-flex; align-items:center; gap:5px; border:none; background:#f4f6f9; color:#b4483f;
  font:inherit; font-size:11.5px; font-weight:600; padding:5px 9px; border-radius:8px; cursor:pointer}
.notif-clear:hover{background:#fbe9e7}
.notif-scroll{max-height:min(66vh,460px); overflow-y:auto}
.notif-sec{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); font-weight:700;
  padding:9px 14px 4px; display:flex; align-items:center; gap:6px; background:#fafcfe}
/* Feed ("Terbaru") header carries the Bersihkan button on the right. */
.notif-sec-feed{justify-content:space-between; gap:8px; padding-top:7px}
.notif-sec-feed > span{display:flex; align-items:center; gap:6px}
.notif-clear{text-transform:none}
.notif-item{display:flex; align-items:flex-start; gap:9px; padding:9px 12px 9px 14px; border-bottom:1px solid #f1f5f8; position:relative}
.notif-item:hover{background:#f7fafc}
.notif-item.unread{background:#f2f8fe}
.notif-item.unread:hover{background:#e9f3fc}
.notif-link{display:flex; align-items:flex-start; gap:9px; flex:1 1 auto; min-width:0; text-decoration:none; color:var(--ink)}
.notif-ic{flex-shrink:0; width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:#eef4fa; color:var(--sea)}
.notif-ic.act{background:#e9f7ef; color:#1a7f46}
.notif-txt{display:flex; flex-direction:column; gap:1px; min-width:0}
.notif-title{font-size:13px; font-weight:600; line-height:1.3; color:var(--ink)}
.notif-sub{font-size:11.5px; color:#5c6b78; line-height:1.35; overflow:hidden; text-overflow:ellipsis}
.notif-time{font-size:10.5px; color:var(--mut); margin-top:1px}
.notif-item.action{cursor:pointer}
.notif-x{flex-shrink:0; border:none; background:transparent; color:#9aa8b4; cursor:pointer; border-radius:7px;
  width:24px; height:24px; display:grid; place-items:center; transition:.13s}
.notif-x:hover{background:#fbe9e7; color:#b4483f}
.notif-empty{display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 14px; color:var(--mut); font-size:12.5px}
.notif-empty p{margin:0}
/* Mobile: the bell lives in the sticky top bar. Anchor the menu as a fixed sheet
   under the bar (not absolute inside it) so it can't be clipped by the bar and
   always sits clear of the notch / home indicator on iOS and Android. Sized
   against the *dynamic* viewport (dvh) with safe-area insets on every edge, and
   it scrolls internally instead of running off the bottom of the screen. */
@media(max-width:1000px){
  .mobilebar .notif-menu{
    position:fixed;
    top:calc(66px + env(safe-area-inset-top));
    right:calc(10px + env(safe-area-inset-right));
    left:auto;
    width:min(360px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 20px));
    max-width:none;
    max-height:calc(100vh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height:calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    z-index:210;
    flex-direction:column;
  }
  /* Only lay it out as a flex column when OPEN. Setting display:flex
     unconditionally would override the [hidden] attribute (UA display:none is
     low-specificity), so the menu could never be dismissed — it stayed pinned
     on screen. Keep the toggle working by scoping display to :not([hidden]). */
  .mobilebar .notif-menu[hidden]{display:none}
  .mobilebar .notif-menu:not([hidden]){display:flex}
  .mobilebar .notif-head{flex:0 0 auto}
  .mobilebar .notif-scroll{flex:1 1 auto; max-height:none; min-height:0}
}

.rail-collapse{margin-left:auto; flex-shrink:0; display:inline-grid; place-items:center;
  width:30px; height:30px; border:none; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.08); color:#cfe0ee; transition:.15s}
.rail-collapse:hover{background:rgba(255,255,255,.16); color:#fff}
.rail-show{position:fixed; top:14px; left:12px; z-index:60; display:none;
  width:38px; height:38px; place-items:center; border:none; border-radius:9px; cursor:pointer;
  background:#0a3a5c; color:#fff; box-shadow:0 4px 14px rgba(7,42,68,.3); transition:.15s}
.rail-show:hover{filter:brightness(1.15)}
@media(min-width:1001px){
  .vms{transition:grid-template-columns .18s ease}
  html.rail-collapsed .vms{grid-template-columns:0 1fr}
  html.rail-collapsed .rail{overflow:hidden; pointer-events:none}
  html.rail-collapsed .rail-show{display:inline-grid}
  /* Full-width content shouldn't hug the left edge / sit under the ☰ button —
     give it a comfortable, symmetric gutter both sides. */
  html.rail-collapsed .main{padding-left:56px; padding-right:56px}
}
/* Kiosk / big-screen monitor (Fase M2): no rail, no fixed deskbar — full-bleed. */
.vms.kiosk{grid-template-columns:1fr}
.vms.kiosk .main{padding:28px 40px 40px}
@media(max-width:1000px){ .rail-collapse{display:none} }
.topbar{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; gap:16px; flex-wrap:wrap}
.topbar h1{margin:0; font-size:25px; font-weight:800; letter-spacing:-.02em}
.crumb{margin:4px 0 0; font-size:13px; color:var(--mut)}
.top-actions{display:flex; gap:10px; flex-wrap:wrap}

/* ===== Mobile shell (hamburger bar + off-canvas rail) =====
   The wrapper is display:contents so the desktop .rail / .main grid is
   untouched; .mobilebar and .rail-overlay only appear below 1000px. */
.nav-shell{display:contents}
.mobilebar{display:none}
.rail-overlay{display:none}
.mobilebar-burger{display:inline-grid; place-items:center; width:42px; height:42px; border:none;
  background:transparent; color:#fff; border-radius:10px; cursor:pointer; flex-shrink:0}
.mobilebar-burger:active{background:rgba(255,255,255,.12)}
.mobilebar-brand{display:flex; flex-direction:column; line-height:1.15}
.mobilebar-name{font-weight:800; letter-spacing:.12em; font-size:14px; color:#fff}
.mobilebar-sub{font-size:10.5px; color:#86a8c4; letter-spacing:.05em}

.btn{display:inline-flex; align-items:center; gap:7px; border:none; cursor:pointer; font-weight:600; font-size:13.5px; padding:10px 16px; border-radius:10px; transition:.15s;}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.primary{background:var(--sea); color:#fff; box-shadow:0 4px 12px rgba(28,107,168,.28)}
.btn.primary:hover:not(:disabled){background:#175b90; transform:translateY(-1px)}
.btn.ghost{background:#eef3f7; color:var(--ink)}
.btn.ghost:hover{background:#e2eaf0}
.btn.danger-ghost{background:#fdecec; color:var(--danger)}
.btn.danger-ghost:hover{background:#fbdada}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px}
.stat{display:flex; align-items:center; gap:14px; padding:16px 18px}
.stat-icon{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex-shrink:0}
.stat.sea .stat-icon{background:rgba(28,107,168,.12); color:var(--sea)}
.stat.ok .stat-icon{background:rgba(54,179,126,.14); color:var(--ok)}
.stat.warn .stat-icon{background:rgba(217,140,30,.14); color:var(--warn)}
.stat-value{font-size:26px; font-weight:800; line-height:1; letter-spacing:-.02em}
.stat-label{font-size:12.5px; color:var(--mut); margin-top:5px}
.pulse{width:12px; height:12px; border-radius:50%; display:block}
.pulse.ok{background:var(--ok); box-shadow:0 0 0 4px rgba(54,179,126,.2)}

.toolbar{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.search{flex:1; min-width:240px; display:flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:0 13px; box-shadow:var(--shadow)}
.search svg{color:var(--mut); flex-shrink:0}
.search input{border:none; outline:none; flex:1; padding:12px 0; font-size:14px; background:transparent; color:var(--ink)}
.clear{border:none; background:#eef3f7; border-radius:50%; width:22px; height:22px; display:grid; place-items:center; cursor:pointer; color:var(--mut)}
.filters{display:flex; gap:10px}
/* Voyage scope tabs (On Going / Selesai & Batal / Semua) */
.voyage-scope{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px}
.vscope-tab{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--mut); text-decoration:none; border:1px solid var(--line); background:var(--panel)}
.vscope-tab:hover{color:var(--ink)}
.vscope-tab.on{background:var(--sea); color:#fff; border-color:var(--sea)}
.vscope-count{font-size:11.5px; background:rgba(0,0,0,.08); padding:1px 7px; border-radius:99px}
.vscope-tab.on .vscope-count{background:rgba(255,255,255,.25)}
.select-wrap{display:flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:0 12px; box-shadow:var(--shadow); color:var(--mut)}
.select-wrap select{border:none; outline:none; background:transparent; padding:12px 4px; font-size:13.5px; color:var(--ink); cursor:pointer}
/* Multi-select (checkbox dropdown) filter */
.select-wrap.ms{position:relative; padding:0}
.ms-toggle{display:flex; align-items:center; gap:7px; border:none; background:transparent; padding:11px 12px; font-size:13.5px; color:var(--ink); cursor:pointer}
.ms-toggle svg{color:var(--mut)}
.ms-panel{position:absolute; top:calc(100% + 5px); left:0; z-index:40; min-width:210px; max-height:300px; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:11px; box-shadow:0 10px 28px rgba(7,42,68,.16); padding:6px}
.ms-opt{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--ink); cursor:pointer}
.ms-opt:hover{background:#eef5fb}
.ms-opt input{width:15px; height:15px; accent-color:var(--sea); cursor:pointer}
/* Quick-set activity inline editor (Voyage Management rows) — subtle: the badge
   reads normally, a faint pencil shows only on row hover. */
.qa-cell{position:relative; white-space:nowrap}
.qa-edit{border:none; background:transparent; padding:2px; margin-left:5px; color:var(--mut); cursor:pointer;
  border-radius:6px; opacity:0; transition:opacity .12s, background .12s; vertical-align:middle}
tr:hover .qa-edit{opacity:.5}
.qa-edit:hover{opacity:1; background:rgba(28,107,168,.12); color:var(--sea)}
.qa-pop{position:absolute; top:calc(100% + 3px); left:0; z-index:35; min-width:170px;
  background:#fff; border:1px solid var(--line); border-radius:11px; box-shadow:0 10px 28px rgba(7,42,68,.18); padding:6px}
.qa-opt{display:block; width:100%; text-align:left; border:none; background:transparent; padding:8px 10px;
  border-radius:8px; font-size:13px; color:var(--ink); cursor:pointer}
.qa-opt:hover{background:#eef5fb}
.qa-custom{display:flex; gap:6px; align-items:center; border-top:1px solid var(--line); margin-top:4px; padding-top:6px}
.qa-custom input{flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:12.5px; outline:none}
.qa-custom input:focus{border-color:var(--sea)}
.qa-set{border:none; background:var(--sea); color:#fff; border-radius:8px; padding:6px 10px; font-size:12.5px; cursor:pointer}
/* Completeness gate feedback inside the activity pop */
.qa-feedback{border-top:1px solid var(--line); margin-top:4px; padding-top:7px; max-width:260px}
.qa-err{font-size:12px; font-weight:600; color:#b42318; line-height:1.35}
.qa-blockers{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:3px}
.qa-blockers li{position:relative; font-size:12px; color:var(--ink); padding-left:16px; line-height:1.3}
.qa-blockers li::before{content:"○"; position:absolute; left:0; color:#d0342c; font-size:11px; top:1px}
.qa-override{display:flex; gap:6px; align-items:center; margin-top:8px; border-top:1px dashed var(--line); padding-top:8px}
.qa-override input{flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:12.5px; outline:none}
.qa-override input:focus{border-color:#b42318}
.qa-force{background:#b42318; white-space:nowrap}
/* Voyage completeness checklist (cockpit) */
.ws-complete{border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:12px 0}
.ws-complete.warn{border-color:#f0c9b0; background:#fef7f2}
.ws-complete.ok{border-color:#bfe3cf; background:#f1faf4}
.ws-complete-head{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink)}
.ws-complete.warn .ws-complete-head svg{color:#c2410c}
.ws-complete.ok .ws-complete-head svg{color:#12805c}
.ws-complete-count{margin-left:auto; font-size:11.5px; font-weight:700; color:#c2410c; background:#fde6d6; border-radius:999px; padding:2px 9px}
.ws-check{list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:5px 16px}
.ws-check li{display:flex; align-items:center; gap:7px; font-size:12.5px}
.ws-check li.ok{color:#276749}
.ws-check li.ok svg{color:#12805c}
.ws-check li.no{color:#8a4b32}
.ws-check li.no svg{color:#d0342c; opacity:.7}
.ws-complete-forced{margin-top:10px; padding-top:9px; border-top:1px dashed var(--line); font-size:12px; color:#92400e; display:flex; align-items:center; gap:7px}
/* Mini progress bar */
.pbar{display:inline-flex; align-items:center; gap:8px; min-width:118px; vertical-align:middle}
.pbar-track{position:relative; flex:1; height:7px; min-width:60px; background:#e6edf3; border-radius:99px; overflow:hidden}
.pbar-fill{display:block; height:100%; border-radius:99px; transition:width .3s ease}
.pbar-label{font-size:12px; font-weight:600; color:var(--ink); min-width:32px; text-align:right}
.pbar.done .pbar-label{color:#1d6b48}
.pbar-fill.ok{background:var(--ok)}
.pbar-fill.warn{background:var(--warn)}
.pbar-fill.danger{background:var(--danger)}
.pbar-fill.muted{background:#c3ced8}

/* PMS status pills + dashboard */
.pill.warn{background:rgba(217,140,30,.14); color:#8a5a12}
.pill.danger{background:rgba(214,69,69,.15); color:#a11c1c}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px}
.stat-num{font-size:26px; font-weight:800; line-height:1.1; color:var(--ink)}
.stat-lbl{font-size:12px; font-weight:600; color:var(--mut); margin-top:4px}
.stat.is-ok{border-top:3px solid var(--ok)}
.stat.is-warn{border-top:3px solid var(--warn)}
.stat.is-danger{border-top:3px solid var(--danger)}
.stat.is-total{border-top:3px solid var(--sea)}
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:16px}
.filter-bar .field{min-width:140px}

.table-card{overflow:hidden}
.table-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:880px}
thead th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); font-weight:700; padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; user-select:none; white-space:nowrap; background:#fafcfd}
thead th.num{text-align:right}
thead th.actions-h{text-align:right; cursor:default}
.th-inner{display:inline-flex; align-items:center; gap:5px}
.th-inner .faint{opacity:.35}
thead th.num .th-inner{flex-direction:row-reverse}
tbody tr{border-bottom:1px solid #eef2f6; cursor:pointer; transition:background .12s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:#f6fafd}
/* Kembali dari halaman shipment/detail ke daftarnya: tautan balik membawa
   #anchor ke baris asal, jadi browser melompat ke sana alih-alih ke paling atas.
   scroll-margin memberi jarak supaya baris tidak tersembunyi di balik topbar,
   dan sorotan singkat menuntun mata ke posisi yang tadi ditinggalkan. */
tbody tr:target{scroll-margin-top:96px; animation:row-found 2.4s ease-out 1}
@keyframes row-found{
  0%,55%{background:#fff3cd; box-shadow:inset 3px 0 0 var(--sea,#1c6ba8)}
  100%{background:transparent; box-shadow:inset 3px 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){
  tbody tr:target{animation:none; background:#fff3cd; box-shadow:inset 3px 0 0 var(--sea,#1c6ba8)}
}
tbody td{padding:13px 16px; font-size:13.5px; vertical-align:middle}
td.num{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.mono{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--mut)}
.vname{font-weight:700}
.vsub{font-size:11.5px; color:var(--mut); margin-top:2px}
.vg-badge{display:inline-block; font-size:12px; font-weight:700; color:var(--sea); background:rgba(28,107,168,.1); border-radius:999px; padding:3px 10px; text-decoration:none}
.vg-badge:hover{background:rgba(28,107,168,.18)}
.vg-none{font-size:12px; color:var(--mut)}
.chip{display:inline-block; background:#eef3f7; color:#39536a; font-size:12px; font-weight:600; padding:3px 9px; border-radius:7px; white-space:nowrap}
.chip.soft{background:#eef6fb; color:#13628f}
.chip.ok{background:#e9f9ef; color:#127a44}
.route-cell{white-space:nowrap}
.route-cell svg{vertical-align:-1px; margin:0 2px}
.status{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px}
.status-dot{width:7px; height:7px; border-radius:50%}
.actions{text-align:right; white-space:nowrap}
.icon-btn{border:none; background:#f0f4f8; width:32px; height:32px; border-radius:8px; display:inline-grid; place-items:center; cursor:pointer; color:var(--mut); margin-left:6px; transition:.13s}
.icon-btn:hover{background:#e3eaf1; color:var(--ink)}
.icon-btn.danger:hover{background:#fbe3e3; color:var(--danger)}
.table-foot{padding:13px 16px; font-size:12.5px; color:var(--mut); border-top:1px solid var(--line)}
.empty{padding:54px; text-align:center; color:var(--mut)}
.empty svg{opacity:.3; margin-bottom:10px}
.empty p{margin:0 0 14px}

.scrim{position:fixed; inset:0; background:rgba(7,42,68,.42); backdrop-filter:blur(2px); z-index:40; animation:fade .2s}
.drawer{position:fixed; top:0; right:0; height:100vh; height:100dvh; overflow:hidden; width:640px; max-width:94vw; background:var(--panel); z-index:50; display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(7,42,68,.18); animation:slide .26s cubic-bezier(.2,.8,.2,1)}
.drawer.detail{width:520px}
.drawer.detail.roomy{width:680px}
.drawer.wide{width:760px}
.drawer form{display:flex; flex-direction:column; flex:1; min-height:0}
.drawer-head{display:flex; justify-content:space-between; align-items:flex-start; padding:22px 24px; border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0; font-size:20px; font-weight:800; letter-spacing:-.02em}
.drawer-head p{margin:4px 0 0; font-size:13px; color:var(--mut)}
.detail-top{margin-bottom:9px}
.drawer-body{flex:1; min-height:0; overflow-y:auto; padding:8px 24px 24px}
.drawer-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--line); background:#fafcfd}
.drawer-foot form{display:inline}

/* Vessel drawings (GA / Stowage Plan) list inside the vessel drawer. The list is
   height-capped and scrolls on its own, so adding many files never pushes the
   "Buat Ship Particular" button out of reach. Action buttons opt out of the
   global `.drawer form{flex:1}` rule so they don't stretch and crowd the row. */
.drawing-list{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; max-height:230px; overflow-y:auto}
.drawing-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px}
.drawing-thumb{flex:0 0 auto; display:flex; align-items:center; color:var(--mut)}
.drawing-meta{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.drawing-meta b{font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drawing-meta small{font-size:11px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drawing-actions{flex:0 0 auto; display:flex; align-items:center; gap:2px}
.drawer form.drawing-act{display:inline-flex; flex:0 0 auto; min-height:0}
.drawer form.drawing-form{flex:0 0 auto}

.form-section{padding:18px 0; border-bottom:1px solid var(--soft-line)}
.form-section:last-child{border-bottom:none}
.sec-h{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--sea); margin:0 0 12px}
.section-head{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--sea); margin-bottom:14px}
/* Rekap PPh group header — badge kode + nama (normal case) + chip tarif */
.taxrec-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; padding:11px 16px; border-bottom:1px solid var(--line,#e5e9ee)}
.taxrec-title{display:flex; align-items:baseline; gap:9px; min-width:0; flex-wrap:wrap}
.taxrec-code{font:700 11px/1.6 ui-monospace,"SFMono-Regular",Menlo,monospace; letter-spacing:.03em; color:var(--sea); background:color-mix(in srgb,var(--sea) 12%,transparent); padding:2px 7px; border-radius:5px; white-space:nowrap; flex:none}
.taxrec-name{font-size:14px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--ink,#1f2937)}
.taxrec-rate{font-size:11.5px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--sea); background:color-mix(in srgb,var(--sea) 10%,transparent); padding:2px 8px; border-radius:999px; white-space:nowrap; flex:none}
.taxrec-sum{font-size:12.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.taxrec-sum strong{color:var(--sea)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:14px}
.form-section .grid3:first-of-type{margin-top:0}
.field{display:flex; flex-direction:column; gap:6px}
.field-label{font-size:12.5px; font-weight:600; color:var(--field-label); display:flex; align-items:baseline; gap:6px}
.field-label em{font-style:normal; font-size:11px; color:var(--mut); font-weight:500}
/* App-wide standard: a bare <label> inside a .field (e.g. a plain f.label in an
   admin/legacy form) inherits the .field-label look instead of the oversized
   browser default. Scoped to class-less labels, so the dominant
   <label class="field"> wrapper and every checkbox/wrapper label (.check,
   .chk-chip, …) are untouched. New forms get the standard for free. */
.field > label:not([class]){font-size:12.5px; font-weight:600; color:var(--field-label); margin:0}
.field input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),.field select,.field textarea{border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:13.5px; outline:none; background:var(--field-bg); color:var(--ink); transition:.13s; width:100%}
.field input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):focus,.field select:focus,.field textarea:focus{border-color:var(--sea); box-shadow:0 0 0 3px rgba(28,107,168,.13); background:var(--field-bg-focus)}
/* Checkboxes/radios inside .field keep native sizing (not stretched to 100% width). */
.field input[type=checkbox],.field input[type=radio]{width:auto; accent-color:var(--sea); flex:0 0 auto; margin:0}
/* A submit/button inside a .field is a BUTTON, not a form control: it must not
   inherit the width:100% above, or it eats the row and squeezes the real input
   down to its spinner arrows (Jam Mesin Kapal). Excluded in the selector above
   rather than overridden here — that rule carries two :not() (specificity 0,3,1)
   and would beat any plain .field input[type=submit] override (0,2,1). */
.field input[type=submit],.field input[type=button],.field input[type=reset]{width:auto; flex:0 0 auto}
/* Pratinjau lampiran sertifikat di dalam drawer. PDF dirender oleh viewer
   bawaan browser lewat <iframe>; gambar ditampilkan apa adanya. */
.doc-preview{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--soft-bg)}
.doc-preview iframe{display:block; width:100%; height:min(62vh,620px); border:0; background:var(--soft-bg)}
.doc-preview-img{display:block; width:100%; height:auto; max-height:min(62vh,620px); object-fit:contain; background:var(--soft-bg)}

/* Combobox — kotak pilihan yang bisa diketik (combobox_controller.js). Dipakai
   di kolom dengan daftar panjang (335 kapal) supaya tidak perlu men-scroll
   <select> bawaan. Elemen aslinya tetap ada di DOM, hanya dijauhkan dari mata
   lewat .cbx-native (bukan display:none) agar tetap bisa difokus browser saat
   validasi HTML gagal. */
.cbx{position:relative; width:100%}
/* Mode teks-bebas: input aslinya TIDAK dipindah (memindah elemen ber-
   data-controller memicu disconnect→connect berulang di Stimulus), jadi
   dropdown digantung pada div setinggi 0 di bawahnya. margin-bottom negatif
   membatalkan satu gap .field (6px) yang ditambahkan div ini, supaya tinggi
   kolom tidak bergeser. */
.cbx-anchor{height:0; margin-bottom:-6px}
.cbx-anchor .cbx-list{top:-2px}
.cbx-native{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.cbx-list{position:absolute; z-index:60; top:calc(100% + 4px); left:0; right:0; margin:0; padding:4px;
  list-style:none; max-height:264px; overflow-y:auto; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow)}
.cbx-opt{padding:7px 10px; border-radius:7px; font-size:13.5px; line-height:1.35; cursor:pointer; color:var(--ink)}
.cbx-opt:hover,.cbx-opt.cur{background:rgba(28,107,168,.10)}
.cbx-opt.on{font-weight:700}
.cbx-opt mark{background:rgba(43,179,192,.30); color:inherit; border-radius:3px; padding:0 1px}
.cbx-clear{color:var(--mut); font-style:italic; border-bottom:1px solid var(--line); border-radius:7px 7px 0 0; margin-bottom:4px}
.cbx-note{padding:7px 10px; font-size:12.5px; color:var(--mut)}

/* Grouped checkbox chips (Investigation: kategori kejadian & faktor penyebab). */
.chk-groups{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.chk-group{border:1px solid var(--soft-line); border-radius:11px; padding:11px 13px; background:var(--soft-bg)}
.chk-group-h{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); margin:0 0 9px}
.chk-list{display:flex; flex-direction:column; gap:8px}
.chk-chip{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#233b4d; cursor:pointer; line-height:1.35}
.chk-chip input{margin-top:2px; accent-color:var(--sea); flex:0 0 auto}
.chk-chip:hover{color:#0f2f4a}
.chk-inline{display:flex; flex-wrap:wrap; gap:9px}
.chk-inline .chk-chip{border:1px solid #dfe7ee; border-radius:9px; padding:8px 12px; background:#fbfdff}
.chk-inline .chk-chip:hover{border-color:var(--sea); background:#fff}
.field input.err{border-color:var(--danger); box-shadow:0 0 0 3px rgba(214,69,69,.12)}
.field textarea{resize:vertical}
.field-error{display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--danger); font-weight:600}
/* Compact nested-row table (company banks & legal documents) */
.mini-tbl{width:100%; border-collapse:collapse; font-size:12.5px}
.mini-tbl th{text-align:left; font-weight:600; color:#5b6b7a; padding:4px 6px; border-bottom:1px solid var(--line); white-space:nowrap}
.mini-tbl td{padding:5px 6px; vertical-align:middle; border-bottom:1px solid #eef1f4}
.mini-tbl input:not([type=checkbox]):not([type=file]),.mini-tbl select{width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:7px; font-size:12.5px; background:#fcfdfe}
.mini-tbl input[type=file]{font-size:11px; max-width:150px}
.mini-tbl .hint{display:block; font-size:10px}
.mini-tbl .file-current{font-size:11px; color:var(--mut)}
@media (max-width:720px){ .mini-tbl,.mini-tbl thead,.mini-tbl tbody,.mini-tbl tr,.mini-tbl td{display:block} .mini-tbl thead{display:none} .mini-tbl td{border:none; padding:3px 0} .mini-tbl tr{border-bottom:1px solid var(--line); padding:6px 0} }
/* Plain-language document editor: labelled fields grouped in sections */
.doc-fieldset{border:1px solid var(--line); border-radius:11px; padding:12px 14px 4px; margin:0 0 14px}
.doc-fieldset legend{font-size:12.5px; font-weight:700; color:var(--sea); padding:0 6px; letter-spacing:.02em}
.doc-fieldgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px}
.doc-fieldgrid .field.wide{grid-column:1 / -1}
@media (max-width:640px){ .doc-fieldgrid{grid-template-columns:1fr} }
/* Baris berulang (baris kapal & poin Terms pada Penawaran Harga) */
.doc-rowline{display:grid; grid-template-columns:1.6fr 1fr 1fr auto; gap:8px; margin-bottom:7px; align-items:center}
.doc-rowline.one{grid-template-columns:1fr auto}
.doc-rowline input{width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:#fff}
.doc-rowline .btn.sm{padding:5px 10px; line-height:1}
@media (max-width:640px){ .doc-rowline,.doc-rowline.one{grid-template-columns:1fr} }
.doc-lock{font-size:10px; font-weight:600; color:var(--mut); vertical-align:middle}
.doc-fieldgrid .field.is-locked label{color:var(--mut)}
.doc-fieldgrid .field.is-locked input,
.doc-fieldgrid .field.is-locked select,
.doc-fieldgrid .field.is-locked textarea{background:#f1f5f9; color:#64748b; cursor:not-allowed; border-style:dashed}

/* ── Penyunting naskah gaya pengolah kata (shared/_rich_editor) ──────────────
   Toolbar lengket di atas + kanvas selebar kertas A4, memakai font cetak yang
   sama seperti dokumen jadi — apa yang disunting itulah yang tercetak. */
.wp{border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden}
.wp-bar{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:7px 9px;
        background:linear-gradient(180deg,#fbfdff,#f2f7fb); border-bottom:1px solid var(--line);
        position:sticky; top:0; z-index:3}
.wp-grp{display:flex; align-items:center; gap:2px; padding-right:9px; border-right:1px solid #e2eaf1}
.wp-grp:last-child,.wp-grp-end{border-right:none; padding-right:0}
.wp-grp-end{margin-left:auto}
.wp-btn{display:inline-flex; align-items:center; gap:5px; border:1px solid transparent; background:transparent;
        color:#41586c; padding:6px 7px; border-radius:7px; cursor:pointer; line-height:1; font-size:12.5px}
.wp-btn:hover{background:#fff; border-color:var(--line); color:var(--sea)}
.wp-btn.on{background:var(--sea); border-color:var(--sea); color:#fff}
.wp-btn-txt{font-weight:600; padding:6px 9px; white-space:nowrap}
.wp-sel{border:1px solid var(--line); background:#fff; border-radius:7px; padding:5px 7px;
        font-size:12.5px; color:#41586c; max-width:190px}
.wp-sel-sm{max-width:118px}
.wp-hint{font-size:11.5px; color:var(--mut); margin:8px 12px 0; line-height:1.5}
.wp-pane{padding:14px; background:#eef2f6}
/* Kanvas = lembar kertas. 210mm − margin kiri/kanan 20mm = 170mm area teks. */
.wp-page{width:100%; max-width:186mm; margin:0 auto; background:#fff; color:#1a1a1a;
         border:1px solid #dbe4ec; border-radius:4px; box-shadow:0 1px 3px rgba(16,42,66,.09);
         padding:16mm; line-height:1.5; outline:none; overflow-wrap:break-word}
.wp-page:focus{border-color:var(--sea); box-shadow:0 0 0 3px rgba(28,107,168,.12)}
.wp-page p{margin:0 0 7px}
.wp-page h2{font-size:1.25em; margin:12px 0 6px}
.wp-page h3{font-size:1.1em; margin:10px 0 5px}
.wp-page ul,.wp-page ol{margin:0 0 8px; padding-left:26px}
/* Gaya tabel-DATA aplikasi (min-width 880px, kepala kolom kapital, baris bisa
   diklik & menyala saat disorot) harus dinetralkan di dalam kanvas: di sini tabel
   adalah bagian dari SURAT, bukan grid. Tanpa ini tabel meluber keluar tepi
   kertas dan naskah tak lagi tampak seperti hasil cetaknya. Sel yang di body-nya
   sudah diberi style sendiri (mis. tabel No./Lampiran yang sengaja tanpa garis)
   tetap menang karena inline style. */
.wp-page table{width:100%; min-width:0; border-collapse:collapse; margin:8px 0; table-layout:fixed}
.wp-page th,.wp-page td,.wp-page thead th{border:1px solid #9fb0c0; padding:5px 8px; vertical-align:top;
  font-size:inherit; font-weight:inherit; color:inherit; text-transform:none; letter-spacing:normal;
  white-space:normal; background:none; cursor:auto; text-align:inherit}
.wp-page thead th{font-weight:700; text-align:center}
.wp-page tbody tr,.wp-page tbody tr:hover,.wp-page tbody tr:last-child{border:none; background:none; cursor:auto}
.wp-page hr{border:none; border-top:1px solid #c3cfda; margin:10px 0}
.wp-source{width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 13px;
           font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.55;
           background:#fff; text-transform:none; resize:vertical}
@media (max-width:640px){ .wp-pane{padding:8px} .wp-page{padding:10mm} .wp-grp{padding-right:5px} }

/* ── Field-based document editor (PKL, SPAL, …): compact, proportional form ── */
.doc-editor{max-width:1000px; padding:20px 24px}
.doc-editor > .field{margin-bottom:14px}
.doc-editor .hint{font-size:12px; line-height:1.55; color:var(--mut); margin:.15rem 0 1.15rem}
.doc-editor .field{gap:4px}
.doc-editor .field > label,
.doc-editor .field-label{font-size:11.5px; font-weight:600; color:var(--mut); letter-spacing:.01em; margin:0}
.doc-editor .field input:not([type=checkbox]):not([type=radio]),
.doc-editor .field select,
.doc-editor .field textarea{font-size:13px; padding:7px 10px; border-radius:8px}
.doc-editor .field textarea{min-height:38px}
.doc-editor .doc-fieldset{padding:12px 16px 10px; margin:0 0 12px; background:#fcfdff}
.doc-editor .doc-fieldset legend{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--sea)}
.doc-editor .doc-fieldgrid{gap:10px 20px}
.doc-editor details summary{font-size:11.5px}
.doc-editor .form-actions{margin-top:16px; display:flex; gap:10px}
/* Import inputs stay verbatim (URLs / pasted data) */
.field input.no-upper,.field textarea.no-upper{text-transform:none}
.field textarea.mono-input{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:12.5px}

.spec{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 18px}
.spec>div{display:flex; flex-direction:column; gap:2px}
.spec dt{font-size:11.5px; color:var(--mut); font-weight:600}
.spec dd{margin:0; font-size:14px; font-weight:600}
.spec dd.break{font-weight:500; font-size:12px; word-break:break-all; color:var(--mut)}
.note-text{margin:0; font-size:13.5px; line-height:1.6; color:#324a5e; background:#f6fafd; padding:13px 15px; border-radius:10px}

/* Import */
.head-ic{vertical-align:-3px; margin-right:6px}
.tabs{display:inline-flex; background:#eef3f7; border-radius:10px; padding:4px; gap:4px; margin:10px 0 6px}
.tab{border:none; background:transparent; padding:8px 16px; border-radius:7px; font-size:13px; font-weight:600; color:var(--mut); cursor:pointer}
.tab.on{background:#fff; color:var(--sea); box-shadow:var(--shadow)}
.import-block{display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:8px 0 4px}
.import-block[hidden]{display:none}
.import-block form{display:flex; flex-direction:column; gap:12px; align-items:flex-start; width:100%}
.hint-line{font-size:12px; color:var(--mut); margin:0; line-height:1.5}
.import-status{display:flex; gap:7px; align-items:flex-start; background:#fff6ec; color:#8a5a12; border:1px solid #f3dcb8; padding:10px 13px; border-radius:9px; font-size:12.5px; margin-top:12px; line-height:1.5}
.map-summary{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.pill{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:4px 11px; border-radius:20px; background:#eef3f7; color:#39536a}
.pill.ok{background:rgba(54,179,126,.14); color:#1d6b48}
.pill.new{background:rgba(28,107,168,.13); color:#0f4f80}
.pill.upd{background:rgba(217,140,30,.14); color:#8a5a12}
.map-grid{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.map-row{display:flex; align-items:center; gap:8px; font-size:12px; background:#f6fafd; border:1px solid var(--line); border-radius:8px; padding:7px 10px}
.map-row.skip{opacity:.5}
.map-src{font-weight:600; color:#324a5e; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.map-dst{font-family:"SF Mono",ui-monospace,monospace; color:var(--sea); font-size:11.5px}
.map-row.skip .map-dst{color:var(--mut)}
.preview-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:10px}
table.preview{min-width:640px; margin:0}
table.preview th{position:static; font-size:11px; padding:9px 11px; background:#fafcfd; cursor:default}
table.preview td{padding:9px 11px; font-size:12.5px; border-bottom:1px solid #eef2f6}
.tag{font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:5px; letter-spacing:.04em}
.tag.new{background:rgba(28,107,168,.13); color:#0f4f80}
.tag.upd{background:rgba(217,140,30,.14); color:#8a5a12}
.spin{animation:spin 1s linear infinite}

/* Sort indicators */
.sort-ic{display:none}
.th-inner .sort-ic.neutral{display:inline-flex; opacity:.35}
th.sorted-asc .sort-ic.neutral,th.sorted-desc .sort-ic.neutral{display:none}
th.sorted-asc .sort-ic.up{display:inline-flex}
th.sorted-desc .sort-ic.down{display:inline-flex}

/* Toasts */
.flash-stack{position:fixed; bottom:22px; right:22px; z-index:70; display:flex; flex-direction:column; gap:10px}
.toast{display:flex; align-items:center; gap:9px; background:#0f3a5c; color:#eaf4fb; font-size:13px; font-weight:600;
  padding:12px 16px; border-radius:11px; box-shadow:0 10px 30px rgba(7,42,68,.3); animation:slide-up .25s ease; }
.toast svg{color:#7fe0b0}
.toast.error{background:#7a1f1f}
.toast.error svg{color:#ffb4b4}
.toast.leaving{opacity:0; transform:translateY(8px); transition:.25s}

/* Reimbursement module */
.fr-form-wrap{max-width:680px}
.fr-form{padding:20px; display:flex; flex-direction:column; gap:14px}
.fr-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field-hint{display:block; font-size:11.5px; color:var(--mut); margin-top:4px}
.opt{font-weight:400; color:var(--mut); font-size:11px}
.fr-form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:4px}
.vscope-tabs{display:flex; gap:8px; flex-wrap:wrap}
.num{text-align:right; white-space:nowrap}
.rb-check{width:38px; text-align:center}
.rb-check input{width:16px; height:16px; accent-color:var(--sea); cursor:pointer}
.rb-desc{cursor:pointer; font-weight:600}
.rb-cat{display:inline-block; margin-left:6px; font-size:11px; font-weight:700; color:var(--sea); background:rgba(28,107,168,.1); border-radius:6px; padding:1px 7px}
.rb-receipt{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:7px; color:var(--sea); background:#eef3f7}
.rb-receipt:hover{background:#e0eaf2}
.rb-actions{white-space:nowrap}
.rb-act{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:7px; color:var(--sea); background:#eef3f7; margin-left:6px}
.rb-act:first-child{margin-left:0}
.rb-act:hover{background:#e0eaf2}
.rb-act-danger{color:var(--danger); background:#fdecec}
.rb-act-danger:hover{background:#fbdada}
.rb-bundlebar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-top:1px solid var(--line); background:#f8fafc}
.rb-bundle-fields{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.rb-by{padding:9px 11px; font-size:13px; min-width:200px}
.rb-status{display:inline-block; font-size:11.5px; font-weight:700; border-radius:8px; padding:2px 9px}
.rb-pending{color:#8a5a12; background:rgba(217,140,30,.14)}
.rb-claimed{color:#1d6b48; background:rgba(54,179,126,.14)}
.rb-rejected{color:#9a2a2a; background:rgba(214,69,69,.14)}
.rb-info{color:#0f4f80; background:rgba(28,107,168,.14)}
.rb-muted{color:var(--mut); background:rgba(90,110,130,.12)}
.rb-detail{padding:20px; max-width:680px}
.rb-dl{display:flex; flex-direction:column; gap:0}
.rb-dl > div{display:grid; grid-template-columns:160px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.rb-dl dt{color:var(--mut); font-size:13px; font-weight:600}
.rb-dl dd{margin:0; font-size:13.5px; color:var(--ink)}
.rb-receipt-view{margin-top:18px}
.rb-receipt-img{max-width:100%; border-radius:11px; border:1px solid var(--line); margin-top:8px}
@media (max-width:560px){.fr-grid2{grid-template-columns:1fr}.rb-bundlebar{flex-direction:column; align-items:stretch}.rb-dl > div{grid-template-columns:1fr; gap:2px}}

/* Form Request attachments (lampiran) */
.fr-attach{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.fr-attach-img{display:block; width:96px; height:96px; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.fr-attach-img img{width:100%; height:100%; object-fit:cover}
.fr-attach-file{display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border:1px solid var(--line); border-radius:9px; background:#f8fafc; color:var(--sea-deep); font-size:13px; font-weight:600; text-decoration:none}
.fr-attach-file:hover{background:#eef3f7}
.fr-attach-edit{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:5px}
.fr-attach-edit li{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink)}
.fr-attach-rm{margin-left:6px; font-size:12px; color:var(--danger); text-decoration:none}
.fr-attach-rm:hover{text-decoration:underline}

/* Leave (cuti) module */
.btn.sm{padding:6px 12px; font-size:12.5px}
.lv-balance{display:flex; gap:10px; padding:16px; margin-bottom:18px}
.lv-bal-item{flex:1; text-align:center; padding:10px; border-radius:11px; background:#f4f7fa}
.lv-bal-item.lv-bal-rem{background:rgba(28,107,168,.1)}
.lv-bal-num{display:block; font-size:26px; font-weight:800; color:var(--ink); line-height:1.1}
.lv-bal-rem .lv-bal-num{color:var(--sea)}
.lv-bal-lbl{font-size:12px; color:var(--mut); font-weight:600}
.lv-h{display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--ink); margin:20px 0 10px}
.lv-h svg{color:var(--sea)}
.lv-timeline{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.lv-step{flex:1; min-width:200px; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:11px; border:1px solid var(--line); color:var(--mut)}
.lv-step.done{border-color:rgba(54,179,126,.4); background:rgba(54,179,126,.07); color:var(--ink)}
.lv-step.done svg{color:var(--ok)}
.lv-step strong{display:block; font-size:13px; color:var(--ink)}
.lv-step span{font-size:12px; color:var(--mut)}
.lv-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.lv-reject{display:flex; gap:8px; align-items:center; flex:1; min-width:240px}
.lv-reject[hidden]{display:none}
.lv-reject .fr-field{flex:1}

/* Voyage finance (Tagihan Voyage) worklist */
.vf-no{font-weight:700; color:var(--sea-deep); text-decoration:none}
.vf-no:hover{color:var(--sea)}
.vf-sub{font-size:11.5px; color:var(--mut)}
.vf-overdue{color:var(--danger); font-weight:700}
.vf-actions{display:flex; align-items:center; gap:6px; flex-wrap:wrap; position:relative}
.vf-edit{position:absolute; top:calc(100% + 6px); right:0; z-index:30; width:260px; padding:12px; display:flex; flex-direction:column; gap:9px; box-shadow:0 12px 32px rgba(7,42,68,.2)}
.vf-edit[hidden]{display:none}
.vf-edit-foot{display:flex; justify-content:space-between; align-items:center; gap:8px}
/* Pembayaran Pengajuan (disbursement) */
.pd-total{font-size:18px; font-weight:800; color:var(--sea-deep)}
.pd-pay{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-top:6px; padding-top:12px; border-top:1px solid var(--line)}
.pd-pay .field{margin:0}
.pd-pay .fr-field{width:auto; min-width:150px}

/* Payment-run action cell: keep the Bayar & Tarik forms proportional and aligned
   — same input width, same button width, one divider above the group. */
.pr-actions{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.pr-actions .pd-pay{margin-top:0; padding-top:0; border-top:0; align-items:center}
.pr-actions .pd-pay.pull{padding-top:10px; border-top:1px dashed var(--line)}
.pr-actions .pd-pay .fr-field{flex:0 0 190px; width:190px; min-width:0}
.pr-actions .pd-pay .btn{flex:0 0 200px; width:200px; justify-content:center; text-align:center}
.pr-actions .pd-pay .vf-sub{flex-basis:100%; margin-top:4px}

/* Buat Surat — AI generate box */
.lt-ai{background:#f4f9fd; border:1px solid rgba(28,107,168,.18); border-radius:11px; padding:13px; margin-top:14px}
.lt-ai .field-label{color:var(--sea)}
.lt-ai textarea{margin-top:7px; width:100%}
.lt-ai-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:9px}

/* Tagihan Voyage — term cards */
.vf-card{padding:16px; margin-bottom:14px}
.vf-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.vf-card-head .vf-no{font-size:15px}
.vf-card-head .vf-sub{margin:0 8px}
.vf-contract{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.vf-contract .field-label{margin:0}
.vf-contract .fr-field{width:160px; padding:8px 10px}
/* Asal angkanya ("Rp 89.700 / MT × 3.991,251 MT") — kecil tapi selalu terbaca,
   supaya nilai voyage tak pernah muncul tanpa bisa ditelusuri. */
.vf-basis{font-size:11.5px; color:var(--mut)}
.vf-lumpsum > summary{font-size:11.5px; color:var(--sea); cursor:pointer; list-style:none}
.vf-lumpsum > summary::-webkit-details-marker{display:none}
.vf-lumpsum > summary:hover{text-decoration:underline}
.vf-lumpsum[open]{flex-basis:100%; margin-top:6px; padding-top:8px; border-top:1px solid var(--line)}
.vf-lumpsum form{display:flex; align-items:center; gap:8px; margin-top:6px}
.vf-lumpsum .form-hint{margin-top:4px}
.vf-terms th, .vf-terms td{padding:8px 10px}
.vf-empty-terms{color:var(--mut); font-size:13px; padding:6px 2px}
.vf-invno{display:inline-block; margin-left:8px; font-size:11.5px; font-weight:700; color:var(--sea); text-decoration:none; font-family:ui-monospace,monospace}
.vf-invno:hover{text-decoration:underline}
.pt-spal{display:flex; align-items:center; gap:10px}
.pt-spal-form{display:flex; align-items:center; gap:8px}
.pt-add{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.pt-add .fr-field{width:auto; min-width:140px}

/* Termin pembayaran ⇄ SPAL: dokumen acuan + baris yang bisa diedit di tempat */
.pt-src{background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:12px 14px; margin-bottom:14px}
.pt-src-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pt-src-doc{font-family:ui-monospace,monospace; font-size:12.5px; font-weight:700; color:var(--sea); text-decoration:none}
.pt-src-doc:hover{text-decoration:underline}
.pt-src-clause{margin-top:10px}
.pt-src-clause summary{cursor:pointer; font-size:12px; color:var(--mut)}
.pt-src-clause pre{margin:8px 0 0; padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:7px; font:12.5px/1.55 ui-monospace,monospace; white-space:pre-wrap; word-break:break-word}
.pt-src-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px}
.pt-src-actions .fr-field{width:auto; min-width:230px; max-width:100%}
.pt-row-form{display:none}
.pt-pct{width:88px; text-align:right}
.pt-total td{font-weight:700; border-top:2px solid var(--line)}
.pt-total .num.bad{color:#a11c1c}

/* Timesheet recency signal (Voyage Management) */
.ts-cell{white-space:nowrap}
.ts-sig{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--mut)}
.ts-dot{width:8px; height:8px; border-radius:50%; background:var(--mut); flex-shrink:0}
.ts-ok{color:#1d6b48}
.ts-ok .ts-dot{background:var(--ok); box-shadow:0 0 0 3px rgba(54,179,126,.18)}
.ts-warn{color:#8a5a12}
.ts-warn .ts-dot{background:var(--warn)}
.ts-muted{color:var(--mut)}
.ts-muted .ts-dot{background:#c2cdd8}
/* One-shot highlight when the signal is (re)rendered — draws the eye to fresh updates. */
.ts-ok{animation:ts-flash 1.1s ease 1}
@keyframes ts-flash{0%{background:rgba(54,179,126,.35); border-radius:6px}100%{background:transparent}}

/* Deep-link target row (from Daily Briefing → Shipment List) — pulses to catch the eye. */
tbody tr.row-flash{animation:row-flash 2.4s ease 1}
@keyframes row-flash{0%,30%{background:rgba(29,78,216,.20)}100%{background:transparent}}

/* Dashboard charts */
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px}
.chart-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px}
.chart-title{font-size:13px; font-weight:800; letter-spacing:-.01em; margin-bottom:12px; color:var(--ink)}
.chart-box{position:relative}
@media(max-width:900px){ .chart-grid{grid-template-columns:1fr} }

/* Authentication */
.auth-page{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:linear-gradient(160deg,#0b3a5c,#072a44); padding:24px}
.auth-card{background:#fff; border-radius:18px; box-shadow:0 20px 60px rgba(7,42,68,.35); padding:34px 36px; width:100%; max-width:380px; text-align:center}
.auth-logo{width:72px; height:72px; margin:0 auto 14px; border-radius:16px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; padding:5px}
.auth-logo img{width:100%; height:100%; object-fit:contain}
.auth-title{margin:0; font-size:24px; font-weight:800; letter-spacing:.12em}
.auth-sub{margin:5px 0 22px; font-size:12.5px; color:var(--mut)}
.auth-form{display:flex; flex-direction:column; gap:14px; text-align:left}
.auth-form .field-label{margin-bottom:6px}
.auth-btn{justify-content:center; width:100%; margin-top:6px; padding:12px}
.auth-forgot{display:inline-block; margin-top:16px; font-size:12.5px; color:var(--sea); text-decoration:none}
.auth-forgot:hover{text-decoration:underline}
.auth-flash{display:flex; gap:7px; align-items:center; justify-content:center; font-size:12.5px; padding:9px 12px; border-radius:9px; margin-bottom:16px}
.auth-flash.err{background:#fdecec; color:#a23434}
.auth-flash.ok{background:rgba(54,179,126,.14); color:#1d6b48}
.auth-foot{font-size:11px; color:#86a8c4; text-align:center; max-width:420px; line-height:1.6}

/* Sidebar user */
.rail-user{display:flex; align-items:center; gap:10px; margin-top:0; flex-shrink:0; padding:11px; border-radius:11px; background:rgba(255,255,255,.07)}
.ru-link{display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-decoration:none}
.ru-avatar{width:34px; height:34px; border-radius:9px; background:#59b0e8; color:#06314f; font-weight:800; font-size:13px; display:grid; place-items:center; flex-shrink:0}
.ru-avatar.sm{width:30px; height:30px; font-size:11px; border-radius:8px}
.ru-info{flex:1; min-width:0}
.ru-name{font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ru-role{font-size:11px; color:#86a8c4}
.ru-logout{background:transparent; border:none; color:#86a8c4; cursor:pointer; padding:5px; border-radius:7px; display:grid; place-items:center}
.ru-logout:hover{background:rgba(255,255,255,.1); color:#fff}
.rail-user + .rail-foot{margin-top:14px}

/* Pre-Fixture Analysis */
.ind{border-radius:12px; padding:10px 18px; text-align:center; min-width:150px; color:#fff}
.ind-green{background:linear-gradient(135deg,#36b37e,#1d8a5c)}
.ind-yellow{background:linear-gradient(135deg,#e6a52c,#c4861a); color:#3a2a06}
.ind-red{background:linear-gradient(135deg,#e15555,#b83232)}
.ind-val{font-size:28px; font-weight:800; line-height:1}
.ind-lbl{font-size:11px; font-weight:600; margin-top:4px; opacity:.92}
.kpi-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:22px}
.kpi{border:1px solid var(--line); border-radius:11px; padding:13px 14px; background:#fafcfd}
.kpi-lbl{font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--mut); margin-bottom:6px}
.kpi-val{font-size:15px; font-weight:800; letter-spacing:-.01em}
.kpi-val.neg{color:var(--danger)}
.pf-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.spec-total{border-top:2px solid var(--line); padding-top:8px; margin-top:4px; grid-column:span 2}
.spec-total dt{color:var(--ink); font-weight:700}
.spec-total dd{color:var(--sea); font-size:15px}
.warn-list, .rec-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.warn-list li{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:#8a5a12; background:#fff6ec; border:1px solid #f3dcb8; border-radius:8px; padding:9px 12px}
.warn-list svg{color:var(--warn); flex-shrink:0; margin-top:1px}
.rec-list li{font-size:13.5px; line-height:1.6; color:#324a5e; padding:9px 13px; background:#f6fafd; border-radius:9px; border-left:3px solid var(--sea)}
.ai-box{font-size:13.5px; line-height:1.65; color:#283e52; background:linear-gradient(180deg,#f6fbff,#f1f7fc); border:1px solid #d8e6f2; border-radius:11px; padding:14px 16px}
.ai-box p{margin:0 0 8px} .ai-box p:last-child{margin:0} .ai-box strong{color:var(--sea-deep)}
.ai-meta{font-size:11px; color:var(--mut); margin-top:7px}
.ok-line{display:flex; gap:8px; align-items:center; color:#1d6b48; font-size:13.5px}
.ok-line svg{color:var(--ok)}
.ok-line.err{color:#a23434}
.ok-line.err svg{color:var(--danger)}
.audit-list{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:0}
.audit-list li{display:flex; gap:12px; padding:8px 0; position:relative}
.audit-list li:not(:last-child){border-left:2px solid var(--line); margin-left:5px; padding-left:18px}
.audit-list li:last-child{margin-left:5px; padding-left:18px}
.audit-dot{position:absolute; left:-5px; top:12px; width:10px; height:10px; border-radius:50%; background:var(--sea); border:2px solid #fff}
.audit-main{font-size:13px; color:var(--ink)}
.audit-meta{font-size:11.5px; color:var(--mut); margin-top:2px}
.margin-pill{display:inline-block; font-size:12px; font-weight:800; padding:3px 10px; border-radius:20px}
.margin-pill.green{background:rgba(54,179,126,.16); color:#1d6b48}
.margin-pill.yellow{background:rgba(217,140,30,.18); color:#8a5a12}
.margin-pill.red{background:rgba(214,69,69,.16); color:#a23434}
td.num.neg{color:var(--danger)}
@media(max-width:900px){ .kpi-grid{grid-template-columns:repeat(3,1fr)} .pf-cols{grid-template-columns:1fr} }

/* Print / PDF export */
.print-only{display:none}
.print-header{justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--sea); padding-bottom:12px; margin-bottom:18px}
.print-header .ph-left{display:flex; gap:12px; align-items:center}
.ph-logo{width:52px; height:52px; object-fit:contain}
.ph-co{font-size:16px; font-weight:800}
.ph-grp{font-size:11px; color:var(--mut); letter-spacing:.04em}
.ph-addr{font-size:11px; color:var(--mut); margin-top:2px; max-width:300px}
.ph-right{text-align:right; font-size:13px; font-weight:800; color:var(--sea); line-height:1.5}
.ph-right .ph-date{font-weight:500; color:var(--mut); font-size:11px}

@media print {
  @page { margin: 14mm; }
  .rail, .mobilebar, .rail-overlay, .back-link, .no-print, .fr-foot, .flash-stack, .top-actions { display: none !important; }
  .vms { display: block; background: #fff; }
  .main { padding: 0 !important; margin: 0; }
  .fr-card { box-shadow: none; border: 1px solid #d0d8e0; border-radius: 0; max-width: 100%; margin: 0; padding: 18px 20px; }
  .print-only { display: flex; }
  .form-section, .kpi-grid, .fr-table-wrap, .pf-cols, .ind, .fr-info { break-inside: avoid; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Master Data tabs */
.master-tabs{margin-bottom:18px}
.master-tabs .tab{text-decoration:none}

/* Master Data Perusahaan */
.co-logo{width:40px; height:40px; border-radius:9px; object-fit:contain; background:#fff; border:1px solid var(--line); display:block}
.co-logo.lg{width:52px; height:52px}
.co-logo.placeholder{display:grid; place-items:center; color:var(--mut)}
.co-head{display:flex; align-items:center; gap:14px}
.file-current{display:inline-flex; align-items:center; gap:7px; margin-top:7px; font-size:12px; color:var(--mut)}
.file-thumb{width:28px; height:28px; object-fit:contain; border:1px solid var(--line); border-radius:6px; background:#fff}
.berkas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.berkas-item{border:1px solid var(--line); border-radius:10px; padding:12px; background:#fafcfd}
.berkas-label{font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--mut); margin-bottom:9px}
.berkas-img{max-width:100%; max-height:90px; object-fit:contain; display:block; border-radius:6px}
.berkas-file{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--sea); font-weight:600}
.berkas-empty{font-size:12.5px; color:var(--mut)}
.doc-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.doc-list a{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--sea); font-weight:600; text-decoration:none}
.doc-list a:hover{text-decoration:underline}

/* Form Request (payment / order) */
.fr-page{padding:24px 30px 60px}
.fr-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); max-width:1060px; margin:14px auto 0; padding:30px 34px}
.fr-header{display:flex; align-items:center; gap:16px; padding-bottom:18px; border-bottom:2px solid var(--sea); margin-bottom:22px}
.fr-mark{width:52px; height:52px; border-radius:13px; background:rgba(28,107,168,.12); color:var(--sea); display:grid; place-items:center; flex-shrink:0}
.fr-title{margin:0; font-size:23px; font-weight:800; letter-spacing:-.01em}
.fr-sub{margin:3px 0 0; font-size:13px; color:var(--mut); letter-spacing:.12em; font-weight:600}
.fr-info{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:11px; overflow:hidden; margin-bottom:16px}
.fr-cell{padding:10px 15px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fafcfd}
.fr-cell:nth-child(2n){border-right:none}
.fr-cell.wide{grid-column:span 2}
.fr-label{font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--mut); margin-bottom:4px}
.fr-label .req{color:var(--danger)}
.fr-field{width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13.5px; background:#fff; color:var(--ink); outline:none; font-family:inherit}
.fr-field:focus{border-color:var(--sea); box-shadow:0 0 0 3px rgba(28,107,168,.12)}
.fr-readonly{font-size:14px; font-weight:600; color:var(--ink); padding:3px 0}
.fr-readonly.block{font-weight:400; white-space:pre-wrap; line-height:1.6}

.fr-table-wrap{border:1px solid var(--line); border-radius:11px; overflow:hidden; margin-bottom:14px}
.fr-table{width:100%; border-collapse:collapse; min-width:760px}
.fr-table thead th{background:#f4f8fb; color:var(--sea); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; text-align:left; padding:12px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
.fr-table th.fr-amount, .fr-table th.fr-total{text-align:right}
.fr-table tbody td{padding:6px 8px; border-bottom:1px solid #eef2f6; vertical-align:middle}
.fr-table .fr-no{width:46px; text-align:center; color:var(--mut); font-size:13px}
.fr-table .fr-qty{width:90px} .fr-table .fr-unit{width:90px} .fr-table .fr-amount{width:160px} .fr-table .fr-total{width:140px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums}
.fr-table .fr-act{width:48px; text-align:center}
.fr-table .fr-pph{width:52px; text-align:center}
.fr-pph-tag{display:inline-block; margin-left:6px; font-size:10.5px; font-weight:700; color:#8a5a12; background:rgba(217,140,30,.14); border-radius:6px; padding:1px 6px; vertical-align:middle}
.fr-input{width:100%; border:1px solid transparent; border-radius:7px; padding:8px 9px; font-size:13.5px; background:#fcfdfe; color:var(--ink); outline:none; font-family:inherit}
.fr-input:hover{background:#f3f7fa}
.fr-input:focus{border-color:var(--sea); background:#fff; box-shadow:0 0 0 3px rgba(28,107,168,.1)}
.fr-input.right{text-align:right; font-variant-numeric:tabular-nums}
.fr-table.ro tbody td{padding:9px 12px; font-size:13.5px}
.fr-addrow td{padding:10px 12px; background:#fafcfd}
.fr-add{display:inline-flex; align-items:center; gap:6px; border:1px dashed var(--line); background:#fff; color:var(--sea); font-weight:600; font-size:13px; padding:8px 14px; border-radius:9px; cursor:pointer}
.fr-add:hover{background:#f0f7fc; border-color:var(--sea)}
.fr-grand td{padding:14px 12px; background:#f4f8fb; font-weight:800; border-top:2px solid var(--line)}
.fr-grand .right{text-align:right; color:var(--mut); letter-spacing:.04em}
.fr-grand .fr-total{color:var(--sea); font-size:16px; text-align:right; font-variant-numeric:tabular-nums}

/* Segmented toggle (e.g. Rekap PPh dipotong/dipungut) */
.seg-btn{display:inline-block; padding:8px 16px; font-size:13px; font-weight:600; color:var(--mut); background:#fff; text-decoration:none; border-right:1px solid var(--line)}
.seg-btn:last-child{border-right:none}
.seg-btn:hover{background:#f3f7fa}
.seg-btn.on{background:var(--sea); color:#fff}

/* Totals summary (show page) — compact, right-aligned money block */
.fr-summary{max-width:400px; margin:0 0 20px auto; border:1px solid var(--line); border-radius:11px; overflow:hidden}
.fr-sum-row{display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:9px 16px; font-size:13.5px; border-bottom:1px solid #eef2f6}
.fr-sum-row:last-child{border-bottom:none}
.fr-sum-row span{color:var(--mut)}
.fr-sum-row b{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.fr-sum-row b.minus{color:var(--danger)}
.fr-sum-row.grand{background:#f4f8fb; border-top:1px solid var(--line)}
.fr-sum-row.grand span{color:var(--ink); font-weight:700; letter-spacing:.03em}
.fr-sum-row.grand b{color:var(--sea); font-size:15px}
.fr-sum-row.net{background:#eef6ff}
.fr-sum-row.net span{color:var(--ink); font-weight:800; letter-spacing:.03em}
.fr-sum-row.net b{color:var(--sea); font-size:16px}

.fr-notes{margin-bottom:24px}
.fr-notes .fr-field{margin-top:8px; resize:vertical}

.sign-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px}
.sign-card{border:1px solid var(--line); border-radius:11px; overflow:hidden; background:#fafcfd}
.sign-card.signed{background:#fff; border-color:rgba(54,179,126,.5)}
.sign-title{text-align:center; font-size:11px; font-weight:700; letter-spacing:.04em; color:#324a5e; padding:11px 8px; border-bottom:1px solid var(--line)}
.sign-body{height:78px; display:grid; place-items:center}
.sign-hint{font-size:12px; color:var(--mut); font-style:italic}
.sign-mark{color:var(--ok)}
.sign-foot{font-size:12px; color:#324a5e; padding:10px 12px; border-top:1px solid var(--line); line-height:1.9}
.sign-foot span{color:var(--ink); font-weight:600}

.fr-foot{display:flex; justify-content:flex-end; gap:10px; margin-top:26px; padding-top:20px; border-top:1px solid var(--line)}

.fr-reject{display:flex; gap:10px; align-items:flex-start; background:#fdecec; color:#a23434; border:1px solid #f3c9c9; border-radius:10px; padding:13px 15px; margin:0 0 22px; font-size:13.5px}
.fr-reject .reason{margin-top:4px; color:#7a2222}

.fr-actions{max-width:1060px; margin:16px auto 0; padding:18px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.fr-act-info{font-size:13.5px; color:var(--ink); display:inline-flex; align-items:center; gap:8px}
.fr-act-info.ok{color:#1d6b48} .fr-act-info.err{color:#a23434}
.fr-act-btns{display:flex; gap:10px}
.fr-approve-grid{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.fr-approve-form, .fr-reject-form{display:flex; gap:8px; align-items:center}
.fr-approve-grid .fr-field{width:auto; min-width:150px}
/* Cancel-my-approval banner (sits full-width inside the flex action bar). */
.fr-cancel-approval{flex-basis:100%; display:flex; flex-direction:column; gap:9px; background:#fff8ec; border:1px solid #f0dcb4; border-radius:11px; padding:13px 15px}
.fr-cancel-approval .fr-field{width:100%; min-width:0}
.fr-cancel-approval .fr-reject-form{flex-wrap:wrap}

/* Approval trail / timeline */
.fr-timeline{max-width:1060px; margin:16px auto 0; padding:20px 24px}
.fr-tl-head{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin-bottom:14px}
.fr-tl{list-style:none; margin:0; padding:0; position:relative}
.fr-tl-row{display:flex; gap:12px; padding:0 0 16px; position:relative}
.fr-tl-row:not(:last-child)::before{content:""; position:absolute; left:12px; top:24px; bottom:0; width:2px; background:var(--line)}
.fr-tl-dot{flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#eef2f7; color:#516170; z-index:1}
.fr-tl-row.ok .fr-tl-dot{background:rgba(54,179,126,.16); color:#1d6b48}
.fr-tl-row.err .fr-tl-dot{background:rgba(214,69,69,.15); color:#a11c1c}
.fr-tl-row.warn .fr-tl-dot{background:rgba(217,140,30,.16); color:#8a5a12}
.fr-tl-row.sub .fr-tl-dot{background:rgba(28,107,168,.13); color:#0f4f80}
.fr-tl-body{flex:1; min-width:0; padding-top:2px}
.fr-tl-line{font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.fr-tl-when{margin-left:auto; font-size:12px}
.fr-tl-reason{margin-top:4px; font-size:12.5px; color:var(--mut)}
.fr-tl-row.warn .fr-tl-reason{color:#8a5a12}

@media(max-width:900px){ .fr-info,.sign-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .fr-page{padding:16px 12px 40px} .fr-card{padding:20px 16px} .fr-info,.sign-grid{grid-template-columns:1fr} }

/* Project workspace */
.back-link{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--mut); text-decoration:none; margin-bottom:6px}
.back-link:hover{color:var(--sea)}
.back-link .flip{transform:rotate(180deg)}
.ws-tabs{margin:0 0 16px}
/* Tab bars are inline-flex with no wrap, so a page with many tabs (the voyage
   workspace: Harian/BBM/Stock/Biaya/P&L/Laytime/Dokumen…) pushed the row wider than
   a phone viewport → the WHOLE page scrolled sideways and the layout looked shifted.
   On mobile the bar scrolls horizontally instead; desktop is unchanged. */
@media(max-width:1000px){
  .tabs{display:flex; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .tab{flex:none; white-space:nowrap}
}
.card.pad{padding:22px 24px}
.ws-spec{grid-template-columns:repeat(3,1fr)}
.ws-head{display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line)}
.ws-head h3{margin:0; font-size:15px; font-weight:800; letter-spacing:-.01em}
.ws-head .muted{color:var(--mut); font-weight:500; font-size:13px}
.btn.sm{padding:7px 12px; font-size:12.5px}
.stage-pill{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; background:#eef2f7; color:#516170; white-space:nowrap}
.stage-pill svg{opacity:.7}
.stage-loading,.stage-laden,.stage-discharging{background:#e3f0fb; color:#1c6ba8}
.stage-completed,.stage-closed{background:#e4f6ec; color:#1f8b4c}
.stage-cancelled{background:#fdecec; color:#c0392b}
.empty.sm{padding:34px}
.table-card:has(tbody tr) .empty.sm{display:none}
/* Variance-log empty hint: hidden as soon as its own table has rows. */
.table-scroll:has(#fuel_variances_rows tr) + .var-empty{display:none}
.empty.sm svg{opacity:.3; margin-bottom:8px}
.empty.sm p{margin:0}
.foot-spacer{flex:1}
[data-tabs-target="panel"][hidden]{display:none}

@keyframes slide{from{transform:translateX(40px); opacity:0}to{transform:translateX(0); opacity:1}}
@keyframes slide-up{from{transform:translateY(12px); opacity:0}to{transform:translateY(0); opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:1000px){
  .vms{grid-template-columns:1fr}
  /* Fixed hamburger bar sits above the page; .main is pushed down to clear it.
     Safe-area insets keep it clear of the iOS notch / status bar (no-op on
     Android & non-notch devices). */
  /* width:100% — NOT 100vw. `100vw` includes the scrollbar's width, so on any browser whose
     scrollbar takes up space the bar is ~15px wider than the viewport and EVERY mobile page can
     be dragged sideways. Real phones use overlay scrollbars, which is why it went unnoticed.
     The parent is already full width, so 100% is both correct and safe. */
  .mobilebar{display:flex; align-items:center; gap:12px; position:sticky; top:0; left:0; z-index:45;
    width:100%; box-sizing:border-box;
    padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));
    background:linear-gradient(180deg,var(--sea-deep),#072a44);
    box-shadow:0 2px 10px rgba(7,42,68,.18)}
  .rail{position:fixed; left:0; top:0; transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.2,.8,.2,1); z-index:60; width:272px; max-width:86vw;
    padding-top:calc(20px + env(safe-area-inset-top)); padding-left:calc(16px + env(safe-area-inset-left))}
  .rail.open{transform:none; box-shadow:8px 0 40px rgba(7,42,68,.35)}
  .rail-overlay.open{display:block; position:fixed; inset:0; z-index:55;
    background:rgba(7,42,68,.5); backdrop-filter:blur(1px)}
  body.nav-locked{overflow:hidden}
  .main{padding:18px calc(18px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}
  .stats{grid-template-columns:1fr 1fr}
}
/* Leaflet stacks its panes/controls up to z-index ~1000, which would otherwise
   paint OVER app chrome (the mobile nav drawer, overlay, and top bars). Giving
   every map container its own stacking context keeps all that z-index contained
   inside the map, so the drawer/top bars always sit above it. */
.leaflet-container{isolation:isolate}

/* ===== GPS Live Tracking ===== */
.gps-banner{display:flex; gap:11px; align-items:flex-start; background:#fff7e6; border:1px solid #f3d9a0; color:#8a5a12; border-radius:11px; padding:13px 15px; margin-bottom:16px; font-size:13.5px}
.gps-banner code{background:#fff; border:1px solid #e6d3a8; border-radius:5px; padding:1px 5px; font-size:12.5px}
.gps-layout{display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start}
.gps-map-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.gps-map{height:560px; width:100%}
.gps-list{padding:0; overflow:hidden}
.gps-list-head{display:flex; align-items:center; gap:8px; padding:13px 15px; border-bottom:1px solid var(--line); font-weight:700; font-size:13px; color:var(--ink)}
.gps-units{list-style:none; margin:0; padding:0; max-height:520px; overflow:auto}
.gps-units li{display:flex; gap:10px; padding:11px 15px; border-bottom:1px solid var(--line)}
.gps-units li.gps-empty{color:var(--mut); justify-content:center}
.gps-dot{width:10px; height:10px; border-radius:50%; margin-top:4px; flex:none}
.gps-dot.mov{background:#1c6ba8} .gps-dot.idle{background:#36b37e} .gps-dot.off{background:#9aa7b2}
.gps-unit-name{font-weight:700; font-size:13.5px; color:var(--ink)}
.gps-unit-sub{font-size:12px; color:var(--mut); margin-top:1px}
.gps-unit-coord{font-size:11.5px; color:#7d8ea0; margin-top:2px}
.gps-weather{display:inline-flex; align-items:center; gap:5px; margin-top:4px; padding:2px 8px;
  font-size:11px; font-weight:600; line-height:1.5; border-radius:999px; border:1px solid transparent}
.gps-weather svg{flex:none}
.gps-weather.sev-calm{background:#eef6f1; color:#2f7d5b; border-color:#cfe6da}
.gps-weather.sev-moderate{background:#fdf6e3; color:#9a6b00; border-color:#f0e0a8}
.gps-weather.sev-rough{background:#fdeede; color:#b5560a; border-color:#f4cfa0}
.gps-weather.sev-severe{background:#fdecec; color:#c0322b; border-color:#f2b6b2}
.vp-marker .vp-dot{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); color:#fff; font-size:9px}
.vp-marker .vp-dot i{font-style:normal; line-height:1}
@media(max-width:860px){ .gps-layout{grid-template-columns:1fr} }

/* ===== Proyeksi Angkutan (Cargo Projection) ===== */
.grid4{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:14px; margin-top:14px}
.form-section .grid4:first-of-type{margin-top:0}
.pra-pill{display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:800}
.pra-pill.good{background:#dcfce7; color:#15803d}
.pra-pill.warn{background:#fef3c7; color:#b45309}
.pra-pill.bad{background:#fee2e2; color:#b91c1c}

.pra-doc .pra-head{margin:6px 0 16px}
.pra-meta{width:100%; border-collapse:collapse; font-size:13px}
.pra-meta td{padding:2px 4px; vertical-align:top}
.pra-meta .k{font-weight:700; white-space:nowrap; width:230px}
.pra-meta .s{width:10px; color:var(--mut)}
.pra-meta .d{text-align:right; color:var(--mut); white-space:nowrap}

.pra-scroll{overflow-x:auto}
.pra-tbl{width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:14px; border:1px solid #b9c6d2}
.pra-tbl th,.pra-tbl td{border:1px solid #cdd8e2; padding:5px 8px}
.pra-tbl thead th{background:#86efc6; color:#0e1b26; font-weight:800; text-align:center; font-size:11.5px; text-transform:none; letter-spacing:0; white-space:nowrap}
.pra-tbl .c{text-align:center}
.pra-tbl .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.pra-tbl .hl{background:#bdf0ff}
.pra-tbl .grp td{background:#f3f7fa; font-weight:700}
.pra-tbl .sub td{background:#fff7cc; font-weight:700}
.pra-tbl .sub.total td{background:#ffe680}
.pra-tbl .it{font-style:italic}
.pra-tbl.fin thead th{background:#eef3f7; color:var(--mut)}
.pra-tbl.fin .route td{background:#86efc6; font-weight:800}
.pra-tbl.fin .big td{font-weight:700}
.pra-tbl.fin .box{border:1.5px solid #2b3a48}
.pra-tbl.fin .gold td{background:#ffe680}
.pra-tbl.waktu{max-width:520px}
.pra-tbl.waktu td:last-child{width:90px}

.pra-notes{list-style:none; padding:0; margin:16px 0 4px; font-size:13px; display:grid; gap:5px}
.pra-notes li{display:flex; gap:8px; align-items:flex-start}
.pra-notes .chk{color:#15803d; font-weight:800; flex:none}
.pra-maps{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px}
.pra-map{width:100%; border:1px solid var(--line); border-radius:8px; object-fit:cover}
.pra-thumbs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.pra-thumb{width:160px; border:1px solid var(--line); border-radius:8px}
@media print{ .pra-maps{grid-template-columns:1fr 1fr} .pra-tbl{font-size:11px} }

/* ---- Proyeksi: Analisa & Rekomendasi ---- */
.pra-verdict{border:1px solid var(--line); border-left-width:5px; border-radius:14px; padding:18px 20px; margin:6px 0 20px; background:var(--panel)}
.pra-verdict.v-recommended{border-left-color:var(--ok); background:linear-gradient(180deg,rgba(54,179,126,.07),transparent 62%)}
.pra-verdict.v-caution{border-left-color:var(--warn); background:linear-gradient(180deg,rgba(217,140,30,.08),transparent 62%)}
.pra-verdict.v-rejected{border-left-color:var(--danger); background:linear-gradient(180deg,rgba(214,69,69,.07),transparent 62%)}
.pv-head{display:flex; gap:12px; align-items:flex-start}
.pv-head svg{flex:none; margin-top:1px}
.v-recommended .pv-head svg{color:var(--ok)}
.v-caution .pv-head svg{color:var(--warn)}
.v-rejected .pv-head svg{color:var(--danger)}
.pv-status{font-size:17px; font-weight:800; letter-spacing:-.01em}
.v-recommended .pv-status{color:#15803d}
.v-caution .pv-status{color:#b45309}
.v-rejected .pv-status{color:#b91c1c}
.pv-sub{font-size:13px; color:var(--mut); margin-top:2px; max-width:700px; line-height:1.45}
.pv-metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0 4px}
.pv-metric{background:#fafcfd; border:1px solid var(--line); border-radius:11px; padding:11px 13px; display:flex; flex-direction:column; gap:2px}
.pv-k{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); font-weight:700}
.pv-v{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink)}
.pv-v.ok{color:#15803d}
.pv-v.bad{color:#b91c1c}
.pv-note{font-size:11px; color:var(--mut)}
.pv-reasons{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:6px}
.pv-reasons li{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink)}
.pv-reasons li svg{flex:none}
.pv-reasons li.ok svg{color:var(--ok)}
.pv-reasons li.bad svg{color:var(--danger)}
.form-hint{display:block; font-size:12px; color:var(--mut); margin:10px 2px 0; line-height:1.55}
.form-hint svg{color:var(--sea); vertical-align:-2px; margin-right:5px}

/* Live "Rp 5.000.000" preview under a plain number input */
.rp-preview{display:block; margin-top:5px; font-size:12.5px; font-weight:600; color:var(--sea)}
/* Saved-settings summary box */
.set-summary{margin-top:10px; border:1px solid var(--line); border-radius:10px; padding:10px 14px; background:#f7fafd}
.set-summary-head{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); margin-bottom:6px}
.set-summary-head svg{color:var(--sea)}
.set-summary > div:not(.set-summary-head){display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:3px 0}
.set-summary > div > span{color:var(--mut)}
.set-summary > div > strong{color:var(--ink); text-align:right}
@media(max-width:680px){ .pv-metrics{grid-template-columns:repeat(2,1fr)} }
@media print{ .pra-verdict{break-inside:avoid} }

@media(max-width:560px){
  .main{padding:18px calc(14px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
  .stats{grid-template-columns:1fr 1fr; gap:10px}
  .grid2,.grid3,.grid4,.spec,.map-grid{grid-template-columns:1fr}
  .pra-maps{grid-template-columns:1fr}
  .filters{width:100%}
  .select-wrap{flex:1}
  .topbar h1{font-size:21px}
  .top-actions{width:100%}
  .top-actions .btn{flex:1; justify-content:center}
}

/* --- Timesheet: GPS live + Statement-of-Facts generate + broadcast --- */
.ws-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.gps-gen{display:flex; align-items:center; gap:6px; margin:0}
.inp-sm{border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:12.5px; background:#fcfdfe; color:var(--ink)}
.gps-live-bar{display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:10px 18px; font-size:12.5px; color:var(--ink); background:#f0f6fb; border-bottom:1px solid var(--line)}
.gps-live-bar.muted{color:var(--mut); background:#fafcfd}
.gps-live-bar .gps-dot{margin-top:0}
.gps-live-bar a{color:var(--sea); font-weight:600}
.ts-update .ws-head{flex-wrap:wrap; gap:10px}
.ts-report-head{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 18px 0; font-size:12.5px; color:var(--mut)}
.ts-badge{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.ts-draft{background:#eef2f6; color:var(--mut)}
.ts-approved{background:rgba(54,179,126,.15); color:#1f8c5e}
.ts-sent{background:rgba(28,107,168,.15); color:var(--sea)}
.ts-update-body{white-space:pre-wrap; font-family:var(--font); font-size:13px; line-height:1.5; color:var(--ink); background:#fafcfd; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:12px 18px; max-height:380px; overflow:auto}
.ts-delivery{white-space:pre-wrap; font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--mut); background:#fff; border:1px dashed var(--line); border-radius:8px; padding:10px 12px; margin:0 18px 12px}
.ts-update .ws-actions{padding:0 18px 14px}
.field.check{flex-direction:row; align-items:center; gap:8px}
.field.check input{width:auto}
.agent-row{border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; background:#fafcfd}
.agent-row-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px}
.agent-row-foot .muted{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--mut)}

/* --- CCTV Monitoring --- */
.cctv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; padding:4px 2px}
.cctv-tile{display:block; border:1px solid var(--line); border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; background:#fff; transition:box-shadow .15s}
.cctv-tile:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.cctv-thumb{position:relative; aspect-ratio:16/9; background:#0f172a; display:grid; place-items:center; overflow:hidden}
.cctv-thumb img{width:100%; height:100%; object-fit:cover}
.cctv-noimg{color:#94a3b8; font-size:12.5px; display:flex; align-items:center; gap:6px}
.cctv-noimg.lg{min-height:240px; justify-content:center; border:1px dashed var(--line); border-radius:10px}
.cctv-badge{position:absolute; top:8px; right:8px}
.cctv-meta{padding:9px 11px; display:flex; flex-direction:column; gap:2px; font-size:13px}
.cctv-detail{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
@media (max-width:900px){.cctv-detail{grid-template-columns:1fr}}
.cctv-player{position:relative; background:#000; border-radius:10px; overflow:hidden; aspect-ratio:16/9}
.cctv-player video{width:100%; height:100%; object-fit:contain; background:#000}
.cctv-play{position:absolute; inset:auto auto 12px 12px}
.cctv-player.playing .cctv-play{display:none}
.cctv-snapshot{width:100%; border-radius:10px; border:1px solid var(--line)}
.cctv-clips{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.cctv-clips li{display:flex; align-items:center; gap:7px; font-size:13.5px}

/* Archived (off-hire) vessel rows — muted in the fleet table */
.row-archived{opacity:.5}
.row-archived:hover{opacity:.82}

/* --- DataKapal (DITKAPEL) lookup on the vessel form --- */
.dk-lookup{margin:0 0 14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.dk-lookup .dk-status{margin:0; flex:1; min-width:160px}
.dk-results{flex-basis:100%; display:flex; flex-direction:column; gap:4px; margin-top:2px; max-height:240px; overflow:auto}
.dk-hit{text-align:left; border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 11px; font-size:13px; cursor:pointer; transition:.12s}
.dk-hit:hover{background:#f6fafd; border-color:var(--sea)}

/* --- Pelaut identity verification on the crew form --- */
.pelaut-verify{margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#f9fbfd}
.pelaut-verify .pl-head{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px}
.pelaut-verify .pl-head .btn{margin-left:auto}
.pelaut-verify .form-hint{margin:6px 0 0}
.pl-status{margin-top:8px; font-size:12.5px; min-height:1em}
.pl-status[data-kind="ok"]{color:#047857; font-weight:600}
.pl-status[data-kind="warn"]{color:#b45309}
.pl-result{margin-top:8px; display:flex; flex-direction:column; gap:4px}
.pl-result:empty{display:none}
.pl-row{display:flex; gap:10px; font-size:13px; padding:6px 10px; background:#fff; border:1px solid var(--line); border-radius:8px}
.pl-row span{width:64px; color:var(--muted)}

/* Identity-document field: number + scan upload + preview/download links */
.id-doc .id-doc-up{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px}
.id-doc .id-doc-up input[type=file]{font-size:12px; max-width:100%}
.id-doc-links{display:inline-flex; gap:12px}
.id-doc-links a{display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--sea); text-decoration:none; white-space:nowrap}
.id-doc-links a:hover{text-decoration:underline}

/* ── Roles & Access (permission matrix) ───────────────────────── */
.btn.small{padding:5px 10px; font-size:12px; line-height:1}
.btn.danger{background:#fdecec; color:var(--danger); border-color:#f5c2c2}
.btn.danger:hover{background:#fbdada}
.muted{color:var(--mut)}
.form-errors{background:#fdecec; border:1px solid #f5c2c2; color:var(--danger);
  border-radius:8px; padding:10px 12px; margin-bottom:12px; font-size:13px}
.form-errors p{margin:2px 0}
.perm-matrix{width:100%; border-collapse:collapse}
.perm-matrix th, .perm-matrix td{padding:8px 10px; border-bottom:1px solid var(--line); font-size:13px}
.perm-matrix thead th{position:sticky; top:0; background:#fff; text-align:center;
  font-size:12px; color:var(--mut); font-weight:600; white-space:nowrap}
.perm-matrix tr.perm-group td{background:#f6f9fb; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--mut)}
.perm-matrix .perm-rowlabel{display:flex; align-items:center; gap:8px; cursor:pointer}
.perm-matrix input[type=checkbox]{width:16px; height:16px; cursor:pointer}
.perm-allcol{display:inline-flex; align-items:center; gap:4px; margin-left:10px;
  font-size:11px; color:var(--mut); font-weight:500}

/* ===== Stores: barcode label + SKU scan box ===== */
.scan-form{display:flex; align-items:center; gap:8px; background:var(--panel);
  border:1px solid var(--line); border-radius:11px; padding:0 12px; box-shadow:var(--shadow)}
.scan-form svg{color:var(--mut); flex-shrink:0}
.scan-form input{border:none; outline:none; background:transparent; padding:10px 0;
  font-size:13.5px; color:var(--ink); width:190px; font-family:"SF Mono",ui-monospace,Menlo,monospace}
.barcode-card .barcode-label{display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 0 2px; text-align:center}
.barcode-name{font-weight:700; font-size:14px}
.barcode-cat{font-size:12px}
.barcode-codes{display:flex; gap:26px; align-items:center; justify-content:center; flex-wrap:wrap; margin:6px 0}
.qr-block, .c128-block{display:flex; flex-direction:column; align-items:center; gap:4px}
.qr-svg{display:block; width:150px; height:150px; background:#fff}

/* Store item photo */
.store-photo{max-width:100%; max-height:320px; object-fit:contain; display:block;
  border:1px solid var(--line); border-radius:10px; background:#fff}
.store-photo-current{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--mut); margin:2px 0 6px}
.store-name-cell{display:inline-flex; align-items:center; gap:9px}

/* Phone-camera scanner overlay */
.cam-overlay{position:fixed; inset:0; z-index:80; background:rgba(7,42,68,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:16px; animation:cam-fade .15s ease}
.cam-overlay[hidden]{display:none}   /* beat the author display:grid above */
@keyframes cam-fade{from{opacity:0}to{opacity:1}}
.cam-box{background:var(--panel); border-radius:18px; box-shadow:0 16px 48px rgba(11,58,92,.32);
  width:100%; max-width:392px; overflow:hidden}
/* header sits above the camera stage so the close button is always tappable */
.cam-head{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700; font-size:14.5px}
.cam-head>span{display:flex; align-items:center; gap:8px}
.cam-head>span svg{color:var(--sea)}
.cam-x{border:none; background:#eef3f7; width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:grid; place-items:center; cursor:pointer; color:var(--mut); transition:.13s}
.cam-x:hover{background:#e3eaf1; color:var(--ink)}
.cam-x:active{background:#d7e0e8}
.cam-x svg{pointer-events:none}   /* taps land on the button, never the inner svg */

/* intro screen (shown before camera starts) */
.cam-intro{display:flex; flex-direction:column; align-items:center; gap:13px;
  padding:30px 26px 26px; text-align:center}
.cam-intro-ic{width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:#eaf2f9; color:var(--sea)}
.cam-intro-t{margin:0; font-size:13.5px; color:var(--ink); line-height:1.5; max-width:250px}
.cam-intro .btn.primary{margin-top:2px}
.cam-intro-hint{margin:0; font-size:11.5px; color:var(--mut)}

/* live camera stage — own stacking context (z below header) so the scanner's
   injected DOM can never paint over the close button */
.cam-stage{position:relative; z-index:1; background:#000}
#camera-reader{width:100%; min-height:280px}
#camera-reader video{width:100% !important; height:auto !important; display:block}
.cam-status{padding:12px 16px; font-size:12.5px; text-align:center; color:var(--mut);
  border-top:1px solid var(--line)}

/* "Cetak Label" prints ONLY the label block (sidebar + other sections hidden). */
@media print{
  body.printing-label .rail, body.printing-label .mobilebar,
  body.printing-label .main > *:not(.barcode-card){display:none !important}
  body.printing-label .barcode-card{box-shadow:none; border:none; margin:0}
  body.printing-label .barcode-card .ws-head{display:none}
}

/* ===== Cargo Projection — report layout (proj-*) ===== */
.proj-sheet{max-width:1060px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); border-top:5px solid #0a3a5c; padding:24px}
.proj-sheet > section{margin-top:16px}
.proj-top{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; border-bottom:2px solid #0a3a5c; padding-bottom:16px}
.proj-top-l{display:flex; gap:14px; align-items:center}
.proj-mark{width:54px; height:54px; border-radius:12px; background:#0a3a5c; color:#fff; display:grid; place-items:center; flex:none}
.proj-top h1{font-size:25px; font-weight:800; color:#0a3a5c; letter-spacing:.4px; margin:0}
.proj-top p{margin:2px 0 0; color:var(--mut); font-size:14px}
.proj-datebox{display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:9px 14px}
.proj-datebox svg{color:var(--sea)}
.proj-datebox span{display:block; font-size:11px; color:var(--mut)}
.proj-datebox strong{font-size:14px; color:var(--ink)}

.proj-kpis{display:grid; grid-template-columns:1.7fr 1fr 1.15fr 1fr 1fr; gap:12px}
.proj-kpi{border:1px solid var(--line); border-radius:12px; padding:14px}
.proj-kpi-k{font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--mut); text-transform:uppercase}
.proj-kpi strong{display:block; font-size:23px; font-weight:800; color:var(--ink); margin-top:6px}
.proj-kpi strong.good{color:#1d9d6c} .proj-kpi strong.bad{color:#d64545}
.proj-kpi-s{display:block; font-size:11.5px; color:var(--mut); margin-top:4px}
.proj-kpi.rec{display:flex; gap:12px; align-items:flex-start}
.proj-kpi.rec svg{flex:none}
.proj-kpi-h{font-size:15px; font-weight:800; color:#1d9d6c}
.proj-kpi.rec p{margin:4px 0 0; font-size:12px; color:var(--mut); line-height:1.4}
.proj-kpi.rec.v-recommended{background:#f0faf5; border-color:#bfe6d3} .proj-kpi.rec.v-recommended svg{color:#1d9d6c}
.proj-kpi.rec.v-caution{background:#fff8ec; border-color:#f3d9a6} .proj-kpi.rec.v-caution svg, .proj-kpi.rec.v-caution .proj-kpi-h{color:#b45309}
.proj-kpi.rec.v-rejected{background:#fdf1f1; border-color:#f0c4c4} .proj-kpi.rec.v-rejected svg, .proj-kpi.rec.v-rejected .proj-kpi-h{color:#b42318}

.proj-band{display:grid; grid-template-columns:1.2fr 1fr; gap:18px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:16px}
.proj-bbm-k{font-size:11px; font-weight:700; color:var(--mut); text-transform:uppercase; display:flex; justify-content:space-between}
.proj-bbm-k span{font-weight:500; text-transform:none}
.proj-bbm-row{display:flex; align-items:center; gap:12px; margin-top:8px}
.proj-bbm-track{flex:1; height:16px; background:#e9eef3; border-radius:8px; overflow:hidden}
.proj-bbm-fill{display:block; height:100%; background:repeating-linear-gradient(90deg,#36b37e 0 13px,#2fa372 13px 15px); border-radius:8px}
.proj-bbm-fill.over{background:#d64545}
.proj-bbm-row b{font-size:22px; font-weight:800}
.proj-bbm-row b.good{color:#1d9d6c} .proj-bbm-row b.bad{color:#d64545}
.proj-checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.proj-checks li{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink)}
.proj-checks li.ok svg{color:#1d9d6c} .proj-checks li.no svg{color:#d64545}

.proj-grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}
.proj-grid2.bottom{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); align-items:start}
.proj-grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start}
.proj-col{display:flex; flex-direction:column; gap:16px; min-width:0}
.proj-box{border:1px solid var(--line); border-radius:12px; padding:16px; min-width:0}
.proj-box-h{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--sea); margin-bottom:12px}
.proj-box-h.num{color:#0a3a5c}

.proj-info{margin:0; display:flex; flex-direction:column; gap:12px}
.proj-info > div{display:grid; grid-template-columns:18px 1fr; gap:2px 10px; align-items:start}
.proj-info svg{color:var(--mut); margin-top:2px; grid-row:span 2}
.proj-info dt{font-size:11px; color:var(--mut)}
.proj-info dd{margin:0; font-weight:700; color:var(--ink); font-size:14px}

.proj-ports{display:flex; align-items:stretch; gap:6px}
.proj-port{flex:1; border:1px solid var(--line); border-radius:10px; padding:10px; text-align:center}
.proj-port.p-o{background:#f3f7fb} .proj-port.p-l{background:#f0faf4} .proj-port.p-d{background:#fff6ee}
.proj-port-k{font-size:10.5px; font-weight:700; color:var(--mut); letter-spacing:.05em}
.proj-port-v{font-size:13px; font-weight:700; color:var(--ink); margin-top:6px; display:flex; gap:4px; align-items:center; justify-content:center}
.proj-port-v svg{color:var(--sea); flex:none}
.proj-arrow{display:flex; align-items:center; color:var(--mut)}
.proj-route-line{margin-top:12px; border:1px dashed var(--line); border-radius:10px; padding:10px 12px; font-size:13px; font-weight:600; color:var(--ink)}
.proj-route-line span{display:block; font-size:10.5px; font-weight:700; color:var(--mut); text-transform:uppercase; margin-bottom:3px}

.proj-leg{font-size:11px; font-weight:700; text-transform:uppercase; padding:6px 10px; border-radius:7px; margin:12px 0 8px}
.proj-leg.out{background:#eef4fb; color:#15598f} .proj-leg.in{background:#eefaf2; color:#1d7a52}
.proj-leg.move{background:#fff6e9; color:#9a6112} .proj-leg.tot{background:#eef1f5; color:#33445a}
.proj-leg:first-of-type{margin-top:0}
.proj-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.proj-stats.tot{grid-template-columns:repeat(3,1fr)} .proj-stats.one{grid-template-columns:1fr; max-width:120px}
.proj-stats > div{text-align:center; background:#f8fafc; border:1px solid var(--line); border-radius:9px; padding:8px 4px}
.proj-stats span{display:block; font-size:18px; font-weight:800; color:var(--ink)}
.proj-stats i{font-size:10.5px; color:var(--mut); font-style:normal}
.proj-stats em{display:block; font-size:11px; color:var(--mut); font-style:normal; margin-top:3px}

.proj-dv-k,.proj-gps-h{font-size:10.5px; font-weight:700; color:var(--mut); text-transform:uppercase}
.proj-timeline{margin:8px 0 12px; padding-left:4px}
.proj-tl-node{display:flex; gap:6px; align-items:center; font-size:13px; font-weight:600; color:var(--ink)}
.proj-tl-node svg{color:var(--sea); flex:none}
.proj-tl-leg{font-size:11px; color:var(--mut); border-left:2px dashed var(--line); margin-left:7px; padding:6px 0 6px 14px}
.proj-gps{background:#f3f7fb; border:1px solid var(--line); border-radius:10px; padding:12px; text-align:center}
.proj-gps-v{font-size:26px; font-weight:800; color:var(--sea); margin:4px 0} .proj-gps-v i{font-size:13px; color:var(--mut)} .proj-gps-v.muted{color:var(--mut)}
.proj-gps p{margin:0; font-size:11px; color:var(--mut)}
.proj-total-dist{margin-top:12px; background:#eef1f5; border-radius:10px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center}
.proj-total-dist span{font-size:11px; font-weight:700; color:var(--mut)} .proj-total-dist b{font-size:18px; color:#0a3a5c}
.proj-note{font-size:11px; color:var(--mut); margin-top:10px; line-height:1.45}

.proj-times{list-style:none; margin:0; padding:0}
.proj-times li{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #f0f3f6; font-size:13px}
.proj-times li svg{color:var(--mut); flex:none} .proj-times li span{flex:1; color:var(--ink)}
.proj-times li b{font-size:15px; font-weight:800; color:var(--ink)} .proj-times li i{font-size:11px; color:var(--mut); font-style:normal; width:30px}
.proj-pertrip{margin-top:12px; background:#0a3a5c; color:#fff; border-radius:10px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center}
.proj-pertrip span{font-size:12px; font-weight:600} .proj-pertrip b{font-size:18px} .proj-pertrip i{font-size:12px; font-weight:500; font-style:normal}

.proj-fin-top,.proj-fin-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:stretch}
.proj-fin-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.proj-fin-metrics > div{border:1px solid var(--line); border-radius:10px; padding:10px; text-align:center}
.proj-fin-metrics span{display:block; font-size:10px; color:var(--mut); font-weight:700; text-transform:uppercase}
.proj-fin-metrics b{display:block; font-size:15px; font-weight:800; color:var(--ink); margin-top:4px}
.proj-fin-metrics b.good{color:#1d9d6c}
.proj-rev{background:#f0faf4; border:1px solid #cdeeda; border-radius:12px; padding:14px}
.proj-rev-k{font-size:11px; font-weight:700; color:#1d7a52; display:flex; gap:6px; align-items:center}
.proj-rev-v{font-size:23px; font-weight:800; color:var(--ink); margin-top:8px}
.proj-rev-s{font-size:12px; color:var(--mut); margin-top:4px}
.proj-gp{border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center}
.proj-gp-k{font-size:11px; font-weight:700; color:var(--mut)}
.proj-gp-v{font-size:20px; font-weight:800; color:#1d9d6c; margin-top:4px}
.proj-gp .proj-gp-v{font-size:18px}
.proj-ring{position:relative; width:118px; height:118px; margin:10px auto 0}
.proj-ring span{position:absolute; inset:0; display:grid; place-items:center; font-size:22px; font-weight:800; color:#1d9d6c}
.proj-ring-svg{width:118px; height:118px}
.proj-gp-day{background:#eefaf2; border-radius:9px; padding:8px; margin-top:8px}
.proj-gp-day span{display:block; font-size:10.5px; color:var(--mut); font-weight:700} .proj-gp-day b{font-size:17px; color:#1d9d6c}
.proj-gp-tc{display:flex; justify-content:space-between; font-size:12px; color:var(--ink); margin-top:6px; border-top:1px solid #f0f3f6; padding-top:6px}
.proj-gp-tc i{font-weight:700; font-style:normal}

.proj-cost-h{font-size:11px; font-weight:700; color:#b42318; text-transform:uppercase; display:flex; gap:6px; align-items:center; margin:16px 0 8px}
.proj-cost{width:100%; border-collapse:collapse; font-size:12.5px}
.proj-cost th{background:#fbecec; color:#7a2a2a; font-size:10px; text-transform:uppercase; padding:7px 8px; text-align:left; font-weight:700}
.proj-cost td{padding:7px 8px; border-bottom:1px solid #f1f1f1}
.proj-cost .num{text-align:right}
.proj-cost tfoot td{background:#fbecec; font-weight:800; color:#7a2a2a; border:none}
/* Neutral report table (voyage simulator) */
.proj-table{width:100%; border-collapse:collapse; font-size:12.5px}
.proj-table th{background:#eef1f5; color:#33445a; font-size:10.5px; text-transform:uppercase; padding:8px 10px; text-align:left; font-weight:700}
.proj-table td{padding:8px 10px; border-bottom:1px solid #f1f1f1}
.proj-table .num{text-align:right}
.proj-table tfoot td{background:#eef1f5; font-weight:800; color:#0a3a5c; border:none}

.proj-breakdown{display:flex; flex-direction:column; align-items:center; gap:16px; padding-top:6px}
.proj-donut-svg{width:170px; height:170px; flex:none}
.proj-legend{list-style:none; margin:0; padding:0; width:100%; max-width:300px; display:flex; flex-direction:column; gap:9px}
.proj-legend li{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink)}
.proj-legend .dot{width:11px; height:11px; border-radius:3px; flex:none}
.proj-legend b{margin-left:auto; font-weight:700; padding-left:8px}

.proj-rec{border-radius:12px; padding:14px}
.proj-rec.v-recommended{background:#f0faf5} .proj-rec.v-caution{background:#fff8ec} .proj-rec.v-rejected{background:#fdf1f1}
.proj-rec-h{display:flex; gap:8px; align-items:center; font-size:14px; font-weight:800; color:#1d9d6c; margin-bottom:10px; line-height:1.2}
.proj-rec-h svg{flex:none}
.proj-rec.v-caution .proj-rec-h{color:#b45309} .proj-rec.v-rejected .proj-rec-h{color:#b42318}
.proj-rec ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.proj-rec li{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--ink); line-height:1.35} .proj-rec li svg{color:#1d9d6c; flex:none; margin-top:2px}
.proj-rec.v-caution li svg, .proj-rec.v-rejected li svg{color:inherit}

.proj-foot{display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:14px; border-top:2px solid #0a3a5c}
.proj-foot-l{display:flex; gap:10px; align-items:center}
.proj-foot-logo{height:30px}
.proj-foot-l strong{display:block; font-size:13px; color:#0a3a5c; font-weight:800}
.proj-foot-l span{font-size:11px; color:var(--mut)}
.proj-foot-btn{display:flex; gap:8px}

@media(max-width:980px){
  .proj-kpis{grid-template-columns:1fr 1fr}
  .proj-grid2,.proj-grid2.bottom,.proj-grid3,.proj-band,.proj-fin-top,.proj-fin-row{grid-template-columns:1fr}
  .proj-fin-metrics{grid-template-columns:1fr 1fr}
}
@media print{
  .proj-sheet{box-shadow:none; border:none; max-width:100%; padding:0}
  .proj-grid2,.proj-grid3,.proj-box{break-inside:avoid}
}

/* Cuaca Maritim (BMKG embed) */
.mw-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px}
.mw-frame{width:100%; height:78vh; min-height:520px; border:0; display:block; background:#fff}

/* ===== Kondisi Laut & Pasang Surut — dark ocean panel ===== */
.marine-panel{margin-top:18px; background:linear-gradient(180deg,var(--sea-deep),#072a44); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:22px; color:#cfe0ee}
.marine-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.marine-title h2{margin:0; font-size:21px; font-weight:800; color:#fff; display:flex; align-items:center; gap:9px}
.marine-title h2 svg{color:#5cb0e6}
.marine-title span{font-size:13px; color:#88a6bf}
.marine-summary{display:flex; gap:18px; align-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 18px; flex-wrap:wrap}
.marine-summary .ms-wx{display:flex; gap:10px; align-items:center}
.marine-summary .ms-wx svg{color:#9fc3df}
.marine-summary span{display:block; font-size:11px; color:#88a6bf}
.marine-summary strong{font-size:14px; color:#fff; font-weight:700}
.marine-upd{text-align:right; font-size:12px; color:#88a6bf}
.marine-refresh{display:inline-flex; align-items:center; gap:5px; color:#9fc3df; text-decoration:none; margin-top:4px; font-size:12px}
.marine-refresh:hover{color:#fff}
.marine-empty{color:#88a6bf; font-size:13px}

.marine-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:14px}
.mcard{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-left:4px solid #6b8299; border-radius:13px; padding:14px}
.mcard.t-ok{border-left-color:#36b37e} .mcard.t-sail{border-left-color:#4aa3e0} .mcard.t-off{border-left-color:#6b8299}
.mc-top{display:flex; justify-content:space-between; align-items:center; gap:8px}
.mc-top strong{color:#fff; font-size:14.5px; font-weight:800}
.mc-badge{font-size:11px; padding:2px 9px; border-radius:999px; white-space:nowrap; font-weight:600}
.mc-badge.b-ok{background:rgba(54,179,126,.2); color:#5fd6a3} .mc-badge.b-sail{background:rgba(74,163,224,.2); color:#7cc0ee} .mc-badge.b-off{background:rgba(255,255,255,.12); color:#9fb4c7}
.mc-sub{font-size:11.5px; color:#88a6bf; margin-top:4px; line-height:1.5}
.mc-photo{margin:10px 0; height:118px; border-radius:10px; overflow:hidden; background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); display:grid; place-items:center}
.mc-photo img{width:100%; height:100%; object-fit:cover}
.mc-photo-ph{color:rgba(159,195,223,.5)}
.mc-metrics{display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:8px; border-top:1px solid rgba(255,255,255,.1); padding-top:10px}
.mc-metrics > div{display:flex; flex-direction:column; gap:2px}
.mc-metrics .div{border-left:1px solid rgba(255,255,255,.1); padding-left:8px}
.mc-metrics span{font-size:10.5px; color:#88a6bf}
.mc-metrics b{font-size:14px; color:#fff; font-weight:700; display:flex; align-items:center; gap:3px}
.mc-tides{margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.08)}
.mc-tides > div{display:flex; justify-content:space-between; font-size:12px; padding:2px 0; color:#c4d6e6}
.mc-tides span{color:#88a6bf}
.mc-wx{margin-top:10px; font-size:11.5px; color:#9fb4c7; display:flex; align-items:center; gap:5px}
.mc-wx svg{color:#7c9cb6; flex:none}
.mc-arrow{font-weight:800}
.mc-arrow.up{color:#3ddc97} .mc-arrow.down{color:#ff6b6b} .mc-arrow.flat{color:#9fb4c7}

.marine-legend{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:18px; font-size:12.5px; color:#9fb4c7}
.marine-legend span{display:flex; align-items:center; gap:6px}
.lg-dot{width:11px; height:11px; border-radius:50%; display:inline-block}
.lg-dot.ok{background:#36b37e} .lg-dot.off{background:#6b8299}
@media(max-width:760px){ .marine-head{flex-direction:column} .marine-upd{text-align:left} }

/* ============================================================================
   Modern interactions & theming (2026-07-05)
   ========================================================================== */

/* Respect reduced-motion — neutralises the animations/transitions below. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* Tactile press feedback (transitions already declared on .btn/.nav-item). */
.btn:active{transform:scale(.97)}
.nav-item:active{transform:scale(.99)}
.icon-btn{transition:transform .1s ease, background .15s ease}
.icon-btn:active{transform:scale(.9)}

/* Hover tints derived from tokens instead of hardcoded colors. */
@supports (background: color-mix(in oklab, white, black)){
  .btn.ghost:hover{background:color-mix(in oklab, var(--sea) 9%, transparent)}
}

/* Hover-lift + container queries on compact stat / balance tiles only (big
   container cards stay put). */
.stat-row .card, .stats .card{transition:transform .18s ease, box-shadow .18s ease; container-type:inline-size}
.stat-row .card:hover, .stats .card:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(11,58,92,.14)}

/* Dropdown entrance/exit — native, no JS (Safari 17.4+/Chrome 116+). The menu
   toggles via [hidden]; allow-discrete animates display so exit is visible. */
.notif-menu{transition:opacity .16s ease, display .16s allow-discrete}
.notif-menu[hidden]{opacity:0}
@starting-style{ .notif-menu:not([hidden]){opacity:0} }
.deskbar .notif-menu{transition:opacity .16s ease, transform .16s ease, display .16s allow-discrete}
.deskbar .notif-menu[hidden]{transform:translateY(-6px) scale(.98)}
@starting-style{ .deskbar .notif-menu:not([hidden]){transform:translateY(-6px) scale(.98)} }

/* Subtle page-in on Turbo navigations (Turbo replaces the body → .main re-enters).
   Opacity-only to avoid nudging the Leaflet map. */
.main{animation:main-in .22s ease}
@keyframes main-in{from{opacity:0} to{opacity:1}}

/* Skeleton shimmer for Turbo frames while they load (Turbo sets aria-busy). */
turbo-frame[aria-busy="true"]{position:relative; display:block; min-height:60px; overflow:hidden}
turbo-frame[aria-busy="true"]::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--sea) 9%, transparent) 45%, transparent 70%);
  background-size:200% 100%; animation:shimmer 1.1s ease-in-out infinite}
@keyframes shimmer{from{background-position:180% 0} to{background-position:-80% 0}}
.skeleton{border-radius:8px; background:color-mix(in oklab, var(--ink) 8%, var(--panel)); animation:skel-pulse 1.2s ease-in-out infinite}
@keyframes skel-pulse{50%{opacity:.5}}

/* :has() — dim the Kas & Bank submit until both accounts are chosen (the selects
   carry `required`, so a blank option reads as :invalid). */
form:has(#cash_transaction_cash_account_id:invalid) .btn.primary,
form:has(#cash_transaction_counter_account_id:invalid) .btn.primary{opacity:.5; pointer-events:none}

/* Accessible focus ring for interactive controls. Inputs/selects/textareas are
   left to their own focus styling (a global offset outline double-boxed them). */
a:focus-visible, button:focus-visible, .nav-item:focus-visible{outline:2px solid var(--sea); outline-offset:2px}

/* Theme toggle button — mirrors the bell in each bar. */
.icon-top{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px;
  border:none; cursor:pointer; background:transparent; color:inherit; transition:background .15s ease, transform .1s ease}
.icon-top:active{transform:scale(.9)}
.mobilebar .icon-top{color:#cfe0ee; background:rgba(255,255,255,.08)}
.mobilebar .icon-top:hover{background:rgba(255,255,255,.18); color:#fff}
.deskbar .icon-top{color:var(--sea-deep); background:var(--bg)}
.deskbar .icon-top:hover{background:#e7eef4}
/* The bell's .notif has margin-left:auto; neutralise it inside the bars so the
   toggle sits beside the bell (deskbar right-aligns via flex-end; on the
   mobilebar the toggle carries the auto-margin so the cluster hugs the right). */
.deskbar .notif{margin-left:0}
.mobilebar .icon-top{margin-left:auto}
.mobilebar .notif{margin-left:0}

/* Dark mode — OPT-IN via the toggle (html[data-theme="dark"]). Flips the core
   surface tokens so tokenised components (cards, tables, text, deskbar) adapt.
   BETA: components with hardcoded colors still need tokenising. */
html[data-theme="dark"]{
  --ink:#e7eff6; --mut:#93a6b8; --line:#26384a; --bg:#0c1720; --panel:#13222e;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.4);
  --field-bg:#0f1d29; --field-bg-focus:#152634; --field-label:#a9bccd;
  --soft-line:#223444; --soft-bg:#101f2b;
}
/* Kontrol form yang digambar browser (kalender date-picker, panah number,
   tanda centang) ikut memakai skema gelap — tanpa ini ikonnya hitam di atas
   dasar gelap dan praktis tak terlihat. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{color-scheme:dark}
html[data-theme="dark"] .notif-menu{background:var(--panel); border-color:var(--line)}
html[data-theme="dark"] .deskbar .icon-top,
html[data-theme="dark"] .deskbar .bell-btn{color:var(--ink); background:rgba(255,255,255,.06)}
html[data-theme="dark"] .deskbar .icon-top:hover,
html[data-theme="dark"] .deskbar .bell-btn:hover{background:rgba(255,255,255,.12)}

/* ── Kepatuhan Dokumen Voyage — full-width, Montserrat ─────────────────────────
   The page used inline max-width:960px on every card (content stopped mid-screen)
   and inherited the app's Inter. Scoped to .compliance so nothing else changes. */
.compliance{font-family:"Montserrat",var(--font)}
.compliance h1,.compliance h2,.compliance h3,.compliance h4,
.compliance p,.compliance li,.compliance a,.compliance th,.compliance td,
.compliance .btn,.compliance select,.compliance button{font-family:"Montserrat",var(--font)}
.compliance .topbar{margin-bottom:20px}
.compliance .crumb a{font-weight:600; text-decoration:none}
.compliance .crumb a:hover{text-decoration:underline}

/* Status gate — one clean card, coloured left rail by state */
.compliance .gate{padding:20px 24px; margin-bottom:16px; border-left:4px solid transparent}
.compliance .gate.blocked{border-left-color:var(--danger)}
.compliance .gate.ready{border-left-color:#12a150}
.compliance .gate-title{margin:0 0 12px; font-size:15px; font-weight:700; letter-spacing:-.01em}
.compliance .gate-title.blocked{color:#a4243b}
.compliance .gate-title.ready{color:#0a7a44}
.compliance .gate-final{margin:0; color:var(--mut)}
/* multi-column so the required-items list uses the full width instead of one skinny column */
.compliance .gate-list{margin:0 0 16px; padding-left:20px; columns:260px 3; column-gap:40px; list-style:disc}
.compliance .gate-list li{margin:5px 0; color:#a4243b; font-size:13.5px; break-inside:avoid}
.compliance .gate-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.compliance .gate-warn{margin:16px 0 0; padding:12px 15px; background:#fff8e6; border:1px solid #efdca0;
  border-radius:10px; color:#8a6100; font-size:13px; line-height:1.55}

/* Category tables — full-width, tidy header + roomier rows */
.compliance .cat{margin-bottom:16px}
.compliance .cat-head{padding:15px 20px; font-weight:700; font-size:14px; letter-spacing:-.01em; border-bottom:1px solid var(--line)}
.compliance table{min-width:760px}
.compliance thead th{padding:13px 20px}
.compliance tbody td{padding:15px 20px; vertical-align:top; border-bottom:1px solid var(--line); font-size:13.5px}
.compliance tbody tr:last-child td{border-bottom:none}
.compliance .doc-name{font-weight:600; color:var(--ink)}
.compliance .doc-dir{display:block; margin-top:3px; color:var(--mut); font-size:12px}
.compliance .basis{color:var(--mut); font-size:12.5px}
.compliance .st{font-weight:700; font-size:13px}
.compliance .doc-auto{font-size:12.5px}
.compliance .drow{display:inline-flex; gap:8px; align-items:center}
.compliance .drow .fr-field{max-width:230px}

html[data-theme="dark"] .compliance .gate-warn{background:#332a10; border-color:#5a4a1c; color:#e6cf86}
html[data-theme="dark"] .compliance .gate-title.blocked,
html[data-theme="dark"] .compliance .gate-list li{color:#f0a0ac}

/* ── Monitor live alerts (pop-up + chime) ─────────────────────────────────────
   Fixed stack top-right; kept out of the page morph via data-turbo-permanent. */
.mon-toasts{position:fixed; top:16px; right:16px; z-index:9000; display:flex; flex-direction:column;
  gap:10px; max-width:min(380px,90vw); pointer-events:none}
.mon-toast{pointer-events:auto; display:flex; gap:11px; align-items:flex-start; padding:13px 15px;
  background:#0f2233; color:#eaf2f8; border:1px solid rgba(255,255,255,.12); border-left:4px solid #4aa3e0;
  border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.34); font-size:13.5px; line-height:1.4;
  animation:monIn .28s cubic-bezier(.2,.9,.3,1.3)}
.mon-toast.leaving{animation:monOut .25s ease forwards}
.mon-toast .mon-toast-dot{flex:none; width:9px; height:9px; margin-top:5px; border-radius:50%; background:#4aa3e0;
  box-shadow:0 0 0 4px rgba(74,163,224,.18)}
.mon-toast-txt{display:flex; flex-direction:column; gap:2px}
.mon-toast-txt strong{font-weight:700; letter-spacing:-.01em}
.mon-toast-txt span{opacity:.8; font-size:12.5px}
.mon-status{border-left-color:#4aa3e0} .mon-status .mon-toast-dot{background:#4aa3e0; box-shadow:0 0 0 4px rgba(74,163,224,.18)}
.mon-timesheet{border-left-color:#2fbf9b} .mon-timesheet .mon-toast-dot{background:#2fbf9b; box-shadow:0 0 0 4px rgba(47,191,155,.18)}
.mon-gps{border-left-color:#7c8cf0} .mon-gps .mon-toast-dot{background:#7c8cf0; box-shadow:0 0 0 4px rgba(124,140,240,.2)}
.mon-silence{border-left-color:#e6483d} .mon-silence .mon-toast-dot{background:#e6483d; box-shadow:0 0 0 4px rgba(230,72,61,.22)}
@keyframes monIn{from{opacity:0; transform:translateX(24px) scale(.98)} to{opacity:1; transform:none}}
@keyframes monOut{to{opacity:0; transform:translateX(24px)}}
.mon-sound-btn{position:fixed; bottom:16px; right:16px; z-index:9000; border:1px solid var(--line);
  background:var(--panel); color:var(--mut); font-size:12.5px; font-weight:600; padding:8px 13px;
  border-radius:999px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.14)}
.mon-sound-btn.on{color:#0a7a44; border-color:#bfe4cf; background:#eafaf1}
@media print{ .mon-toasts,.mon-sound-btn{display:none} }

/* ---- Finance workspace shared components (dashboard, vessel-costs, …) ---- */
.fin-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px}
.fin-kpi{padding:18px 20px; display:flex; flex-direction:column; gap:7px}
.fin-kpi.is-accent{border-top:3px solid var(--sea)}
.fin-k{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mut)}
.fin-v{font-size:23px; font-weight:800; letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums}
.fin-d{font-size:11.5px; color:var(--mut)}
.fin-money{font-variant-numeric:tabular-nums; white-space:nowrap}
.fin-money.is-neg{color:var(--danger)}
.fin-money.is-zero{color:var(--mut); font-weight:600}
.fin-grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px}
.fin-panel{display:flex; flex-direction:column; overflow:hidden}
.fin-panel .table-scroll{flex:1}
.fin-link{font-size:12.5px; font-weight:700; color:var(--sea); text-decoration:none; white-space:nowrap}
.fin-link:hover{text-decoration:underline}
.fin-badge{font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px}
.fin-badge.is-ok{background:rgba(47,158,111,.14); color:#1d6b48}
.fin-badge.is-danger{background:rgba(214,69,69,.15); color:#a11c1c}
.fin-body{padding:16px 18px}
.fin-empty{padding:20px 18px; color:var(--mut); font-size:13.5px; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.fin-empty p{margin:0}
.fin-amt{font-variant-numeric:tabular-nums; font-weight:700}
.fin-amt.lg{font-size:16px; font-weight:800}
.fin-bs-g{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-weight:800; padding:12px 0 4px}
.fin-bs-g:first-child{padding-top:0}
.fin-bs-r{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.fin-bs-r.sub{font-size:12.5px; color:var(--mut)}
.fin-bs-r.sub .fin-amt{font-weight:600; color:var(--mut)}
.fin-foot{display:inline-block; margin-top:14px}
.fin-tax{display:flex; flex-direction:column; gap:12px}
.fin-taxrow{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fafcfe}
.fin-taxlbl{font-size:13.5px; font-weight:600; display:flex; flex-direction:column; gap:2px}
.fin-taxlbl small{font-size:11.5px; font-weight:500; color:var(--mut)}
.fin-note{color:var(--mut); font-size:12px; margin-top:20px; line-height:1.6}
tfoot td{border-top:2px solid var(--line); font-weight:700}
@media (max-width:1000px){ .fin-kpis{grid-template-columns:1fr 1fr} .fin-grid2{grid-template-columns:1fr} }
@media (max-width:560px){ .fin-kpis{grid-template-columns:1fr} }

/* ── Editor formulir BKI (Permohonan Survey) ───────────────────────────────────
   Matriks statutoria 30 baris × 8 kolom: kolomnya sempit, jadi ia menggulung
   sendiri di dalam kotaknya (halaman tak boleh ikut bergeser ke samping — lihat
   jebakan tabel lebar di layar kecil). Sel .na = abu-abu, sama seperti formulir
   asli BKI: di sana memang tidak ada kotak centang. */
.chk-chip em{display:block; font-style:italic; color:var(--mut); font-size:11px; line-height:1.3}
.chk-chip.sub{padding-left:20px}
.bki-matrix-wrap{overflow-x:auto; margin:4px 0 10px}
.bki-matrix{border-collapse:collapse; font-size:11.5px; min-width:640px}
.bki-matrix th, .bki-matrix td{border:1px solid var(--line); padding:3px 5px; text-align:center}
.bki-matrix thead th{background:#f4f8fb; font-size:10.5px; font-weight:700; color:#41586b; line-height:1.25}
.bki-matrix tbody th.it{background:#fbfdff; font-weight:700; color:#233b4d; cursor:help; width:78px}
.bki-matrix td.na{background:#e9edf1}
.bki-matrix td label{display:flex; align-items:center; justify-content:center; gap:4px; cursor:pointer}
.bki-matrix input{accent-color:var(--sea); margin:0}
.bki-matrix .ot{font-size:10px; color:var(--mut); font-weight:700}