/* RTS ERP — navy and red are taken from the company mark. Red is spent on one thing:
   something is late, blocked or wrong. Nothing decorative is ever red. */
:root{
  --ink:#101840; --signal:#D02030; --sea:#0E6E68; --ore:#8A5A12; --slate:#5B6880;
  --bg:#E9EDF2; --surface:#FFFFFF; --surface2:#F3F6F9; --rule:#CBD4E0; --rule2:#E3E8EF;
  --text:#101840; --muted:#5B6880; --dim:#9AA6BC; --onInk:#FFFFFF; --onInkDim:#AEB8D4;
  --radius:2px;
}
:root[data-theme="dark"]{
  --ink:#1D6FD8; --signal:#E8596A; --sea:#2E9A92; --ore:#C08A2C; --slate:#8595AE;
  --bg:#060B18; --surface:#101A2E; --surface2:#0B1424; --rule:#22304C; --rule2:#1A2740;
  --text:#E4EAF4; --muted:#8595AE; --dim:#4A5B78; --onInk:#FFFFFF; --onInkDim:#AEB8D4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.5 'IBM Plex Sans',system-ui,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-text-size-adjust:100%;
}
.cond{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif}
code,.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.015em}
h1{font-size:26px} h2{font-size:17px} h3{font-size:15px}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--text)}
.hide{display:none !important}
.nowrap{white-space:nowrap}
.num{text-align:right}
.sub2{font-size:12px;color:var(--muted)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  padding:13px 24px; background:#101840; color:var(--onInk);
}
:root[data-theme="dark"] .topbar{background:#0B1326; border-bottom:1px solid var(--rule)}
.topbar a{color:var(--onInk); text-decoration:none}
.homelink{display:inline-flex; align-items:center; gap:11px; flex:0 0 auto}
.logo{height:30px; width:auto; display:block}
.area{font-size:17px; font-weight:600; letter-spacing:-0.01em}
.who{margin-left:auto; text-align:right; line-height:1.2; font-size:13px}
.who small{display:block; font-size:11px; color:var(--onInkDim); letter-spacing:0.07em;
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif}
.langbtn{font:600 12px/1 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif; letter-spacing:.04em}
.iconbtn{
  flex:0 0 auto; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); background:none;
  color:var(--onInk); cursor:pointer;
}
.iconbtn:hover{border-color:rgba(255,255,255,.5)}
main{max-width:1320px; margin:0 auto; padding:20px 24px 64px}

/* ---------- area sub-navigation ---------- */
.subnav{display:flex; flex-wrap:wrap; gap:20px; margin-bottom:20px; border-bottom:1px solid var(--rule)}
.subnav button{
  border:none; background:none; cursor:pointer; padding:0 0 10px; font-size:14px; color:var(--muted);
}
.subnav button:hover{color:var(--text)}
/* the date period, on the right of the screen tabs */
.subnav .period{margin-left:auto; display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:4px 0 8px; font-size:13px}
.subnav .period select, .subnav .period input{font:inherit; font-size:13px; padding:4px 8px; border:1px solid var(--rule);
  border-radius:6px; background:var(--surface); color:var(--text)}
@media (max-width:700px){ .subnav .period{margin-left:0; width:100%} }
.subnav button[aria-selected="true"]{
  color:var(--text); font-weight:600; border-bottom:2px solid var(--signal); margin-bottom:-1px;
}

/* ---------- home ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px}
.tile{
  display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--radius); padding:20px 20px 18px; cursor:pointer;
  text-align:left; width:100%; font:inherit;
}
.tile:hover{border-color:var(--ink)}
.tile .top{display:flex; align-items:flex-start; gap:14px}
.mark{
  flex:0 0 auto; display:inline-flex; width:44px; height:44px; border-radius:var(--radius);
  align-items:center; justify-content:center; color:var(--ink);
  background:color-mix(in srgb, var(--ink) 7%, transparent);
}
.mark.flag{color:var(--signal); background:color-mix(in srgb, var(--signal) 8%, transparent)}
.tile .name{display:block; font-size:17px; font-weight:600; letter-spacing:-0.01em}
.tile .what{display:block; font-size:13px; color:var(--muted); margin-top:2px}
.tile .foot{
  display:flex; align-items:baseline; gap:10px; margin-top:16px; padding-top:13px;
  border-top:1px solid var(--rule2);
}
.tile .count{font-size:19px; font-weight:600; letter-spacing:-0.01em}
.tile .count.flag{color:var(--signal)}

/* ---------- cards and tables ---------- */
.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); margin-bottom:16px}
.card>header{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--rule); flex-wrap:wrap}
.card>header .sub{color:var(--muted); font-size:13px}
.card>header .spacer{margin-left:auto}
.card .body{padding:18px}

