/* console.css - dispatch console and driver app.
   Dark surface: this is a screen somebody sits in front of at 02:00. */

:root{
  --c-bg:#0C1714;
  --c-panel:#132F26;
  --c-panel-2:#17382D;
  --c-line:rgba(243,238,226,0.13);
  --c-line-2:rgba(243,238,226,0.07);
  --c-text:#F3EEE2;
  --c-dim:rgba(243,238,226,0.62);
  --c-dim-2:rgba(243,238,226,0.4);
}

body.console{background:var(--c-bg); color:var(--c-text);}
body.console ::selection{background:var(--gold); color:var(--forest-deep);}

/* ---------- top bar ---------- */
.cbar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:11px 18px; background:var(--c-panel); border-bottom:1px solid var(--c-line);
  position:sticky; top:0; z-index:900;
}
.cbar .brand{font-family:var(--font-display); font-weight:700; font-size:16px; display:flex; align-items:center; gap:9px;}
.cbar .brand small{display:block; font-family:var(--font-body); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); font-weight:600;}
.cbar .brand-mark{width:30px; height:30px; border-radius:7px; background:var(--copper); display:flex; align-items:center; justify-content:center;}
.cbar .brand-mark svg{width:17px; height:17px;}
.cbar-spacer{flex:1;}
.cbar-item{display:flex; flex-direction:column; gap:1px; min-width:74px;}
.cbar-item span{font-size:9.5px; text-transform:uppercase; letter-spacing:0.09em; color:var(--c-dim-2);}
.cbar-item b{font-family:var(--font-mono); font-size:14px; font-weight:600;}
.cbar-item b.crit{color:#FF8177;}
.cbar select{
  background:var(--c-panel-2); color:var(--c-text); border:1px solid var(--c-line);
  border-radius:var(--r-sm); padding:7px 9px; font-size:13px;
}
.cbar a.clink{font-size:13px; color:var(--c-dim); text-decoration:underline; text-underline-offset:2px;}
.cbar a.clink:hover{color:var(--c-text);}

/* ---------- layout ----------
   Mobile first. On a phone the three panels become one panel at a time behind
   a segmented switcher, because a stacked console means scrolling past the
   whole fleet to reach the alert you were called about. */
.cswitch{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  padding:8px 12px; background:var(--c-panel); border-bottom:1px solid var(--c-line);
  position:sticky; top:0; z-index:800;
}
.cswitch button{
  background:rgba(243,238,226,0.07); border:1px solid transparent; color:var(--c-dim);
  padding:11px 6px; border-radius:var(--r-sm); font-size:12.5px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.cswitch button.on{background:var(--copper); border-color:var(--copper); color:#fff;}
.cswitch .count{
  font-family:var(--font-mono); font-size:10.5px; padding:1px 5px; border-radius:99px;
  background:rgba(0,0,0,0.25);
}
.cswitch button.has-crit:not(.on){color:#FF8177;}

.cgrid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--c-line-2);}
.ccol{background:var(--c-bg); display:flex; flex-direction:column; min-height:0; overflow:hidden;}
.cgrid .ccol{display:none;}
.cgrid .ccol.show{display:flex; height:calc(100vh - 190px); min-height:420px;}

@media (min-width:1000px){
  .cswitch{display:none;}
  .cgrid{grid-template-columns:270px minmax(0,1fr); height:auto;}
  .cgrid .ccol{display:flex;}
  .cgrid .ccol.show{height:auto;}
  .cgrid .col-ships,.cgrid .col-map{height:calc(100vh - 54px); min-height:560px;}
  .cgrid .col-alerts{grid-column:1 / -1; max-height:520px; height:auto;}
}
@media (min-width:1240px){
  .cgrid{grid-template-columns:296px minmax(0,1fr) 342px; height:calc(100vh - 54px); min-height:640px;}
  .cgrid .col-ships,.cgrid .col-map{height:auto; min-height:0;}
  .cgrid .col-alerts{grid-column:auto; max-height:none;}
}
.ccol-scroll{overflow-y:auto; min-height:0; flex:1;}
.ccol-head{
  padding:11px 14px; border-bottom:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.09em; color:var(--c-dim);
  background:var(--c-panel); flex-shrink:0;
}
.col-map{position:relative;}
.col-map .mapbox{border:none; border-radius:0; flex:1; height:100%; min-height:340px;}

/* ---------- shipment rail ---------- */
.ship-item{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:13px 14px; border-bottom:1px solid var(--c-line-2); color:inherit;
  display:block; transition:background .12s;
}
.ship-item:hover{background:var(--c-panel-2);}
.ship-item.active{background:var(--c-panel-2); box-shadow:inset 3px 0 0 var(--copper);}
.ship-top{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:5px;}
.ship-top b{font-family:var(--font-mono); font-size:12.5px;}
.ship-sub{font-size:11.5px; color:var(--c-dim); margin-bottom:8px; line-height:1.45;}
.ship-bar{height:4px; border-radius:99px; background:rgba(243,238,226,0.12); overflow:hidden; margin-bottom:5px;}
.ship-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--ok),var(--copper)); transition:width .8s linear;}
.ship-meta{display:flex; justify-content:space-between; font-size:10.5px; color:var(--c-dim-2); font-family:var(--font-mono);}
.ship-flags{display:flex; gap:5px; margin-top:7px; flex-wrap:wrap;}
.flag{font-size:9.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:2px 6px; border-radius:4px;}
.flag-crit{background:rgba(255,107,94,0.18); color:#FF8177;}
.flag-warn{background:rgba(231,163,62,0.2); color:var(--gold);}
.flag-dark{background:rgba(243,238,226,0.1); color:var(--c-dim);}

/* ---------- alert queue ---------- */
.alert-card{
  padding:13px 14px; border-bottom:1px solid var(--c-line-2);
  border-left:3px solid transparent; transition:background .12s;
}
.alert-card:hover{background:var(--c-panel-2);}
.alert-card.sev-critical{border-left-color:#FF6B5E; background:rgba(255,107,94,0.05);}
.alert-card.sev-high{border-left-color:var(--gold);}
.alert-card.sev-info{border-left-color:rgba(243,238,226,0.25);}
.alert-card.done{opacity:0.45;}
.alert-card.fresh{animation:alert-in .3s ease-out;}
@keyframes alert-in{from{opacity:0; transform:translateX(14px);} to{opacity:1; transform:none;}}

/* Acknowledgement clock. A bar draining toward zero reads faster at a glance
   than a number, which is the point when it is 02:00. */
.sla-bar{height:3px; border-radius:99px; background:rgba(243,238,226,0.12); overflow:hidden; margin-bottom:9px;}
.sla-bar i{display:block; height:100%; background:var(--gold); border-radius:99px; transition:width 1s linear;}
.sla-bar.hot i{background:#FF6B5E;}
.sla-bar.expired i{width:100% !important; background:#FF6B5E; animation:pulse-bar 1.4s ease-in-out infinite;}
@keyframes pulse-bar{0%,100%{opacity:1;} 50%{opacity:0.35;}}
.alert-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:5px;}
.alert-head b{font-size:12.5px; font-family:var(--font-display);}
.alert-head time{font-size:10.5px; color:var(--c-dim-2); font-family:var(--font-mono); white-space:nowrap;}
.alert-msg{font-size:12.5px; color:var(--c-dim); line-height:1.5; margin-bottom:9px;}
.alert-actions{display:flex; gap:7px; align-items:center; flex-wrap:wrap;}
.sla{font-family:var(--font-mono); font-size:10.5px; padding:2px 7px; border-radius:4px; background:rgba(243,238,226,0.08); color:var(--c-dim);}
.sla.hot{background:rgba(255,107,94,0.2); color:#FF8177;}
.sla.done{background:rgba(95,211,160,0.16); color:#5FD3A0;}
.btn-c{
  background:rgba(243,238,226,0.09); border:1px solid var(--c-line); color:var(--c-text);
  padding:5px 11px; border-radius:var(--r-sm); font-size:12px; font-weight:600; cursor:pointer;
}
.btn-c:hover{background:rgba(243,238,226,0.16);}
.btn-c.primary{background:var(--copper); border-color:var(--copper); color:#fff;}
.btn-c.primary:hover{background:var(--copper-dark);}
.empty{padding:26px 16px; font-size:13px; color:var(--c-dim-2); text-align:center; line-height:1.6;}

/* ---------- bottom drawer ---------- */
.drawer{background:var(--c-panel); border-top:1px solid var(--c-line);}
.drawer-tabs{display:flex; gap:2px; padding:0 14px; border-bottom:1px solid var(--c-line); flex-wrap:wrap;}
.drawer-tabs button{
  background:none; border:none; color:var(--c-dim); cursor:pointer;
  padding:12px 14px; font-size:12.5px; font-weight:600;
  border-bottom:2px solid transparent;
}
.drawer-tabs button.on{color:var(--c-text); border-bottom-color:var(--copper);}
.drawer-body{padding:18px; max-height:360px; overflow-y:auto;}
.drawer-body h4{font-size:13px; margin-bottom:8px;}
.drawer-body p.note{font-size:12.5px; color:var(--c-dim); line-height:1.6; margin-bottom:14px; max-width:88ch;}

.inject-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px;}
.inject-card{
  background:var(--c-panel-2); border:1px solid var(--c-line); border-radius:var(--r-md);
  padding:13px; text-align:left; cursor:pointer; color:inherit; transition:border-color .15s, transform .12s;
}
.inject-card:hover{border-color:var(--copper); transform:translateY(-1px);}
.inject-card b{display:block; font-family:var(--font-display); font-size:13px; margin-bottom:4px;}
.inject-card span{font-size:11.5px; color:var(--c-dim); line-height:1.5; display:block;}
.inject-card em{display:block; margin-top:7px; font-style:normal; font-family:var(--font-mono); font-size:10px; color:var(--gold);}

.log-tbl{width:100%; border-collapse:collapse; font-size:12px;}
.log-tbl th{
  text-align:left; padding:8px 10px; font-size:10px; text-transform:uppercase; letter-spacing:0.07em;
  color:var(--c-dim-2); border-bottom:1px solid var(--c-line); position:sticky; top:0; background:var(--c-panel);
}
.log-tbl td{padding:8px 10px; border-bottom:1px solid var(--c-line-2); vertical-align:top; color:var(--c-dim);}
.log-tbl td.mono{font-family:var(--font-mono); font-size:11px; color:var(--c-text);}
.log-tbl tr.tampered td{background:rgba(255,107,94,0.12); color:#FFB4AC;}
.hashcell{font-family:var(--font-mono); font-size:10.5px; color:var(--c-dim-2);}

.verify-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:var(--r-md); margin-bottom:14px;
  background:var(--c-panel-2); border:1px solid var(--c-line); font-size:12.5px;
}
.verify-bar.ok{border-color:rgba(95,211,160,0.5);}
.verify-bar.bad{border-color:rgba(255,107,94,0.6); background:rgba(255,107,94,0.08);}

.rule-tbl{width:100%; border-collapse:collapse; font-size:12.5px;}
.rule-tbl th{text-align:left; padding:9px 10px; font-size:10px; text-transform:uppercase; letter-spacing:0.07em; color:var(--c-dim-2); border-bottom:1px solid var(--c-line);}
.rule-tbl td{padding:9px 10px; border-bottom:1px solid var(--c-line-2); color:var(--c-dim); vertical-align:top;}
.rule-tbl td b{color:var(--c-text); font-family:var(--font-mono); font-size:11.5px; font-weight:600;}

/* ---------- driver app ---------- */
body.driver{background:var(--c-bg); color:var(--c-text);}
.dwrap{max-width:520px; margin:0 auto; padding:16px 16px 64px;}
.dcard{
  background:var(--c-panel); border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:18px; margin-bottom:14px;
}
.dcard h2{font-size:16px; margin-bottom:4px;}
.dcard .sub{font-size:12.5px; color:var(--c-dim); line-height:1.55;}
.dkv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--c-line-2); font-size:13px;}
.dkv:last-child{border-bottom:none;}
.dkv span:first-child{color:var(--c-dim);}
.dkv span:last-child{font-family:var(--font-mono); font-size:12.5px; text-align:right;}
.dbtn{
  width:100%; padding:15px; border-radius:var(--r-md); border:none; cursor:pointer;
  font-size:15px; font-weight:700; font-family:var(--font-display); margin-top:10px;
  background:var(--copper); color:#fff;
}
.dbtn:hover{background:var(--copper-dark);}
.dbtn.sec{background:rgba(243,238,226,0.1); color:var(--c-text); border:1px solid var(--c-line);}
.dbtn.ok{background:var(--ok);}
.dbtn[disabled]{opacity:0.4; cursor:not-allowed;}
.dsteps{list-style:none; font-size:13px;}
.dsteps li{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--c-line-2); align-items:flex-start;}
.dsteps li:last-child{border-bottom:none;}
.dsteps .s-dot{width:10px; height:10px; border-radius:50%; background:rgba(243,238,226,0.2); margin-top:5px; flex-shrink:0;}
.dsteps li.cleared .s-dot{background:var(--ok);}
.dsteps li.active .s-dot{background:var(--copper); box-shadow:0 0 0 4px rgba(193,101,47,0.22);}
.dsteps li b{display:block; font-size:13px; font-weight:600;}
.dsteps li span{font-size:11.5px; color:var(--c-dim-2); font-family:var(--font-mono);}
.otp-input{
  width:100%; padding:16px; text-align:center; letter-spacing:0.5em; font-family:var(--font-mono);
  font-size:24px; font-weight:600; border-radius:var(--r-md);
  border:1.5px solid var(--c-line); background:var(--c-panel-2); color:var(--c-text);
}
.otp-input.bad{border-color:#FF6B5E;}
.sigpad{
  width:100%; height:150px; background:#F3EEE2; border-radius:var(--r-md); touch-action:none;
  display:block; cursor:crosshair;
}
.podthumb{width:100%; border-radius:var(--r-md); margin-top:10px; border:1px solid var(--c-line);}
.dmap{height:220px; border-radius:var(--r-md); overflow:hidden; margin-bottom:14px;}
.dnote{font-size:11.5px; color:var(--c-dim-2); line-height:1.6; margin-top:10px;}
.role-note{
  background:rgba(231,163,62,0.1); border:1px solid rgba(231,163,62,0.3);
  border-radius:var(--r-md); padding:12px 14px; font-size:12.5px; color:var(--gold);
  line-height:1.55; margin-bottom:14px;
}