/* ============================================================
   Logistics OS modules
   Styles for the pages added on top of the control tower. Uses the same tokens, spacing,
   tags, tables, drawers and status colors as base.css.
   ============================================================ */

/* ---------- Page frame ---------- */
.page{ padding:0 20px var(--gap); display:flex; flex-direction:column; gap:var(--gap); min-width:0; }
.page[hidden]{ display:none; }
body[data-bars="none"] #bar{ display:none; }
body[data-bars="none"] .page{ padding-top:16px; }
body[data-bars="filters"] .viewbar, body[data-bars="filters"] .qa, body[data-bars="filters"] .editbar{ display:none; }
body[data-bars="actions"] .viewbar, body[data-bars="actions"] .editbar{ display:none; }
body:not([data-page="dashboard"]) .grid:empty{ display:none; }
.pg-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pg-sub{ margin:0; color:var(--ink-2); font-size:13px; flex:1; min-width:240px; max-width:860px; }
.pg-tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-left:auto; }
.simbtn{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); background:var(--surface); border-radius:6px; height:22px; padding:0 7px; font-size:11.5px; font-weight:600; color:var(--ink-2); }
.simbtn svg{ width:11px; height:11px; }
.simbtn:hover{ color:var(--ink); background:var(--surface-2); }
.ask-btn{ border-color:color-mix(in srgb,var(--violet) 40%,var(--line)); color:var(--violet); }
.ask-btn svg{ color:var(--violet); }