.btn{
  padding:8px 15px; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--surface); color:var(--text); cursor:pointer; font-weight:500; white-space:nowrap;
}
.btn:hover:not(:disabled){border-color:var(--muted)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.primary{background:#101840; border-color:#101840; color:#FFFFFF; font-weight:600}
:root[data-theme="dark"] .btn.primary{background:var(--ink); border-color:var(--ink)}
.btn.primary:hover:not(:disabled){filter:brightness(1.15)}
.btn.danger{color:var(--signal); border-color:color-mix(in srgb, var(--signal) 35%, var(--rule))}
.btn.small{padding:5px 11px; font-size:13px}
.search{
  flex:1 1 180px; max-width:280px; padding:7px 11px; border:1px solid var(--rule);
  border-radius:var(--radius); background:var(--surface2);
}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:13px}
.field label{
  font-size:12px; color:var(--muted); letter-spacing:0.04em;
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
}
.field input,.field select,.field textarea{
  padding:9px 11px; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--surface2); width:100%; min-width:0;
}
.field textarea{resize:vertical; min-height:62px}
.field .hint{font-size:12px; color:var(--dim)}
.row{display:flex; flex-wrap:wrap; gap:12px}
.row>*{flex:1 1 200px}
.check{display:flex; align-items:center; gap:8px; font-size:14px}
.check input{width:16px; height:16px; accent-color:var(--ink); flex:0 0 auto}
.tagset{display:flex; flex-wrap:wrap; gap:14px; padding:4px 0}

.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:14px}
th{
  text-align:left; font-size:12px; font-weight:600; letter-spacing:0.04em; color:var(--muted);
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
  padding:9px 14px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
td{padding:10px 14px; border-bottom:1px solid var(--rule2); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface2)}
tr.clickable{cursor:pointer}
tr.inactive td:not(:last-child){opacity:.5}

.pill{
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:500;
  background:var(--surface2); border:1px solid var(--rule); white-space:nowrap;
}
.pill+.pill{margin-left:4px}
.pill.ok{color:var(--sea); border-color:color-mix(in srgb, var(--sea) 35%, transparent)}
.pill.off{color:var(--dim)}
.pill.admin{color:var(--ink); border-color:color-mix(in srgb, var(--ink) 35%, transparent)}
.pill.warn{color:var(--ore); border-color:color-mix(in srgb, var(--ore) 35%, transparent)}
.pill.bad{color:var(--signal); border-color:color-mix(in srgb, var(--signal) 35%, transparent)}
.pill.tug{color:var(--ink); border-color:color-mix(in srgb, var(--ink) 35%, transparent)}
.pill.barge{color:var(--ore); border-color:color-mix(in srgb, var(--ore) 35%, transparent)}

/* ---------- fleet board ---------- */
.board{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.voyage{
  background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--slate);
  border-radius:var(--radius); padding:17px 19px 18px; cursor:pointer; text-align:left;
  width:100%; font:inherit; color:inherit; display:block;
}
.voyage:hover{border-color:var(--ink); border-left-color:inherit}
.voyage.LOAD{border-left-color:var(--ink)}
.voyage.TRANSIT{border-left-color:var(--sea)}
.voyage.DISCHARGE{border-left-color:var(--ore)}
.voyage.RETURN{border-left-color:var(--slate)}
.voyage.late{border-left-color:var(--signal)}
.voyage .vessel{font-size:16px; font-weight:600; letter-spacing:-0.01em}
.voyage .route{
  font-size:13px; color:var(--muted); margin-top:5px;
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
}
.voyage .status{
  font-size:19px; font-weight:600; letter-spacing:-0.015em; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--rule2);
}
.voyage.LOAD .status{color:var(--ink)}
.voyage.TRANSIT .status{color:var(--sea)}
.voyage.DISCHARGE .status{color:var(--ore)}
.voyage.RETURN .status{color:var(--slate)}
.voyage.late .status{color:var(--signal)}
.voyage .since{font-size:13px; color:var(--muted); margin-top:3px}
.voyage.late .since{color:var(--signal); font-weight:600}
.voyage .detail{font-size:13px; color:var(--muted); margin-top:11px; line-height:1.4}

