/* Cargostore Worldwide — Hire & Certification Console. Pack brand CSS (served at /pack.css after /app.css).
   Plain CSS (not Tailwind utilities) so it applies regardless of the framework's JIT scan. This IS the
   mockup's stylesheet — the green/charcoal Cargostore brand read off the logo, the sidebar+topbar shell,
   and every screen's chrome (quote / fleet / utilisation / schedule / voi / audit). The Precede page views
   compose these classes; the view-DSL is the spec. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Quicksand:wght@500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

:root{
  --green:#8dc044; --green-dark:#79a838; --green-soft:#eef6e2; --green-line:#cfe3ad;
  --charcoal:#424142; --charcoal-d:#33302f; --ink:#2b2a2a;
  --grey:#656765; --grey-l:#9a9c9b; --line:#e4e7e2; --line-d:#d4d8d1;
  --bg:#f3f5f0; --white:#ffffff;
  --amber:#d9962a; --amber-soft:#fbf0db; --amber-line:#f0d399;
  --red:#cf3b3b; --red-soft:#fbe9e9; --red-line:#eeb9b9;
  --shadow:0 1px 2px rgba(51,48,47,.05), 0 8px 24px rgba(51,48,47,.06);
}
html,body{height:100%}
.precede-app,#precede-root{
  height:100%;
  font-family:'Montserrat',Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'Roboto Mono',monospace}
.eyebrow{font-family:'Montserrat'; font-weight:700; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-l)}

/* ---- shell ---- */
.app{display:grid; grid-template-columns:264px 1fr; grid-template-rows:64px 1fr; height:100vh; grid-template-areas:"brand top" "nav main"}
.topbrand{grid-area:brand; background:var(--white); border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 22px}
.topbrand img{height:30px; display:block}
.topbar{grid-area:top; background:var(--white); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 26px}
.topbar .ctx{display:flex; align-items:center; gap:14px}
.topbar .ctx .crumb{font-weight:600; font-size:14px; color:var(--charcoal)}
.topbar .ctx .crumb b{color:var(--green-dark)}
.powered{display:flex; align-items:center; gap:10px; font-size:11px; color:var(--grey-l); font-weight:600}
.powered .p{font-family:'Quicksand'; font-weight:700; color:var(--charcoal); letter-spacing:.02em}
.who{display:flex; align-items:center; gap:9px; padding-left:18px; border-left:1px solid var(--line)}
.who .av{width:30px; height:30px; border-radius:50%; background:var(--green); color:#fff; font-weight:700; display:grid; place-items:center; font-size:12px}
.who .nm{font-size:12.5px; font-weight:600; color:var(--charcoal); line-height:1.2}
.who .nm span{display:block; font-weight:500; font-size:10.5px; color:var(--grey-l)}
/* ---- nav ---- */
.nav{grid-area:nav; background:var(--white); border-right:1px solid var(--line); padding:18px 14px; overflow:auto}
.nav .sect{padding:14px 12px 8px}
.nav a{display:block; text-decoration:none; color:var(--charcoal); padding:11px 13px; border-radius:9px; margin-bottom:5px; cursor:pointer; border:1px solid transparent; transition:.14s}
.nav a:hover{background:#f6f8f3}
.nav a.on{background:var(--green-soft); border-color:var(--green-line)}
.nav a .t{font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:10px}
.nav a.on .t{color:var(--green-dark)}
.nav a .gl{width:20px; flex:none; text-align:center; font-size:13px; opacity:.8}
.nav a .who2{font-size:10.5px; color:var(--grey-l); margin-top:2px; padding-left:30px}
.nav a.on .who2{color:var(--green-dark); opacity:.8}
.navfoot{margin-top:18px; padding:13px; border-top:1px solid var(--line); font-size:10.5px; color:var(--grey-l)}
.navfoot b{color:var(--charcoal); font-weight:700}
/* ---- main ---- */
.main{grid-area:main; overflow:auto; padding:26px 30px 60px}
.h1{font-weight:800; font-size:23px; color:var(--charcoal); letter-spacing:-.01em}
.sub{color:var(--grey); font-size:13px; margin-top:3px; max-width:62ch}
.pagehd{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px}
.card{background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow)}
.card .hd{padding:15px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between}
.card .hd h3{font-size:13px; font-weight:700; color:var(--charcoal); letter-spacing:.02em}
.card .bd{padding:18px 20px}
.btn{font-family:'Montserrat'; font-weight:700; font-size:12.5px; border:none; border-radius:9px; padding:10px 18px; cursor:pointer; background:var(--green); color:#fff; letter-spacing:.01em; transition:.14s}
.btn:hover{background:var(--green-dark)}
.btn.ghost{background:#fff; color:var(--charcoal); border:1px solid var(--line-d)}
.btn.ghost:hover{border-color:var(--green); color:var(--green-dark)}
.demoflag{font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); background:var(--amber-soft); border:1px solid var(--amber-line); border-radius:6px; padding:3px 8px}
/* badges / pills */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; letter-spacing:.01em}
.pill .dot{width:7px; height:7px; border-radius:50%}
.ok{background:var(--green-soft); color:var(--green-dark)} .ok .dot{background:var(--green)}
.warn{background:var(--amber-soft); color:#9a6916} .warn .dot{background:var(--amber)}
.bad{background:var(--red-soft); color:#a82c2c} .bad .dot{background:var(--red)}
.neu{background:#eef0ec; color:var(--grey)} .neu .dot{background:var(--grey-l)}

/* ===== screen 1 : quote ===== */
.quote-grid{display:grid; grid-template-columns:340px 1fr; gap:22px; align-items:start}
.kv{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13px}
.kv:last-child{border:none}
.kv .k{color:var(--grey)} .kv .v{font-weight:600; color:var(--charcoal); text-align:right}
.subhd{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.unitline{border:1px solid var(--line); border-radius:11px; margin-bottom:13px; overflow:hidden}
.unitline .uh{display:flex; align-items:center; justify-content:space-between; padding:12px 15px; background:#fafbf8; border-bottom:1px solid var(--line)}
.unitline .uh .id{font-weight:700; color:var(--charcoal)}
.unitline .uh .id small{font-weight:500; color:var(--grey); margin-left:8px; font-size:11.5px}
.unitline.blocked{border-color:var(--red-line)}
.unitline.blocked .uh{background:var(--red-soft); border-bottom-color:var(--red-line)}
.traces{padding:6px 15px 12px}
.trace{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13px}
.trace:last-child{border:none}
.trace .lbl{display:flex; align-items:center; gap:10px}
.trace .why{font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--green-dark); background:var(--green-soft); border:1px solid var(--green-line); border-radius:6px; padding:2px 7px; cursor:pointer; text-transform:uppercase}
.trace .amt{font-weight:700; color:var(--charcoal); font-family:'Roboto Mono'}
.rulebox{margin:2px 0 10px; padding:11px 13px; background:#f7faf2; border:1px solid var(--green-line); border-radius:9px; font-size:12px}
.rulebox .rl{font-family:'Roboto Mono'; font-size:11.5px; color:var(--green-dark); font-weight:500}
.rulebox .rd{color:var(--grey); margin-top:4px}
.certbar{display:flex; flex-wrap:wrap; gap:8px; padding:11px 15px; background:#fafbf8; border-top:1px solid var(--line)}
.blockbanner{display:flex; gap:14px; align-items:flex-start; padding:14px 16px; background:var(--red-soft); border-top:1px solid var(--red-line)}
.blockbanner .x{width:26px; height:26px; flex:none; border-radius:7px; background:var(--red); color:#fff; display:grid; place-items:center; font-weight:800}
.blockbanner .bt{font-weight:700; color:#a82c2c; font-size:13px}
.blockbanner .bd2{color:#8a3030; font-size:12.5px; margin-top:2px}
.swap{margin-top:9px; display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--green-line); border-radius:8px; padding:7px 11px; font-size:12px; font-weight:600; color:var(--green-dark)}
.totalbar{display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding:16px 20px; background:var(--charcoal); border-radius:12px; color:#fff}
.totalbar .band{font-family:'Quicksand'; font-weight:700; font-size:22px}
.totalbar .lab{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#b9bbb6; font-weight:700}
.totalbar .ci{font-size:11px; color:#c9cbc6; margin-top:2px}

/* ===== screen 2 : fleet ===== */
table{width:100%; border-collapse:collapse}
thead th{text-align:left; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-l); font-weight:700; padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
tbody td{padding:13px 14px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle}
tbody tr:hover{background:#fafbf8}
tbody tr.flagged{background:var(--amber-soft)}
tbody tr.flagged:hover{background:#f8ead0}
td .uid{font-weight:700; color:var(--charcoal); font-family:'Roboto Mono'; font-size:12.5px}
td .depot{display:inline-flex; align-items:center; gap:6px}
.ready{font-weight:700; font-size:11px}
.ready.y{color:var(--green-dark)} .ready.n{color:var(--red)}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-size:11.5px; color:var(--grey)}
.legend span{display:inline-flex; align-items:center; gap:6px}

/* ===== screen 3 : utilisation ===== */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px}
.kpi .big{font-family:'Quicksand'; font-weight:700; font-size:30px; color:var(--charcoal); margin-top:6px}
.kpi .big.sm{font-size:21px; margin-top:10px}
.kpi .cap{font-size:11.5px; color:var(--grey)}
.kpi .cap.red{color:var(--red)} .kpi .cap.amb{color:#9a6916} .kpi .cap.grn{color:var(--green-dark)}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.barrow{margin-bottom:15px}
.barrow:last-child{margin-bottom:0}
.barrow .bl{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px}
.barrow .bl .nm{font-weight:600; color:var(--charcoal)}
.bartrack{height:10px; background:#eef0ec; border-radius:6px; overflow:hidden}
.barfill{height:100%; background:linear-gradient(90deg,var(--green),var(--green-dark)); border-radius:6px}
.barfill.amb{background:linear-gradient(90deg,var(--amber),#c98423)}
.fcast{display:flex; align-items:flex-end; gap:18px; height:150px; padding:0 6px}
.fcast .col{flex:1; text-align:center}
.fcast .stack{display:flex; flex-direction:column; justify-content:flex-end}
.fcast .pipe{background:var(--green-line); border-radius:5px 5px 0 0}
.fcast .firm{background:linear-gradient(0deg,var(--green-dark),var(--green))}
.fcast .mo{font-size:11px; color:var(--grey); margin-top:7px; font-weight:600}
.fcast .amt{font-size:11px; color:var(--charcoal); font-family:'Roboto Mono'}
.fleg{display:flex; gap:16px; margin-top:14px; font-size:11px; color:var(--grey)}
.fleg span{display:inline-flex; align-items:center; gap:6px}
.fleg .sw{width:11px; height:11px; border-radius:3px; display:inline-block}

/* ===== screen 4 : schedule (gantt + pert) ===== */
.gantt{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.gantt .gh{display:grid; grid-template-columns:150px 1fr; background:#fafbf8; border-bottom:1px solid var(--line)}
.gantt .gh .gl{padding:9px 12px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-l)}
.gantt .gh .wk{display:grid; grid-template-columns:repeat(8,1fr)}
.gantt .gh .wk span{font-size:9.5px; color:var(--grey-l); font-weight:700; padding:9px 0 9px 8px; border-left:1px solid var(--line)}
.gantt .grow{display:grid; grid-template-columns:150px 1fr; border-bottom:1px solid var(--line)}
.gantt .grow:last-child{border-bottom:none}
.gantt .glabel{padding:0 12px; font-family:'Roboto Mono'; font-size:12px; font-weight:500; color:var(--charcoal); border-right:1px solid var(--line); display:flex; align-items:center; gap:7px}
.gantt .glabel.red{color:var(--red)}
.gtrack{position:relative; height:44px; background:repeating-linear-gradient(90deg,transparent,transparent calc(12.5% - 1px),var(--line) calc(12.5% - 1px),var(--line) 12.5%)}
.gbar{position:absolute; top:11px; height:22px; border-radius:6px; display:flex; align-items:center; padding:0 9px; font-size:10px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; box-shadow:0 1px 3px rgba(51,48,47,.12)}
.gbar.hire{background:linear-gradient(90deg,var(--green),var(--green-dark))}
.gbar.mod{background:#5b6b7a}
.gbar.insp{background:var(--amber); color:#3a2a08}
.gbar.risk{background:repeating-linear-gradient(45deg,var(--red),var(--red) 6px,#b33 6px,#b33 12px)}
.gmark{position:absolute; width:2px; top:3px; height:38px; background:var(--red); z-index:3}
.gmark.today{background:var(--charcoal); top:0; height:44px}
.gmark .tag{position:absolute; top:-3px; left:5px; font-size:9px; font-weight:800; color:var(--red); white-space:nowrap; background:#fff; padding:0 3px}
.gmark.today .tag{color:var(--charcoal)}
.pert{display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding:6px 0}
.pnode{border:2px solid var(--line-d); border-radius:10px; padding:9px 12px; min-width:108px; background:#fff; text-align:center}
.pnode.crit{border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft)}
.pnode.atrisk{border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft)}
.pnode.fixed{border-style:dashed; border-color:var(--charcoal)}
.pnode .pn{font-weight:700; font-size:11.5px; color:var(--charcoal)}
.pnode .pd{font-family:'Roboto Mono'; font-size:10px; color:var(--grey); margin-top:1px}
.pnode .pf{font-size:9px; font-weight:800; margin-top:3px; letter-spacing:.03em}
.pnode.crit .pf{color:var(--green-dark)} .pnode.atrisk .pf{color:var(--red)} .pnode .pf.slack{color:var(--grey-l)}
.parrow{color:var(--grey-l); padding:0 4px; font-size:17px}
.parrow.crit{color:var(--green)} .parrow.risk{color:var(--red)}
.riskbox{margin-top:14px; padding:14px 16px; background:var(--red-soft); border:1px solid var(--red-line); border-radius:11px; display:flex; gap:13px; align-items:flex-start}
.riskbox .x{width:24px;height:24px;flex:none;border-radius:7px;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800}
.riskbox .rt{font-weight:700;color:#a82c2c;font-size:13px}
.riskbox .rd{font-size:12.5px;color:#8a3030;margin-top:3px}

/* ===== screen 5 : voi ===== */
.voi-grid{display:grid; grid-template-columns:1fr 360px; gap:22px; align-items:start}
.qrow{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 16px; border:1px solid var(--line); border-radius:12px; margin-bottom:11px; background:#fff; transition:.14s}
.qrow:hover{border-color:var(--green-line); box-shadow:var(--shadow)}
.qrow.top{border-color:var(--green); background:linear-gradient(0deg,#fbfdf7,#fff)}
.qrow .qleft{display:flex; align-items:center; gap:14px}
.qrow .rank{width:30px; height:30px; flex:none; border-radius:8px; background:#eef0ec; color:var(--grey); font-weight:800; display:grid; place-items:center; font-size:13px}
.qrow.top .rank{background:var(--green); color:#fff}
.qrow .qq{font-weight:600; color:var(--charcoal); font-size:13.5px}
.qrow .qsub{font-size:11.5px; color:var(--grey-l); margin-top:2px}
.qrow .swing{font-family:'Roboto Mono'; font-weight:600; color:var(--charcoal); font-size:14px; text-align:right; white-space:nowrap}
.qrow .askfirst{font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--green-dark); margin-top:3px}
.bandcard .num{font-family:'Quicksand'; font-weight:700; font-size:26px; color:var(--charcoal)}
.bandwrap{margin:16px 0 6px}
.bandtrack{position:relative; height:14px; background:#eef0ec; border-radius:8px; overflow:hidden}
.bandfill{position:absolute; top:0; bottom:0; left:14%; right:18%; background:linear-gradient(90deg,var(--green),var(--green-dark)); border-radius:8px}
.bandscale{display:flex; justify-content:space-between; font-size:10.5px; color:var(--grey-l); margin-top:6px; font-family:'Roboto Mono'}

/* ===== screen 6 : audit ===== */
.audit-grid{display:grid; grid-template-columns:1fr 380px; gap:22px; align-items:start}
.timeline{position:relative; padding-left:26px}
.timeline:before{content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--line-d)}
.ev{position:relative; padding:0 0 20px}
.ev:before{content:''; position:absolute; left:-21px; top:3px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--green)}
.ev.sys:before{border-color:var(--grey-l)}
.ev.cert:before{border-color:var(--green); background:var(--green)}
.ev .et{font-weight:700; color:var(--charcoal); font-size:13.5px}
.ev .em{font-size:12.5px; color:var(--grey); margin-top:2px}
.ev .ets{font-family:'Roboto Mono'; font-size:11px; color:var(--grey-l); margin-top:3px}
.ev .actor{font-weight:600; color:var(--green-dark)}
.certrow{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line)}
.certrow:last-child{border:none}
.certrow .cn{font-family:'Roboto Mono'; font-size:12px; color:var(--charcoal); font-weight:500}
.certrow .cm{font-size:11px; color:var(--grey-l); margin-top:2px}
.exporthd{background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#fff; border-radius:14px 14px 0 0; padding:18px 20px}
.exporthd .big{font-family:'Quicksand'; font-weight:700; font-size:17px}
.exporthd .small{font-size:11.5px; opacity:.9; margin-top:2px}
.center{text-align:center}
.muted{font-size:11.5px; color:var(--grey-l); margin-top:10px}
.full{width:100%}
.mt14{margin-top:14px} .mt16{margin-top:16px}