/* ---------- Cards and layout ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel); min-width:0; }
.card.pad{ padding:var(--pad); }
.card-h{ display:flex; align-items:center; gap:10px; padding:12px var(--pad) 10px; border-bottom:1px solid var(--line-2); flex-wrap:wrap; min-height:50px; }
.card-h h2{ margin:0; font-size:14.5px; font-weight:700; font-stretch:104%; }
.card-h .sub{ font-size:12px; color:var(--ink-3); }
.card-h .tools{ margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.card-b{ padding:var(--pad); min-width:0; }
.card-b.flush{ padding:0; }
.card-f{ padding:10px var(--pad); border-top:1px solid var(--line-2); display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); }
.cols{ display:grid; gap:var(--gap); align-items:start; grid-template-columns:minmax(0,1fr); }
.cols.c21{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.cols.c12{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.cols.c11{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.cols.c32{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
.cols.list-detail{ grid-template-columns:minmax(280px,380px) minmax(0,1fr); }
.cards3{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--gap); }
.stackv{ display:flex; flex-direction:column; gap:var(--gap); min-width:0; }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.grow{ flex:1; min-width:0; }
.elink{ all:unset; cursor:pointer; color:var(--blue); font-weight:650; white-space:nowrap; }
.elink:hover{ text-decoration:underline; }
.elink:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:3px; }
.rep{ display:grid; grid-template-columns:36px minmax(0,1fr); gap:6px 12px; align-items:start; }
.rep .rep-i{ width:36px; height:36px; border-radius:9px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; }
.rep p{ margin:3px 0 0; }
.rep .btn{ grid-column:2; justify-self:start; }
.drawer.wide{ width:min(720px,100vw); }

/* ---------- Headline and impact cards ---------- */
.banner{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r-panel); background:var(--asphalt); color:#E9EEF2; flex-wrap:wrap; }
.banner .b-ic{ width:40px; height:40px; border-radius:10px; background:color-mix(in srgb,var(--violet) 40%,#131C25); color:#fff; display:grid; place-items:center; flex:none; }
.banner .b-ic svg{ width:20px; height:20px; }
.banner h2{ margin:0; font-size:19px; font-weight:750; font-stretch:104%; color:#fff; line-height:1.2; }
.banner p{ margin:3px 0 0; color:#A9B7C3; font-size:12.5px; }
.banner .b-act{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.banner .btn{ background:#22303D; border-color:#33475A; color:#E9EEF2; }
.banner .btn:hover{ background:#2B3C4C; }
.banner .btn.p{ background:var(--blue); border-color:var(--blue); color:#fff; }
.banner.ok .b-ic{ background:color-mix(in srgb,var(--green) 45%,#131C25); }
.stats{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden; }
.stats.s4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .stats.s5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.stat{ padding:14px 16px 12px; border-right:1px solid var(--line-2); display:flex; flex-direction:column; gap:4px; min-width:0; text-align:left; background:none; border-top:0; border-bottom:0; border-left:0; position:relative; }
.stat:last-child{ border-right:0; }
button.stat:hover{ background:var(--surface-2); }
.stat.on{ background:var(--blue-soft); }
.stat .l{ font-size:12px; color:var(--ink-2); font-weight:600; display:flex; gap:6px; align-items:center; }
.stat .l svg{ width:14px; height:14px; }
.stat .v{ font-size:26px; font-weight:750; font-stretch:90%; letter-spacing:-.015em; line-height:1.05; }
.stat .s{ font-size:11.5px; color:var(--ink-3); }
.stat.bad .v{ color:var(--red); } .stat.warn .v{ color:var(--amber); } .stat.ok .v{ color:var(--green); }
.stat .chg{ font-size:11.5px; font-weight:700; color:var(--green); }

/* ---------- Issue feed ---------- */
.fbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px var(--pad); border-bottom:1px solid var(--line-2); }
.fbar .sel select{ height:30px; }
.fbar .sel select.set{ border-color:var(--blue); background:var(--blue-soft); color:var(--blue-2); font-weight:600; }
.iss{ display:grid; grid-template-columns:4px minmax(0,1fr) auto; gap:0 14px; padding:14px var(--pad) 14px 0; border-bottom:1px solid var(--line-2); cursor:pointer; }
.iss:last-child{ border-bottom:0; }
.iss:hover{ background:var(--surface-2); }
.iss .bar4{ border-radius:0 3px 3px 0; background:var(--gray); }
.iss.Critical .bar4{ background:var(--red); } .iss.High .bar4{ background:var(--amber-2); } .iss.Medium .bar4{ background:var(--blue); } .iss.done .bar4{ background:var(--green); }
.iss-t{ font-weight:700; font-size:14px; line-height:1.3; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.iss-why{ color:var(--ink-2); margin-top:3px; }
.iss-meta{ display:flex; gap:6px 14px; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--ink-2); align-items:center; }
.iss-meta b{ color:var(--ink); }
.iss-rec{ margin-top:8px; font-size:12.5px; display:flex; gap:6px; align-items:flex-start; }
.iss-rec svg{ width:14px; height:14px; color:var(--violet); margin-top:2px; flex:none; }
.iss-side{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:150px; }
.iss-side .money{ text-align:right; }
.iss-side .money b{ display:block; font-size:18px; font-weight:750; font-stretch:92%; line-height:1.1; }
.iss-side .money span{ font-size:11.5px; color:var(--ink-3); }
.iss.done{ opacity:.78; }
.chips-r{ display:flex; gap:6px; flex-wrap:wrap; }
.chip-r{ display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:2px 9px; border-radius:7px; background:var(--surface-3); color:var(--ink-2); font-size:12px; font-weight:600; }
.chip-r svg{ width:13px; height:13px; }
.chip-r b{ color:var(--ink); font-weight:700; }
.chip-r.hot{ background:var(--red-soft); color:var(--red); } .chip-r.hot b{ color:var(--red); }
.confm{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); white-space:nowrap; }
.confm .bar{ width:54px; min-width:54px; height:5px; }
.confm .bar b{ background:var(--violet); }

/* ---------- Evidence, plans, before and after ---------- */
.why{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.why li{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:10px; align-items:start; font-size:12.5px; }
.why .ic{ width:26px; height:26px; border-radius:7px; background:var(--surface-3); display:grid; place-items:center; color:var(--ink-2); }
.why .ic svg{ width:14px; height:14px; }
.why b{ display:block; }
.why .m{ font-weight:700; white-space:nowrap; }
.plan{ border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; cursor:pointer; background:var(--surface); text-align:left; width:100%; }
.plan:hover{ border-color:color-mix(in srgb,var(--blue) 50%,var(--line)); }
.plan.on{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.plan-h{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.plan-h b{ font-size:13.5px; }
.plan-k{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.plan-k div{ background:var(--surface-2); border-radius:7px; padding:6px 8px; min-width:0; }
.plan-k span{ display:block; font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plan-k b{ font-size:14px; font-stretch:94%; }
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
.ba{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
.ba th{ text-align:left; font-size:11.5px; color:var(--ink-3); font-weight:600; padding:6px 10px; border-bottom:1px solid var(--line); }
.ba td{ padding:8px 10px; border-bottom:1px solid var(--line-2); vertical-align:top; }
.ba tr:last-child td{ border-bottom:0; }
.ba td:first-child{ color:var(--ink-2); white-space:nowrap; }
.ba .after{ font-weight:700; }
.ba .good{ color:var(--green); } .ba .bad{ color:var(--red); } .ba .warn{ color:var(--amber); }
.ba .arrow{ color:var(--ink-3); padding-left:0; padding-right:0; width:18px; }
.steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.steps li{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2); align-items:start; font-size:12.5px; position:relative; }
.steps li:last-child{ border-bottom:0; }
.steps .dot{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--ink-3); background:var(--surface); }
.steps .dot svg{ width:12px; height:12px; }
.steps li.run .dot{ border-color:var(--blue); border-top-color:transparent; animation:spin .8s linear infinite; color:transparent; }
.steps li.done .dot{ background:var(--green); border-color:var(--green); color:#fff; }
.steps li.fail .dot{ background:var(--red); border-color:var(--red); color:#fff; }
.steps li.skip{ opacity:.5; }
.steps .st-t{ font-weight:650; }
.steps .st-d{ color:var(--ink-2); }
.steps .st-r{ font-size:12px; color:var(--ink-3); white-space:nowrap; text-align:right; }
.steps input[type=checkbox]{ width:16px; height:16px; margin:2px 0 0; accent-color:var(--blue); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.errbox{ border:1px solid var(--red); background:var(--red-soft); color:var(--red); border-radius:9px; padding:10px 12px; font-size:12.5px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.errbox b{ display:block; }
.errbox .btn{ color:var(--ink); }
.okbox{ border:1px solid var(--green); background:var(--green-soft); color:var(--green); border-radius:9px; padding:10px 12px; font-size:12.5px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.okbox b{ color:var(--green); }
.note{ border:1px solid var(--line-2); background:var(--surface-2); border-radius:9px; padding:10px 12px; font-size:12.5px; color:var(--ink-2); display:flex; gap:8px; align-items:flex-start; }
.note svg{ width:15px; height:15px; flex:none; margin-top:1px; color:var(--ink-3); }
.note.warn{ border-color:color-mix(in srgb,var(--amber-2) 60%,var(--line)); background:var(--amber-soft); color:var(--amber); } .note.warn svg{ color:var(--amber); }
.note.ai{ border-color:color-mix(in srgb,var(--violet) 35%,var(--line)); background:color-mix(in srgb,var(--violet) 7%,transparent); } .note.ai svg{ color:var(--violet); }

/* ---------- ETA block ---------- */
.eta3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.eta3 .tile .v{ font-size:17px; }
.etaline{ position:relative; height:120px; }
.prob{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.prob .bar{ flex:1; height:8px; }

/* ---------- Dispatcher ---------- */
.q-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:11px var(--pad); border-bottom:1px solid var(--line-2); border-left:3px solid transparent; text-align:left; background:none; border-top:0; border-right:0; width:100%; cursor:pointer; }
.q-item:hover{ background:var(--surface-2); }
.q-item.on{ background:var(--blue-soft); border-left-color:var(--blue); }
.q-item .t{ font-weight:700; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.q-item .d{ font-size:12px; color:var(--ink-2); grid-column:1 / -1; }
.cand{ border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.cand.best{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.cand.out{ background:var(--surface-2); border-style:dashed; }
.cand-h{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.score{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:750; font-size:15px; background:conic-gradient(var(--blue) calc(var(--s) * 1%), var(--surface-3) 0); position:relative; flex:none; }
.score::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--surface); }
.score span{ position:relative; }
.cand.out .score{ background:var(--surface-3); color:var(--ink-3); }
.factors{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:6px 14px; }
.factor{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; font-size:12px; align-items:center; }
.factor .fl{ color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.factor .fv{ font-weight:650; text-align:right; white-space:nowrap; }
.factor .bar{ grid-column:1 / -1; height:4px; min-width:0; }

/* ---------- Finance ---------- */
.leaks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:10px; }
.leak{ border:1px solid var(--line); border-radius:10px; padding:12px; text-align:left; background:var(--surface); display:flex; flex-direction:column; gap:4px; min-width:0; }
.leak:hover{ border-color:color-mix(in srgb,var(--blue) 50%,var(--line)); }
.leak.on{ border-color:var(--blue); background:var(--blue-soft); }
.leak .l{ font-size:12px; font-weight:650; color:var(--ink-2); display:flex; gap:6px; align-items:center; }
.leak .l svg{ width:14px; height:14px; }
.leak .v{ font-size:21px; font-weight:750; font-stretch:92%; }
.leak .s{ font-size:11.5px; color:var(--ink-3); }
.leak .r{ font-size:11.5px; font-weight:700; color:var(--green); }

/* ---------- Assistant ---------- */
.asst{ position:fixed; right:16px; bottom:16px; width:min(420px,calc(100vw - 24px)); height:min(620px,calc(100vh - 90px)); background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-pop); z-index:70; display:flex; flex-direction:column; overflow:hidden; }
.asst[hidden]{ display:none; }
.asst-h{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line-2); background:linear-gradient(90deg,color-mix(in srgb,var(--violet) 10%,transparent),transparent 80%); }
.asst-h b{ font-size:13.5px; }
.chat{ flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.chat.full{ padding:var(--pad); min-height:380px; max-height:calc(100vh - 330px); }
.msg{ max-width:94%; font-size:12.5px; }
.msg.u{ align-self:flex-end; background:var(--blue); color:#fff; padding:8px 11px; border-radius:12px 12px 3px 12px; }
:root[data-theme="dark"] .msg.u{ color:#0B1320; }
.msg.a{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--line-2); padding:10px 12px; border-radius:12px 12px 12px 3px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.msg.a p{ margin:0; }
.msg .mk{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:6px; }
.msg .mk div{ background:var(--surface); border:1px solid var(--line-2); border-radius:7px; padding:5px 8px; }
.msg .mk span{ display:block; font-size:11px; color:var(--ink-3); }
.msg .mk b{ font-size:14px; }
.msg ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.msg li{ display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; }
.msg .acts{ display:flex; gap:6px; flex-wrap:wrap; }
.sugs{ display:flex; gap:6px; flex-wrap:wrap; padding:8px 12px; border-top:1px solid var(--line-2); }
.sugs button{ border:1px solid var(--line); background:var(--surface); border-radius:99px; padding:4px 10px; font-size:12px; color:var(--ink-2); }
.sugs button:hover{ border-color:var(--violet); color:var(--violet); }
.asst-in{ display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--line-2); }
.asst-in input{ flex:1; height:36px; border:1px solid var(--line); border-radius:9px; padding:0 10px; background:var(--surface-2); min-width:0; }
.asst-in input:focus{ outline:none; border-color:var(--violet); }

/* ---------- Consolidation ---------- */
.opp{ border-bottom:1px solid var(--line-2); padding:12px var(--pad); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; text-align:left; background:none; border-left:3px solid transparent; border-top:0; border-right:0; width:100%; cursor:pointer; }
.opp:hover{ background:var(--surface-2); } .opp.on{ background:var(--blue-soft); border-left-color:var(--blue); }
.loadbox{ border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.loadbox h4{ margin:0; font-size:13px; }
.util{ height:14px; border-radius:7px; background:var(--surface-3); overflow:hidden; display:flex; }
.util b{ display:block; height:100%; }
.vs{ display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); gap:10px; align-items:stretch; }
.vs .arr{ display:grid; place-items:center; color:var(--ink-3); }

/* ---------- Documents ---------- */
.docs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.doc{ border:1px solid var(--line); border-radius:9px; padding:10px; background:var(--surface); text-align:left; display:flex; flex-direction:column; gap:3px; min-width:0; }
.doc:hover{ border-color:var(--blue); } .doc.on{ border-color:var(--blue); background:var(--blue-soft); }
.doc b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; gap:6px; align-items:center; }
.doc span{ font-size:11.5px; color:var(--ink-3); }
.paper{ background:#fff; color:#1b2430; border:1px solid var(--line); border-radius:6px; padding:16px; font-size:11.5px; line-height:1.5; box-shadow:0 1px 3px rgba(0,0,0,.08); position:relative; }
.paper h5{ margin:0 0 6px; font-size:13px; letter-spacing:.04em; }
.paper table{ width:100%; border-collapse:collapse; margin:6px 0; }
.paper td,.paper th{ border:1px solid #c8d0d8; padding:3px 6px; text-align:left; }
.paper .sig{ font-family:"Brush Script MT","Segoe Script",cursive; font-size:18px; }
.paper mark{ background:#FFE9A8; padding:0 2px; border-radius:2px; }
.paper mark.bad{ background:#FFD0CB; }
.fields{ display:flex; flex-direction:column; }
.field{ display:grid; grid-template-columns:150px minmax(0,1fr) 64px; gap:8px; padding:7px 0; border-bottom:1px solid var(--line-2); font-size:12.5px; align-items:center; }
.field:last-child{ border-bottom:0; }
.field .k{ color:var(--ink-2); } .field .v{ font-weight:650; overflow-wrap:anywhere; } .field .c{ font-size:11.5px; color:var(--ink-3); text-align:right; }
.field .c.low{ color:var(--amber); font-weight:700; }

/* ---------- Messages ---------- */
.mail{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.mail-h{ padding:9px 12px; background:var(--surface-2); border-bottom:1px solid var(--line-2); font-size:12px; color:var(--ink-2); display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px; }
.mail-h b{ color:var(--ink); }
.mail-b{ padding:12px; font-size:12.5px; white-space:pre-wrap; line-height:1.5; }
.ctl{ list-style:none; margin:0; padding:0; }
.ctl li{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:12.5px; align-items:start; }
.ctl li:last-child{ border-bottom:0; }
.ctl .ic{ width:26px; height:26px; border-radius:7px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; }
.ctl .ic svg{ width:13px; height:13px; }
.ctl .w{ color:var(--ink-3); font-size:12px; white-space:nowrap; border:0; background:none; }

/* ---------- Docks and sensors ---------- */
.doors{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:6px; }
.door{ border:1px solid var(--line); border-radius:8px; padding:6px 4px; text-align:center; font-size:11px; background:var(--surface); display:flex; flex-direction:column; gap:1px; min-width:0; color:var(--ink-2); }
.door b{ font-size:13px; color:var(--ink); }
.door.Occupied{ background:var(--blue-soft); border-color:color-mix(in srgb,var(--blue) 35%,var(--line)); }
.door.Available{ background:var(--green-soft); border-color:color-mix(in srgb,var(--green) 40%,var(--line)); }
.door.Blocked{ background:var(--red-soft); border-color:color-mix(in srgb,var(--red) 40%,var(--line)); }
.door.Closed{ background:var(--surface-3); border-style:dashed; }
button.door:hover{ outline:2px solid var(--blue); }
.gauge{ position:relative; height:10px; border-radius:5px; background:linear-gradient(90deg,var(--blue) 0 20%,var(--green) 20% 60%,var(--amber-2) 60% 75%,var(--red) 75%); }
.gauge i{ position:absolute; top:-5px; width:4px; height:20px; border-radius:2px; background:var(--ink); transform:translateX(-2px); }

/* ---------- Automation rules ---------- */
.rule{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:13px var(--pad); border-bottom:1px solid var(--line-2); }
.rule:last-child{ border-bottom:0; }
.rule-n{ font-weight:700; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.wit{ display:flex; flex-wrap:wrap; gap:5px 6px; align-items:center; font-size:12.5px; grid-column:1 / -1; }
.wit .kw{ font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--ink-3); }
.wit .tk{ padding:2px 8px; border-radius:6px; background:var(--surface-3); font-weight:600; }
.wit .tk.e{ background:var(--blue-soft); color:var(--blue-2); } .wit .tk.c{ background:var(--amber-soft); color:var(--amber); } .wit .tk.a{ background:var(--green-soft); color:var(--green); }
.rule-m{ grid-column:1 / -1; font-size:12px; color:var(--ink-3); display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.builder{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; align-items:start; }
.builder .kw{ font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--ink-3); padding-top:9px; }
.builder select,.builder input{ height:34px; border:1px solid var(--line); border-radius:8px; padding:0 8px; background:var(--surface); max-width:100%; }
.builder .ln{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

/* ---------- Tracking, scenarios, integrations ---------- */
.track .tsearch input{ width:min(520px,100%); height:38px; }
.track .tsearch svg{ top:12px; }
.track-list{ display:flex; flex-direction:column; margin-top:10px; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; }
.track-row{ display:grid; grid-template-columns:80px 150px minmax(120px,1.2fr) minmax(120px,1fr) auto auto; gap:10px; align-items:center; padding:9px 12px; border:0; border-bottom:1px solid var(--line-2); background:none; text-align:left; font-size:12.5px; }
.track-row:last-child{ border-bottom:0; } .track-row:hover{ background:var(--surface-2); }
.scn{ border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; background:var(--surface); min-width:0; }
.scn-h{ display:flex; gap:10px; align-items:center; }
.scn-h .ic{ width:34px; height:34px; border-radius:9px; background:var(--surface-3); display:grid; place-items:center; color:var(--ink-2); flex:none; }
.scn p{ margin:0; font-size:12.5px; color:var(--ink-2); }
.scn .row{ margin-top:auto; }
.intg{ display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:4px 12px; padding:12px var(--pad); border-bottom:1px solid var(--line-2); align-items:center; }
.intg:last-child{ border-bottom:0; }
.intg .ic{ width:36px; height:36px; border-radius:9px; background:var(--surface-3); display:grid; place-items:center; color:var(--ink-2); grid-row:span 2; }
.intg .errbox{ grid-column:2 / -1; }
.simband{ border:1.5px dashed var(--violet); background:color-mix(in srgb,var(--violet) 7%,transparent); border-radius:10px; padding:10px 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); }
.simband b{ color:var(--violet); }
.twinmap{ background:var(--asphalt); border-radius:10px; overflow:hidden; }
.twinmap svg{ display:block; width:100%; height:auto; }
.aud{ display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:4px 12px; padding:10px var(--pad); border-bottom:1px solid var(--line-2); font-size:12.5px; align-items:start; }
.aud .t{ color:var(--ink-3); font-size:12px; }
.aud .df{ grid-column:2 / -1; font-size:12px; color:var(--ink-2); display:flex; gap:6px 14px; flex-wrap:wrap; }
.aud .df s{ color:var(--ink-3); }
.pill-n{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--surface-3); font-size:11px; font-weight:700; color:var(--ink-2); }

.autobar{ position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:125; width:min(920px,calc(100vw - 24px)); background:var(--surface); border:1px solid color-mix(in srgb,var(--violet) 45%,var(--line)); border-radius:12px; box-shadow:var(--shadow-pop); padding:9px 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12.5px; }
.autobar .grow{ min-width:200px; color:var(--ink-2); }
.autobar .grow b{ color:var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width:1400px){ .stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } .stats .stat:nth-child(3n){ border-right:0; } .stats .stat:nth-child(-n+3){ border-bottom:1px solid var(--line-2); } .stats.s4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .stats.s4 .stat{ border-bottom:0; border-right:1px solid var(--line-2); } .stats.s4 .stat:last-child{ border-right:0; } }
@media (max-width:1100px){
  .cols.c21,.cols.c12,.cols.c11,.cols.c32,.cols.list-detail{ grid-template-columns:minmax(0,1fr); }
  .track-row{ grid-template-columns:80px minmax(0,1fr) auto; } .track-row span:nth-of-type(1),.track-row span:nth-of-type(3){ display:none; }
  .ask-btn span,.top-actions .btn.s span{ display:none; }
}
@media (max-width:760px){
  .page{ padding-left:10px; padding-right:10px; }
  .stats,.stats.s4,.stats.s5{ grid-template-columns:repeat(2,minmax(0,1fr)); } .stats .stat{ border-bottom:1px solid var(--line-2); }
  .iss{ grid-template-columns:4px minmax(0,1fr); } .iss-side{ grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; min-width:0; margin-top:8px; }
  .vs{ grid-template-columns:1fr; } .vs .arr{ transform:rotate(90deg); }
  .plan-k,.eta3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .field{ grid-template-columns:110px minmax(0,1fr) 54px; }
  .asst{ right:8px; bottom:8px; }
  .aud{ grid-template-columns:70px minmax(0,1fr); } .aud > :nth-child(3){ grid-column:2; }
}

/* Header fits tablet widths with the added Ask AI and Demo buttons */
.search{ min-width:0; }
@media (max-width:1100px){
  .top-row{ flex-wrap:wrap; row-gap:6px; }
  .title-block{ min-width:0; }
  #today-date{ display:none; }
  .search{ flex:1 1 180px; }
}
@media (max-width:900px){ .top-actions .hide-m{ display:none; } .search kbd{ display:none; } .search input{ padding-right:12px; } }

/* A closed dialog must never catch clicks meant for the page behind it. */
.modal:not(.on){ pointer-events:none; visibility:hidden; }
/* Leave room for the guided-demo bar so it never sits on top of the last row of buttons. */
body.has-autobar .page, body.has-autobar .grid{ padding-bottom:84px; }
/* Messages never block the buttons underneath them, and move aside when the assistant is open. */
.toasts, .toast{ pointer-events:none; }
body.asst-open .toasts{ right:calc(min(420px, 100vw - 24px) + 28px); }
@media (max-width:900px){ body.asst-open .toasts{ right:16px; bottom:calc(min(620px, 100vh - 90px) + 28px); } }

/* ---------- Sign-in ---------- */
body.locked{ overflow:hidden; }
body.locked .app, body.locked .toasts, body.locked .asst, body.locked .autobar{ display:none; }
.auth{ position:fixed; inset:0; z-index:200; display:grid; grid-template-columns:minmax(320px,5fr) 7fr; background:var(--bg); }
.auth[hidden]{ display:none; }
.auth-side{ background:var(--asphalt); color:var(--asphalt-ink); padding:40px 44px; display:flex; flex-direction:column; gap:24px; border-right:1px solid var(--asphalt-line); }
.auth-brand{ display:flex; align-items:center; gap:12px; }
.auth-brand b{ display:block; color:#fff; font-size:17px; font-weight:750; font-stretch:112%; line-height:1.1; }
.auth-brand span{ font-size:12px; color:#8FA0AF; }
.auth-pitch{ margin-top:auto; }
.auth-pitch h2{ margin:0 0 10px; color:#fff; font-size:34px; font-weight:750; font-stretch:104%; letter-spacing:-.01em; line-height:1.1; }
.auth-pitch p{ margin:0 0 18px; font-size:15px; color:#C3CDD6; max-width:420px; }
.auth-pitch ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13.5px; }
.auth-pitch li{ display:flex; gap:10px; align-items:center; }
.auth-pitch li::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--amber-2); flex:none; }
.auth-foot{ margin-top:auto; font-size:12px; color:#7F909F; border-top:1px solid var(--asphalt-line); padding-top:16px; }
.auth-main{ display:grid; place-items:center; padding:24px; overflow:auto; }
.auth-card{ width:min(400px,100%); background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-pop); }
.auth-card h1{ margin:0; font-size:22px; font-weight:750; font-stretch:104%; }
.auth-sub{ margin:-8px 0 4px; color:var(--ink-3); font-size:13px; }
.auth-card .fld input{ height:42px; font-size:14px; }
.auth-pw{ position:relative; }
.auth-pw input{ padding-right:44px; }
.auth-pw button{ position:absolute; right:4px; top:4px; width:34px; height:34px; border:0; background:none; border-radius:7px; color:var(--ink-3); display:grid; place-items:center; }
.auth-pw button:hover{ background:var(--surface-3); color:var(--ink); }
.auth-pw button[aria-pressed="true"]{ color:var(--blue); }
.auth-keep{ display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--ink-2); cursor:pointer; }
.auth-keep input{ width:16px; height:16px; accent-color:var(--blue); margin:0; }
.auth-err{ border:1px solid var(--red); background:var(--red-soft); color:var(--red); border-radius:9px; padding:9px 12px; font-size:12.5px; font-weight:600; }
.auth-go{ height:42px; font-size:14px; }
.auth-help{ margin:0; font-size:12px; color:var(--ink-3); text-align:center; }
@media (max-width:860px){ .auth{ grid-template-columns:1fr; grid-template-rows:auto 1fr; } .auth-side{ padding:20px 24px; gap:0; border-right:0; } .auth-pitch, .auth-foot{ display:none; } }