.stat{display:flex; gap:22px; flex-wrap:wrap; font-size:14px}
.stat div{min-width:96px}
.stat b{
  display:block; font-size:12px; color:var(--muted); letter-spacing:0.04em; font-weight:500;
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
}
.big{font-size:30px; font-weight:600; letter-spacing:-0.02em; line-height:1.15}
.big.flag{color:var(--signal)}

.milestones{display:grid; gap:10px 16px; grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
.milestones .field{margin-bottom:0}

/* ---------- chips, messages, dialog ---------- */
.chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:3px 6px 3px 10px;
  border:1px solid var(--rule); border-radius:999px; background:var(--surface2);
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12px;
}
.chip button{border:none; background:none; cursor:pointer; color:var(--muted); padding:0 2px; line-height:1}
.chip button:hover{color:var(--signal)}

.msg{padding:11px 15px; border-radius:var(--radius); font-size:14px; margin-bottom:13px; border:1px solid}
.msg.err{background:color-mix(in srgb, var(--signal) 9%, var(--surface)); border-color:color-mix(in srgb, var(--signal) 35%, transparent); color:var(--signal)}
.msg.ok{background:color-mix(in srgb, var(--sea) 9%, var(--surface)); border-color:color-mix(in srgb, var(--sea) 35%, transparent); color:var(--sea)}
.msg.warn{background:color-mix(in srgb, var(--ore) 9%, var(--surface)); border-color:color-mix(in srgb, var(--ore) 35%, transparent); color:var(--ore)}
.mrfile{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; padding:5px 0}
.mrfile.wrong a{text-decoration:line-through; color:var(--muted)}
.mrfile.wrong > span:not(.pill){color:var(--muted)}
.mrfile .why{flex-basis:100%; font-size:12px}
.lockbar{display:flex; flex-direction:column; gap:9px}
.lockbar .btn{align-self:flex-start}
.lockbar input, .lockbar select{color:var(--text)}
/* purchasing: one tab per step, the flow on each request, payments coming due */
.seg{display:inline-flex; flex-wrap:wrap; gap:4px}
.seg button{font:inherit; font-size:13px; padding:5px 10px; border:1px solid var(--rule); border-radius:6px;
  background:transparent; color:var(--text); cursor:pointer}
.seg button.on{border-color:var(--ink); color:var(--ink); font-weight:600}
.seg button .pill{margin-left:2px}
.flow{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 14px; font-size:13px}
.flow span{padding:3px 9px; border-radius:999px; border:1px solid var(--rule); color:var(--dim)}
.flow span.done{color:var(--sea); border-color:color-mix(in srgb, var(--sea) 35%, transparent)}
.flow span.now{color:var(--ink); border-color:var(--ink); font-weight:600}
.flow i{font-style:normal; color:var(--dim)}
.mritem{border:1px solid var(--rule); border-radius:var(--radius); padding:10px 12px 12px; margin-bottom:10px}
.mritem .row{gap:8px}
tr.flagged td:first-child{box-shadow:inset 3px 0 0 var(--signal)}
.empty{padding:30px 16px; text-align:center; color:var(--muted)}

dialog{
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); color:var(--text);
  padding:0; width:min(640px, calc(100vw - 28px)); max-height:88dvh;
}
dialog.wide{width:min(900px, calc(100vw - 24px)); max-width:none}
dialog::backdrop{background:rgba(16,24,64,.55)}
dialog header{display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--rule)}
dialog .body{padding:20px; overflow-y:auto; max-height:calc(88dvh - 126px)}
dialog footer{display:flex; gap:10px; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--rule)}
dialog .x{margin-left:auto; border:none; background:none; cursor:pointer; color:var(--muted); font-size:20px; line-height:1}

