:root{
  --navy:#1E1656; --navy-2:#2d2480; --blue:#2B9FDA; --blue-soft:#E6F3FB;
  --ink:#141414; --mute:#5f6672; --line:#D6D6D6; --line-soft:#E8EBEF;
  --bg:#F4F6F9; --white:#fff; --danger:#C62828; --amber:#E8A33D; --ok:#2E7D32;
  --label:168px; --bh:46px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.4 "Mona Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--ink);background:var(--bg);display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
/* top bar */
.top{background:var(--white);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;padding:0 24px;height:64px;flex:none}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.brand .mark{width:26px;height:26px;border-radius:3px;background:var(--blue);display:grid;place-items:center}
.brand .mark svg{width:16px;height:16px}
.brand b{font-weight:900;letter-spacing:.04em;font-size:19px}
.brand span.sep{width:1px;height:26px;background:var(--line);margin:0 6px}
.brand span.app{font-weight:600;font-size:15px;color:var(--mute);letter-spacing:.01em}
nav.tabs{display:flex;gap:4px;height:100%;margin-left:12px}
nav.tabs button{border:0;background:none;padding:0 14px;height:100%;font-weight:700;color:var(--mute);border-bottom:3px solid transparent;font-size:14px}
nav.tabs button:hover{color:var(--navy)}
nav.tabs button.on{color:var(--navy);border-bottom-color:var(--blue)}
.top .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.btn{border:1px solid var(--line);background:var(--white);padding:7px 14px;border-radius:3px;font-weight:600;font-size:13px;color:var(--navy);white-space:nowrap}
.btn:hover{border-color:var(--navy)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-2)}
.btn.danger{color:var(--danger)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn[disabled]{opacity:.4;cursor:default}
/* toolbar */
.bar2{background:var(--white);border-bottom:1px solid var(--line);padding:10px 24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;flex:none}
.bar2 .grp{display:flex;gap:6px;align-items:center}
.bar2 input[type=search],.bar2 select,.field input,.field select,.field textarea,.tbl input,.tbl select{border:1px solid var(--line);border-radius:3px;padding:6px 9px;background:#fff;min-width:0}
.bar2 input[type=search]{width:210px}
.bar2 label.chk{display:flex;gap:6px;align-items:center;color:var(--mute);font-size:13px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.seg button{border:0;background:#fff;padding:6px 12px;font-size:13px;font-weight:600;color:var(--mute);border-right:1px solid var(--line)}
.seg button:last-child{border:0}
.seg button.on{background:var(--navy);color:#fff}
.pill{border:1px solid var(--line);background:#fff;border-radius:99px;padding:4px 11px;font-size:12.5px;font-weight:700;color:var(--mute)}
.pill.warn{color:var(--danger);border-color:#e7b4b4;background:#fdf1f1}
.pill.ok{color:var(--ok)}
.spacer{flex:1}
#content{flex:1;min-height:0;display:flex;flex-direction:column}
.pad{padding:20px 24px;overflow:auto;flex:1}
/* timeline */
.tl-wrap{flex:1;overflow:auto;background:#fff;position:relative;min-height:0}
.tl{position:relative}
.tl-head{position:sticky;top:0;z-index:20;display:flex;background:#fff;border-bottom:1px solid var(--line)}
.corner{position:sticky;left:0;z-index:30;width:var(--label);flex:none;background:var(--navy);color:#fff;padding:0 14px;display:flex;align-items:flex-end;padding-bottom:8px;font-size:11px;letter-spacing:.08em;font-weight:700;text-transform:uppercase}
.scale{position:relative;flex:none;color:var(--mute)}
.scale .mo,.scale .wk,.scale .dy{position:absolute;height:24px;border-left:1px solid var(--line-soft);padding:4px 6px;font-size:11.5px;white-space:nowrap;overflow:hidden}
.scale .mo{top:0;background:var(--navy);color:#fff;font-weight:700;border-left:1px solid #3a3190;letter-spacing:.03em}
.scale .wk{top:24px;background:var(--bg);font-weight:700;color:var(--navy)}
.scale .dy{top:48px;height:22px;padding:3px 0;text-align:center;font-size:10.5px}
.scale .dy.we{background:#eceff3}
.scale .dy.td,.scale .wk.td{background:var(--blue);color:#fff}
.row{display:flex;border-bottom:1px solid var(--line-soft)}
.lbl{position:sticky;left:0;z-index:10;width:var(--label);flex:none;background:#fff;border-right:1px solid var(--line);padding:10px 14px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.lbl b{color:var(--navy);font-size:14px;letter-spacing:.01em}
.lbl small{color:var(--mute);font-size:11.5px}
.lane{position:relative;flex:none}
.rows{position:relative}
.todayline{position:absolute;top:0;bottom:0;width:2px;background:var(--blue);z-index:5;pointer-events:none}
.todayline::before{content:"";position:absolute;top:0;left:-4px;border:5px solid transparent;border-top-color:var(--blue)}
.bar{position:absolute;height:var(--bh);border-radius:3px;padding:4px 9px;overflow:hidden;cursor:grab;user-select:none;touch-action:pan-y;display:flex;flex-direction:column;justify-content:center;gap:3px;z-index:2;font-size:12.5px;line-height:1.2}
.bar:active{cursor:grabbing}
.bar .b1{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .b2{display:flex;gap:4px;align-items:center;white-space:nowrap;overflow:hidden;font-size:11.5px}
.bar .b2 .pj{opacity:.75;overflow:hidden;text-overflow:ellipsis}
.bar .h{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:3}
.bar .h.l{left:0}.bar .h.r{right:0}
.bar:hover .h{background:rgba(43,159,218,.55)}
.chip{display:inline-block;padding:0 6px;border-radius:2px;font-weight:700;font-size:11px;line-height:17px;flex:none}
.chip.csi{background:var(--blue);color:#fff}
.chip.eng{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.chip.miss{background:#fff;color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger);border-style:dashed}
.chip.rem{opacity:.8;font-style:italic}
.st-Confirmed.ty-Voyage{background:var(--navy);color:#fff}
.st-Tentative{background:var(--blue-soft);color:var(--navy);outline:1.5px dashed var(--blue);outline-offset:-2px}
.ty-Standby{background:#E4E7EC;color:#2c3340}
.ty-Repairs{background:#FBE9C6;color:#5b3f00}
.st-Cancelled{background:repeating-linear-gradient(135deg,#f3f3f3 0 6px,#e8e8e8 6px 12px)!important;color:#777!important;text-decoration:line-through;outline:0!important}
.bar.conflict{box-shadow:0 0 0 2px var(--danger)}
.bar.conflict::after{content:"!";position:absolute;right:4px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--danger);color:#fff;font-weight:900;font-size:11px;display:grid;place-items:center;line-height:1}
.bar.dim{opacity:.18}
.bar.leave{background:repeating-linear-gradient(135deg,#eef0f3 0 6px,#dfe3e8 6px 12px);color:#444;cursor:pointer}
.bar.role-CSI{background:var(--blue);color:#fff}
.bar.role-Engineer{background:var(--navy);color:#fff}
.bar.remote{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px)}
.calrow .lane{height:30px}
.calflag{position:absolute;top:5px;font-size:10.5px;white-space:nowrap;color:var(--navy);font-weight:600;transform:translateX(-4px);padding-left:12px}
.calflag::before{content:"";position:absolute;left:0;top:3px;border:4px solid transparent;border-top:7px solid var(--amber)}
.empty{padding:60px;text-align:center;color:var(--mute)}
/* tables */
.card{background:#fff;border:1px solid var(--line);border-radius:4px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{position:sticky;top:0;background:var(--navy);color:#fff;text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:9px 10px;white-space:nowrap;z-index:2}
.tbl td{padding:7px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover{background:var(--blue-soft)}
.tbl input,.tbl select{width:100%}
.tbl td.num{white-space:nowrap}
.tag{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11.5px;font-weight:700;background:var(--bg);color:var(--mute)}
.tag.Confirmed{background:#e3f1e4;color:var(--ok)}
.tag.Tentative{background:var(--blue-soft);color:#176a96}
.tag.Cancelled{background:#eee;color:#777}
.h2{margin:0 0 10px;color:var(--navy);font-size:18px;font-weight:800}
.sub{color:var(--mute);margin:0 0 14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:1100px){.grid2{grid-template-columns:1fr}}
/* modal */
#modal{position:fixed;inset:0;background:rgba(20,16,50,.45);display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;z-index:100;overflow:auto}
#modal.on{display:flex}
.dlg{background:#fff;border-radius:4px;width:min(720px,100%);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.dlg header{background:var(--navy);color:#fff;padding:14px 20px;border-radius:4px 4px 0 0;display:flex;align-items:center;justify-content:space-between}
.dlg header h3{margin:0;font-size:16px;letter-spacing:.02em}
.dlg header button{background:none;border:0;color:#fff;font-size:22px;line-height:1}
.dlg .body{padding:18px 20px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px 14px}
.field{display:flex;flex-direction:column;gap:4px;grid-column:span 2}
.field.w3{grid-column:span 3}.field.w4{grid-column:span 4}.field.w6{grid-column:span 6}
.field label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.field .inl{display:flex;gap:10px;align-items:center}
.field .inl select{flex:1}
.field .inl label{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;display:flex;gap:5px;align-items:center;white-space:nowrap}
.dlg footer{padding:14px 20px;border-top:1px solid var(--line-soft);display:flex;gap:8px;align-items:center}
.alert{grid-column:1/-1;background:#fdf1f1;border:1px solid #e7b4b4;color:#8c1d1d;border-radius:3px;padding:8px 12px;font-size:12.5px}
.alert ul{margin:4px 0 0;padding-left:18px}
.shift{grid-column:1/-1;background:var(--bg);border-radius:3px;padding:10px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}
.shift input{width:70px;border:1px solid var(--line);border-radius:3px;padding:5px 8px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:3px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:200}
#toast.on{opacity:1}
.legend{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--mute);flex-wrap:wrap}
.legend i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
@media (max-width:900px){
  .top{height:auto;flex-wrap:wrap;padding:8px 16px;gap:8px 16px}
  nav.tabs{order:3;width:100%;margin:0;height:40px;overflow-x:auto}
  .top .right{flex-wrap:wrap}
  .bar2{padding:8px 16px}
  .pad{padding:16px}
  .field,.field.w3,.field.w4{grid-column:span 6}
}
@media print{
  .top,.bar2,.legend,#modal,#toast{display:none!important}
  body{background:#fff;display:block;height:auto}
  .tl-wrap{overflow:visible}
  @page{size:A3 landscape;margin:10mm}
}

/* ===== v2: web app additions ===== */
.who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute);padding-left:10px;border-left:1px solid var(--line)}
.who b{color:var(--navy)}
.live{width:8px;height:8px;border-radius:50%;background:#bbb;display:inline-block}
.live.on{background:#2fb344;box-shadow:0 0 0 3px rgba(47,179,68,.18)}
body.ro .edit-only{display:none!important}
#login{position:fixed;inset:0;background:linear-gradient(135deg,var(--navy),#2d2480 60%,#176a96);display:none;place-items:center;z-index:300;padding:16px}
#login.on{display:grid}
#login form{background:#fff;border-radius:4px;padding:30px 30px 24px;width:min(380px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35)}
#login h1{margin:14px 0 4px;font-size:20px;color:var(--navy)}
#login p{margin:0 0 18px;color:var(--mute)}
#login .field{grid-column:auto;margin-bottom:12px}
#login .err{color:var(--danger);font-size:13px;min-height:18px;margin-bottom:6px}
#login .brand{margin-bottom:4px}
.dash{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 380px}
@media (max-width:1100px){.dash{grid-template-columns:1fr;grid-template-rows:60vh auto;overflow:auto}}
.mapbox{position:relative;background:#cfe6f5;min-height:300px;overflow:hidden}
.mapbox>svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.mapbox>svg:active{cursor:grabbing}
.mapctl{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:6px;z-index:2}
.mapctl button{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:3px;font-size:18px;font-weight:700;color:var(--navy)}
.maplegend{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:3px;padding:8px 12px;font-size:12px;color:var(--mute);display:flex;gap:14px;flex-wrap:wrap;z-index:2}
.maplegend i{display:inline-block;margin-right:5px;vertical-align:-2px}
.asof{position:absolute;right:12px;top:12px;background:#fff;border:1px solid var(--line);border-radius:3px;padding:6px 8px;display:flex;gap:6px;align-items:center;z-index:2;font-size:12.5px}
.asof input{border:1px solid var(--line);border-radius:3px;padding:4px 6px}
.side{background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.side .seg{margin:12px 14px 0;align-self:flex-start}
.side .list{overflow:auto;flex:1;padding:8px 0 16px}
.item{padding:10px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.item:hover{background:var(--blue-soft)}
.item.sel{background:var(--blue-soft);box-shadow:inset 3px 0 var(--blue)}
.item .t{display:flex;justify-content:space-between;gap:8px;font-weight:700;color:var(--navy)}
.item .s{color:var(--mute);font-size:12.5px;margin-top:2px}
.item .c{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}
.detail{padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.detail h3{margin:0 0 2px;color:var(--navy);font-size:16px}
.detail .kv{display:grid;grid-template-columns:90px 1fr;gap:3px 10px;font-size:13px;margin-top:8px}
.detail .kv span:nth-child(odd){color:var(--mute)}
.split{flex:1;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr)}
@media (max-width:900px){.split{grid-template-columns:1fr;grid-template-rows:200px 1fr}}
.split .side{border-left:0;border-right:1px solid var(--line)}
.split .main{display:flex;flex-direction:column;min-height:0;min-width:0}
.mhead{padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mhead h2{margin:0;color:var(--navy);font-size:18px}
.mhead small{color:var(--mute)}
.bar.call{background:var(--blue);color:#fff}
.bar.call.dis{background:#176a96}
.bar.res-person{background:var(--navy);color:#fff}
.bar.res-material{background:#7a5b00;color:#fff}
.bar.planned{outline:1.5px dashed rgba(255,255,255,.85);outline-offset:-3px}
.pcount{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--bg);color:var(--mute);font-size:11px;font-weight:700;text-align:center}
.pcount.hot{background:var(--blue);color:#fff}
.mapsvg text{font-family:inherit;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.hint{padding:14px 20px;color:var(--mute);background:#fff8e6;border-bottom:1px solid #f0dfae;font-size:13px}
.tbl .num-in{width:84px}
.mini{font-size:12px;color:var(--mute)}
.acts{max-height:260px;overflow:auto;font-size:12.5px}
.acts div{padding:5px 10px;border-bottom:1px solid var(--line-soft)}
.pmap{background:#cfe6f5;border:1px solid var(--line);border-radius:3px;grid-column:1/-1}
.pmap svg{width:100%;display:block;cursor:crosshair}
.brand b,.brand .app{white-space:nowrap}
@media (max-width:1350px){.brand .sep,.brand .app{display:none}}
nav.tabs button{white-space:nowrap}