/* ---------- login ---------- */
.login-wrap{min-height:100dvh; display:grid; place-items:center; padding:24px 16px; background:#101840}
.login{width:100%; max-width:370px}
.login .logo{height:46px; margin:0 auto 26px; display:block}
.login .card{border-color:transparent}
.langpick{margin:18px 0 0; text-align:center; font-size:13px; color:var(--onInkDim)}
.langpick a{color:var(--onInkDim); text-decoration:none; padding:4px 2px}
.langpick a.on{color:var(--onInk); font-weight:600}

/* ---------- WhatsApp report ---------- */
.wa{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.wa article{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); display:flex; flex-direction:column}
.wa header{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--rule)}
.wa pre{
  margin:0; padding:15px 16px; flex:1; background:var(--surface2); white-space:pre-wrap; word-break:break-word;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12px; line-height:1.65;
}
.wa footer{padding:11px 16px; border-top:1px solid var(--rule); display:flex; gap:8px}

.diff{font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12px; line-height:1.6}
.diff b{font-weight:500; color:var(--muted)}
.diff .old{color:var(--signal); text-decoration:line-through}
.diff .new{color:var(--sea)}

@media (max-width:640px){
  main{padding:16px 13px 56px}
  td,th{padding:9px 10px}
  .topbar{padding:12px 14px; gap:10px}
  /* keep the sign-out button on screen: smaller logo, the area name shortens, no role line */
  .logo{height:24px}
  .area{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px}
  .who{margin-left:0; min-width:0; max-width:30vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .who small{display:none}
  .search{max-width:none}
  h1{font-size:22px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .tile{padding:14px 13px 13px}
  .tile .top{display:block}
  .mark{width:38px; height:38px}
  .tile .name{font-size:15px; margin-top:9px}
  .tile .what{display:none}
  .tile .foot{margin-top:10px; padding-top:9px; display:block}
  .tile .count{font-size:16px}
  .tile .foot .note{display:block; font-size:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ---------- fleet map ---------- */
.mapwrap{display:grid; grid-template-columns:1fr 280px; min-height:560px}
.mapbox{position:relative; min-height:560px; background:var(--bg)}
#windy,.windyframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.maplist{border-left:1px solid var(--rule); overflow:auto; max-height:640px}
.mrow{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; padding:11px 14px;
  background:none; border:0; border-bottom:1px solid var(--rule); cursor:pointer; font:inherit; color:inherit}
.mrow:hover:not(:disabled){background:var(--bg)}
.mrow.none{cursor:default; opacity:.65}
.vmark{background:none; border:0}
.vmark svg{display:block}
.vtag{position:absolute; left:30px; top:5px; padding:1px 5px; background:#fff; border:1px solid var(--rule);
  font:600 11px/1.3 "IBM Plex Sans Condensed",sans-serif; white-space:nowrap; color:#101840}
@media (max-width:760px){
  .mapwrap{grid-template-columns:1fr}
  .mapbox{min-height:420px}
  .maplist{border-left:0; border-top:1px solid var(--rule); max-height:260px}
}

/* ---------- vessel picker (vessel documents, crew) ---------- */
.vpick{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:flex-start; padding:12px 18px; border-bottom:1px solid var(--rule2)}
.vpick .grp{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.vpick .grp > span{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-right:2px}
.vpick button{border:1px solid var(--rule); background:var(--surface); color:var(--text); border-radius:999px;
  padding:5px 12px; font:inherit; font-size:13px; cursor:pointer; display:inline-flex; gap:6px; align-items:center}
.vpick button:hover{border-color:var(--ink)}
.vpick button.on{background:var(--ink); border-color:var(--ink); color:var(--onInk)}
.vpick .bad{min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--signal); color:#fff;
  font-size:11px; line-height:18px; text-align:center}
/* ---------- distance tool ---------- */
.distwrap{display:grid; grid-template-columns:minmax(0,1fr) 320px; min-height:560px; align-items:start}
.distmap{min-height:420px; border-right:1px solid var(--rule2)}
.distside{padding:14px 16px; display:flex; flex-direction:column; gap:12px}
.distside .big{font-size:28px; font-weight:600; letter-spacing:-.01em}
.distleg{font-size:12px; color:var(--muted); display:flex; justify-content:space-between; padding:2px 0; border-bottom:1px dashed var(--rule2)}
/* The map keeps a fixed height and stays in view while the side panel scrolls; z-index 0 with
   isolation keeps Leaflet's own layers (z-index 400+) under the sticky header. */
.distmapwrap{position:sticky; top:72px; align-self:start; height:min(calc(100vh - 96px), 720px); min-height:420px;
  border-right:1px solid var(--rule2); z-index:0; isolation:isolate; overflow:hidden}
.distmapwrap .distmap{border-right:none; height:100%}
.mapsearch{position:absolute; top:10px; left:54px; right:54px; max-width:420px; z-index:1000}
.mapsearch input{width:100%; font:inherit; font-size:14px; padding:9px 12px; border:1px solid var(--rule); border-radius:8px;
  background:var(--surface); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.18)}
.mapsearch-res{margin-top:4px; background:var(--surface); border:1px solid var(--rule); border-radius:8px; max-height:300px; overflow:auto;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.mapsearch-res button[data-hit]{display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; font:inherit; font-size:13px;
  padding:8px 10px; border:0; border-bottom:1px solid var(--rule2); background:transparent; color:var(--text); cursor:pointer}
.mapsearch-res button[data-hit]:hover{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.mapsearch-acts{padding:8px 10px; display:flex; flex-direction:column; gap:2px; font-size:13px}
.distpt{width:12px; height:12px; border-radius:50%; background:var(--signal); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.distpt.pod{width:16px; height:16px; background:#1D6FD8; margin:-2px}
@media (max-width:860px){ .distwrap{grid-template-columns:1fr} .distmapwrap{position:relative; top:auto; height:420px}
  .distmap, .distmapwrap{min-height:420px; border-right:none; border-bottom:1px solid var(--rule2)} .distside{max-height:none} .mapsearch{left:10px; right:10px} }

/* ---------- vessels: floating cards, and one vessel's page ---------- */
.vfloat{display:block}
.vtop{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 2px 6px}
.vtop h2{margin:0}
.vtop .spacer{flex:1 1 auto}
.vtop .search{border-radius:999px; padding-left:16px; background:var(--surface); border-color:transparent;
  box-shadow:0 1px 2px rgba(16,24,64,.05), 0 4px 12px rgba(16,24,64,.06)}
.vtop .btn{border-radius:999px; padding:6px 16px}
.vgroup{padding:6px 0 14px}
.vgroup h3{margin:14px 2px 12px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.vgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px}
.vcard{display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; font:inherit; cursor:pointer;
  padding:18px; border:0; border-radius:18px; background:var(--surface); color:var(--text);
  box-shadow:0 1px 2px rgba(16,24,64,.05), 0 6px 18px rgba(16,24,64,.07);
  transition:transform .15s ease, box-shadow .15s ease}
.vcard:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(16,24,64,.06), 0 12px 28px rgba(16,24,64,.12)}
.vcard:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
:root[data-theme="dark"] .vcard{box-shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35)}
.vcard.inactive{opacity:.55}
.vcard .vname{font-weight:600; font-size:15px; margin-top:8px}
.vicon{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px; flex:0 0 auto}
.vicon.tug{color:var(--ink); background:color-mix(in srgb, var(--ink) 9%, transparent)}
.vicon.barge{color:var(--ore); background:color-mix(in srgb, var(--ore) 12%, transparent)}
.vchip{margin-top:6px; font-size:12px; padding:3px 10px; border-radius:999px; color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent)}
.vchip.off{color:var(--muted); background:color-mix(in srgb, var(--muted) 12%, transparent)}
.vnow{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px 20px; padding:14px 16px; border-radius:14px;
  background:color-mix(in srgb, var(--sea) 7%, transparent)}
.vnow > div{display:flex; flex-direction:column; gap:3px}
.vnow b{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
.vbad, .vok{margin-top:8px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px}
.vbad{color:var(--signal); background:color-mix(in srgb, var(--signal) 10%, transparent)}
.vok{color:var(--sea); background:color-mix(in srgb, var(--sea) 10%, transparent)}
.vpage{background:var(--surface); border-radius:18px; overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,64,.05), 0 6px 18px rgba(16,24,64,.07)}
:root[data-theme="dark"] .vpage{box-shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35)}
.vhead{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 18px}
.vhead .spacer{flex:1 1 auto}
.vpage .btn{border-radius:999px; padding-left:14px; padding-right:14px}
.vtabs{display:flex; gap:20px; padding:0 18px; border-bottom:1px solid var(--rule2)}
.vtabs button{font:inherit; font-size:14px; padding:10px 0; border:0; background:none; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px}
.vtabs button[aria-selected="true"]{color:var(--text); font-weight:600; border-bottom-color:var(--signal)}
.vbadn{display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--signal); color:#fff; font-size:11px; line-height:18px; text-align:center}
#vBody{padding:16px 18px 20px}
.vinfo{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px 24px}
.vinfo > div{display:flex; flex-direction:column; gap:3px}
.vinfo b{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
@media (max-width:640px){ .vgrid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px} .vcard{padding:12px; border-radius:16px} .vicon{width:46px; height:46px; border-radius:13px} .vicon svg{width:36px; height:36px} }

/* ---------- analytics ---------- */
.an-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px}
.an-kpi{background:var(--surface2); border:1px solid var(--rule2); border-radius:var(--radius); padding:12px 14px; min-width:0; display:flex; flex-direction:column; gap:2px}
.an-kpi .l{font:500 11px/1.3 'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.an-kpi b{font-size:22px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.an-kpi.flag b{color:var(--signal)}
.an-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.an-panel{border:1px solid var(--rule2); border-radius:var(--radius); padding:14px; min-width:0; display:flex; flex-direction:column; gap:8px}
.an-panel.wide{grid-column:1/-1}
.an-chart{width:100%; min-height:200px}
.an-chart svg text{font:11px 'IBM Plex Sans',sans-serif; fill:var(--muted)}
.an-chart svg .an-val{font:11px 'IBM Plex Mono',monospace; fill:var(--text)}
.an-grid line.an-grid, .an-chart line.an-grid{stroke:var(--rule2); stroke-width:1}
.an-chart line.an-grid.zero{stroke:var(--rule)}
.an-chart line.an-link{stroke:var(--dim); stroke-dasharray:2 3}
.an-chart rect.an-hit{fill:transparent}
.an-legend{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted)}
.an-legend span{display:inline-flex; align-items:center; gap:6px}
.an-legend i{width:10px; height:10px; border-radius:2px; display:inline-block}
.an-bars{display:flex; flex-direction:column; gap:7px}
.an-bar{display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13px}
.an-bar .lab{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.an-bar .trk{height:11px; background:var(--surface2)}
.an-bar .trk span{display:block; height:100%; border-radius:0 2px 2px 0}
.an-bar .v{font:12px 'IBM Plex Mono',monospace; text-align:right; min-width:58px}
.an-bar:hover .lab{color:var(--text)}
.an-stack{display:flex; flex-direction:column; gap:8px}
.an-srow{display:grid; grid-template-columns:minmax(0,34%) minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13px}
.an-srow .lab{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted)}
.an-srow .segs{display:flex; gap:2px; height:12px}
.an-srow .segs i{display:block; height:100%}
.an-srow .v{font:12px 'IBM Plex Mono',monospace; color:var(--muted); text-align:right}
.an-list{display:flex; flex-direction:column}
.an-list>div{display:flex; justify-content:space-between; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--rule2); font-size:13px}
.an-list>div:last-child{border-bottom:0}
.an-tip{position:fixed; z-index:60; pointer-events:none; transform:translate(-50%,calc(-100% - 12px)); max-width:260px;
  background:var(--text); color:var(--bg); font-size:12px; line-height:1.35; padding:7px 10px; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.25)}
@media (max-width:820px){ .an-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .an-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:420px){ .an-kpi b{font-size:18px} .an-bar{grid-template-columns:minmax(0,38%) minmax(0,1fr) auto} }

/* ---------- analytics palette ----------
   Chart colours for Analytics: one main colour for most marks, one accent for what the eye
   should land on, status colours only for state. Defined for every page (the ERP's own
   address keeps these defaults); analytics.<domain> sets html.an-host and gets its own look:
   B "Steel & Copper" by day, C "Navy & Gold" at night. Red stays for alerts only.
   All four series per theme checked for colour-blind separation and contrast. */
:root{
  --an-main:#2B5DAA; --an-accent:#C2622D; --an-3:#7A62B0; --an-4:#2A9160;
  --an-good:#2A9160; --an-warn:#B97C00; --an-crit:#D02030; --an-neutral:#A3AEC0;
  --an-shadow:0 8px 24px rgba(16,24,64,.08), 0 1px 2px rgba(16,24,64,.06);
}
:root[data-theme="dark"]{
  --an-main:#4A86E0; --an-accent:#B8892A; --an-3:#8C7AD8; --an-4:#2C9E78;
  --an-good:#3DBE85; --an-warn:#E0A53A; --an-crit:#F0575D; --an-neutral:#4E6290;
  --an-shadow:0 12px 30px rgba(0,0,0,.42);
}
/* B · Steel & Copper (day) */
html.an-host{
  --ink:#2B5DAA; --signal:#D02030;
  --bg:#EEF1F4; --surface:#FFFFFF; --surface2:#F3F6FA; --rule:#DCE3ED; --rule2:#E7ECF2;
  --text:#101840; --muted:#56637A; --dim:#8C98AD;
}
/* C · Navy & Gold (night) */
html.an-host[data-theme="dark"]{
  --ink:#4A86E0; --signal:#F0575D;
  --bg:#0C1633; --surface:#13234A; --surface2:#172A57; --rule:#22356A; --rule2:#1C2E5C;
  --text:#EEF1F8; --muted:#A3B0CC; --dim:#6B7BA3;
}
html.an-host body{background:var(--bg); background-image:radial-gradient(1100px 480px at 88% -10%, var(--surface2), transparent 70%); background-attachment:fixed}
html.an-host .topbar{background:#101840}
html.an-host[data-theme="dark"] .topbar{background:#0A1230; border-bottom:0}
/* floating cards: no outline, soft corners, a shadow */
html.an-host .tile{border:0; border-radius:18px; box-shadow:var(--an-shadow); transition:transform .15s ease}
html.an-host .tile:hover{transform:translateY(-2px)}
html.an-host .tile .mark{border-radius:12px; color:var(--tint, var(--an-main)); background:color-mix(in srgb, var(--tint, var(--an-main)) 15%, transparent)}
html.an-host .tile .mark.flag{color:var(--an-crit); background:color-mix(in srgb, var(--an-crit) 14%, transparent)}
html.an-host .tile .count.flag{color:var(--an-crit)}
html.an-host #anBox .card{background:transparent; border:0; box-shadow:none}
html.an-host #anBox .card>header{border:0; padding:0 2px 12px}
html.an-host #anBox .card>header h2{font-size:20px}
html.an-host #anBox .card .body{padding:0}
html.an-host .an-kpi, html.an-host .an-panel{background:var(--surface); border:0; border-radius:16px; box-shadow:var(--an-shadow)}
html.an-host .an-kpi{padding:16px 18px}
html.an-host .an-kpi.flag b{color:var(--an-crit)}
html.an-host .an-panel{padding:18px}
html.an-host .an-bar .trk{border-radius:0 5px 5px 0}
html.an-host .an-bar .trk span{border-radius:0 5px 5px 0}
html.an-host .subnav{border-bottom:0}
html.an-host .subnav .period select, html.an-host .subnav .period input{border-radius:999px; border:0; box-shadow:var(--an-shadow); padding:6px 12px}
@media (prefers-reduced-motion:reduce){ html.an-host .tile{transition:none} html.an-host .tile:hover{transform:none} }

/* MR list: numbered rows, sections, five-step progress, the next step, what needs attention */
td.rowno,th.rowno{width:28px;color:var(--dim);font-variant-numeric:tabular-nums;text-align:right;padding-right:4px}
tr.sect td{background:var(--surface2);font-weight:600;font-size:13px;padding:8px 14px;letter-spacing:.02em}
tr.sect.me td{color:var(--signal)}
.prog{display:flex;gap:3px;flex-wrap:nowrap}
.prog .st{font-size:11px;line-height:1;padding:5px 7px;border-radius:999px;border:1px solid var(--rule);color:var(--dim);white-space:nowrap}
.prog .st.done{background:color-mix(in srgb, var(--sea) 12%, transparent);border-color:color-mix(in srgb, var(--sea) 35%, transparent);color:var(--sea)}
.prog .st.now{border-color:var(--ore);color:var(--ore);font-weight:600;box-shadow:0 0 0 1px var(--ore) inset}
.prog .st i{font-style:normal;margin-right:3px}
.prog .st.na{border-style:dashed;opacity:.45;text-decoration:line-through}
.nextme b{color:var(--signal)}
.attn{font-size:12px;font-weight:600;white-space:nowrap}
.attn.bad{color:var(--signal)} .attn.warn{color:var(--ore)}
.attn::before{content:'● ';font-size:9px;vertical-align:1px}
.clip{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.num{white-space:nowrap}
.next b{white-space:nowrap}

/* ---------- analytics: board pack (screen and paper) ---------- */
.an-pack-tools{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:18px}
.an-pack{max-width:1040px; margin:0 auto; display:flex; flex-direction:column; gap:28px}
.an-pack-cover{display:flex; gap:18px; align-items:center; padding:22px 24px; border-radius:18px; background:var(--surface); box-shadow:var(--an-shadow)}
.an-pack-logo{height:46px; width:auto}
.an-pack-cover h1{font-size:24px; margin:2px 0}
.an-pack-k{margin:0; font:600 11.5px 'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.an-pack-toc{margin:0; padding:0 0 0 22px; columns:2; column-gap:32px; color:var(--muted); font-size:14px}
.an-pack-sec .an-chart{min-height:0}
@media print{
  @page{size:A4 landscape; margin:12mm}
  html.an-host, html.an-host[data-theme="dark"]{
    --ink:#2B5DAA; --signal:#D02030; --bg:#FFFFFF; --surface:#FFFFFF; --surface2:#F3F6FA; --rule:#DCE3ED; --rule2:#E7ECF2;
    --text:#101840; --muted:#56637A; --dim:#8C98AD;
    --an-main:#2B5DAA; --an-accent:#C2622D; --an-3:#7A62B0; --an-4:#2A9160;
    --an-good:#2A9160; --an-warn:#B97C00; --an-crit:#D02030; --an-neutral:#A3AEC0; --an-shadow:none;
  }
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  body, html.an-host body{background:#FFFFFF !important; background-image:none !important}
  .topbar, .subnav, .an-pack-tools, .an-tip, #toast{display:none !important}
  main{max-width:none; padding:0}
  .an-pack{max-width:none; gap:0}
  .an-pack-cover{box-shadow:none; border:1px solid var(--rule); margin-bottom:10mm}
  .an-pack-sec{break-before:page}
  html.an-host .an-kpi, html.an-host .an-panel{box-shadow:none; border:1px solid var(--rule2)}
  .an-kpi, .an-panel, .an-srow, .an-bar{break-inside:avoid}
  .an-grid{gap:8px}
}
html.an-host .tile{display:flex; flex-direction:column}
html.an-host .tile .top{align-items:flex-start}
html.an-host .tile .foot{flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; margin-top:auto}
html.an-host .tile .count{white-space:nowrap}
.an-srow .v{min-width:28px; white-space:nowrap}
html.an-host .an-pack-sec .card{background:transparent; border:0; box-shadow:none; margin-bottom:0}
html.an-host .an-pack-sec .card>header{border:0; padding:0 2px 12px}
html.an-host .an-pack-sec .card>header h2{font-size:20px}
html.an-host .an-pack-sec .card .body{padding:0}
html.an-host .tile .top{margin-bottom:16px}
.recapbox{border:1px solid var(--rule);border-radius:10px;padding:12px 14px;margin:14px 0}
.recapbox h3{margin:0 0 8px;font-size:14px}