/* Bread app styles. Taken from design/mockup.html (the agreed design); additions for the live
screens are at the end, under "Live". */
/* =========================================================
Tokens
========================================================= */
:root{
/* brand */
--crust:#48170b; /* header bar */
--crust-deep:#3c181e;
--ink:#3c181e; /* body text */
--ink-2:#6a524d; /* secondary text */
--ink-3:#97847d; /* tertiary, placeholders */
--teal:#197081; /* structure, nav, ok */
--teal-2:#0f788a;
--sky:#539eb1;
--amber:#eba315; /* primary actions, selected van */
--amber-2:#f0a607;
--brick:#a3452f; /* error */
/* surfaces */
--flour:#ece8e1; /* page */
--paper:#faf8f4; /* panels */
--line:#d9d0c4;
--line-soft:#e7e1d8;
/* tints */
--teal-tint:#dcebed;
--sky-tint:#e6f0f2;
--amber-tint:#fbeccb;
--brick-tint:#f5e0d9;
--sea:#cfe2e6;
--land:#f1ece3;
/* roles that differ between themes */
--head-bg:#48170b; /* header bar, driver header, sign-in */
--me-bg:#48170b; /* your own chat bubbles, dark chips */
--surface:#fff; /* inputs, expanded rows */
--on-amber:#3c181e;
--on-teal:#fff;
--warn-ink:#7f520b; /* mockup had a self-reference here (invalid, fell back to body ink) */
--warn-ink-2:#8f5c00;
--sky-ink:#2c6b7b;
--sky-line:#b7d5dd;
--hover:rgba(60,24,30,.05);
--muted-bg:rgba(60,24,30,.06);
--orn:#48170b;
--map-sea:#cfe2e6; --map-land:#f1ece3; --map-land-2:#ebe5da; --map-district:#ece5d9;
--map-road:#fff; --map-road-2:#e5ddd0; --map-label:#a8968c; --map-sea-label:#7aa9b4; --map-dot:#faf8f4; --map-other:#539eb1;
/* type */
--f-slab:'Roboto Slab', Georgia, serif;
--f-ui:'Commissioner', 'Segoe UI', system-ui, sans-serif;
--t-12:12px; --t-13:13px; --t-14:14px; --t-15:15px; --t-18:18px; --t-22:22px; --t-28:28px; --t-36:36px;
/* space (4px base) */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
/* radius by role */
--r-chip:999px; --r-ctl:6px; --r-panel:3px; --r-phone:14px;
--header-h:60px;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--crust:#140b08; --crust-deep:#140b08;
--ink:#f3ebe2; --ink-2:#b9a89e; --ink-3:#8f7d73;
--teal:#3d9bae; --teal-2:#4aa8ba; --sky:#6fb3c4;
--amber:#f0b43a; --amber-2:#f5c25a; --brick:#e07a5f;
--flour:#1d110d; --paper:#2b1b16; --line:#4a342b; --line-soft:#3a2721;
--teal-tint:rgba(61,155,174,.18); --sky-tint:rgba(111,179,196,.15); --amber-tint:rgba(240,180,58,.15); --brick-tint:rgba(224,122,95,.17);
--sea:#1f2b2e; --land:#2a201c;
--head-bg:#120a07; --me-bg:#6a3220; --surface:#34231d;
--on-amber:#2a130b; --on-teal:#0e1f22;
--warn-ink:#f2c46c; --warn-ink-2:#f0b43a; --sky-ink:#8fc8d5; --sky-line:rgba(111,179,196,.35);
--hover:rgba(255,236,220,.05); --muted-bg:rgba(255,236,220,.08); --orn:#b9a89e;
--map-sea:#1f2b2e; --map-land:#2a201c; --map-land-2:#2f2521; --map-district:#30251f;
--map-road:#3e2f28; --map-road-2:#352820; --map-label:#8c7a70; --map-sea-label:#5f8790; --map-dot:#2b1b16; --map-other:#6fb3c4;
color-scheme:dark;
}
}
:root[data-theme="dark"]{
--crust:#140b08; --crust-deep:#140b08;
--ink:#f3ebe2; --ink-2:#b9a89e; --ink-3:#8f7d73;
--teal:#3d9bae; --teal-2:#4aa8ba; --sky:#6fb3c4;
--amber:#f0b43a; --amber-2:#f5c25a; --brick:#e07a5f;
--flour:#1d110d; --paper:#2b1b16; --line:#4a342b; --line-soft:#3a2721;
--teal-tint:rgba(61,155,174,.18); --sky-tint:rgba(111,179,196,.15); --amber-tint:rgba(240,180,58,.15); --brick-tint:rgba(224,122,95,.17);
--sea:#1f2b2e; --land:#2a201c;
--head-bg:#120a07; --me-bg:#6a3220; --surface:#34231d;
--on-amber:#2a130b; --on-teal:#0e1f22;
--warn-ink:#f2c46c; --warn-ink-2:#f0b43a; --sky-ink:#8fc8d5; --sky-line:rgba(111,179,196,.35);
--hover:rgba(255,236,220,.05); --muted-bg:rgba(255,236,220,.08); --orn:#b9a89e;
--map-sea:#1f2b2e; --map-land:#2a201c; --map-land-2:#2f2521; --map-district:#30251f;
--map-road:#3e2f28; --map-road-2:#352820; --map-label:#8c7a70; --map-sea-label:#5f8790; --map-dot:#2b1b16; --map-other:#6fb3c4;
color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{
background:var(--flour); color:var(--ink);
font-family:var(--f-ui); font-size:var(--t-15); line-height:1.45;
font-variant-numeric:tabular-nums;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--f-slab); font-weight:500; margin:0; letter-spacing:-.005em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal-2); outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* =========================================================
Header
========================================================= */
.app-head{
position:sticky; top:0; z-index:38; /* above the drawers (34, 35): the avatar menu opens over them */
height:var(--header-h); background:var(--head-bg); color:#fff; border-bottom:1px solid rgba(255,255,255,.04);
display:flex; align-items:center; gap:var(--s6); padding:0 var(--s5);
}
.brand{display:flex; align-items:center; gap:var(--s3); text-decoration:none; color:#fff}
.brand img{width:38px;height:38px;border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.wordmark{font-family:var(--f-slab); font-weight:600; font-size:22px; letter-spacing:.01em}
.brand small{display:block; font-size:var(--t-12); color:rgba(255,255,255,.62); margin-top:-3px}
.nav{display:flex; gap:var(--s1); height:100%}
.nav a{
display:flex; align-items:center; gap:var(--s2); padding:0 var(--s4);
color:rgba(255,255,255,.74); text-decoration:none; font-weight:500; height:100%;
border-bottom:3px solid transparent; border-top:3px solid transparent;
}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff; border-bottom-color:var(--amber)}
.nav .count{font-size:var(--t-12); background:var(--brick); color:#fff; border-radius:var(--r-chip); padding:0 7px; line-height:18px}
.head-meta{margin-left:auto; display:flex; align-items:center; gap:var(--s4); font-size:var(--t-14); color:rgba(255,255,255,.8)}
.sync{display:flex;align-items:center;gap:6px}
.sync::before{content:"";width:7px;height:7px;border-radius:50%;background:#7fc6d4}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--teal);display:grid;place-items:center;font-size:var(--t-13);font-weight:600;color:var(--on-teal)}
/* =========================================================
Shared controls
========================================================= */
.btn{
display:inline-flex; align-items:center; gap:var(--s2);
height:40px; padding:0 var(--s4); border-radius:var(--r-ctl);
border:1px solid var(--line); background:var(--paper); color:var(--ink);
font-weight:600; font-size:var(--t-14); cursor:pointer; white-space:nowrap; text-decoration:none;
}
.btn:hover{border-color:var(--ink-3)}
.btn-primary{background:var(--amber); border-color:var(--amber); color:var(--on-amber)}
.btn-primary:hover{background:var(--amber-2); border-color:var(--amber-2)}
.btn-teal{background:transparent; border-color:var(--teal); color:var(--teal)}
.btn-teal:hover{background:var(--teal-tint); border-color:var(--teal)}
.btn-quiet{background:transparent; border-color:transparent; color:var(--ink-2)}
.btn-quiet:hover{background:var(--hover); border-color:transparent}
.btn-sm{height:32px; padding:0 var(--s3); font-size:var(--t-13)}
.chip{
display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
height:24px; padding:0 10px; border-radius:var(--r-chip);
font-size:var(--t-13); font-weight:500;
}
.chip svg.i{width:14px;height:14px}
.chip-ok{background:var(--teal-tint); color:var(--teal)}
.chip-warn{background:var(--amber-tint); color:var(--warn-ink)}
.chip-err{background:var(--brick-tint); color:var(--brick)}
.chip-time{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)}
.chip-muted{background:var(--muted-bg); color:var(--ink-2)}
.doc{display:inline-flex; align-items:baseline; gap:4px; font-size:var(--t-13); color:var(--ink-2); white-space:nowrap}
.doc b{font-weight:600; color:var(--ink)}
/* Ornament: the site's "• — •" divider */
.orn{display:flex; align-items:center; gap:0; color:var(--ink-3)}
.orn::before,.orn::after{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.orn > span{flex:1; height:1px; background:currentColor; margin:0 6px}
.screen{display:none}
.screen.on{display:block}
/* =========================================================
1. Σήμερα
========================================================= */
.wrap{max-width:1380px; margin:0 auto; padding:var(--s6) var(--s6) var(--s8)}
.today-top{display:grid; grid-template-columns:1fr auto; gap:var(--s5); align-items:end}
.today-top h1{font-size:var(--t-36); line-height:1.1; font-weight:500}
.today-top .sub{color:var(--ink-2); margin-top:6px}
.actions{display:flex; gap:var(--s2); flex-wrap:wrap}
/* time window band */
.window{
margin-top:var(--s5); display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:var(--s4);
}
.window .end{font-family:var(--f-slab); font-size:var(--t-22); line-height:1; white-space:nowrap}
.window .end small{display:block; font-family:var(--f-ui); font-size:var(--t-13); color:var(--ink-2); margin-top:4px}
.window .end:last-child{text-align:right}
.band{position:relative; padding-bottom:22px}
.bars{display:flex; align-items:flex-end; gap:3px; height:38px; padding:0 10px}
.bars i{flex:1; background:var(--teal); opacity:.85; border-radius:1px 1px 0 0; min-height:1px}
.bars i.late{background:var(--amber)}
.band .orn{color:var(--orn); margin-top:4px}
.band .orn > span{height:2px}
.band .tick{position:absolute; bottom:0; font-size:var(--t-12); color:var(--ink-3); transform:translateX(-50%)}
.band .cut{position:absolute; top:-4px; bottom:16px; width:0; border-left:1px dashed var(--ink-3)}
.kpis{
margin-top:var(--s6); display:grid; grid-template-columns:repeat(5,1fr);
background:var(--paper); border:1px solid var(--line); border-radius:var(--r-panel);
}
.kpi{padding:var(--s4) var(--s5); border-left:1px solid var(--line-soft)}
.kpi:first-child{border-left:0}
.kpi .v{font-family:var(--f-slab); font-size:var(--t-28); line-height:1.1; font-weight:500}
.kpi .v small{font-size:var(--t-18); font-weight:400; color:var(--ink-2)}
.kpi .l{font-size:var(--t-13); color:var(--ink-2); margin-top:2px}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpi .s{font-size:var(--t-13); color:var(--ink-3); margin-top:1px}
.kpi .bar{height:4px; border-radius:2px; background:var(--line-soft); margin:10px 0 6px; overflow:hidden; max-width:260px}
.kpi .bar i{display:block; height:100%; background:var(--teal); border-radius:2px}
.today-grid{margin-top:var(--s6); display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--s6); align-items:start}
.listbar{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); flex-wrap:wrap}
.listbar h2{font-size:var(--t-22); flex-basis:100%; margin-bottom:var(--s1)}
.listbar .search input{width:280px}
.filters{display:flex; gap:6px; flex-wrap:wrap}
.filter{
height:32px; padding:0 12px; border-radius:var(--r-chip); border:1px solid var(--line);
background:transparent; font-size:var(--t-13); font-weight:500; cursor:pointer; color:var(--ink-2);
display:inline-flex; align-items:center; gap:6px;
}
.filter b{font-weight:600; color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:var(--on-teal)}
.filter[aria-pressed="true"] b{color:var(--on-teal)}
.filter .dot{width:7px;height:7px;border-radius:50%}
.search{margin-left:auto; position:relative}
.search input{height:36px; width:240px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--paper); padding:0 12px 0 34px; font-size:var(--t-14)}
.search svg{position:absolute; left:10px; top:9px; color:var(--ink-3)}
.notes{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-panel)}
.nrow{
display:grid; grid-template-columns:4px minmax(0,1.9fr) minmax(0,1.15fr) 72px 72px minmax(0,1.25fr);
align-items:center; column-gap:var(--s4); padding:var(--s3) var(--s4) var(--s3) 0;
border-top:1px solid var(--line-soft);
}
.nrow.head{border-top:0; padding-top:10px; padding-bottom:10px; font-size:var(--t-13); color:var(--ink-2); font-weight:500}
.nrow .edge{align-self:stretch; margin:-12px 0; background:transparent}
.nrow.err .edge{background:var(--brick)}
.nrow.warn .edge{background:var(--amber)}
.nrow.err{background:linear-gradient(90deg,rgba(163,69,47,.05),transparent 40%)}
.cust b{display:block; font-weight:600; font-size:var(--t-14); letter-spacing:.01em}
.cust span{display:block; font-size:var(--t-13); color:var(--ink-2)}
.docs{display:flex; flex-direction:column; gap:2px}
.num{font-family:var(--f-slab); font-size:var(--t-15)}
.num small{font-family:var(--f-ui); font-size:var(--t-12); color:var(--ink-3); display:block}
.num .u{display:none; font-family:var(--f-ui); font-size:var(--t-13); color:var(--ink-2)}
.vanref{font-size:var(--t-13); font-weight:600; color:var(--teal)}
.vanref.none{color:var(--ink-3); font-weight:500}
.status{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.status .why{font-size:var(--t-12); color:var(--ink-2)}
.fix{
grid-column:2 / -1; margin-top:var(--s3); padding:var(--s3) var(--s4);
background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-ctl);
display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s4); align-items:center;
}
.fix p{margin:0; font-size:var(--t-14)}
.fix .field{display:flex; gap:var(--s2); align-items:center}
.fix input{height:36px; flex:1; border:1px solid var(--brick); border-radius:var(--r-ctl); padding:0 10px; background:var(--surface); font-size:var(--t-14)}
.fix .hint{grid-column:1 / -1; font-size:var(--t-13); color:var(--ink-2); margin-top:-4px}
.fix .item{display:flex; justify-content:space-between; gap:var(--s3); font-size:var(--t-14)}
.fix .item s{color:var(--ink-3)}
.listfoot{padding:var(--s3) var(--s4); border-top:1px solid var(--line-soft); font-size:var(--t-14); color:var(--ink-2); display:flex; justify-content:space-between; align-items:center}
/* rail */
.rail{display:flex; flex-direction:column; gap:var(--s5)}
.panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-panel)}
.panel > header{padding:var(--s4) var(--s4) var(--s2); display:flex; justify-content:space-between; align-items:baseline}
.panel > header h3{font-size:var(--t-18)}
.panel > header span{font-size:var(--t-13); color:var(--ink-2)}
.load{width:100%; border-collapse:collapse; font-size:var(--t-14)}
.load th{font-weight:500; color:var(--ink-2); font-size:var(--t-12); text-align:right; padding:6px 10px 6px 0}
.load th:first-child{text-align:left; padding-left:var(--s4)}
.load td{padding:7px 10px 7px 0; text-align:right; border-top:1px solid var(--line-soft)}
.load td:last-child,.load th:last-child{padding-right:var(--s4)}
.load td:first-child{text-align:left; padding-left:var(--s4)}
.load td:last-child,.load th:last-child{font-weight:600}
.load .p{display:flex; align-items:center; gap:10px; white-space:nowrap}
.tile{width:26px;height:26px;border-radius:2px;display:grid;place-items:center;flex:none}
.tile img{max-width:18px;max-height:18px}
.t-teal{background:#0f788a} .t-sky{background:var(--sky)} .t-amber{background:#ffaa01} .t-brown{background:#4e1406}
.late-list{padding:0 var(--s4) var(--s4)}
.late-item{display:flex; justify-content:space-between; gap:var(--s3); padding:10px 0; border-top:1px solid var(--line-soft); font-size:var(--t-14)}
.late-item b{font-weight:600; display:block}
.late-item span{color:var(--ink-2); font-size:var(--t-13)}
.late-item time{font-family:var(--f-slab); color:var(--warn-ink)}
.panel p.pad{margin:0; padding:0 var(--s4) var(--s3); font-size:var(--t-14); color:var(--ink-2)}
/* =========================================================
2. Δρομολόγια
========================================================= */
.routes{
display:grid; grid-template-columns:300px minmax(0,1fr) 430px;
height:calc(100vh - var(--header-h)); min-height:780px;
}
.vans{background:var(--paper); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:auto}
.vans > header{padding:var(--s5) var(--s5) var(--s3)}
.vans > header h1{font-size:var(--t-22)}
.vans > header p{margin:4px 0 0; font-size:var(--t-13); color:var(--ink-2)}
.van{
display:block; width:100%; text-align:left; border:0; background:transparent; cursor:pointer;
padding:var(--s4) var(--s5); border-top:1px solid var(--line-soft); position:relative;
}
.van:hover{background:var(--hover)}
.van[aria-pressed="true"]{background:var(--amber-tint)}
.van[aria-pressed="true"]::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--amber)}
.van .row1{display:flex; align-items:baseline; justify-content:space-between}
.van h2{font-size:var(--t-22); font-weight:600}
.van .plate{font-size:var(--t-12); color:var(--ink-3)}
.van .finish{font-family:var(--f-slab); font-size:var(--t-18)}
.van .finish small{font-family:var(--f-ui); font-size:var(--t-12); color:var(--ink-2); margin-right:4px}
.driver{margin-top:var(--s2); display:flex; align-items:center; gap:var(--s2)}
.driver select{
flex:1; height:34px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface);
padding:0 8px; font-size:var(--t-14); font-weight:500;
}
.van .facts{margin-top:var(--s2); display:flex; gap:var(--s4); font-size:var(--t-13); color:var(--ink-2)}
.van .facts b{color:var(--ink); font-weight:600}
.van .sent{margin-top:var(--s2)}
.unassigned{margin-top:auto; border-top:1px solid var(--line); padding:var(--s4) var(--s5); background:var(--brick-tint)}
.unassigned h3{font-size:var(--t-15); font-family:var(--f-ui); font-weight:600; color:var(--brick)}
.unassigned p{margin:4px 0 var(--s2); font-size:var(--t-13)}
.mapcol{display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line)}
.actionbar{
display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s5);
background:var(--paper); border-bottom:1px solid var(--line);
}
.actionbar .who{margin-right:auto}
.actionbar .who h2{font-size:var(--t-22); white-space:nowrap}
.actionbar .who p{margin:0; font-size:var(--t-13); color:var(--ink-2)}
.map{position:relative; flex:1; overflow:hidden; background:var(--sea)}
.map svg.base{position:absolute; inset:0; width:100%; height:100%}
.legend{
position:absolute; left:var(--s4); top:var(--s4); background:var(--paper);
border:1px solid var(--line); border-radius:var(--r-panel); padding:10px 12px; font-size:var(--t-13);
display:grid; gap:6px;
}
.legend div{display:flex; align-items:center; gap:8px}
.legend .sw{width:22px;height:4px;border-radius:2px}
.legend .dt{width:10px;height:10px;border-radius:50%;border:2px solid}
.mapnote{
position:absolute; left:var(--s4); bottom:var(--s4); right:var(--s4); max-width:520px;
background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--amber);
border-radius:var(--r-panel); padding:10px 14px; font-size:var(--t-14); display:flex; gap:var(--s3); align-items:center
}
.mapnote b{font-weight:600}
.zoom{position:absolute; right:var(--s4); top:var(--s4); display:grid; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-ctl)}
.zoom button{width:34px;height:34px;border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--ink-2)}
.zoom button+button{border-top:1px solid var(--line-soft)}
.stops{background:var(--paper); display:flex; flex-direction:column; min-height:0}
.stops > header{padding:var(--s4) var(--s5) var(--s3); border-bottom:1px solid var(--line-soft)}
.stops > header h3{font-size:var(--t-18)}
.stops > header p{margin:2px 0 0; font-size:var(--t-13); color:var(--ink-2)}
.stoplist{list-style:none; margin:0; padding:0; overflow:auto; flex:1}
.stop{
display:grid; grid-template-columns:22px 34px minmax(0,1fr) auto; gap:0 var(--s3);
align-items:start; padding:10px var(--s5) 10px var(--s3); position:relative;
}
.stop + .stop{border-top:1px solid var(--line-soft)}
.stop .grip{color:var(--ink-3); cursor:grab; padding-top:6px}
.stop .grip svg{width:16px;height:16px}
.stop .n{
width:30px;height:30px;border-radius:50%; display:grid; place-items:center; position:relative; z-index:1;
font-family:var(--f-slab); font-weight:600; font-size:var(--t-14);
background:var(--amber); color:var(--on-amber);
}
.stop .who b{display:block; font-size:var(--t-14); font-weight:600; letter-spacing:.01em}
.stop .who span{display:block; font-size:var(--t-13); color:var(--ink-2)}
.stop .who .chip{margin-top:6px}
.stop .eta{text-align:right}
.stop .eta b{font-family:var(--f-slab); font-size:var(--t-18); font-weight:500; display:block; line-height:1.2}
.stop .eta span{font-size:var(--t-12); color:var(--ink-3)}
.stop.tight .eta b{color:var(--warn-ink-2)}
.stop.dragging{background:var(--surface); box-shadow:0 6px 18px rgba(60,24,30,.16); z-index:2}
.stop.drop-gap{height:6px; padding:0; border-top:2px dashed var(--amber) !important}
.stop.endpoint .n{background:var(--me-bg); color:#fff}
.stop.endpoint .grip{visibility:hidden}
.stop.sel{background:var(--amber-tint)}
.stops footer{padding:var(--s3) var(--s5) var(--s4); border-top:1px solid var(--line); background:var(--paper)}
.stops footer p{margin:0 0 var(--s3); font-size:var(--t-13); color:var(--ink-2)}
.stops footer .send{display:grid; grid-template-columns:1fr; gap:var(--s2)}
.stops footer .btn{justify-content:center; padding:0 var(--s2)}
/* =========================================================
3. Πελάτες
========================================================= */
.cust-head{display:flex; align-items:flex-end; gap:var(--s5); margin-bottom:var(--s5)}
.cust-head h1{font-size:var(--t-36); line-height:1.1}
.cust-head p{margin:6px 0 0; color:var(--ink-2)}
.cust-head .search{margin-left:auto}
.ctable{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); font-size:var(--t-14)}
.ctable th{text-align:left; font-size:var(--t-13); font-weight:500; color:var(--ink-2); padding:10px var(--s4); border-bottom:1px solid var(--line)}
.ctable td{padding:12px var(--s4); border-top:1px solid var(--line-soft); vertical-align:top}
.ctable tr.sel td{background:var(--amber-tint)}
.ctable tr.sel td:first-child{box-shadow:inset 5px 0 0 var(--amber)}
.ctable tbody tr{cursor:pointer}
.ctable tbody tr:hover td{background:rgba(60,24,30,.025)}
.ctable tbody tr.sel:hover td{background:var(--amber-tint)}
.ctable .cname b{display:block; font-weight:600; letter-spacing:.01em}
.ctable .cname span{font-size:var(--t-12); color:var(--ink-3)}
.ctable .addr span{display:block; font-size:var(--t-13); color:var(--ink-2)}
.ctable .note{max-width:300px}
.ctable .note .empty{color:var(--ink-3)}
.ctable .last{white-space:nowrap}
.ctable .last span{display:block; font-size:var(--t-12); color:var(--ink-3)}
.with-drawer{padding-right:calc(480px + var(--s6))}
.drawer{
position:fixed; top:var(--header-h); right:0; bottom:0; width:480px; z-index:20;
background:var(--paper); border-left:1px solid var(--line);
box-shadow:-12px 0 32px rgba(60,24,30,.10);
display:flex; flex-direction:column;
}
.drawer > header{padding:var(--s5) var(--s5) var(--s4); border-bottom:1px solid var(--line-soft); display:flex; gap:var(--s3); align-items:flex-start}
.drawer > header h2{font-size:var(--t-22); line-height:1.2}
.drawer > header p{margin:4px 0 0; font-size:var(--t-13); color:var(--ink-2)}
.drawer > header .btn{margin-left:auto}
.dbody{flex:1; overflow:auto; padding:var(--s5)}
.dsec + .dsec{margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--line-soft)}
.dsec h3{font-size:var(--t-15); font-family:var(--f-ui); font-weight:600; margin-bottom:var(--s2)}
.dsec label{display:block; font-size:var(--t-13); font-weight:500; color:var(--ink-2); margin-bottom:6px}
.dsec textarea{
width:100%; min-height:96px; resize:vertical; border:1px solid var(--line); border-radius:var(--r-ctl);
background:var(--surface); padding:10px 12px; font-size:var(--t-15); line-height:1.5;
}
.dsec textarea:focus{border-color:var(--teal); outline:none; box-shadow:0 0 0 3px var(--teal-tint)}
.dsec .help{font-size:var(--t-13); color:var(--ink-2); margin-top:6px; display:flex; justify-content:space-between}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-ctl); overflow:hidden; background:var(--surface)}
.seg button{border:0; background:transparent; padding:0 14px; height:36px; font-size:var(--t-14); cursor:pointer; color:var(--ink-2)}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--teal); color:var(--on-teal); font-weight:600}
.timepick{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s3)}
.timepick select{height:36px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); padding:0 8px; font-size:var(--t-15); font-family:var(--f-slab)}
.minimap{height:150px; border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden; position:relative; background:var(--land)}
.minimap svg{width:100%;height:100%;display:block}
.locrow{display:flex; justify-content:space-between; align-items:center; margin-top:var(--s2); gap:var(--s3)}
.kv{display:grid; grid-template-columns:110px 1fr; gap:6px var(--s3); font-size:var(--t-14)}
.kv dt{color:var(--ink-2)} .kv dd{margin:0}
.hist{width:100%; border-collapse:collapse; font-size:var(--t-14)}
.hist td{padding:7px 0; border-top:1px solid var(--line-soft)}
.hist td:last-child{text-align:right}
.drawer footer{padding:var(--s4) var(--s5); border-top:1px solid var(--line); display:flex; gap:var(--s2); align-items:center; background:var(--paper)}
.drawer footer p{margin:0 auto 0 0; font-size:var(--t-12); color:var(--ink-2); max-width:220px}
/* =========================================================
4. Οδηγός (phone)
========================================================= */
.driver-stage{min-height:calc(100vh - var(--header-h)); display:grid; grid-template-columns:1fr 400px 1fr; gap:var(--s7); align-items:start; padding:var(--s6) var(--s6)}
.driver-stage aside{max-width:340px; justify-self:end; padding-top:var(--s7)}
.driver-stage aside h1{font-size:var(--t-28); line-height:1.2}
.driver-stage aside p{color:var(--ink-2); margin:var(--s3) 0 0}
.driver-stage aside .orn{margin-top:var(--s5); width:120px; color:var(--amber)}
.phone{
width:400px; height:860px; border-radius:46px; background:#2f2f2f; padding:12px;
box-shadow:0 30px 60px rgba(60,24,30,.25);
}
.phone .scr{width:100%; height:100%; border-radius:36px; overflow:hidden; background:var(--flour); position:relative;
--drv-bar:76px; /* message bar: 10 top + 52 button + 14 bottom */
--drv-safe:env(safe-area-inset-bottom, 0px)}
.drv{font-size:17px; height:100%; overflow:auto; background:var(--flour);
/* keep the last content, and anything scrolled into view, clear of the pinned message bar */
padding-bottom:calc(var(--drv-bar) + var(--drv-safe)); scroll-padding-bottom:calc(var(--drv-bar) + var(--drv-safe))}
.drv-head{background:var(--head-bg); color:#fff; padding:44px 20px 16px}
.drv-head .r{display:flex; align-items:center; gap:12px}
.drv-head img{width:34px;height:34px;border-radius:50%}
.drv-head h1{font-size:24px; font-weight:600}
.drv-head .r p{margin:0; font-size:14px; color:rgba(255,255,255,.72)}
.drv-head .r .t{margin-left:auto; font-family:var(--f-slab); font-size:18px}
.prog{display:flex; gap:3px; margin-top:16px}
.prog i{flex:1; height:6px; border-radius:1px; background:rgba(255,255,255,.2)}
.prog i.d{background:#7fc6d4}
.prog i.c{background:var(--amber)}
.prog-l{margin-top:8px; font-size:14px; color:rgba(255,255,255,.8); display:flex; justify-content:space-between}
.now{margin:16px 12px 0; background:var(--paper); border-radius:var(--r-phone); border:1px solid var(--line); overflow:hidden}
.now-top{padding:18px 18px 0; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start}
.now-top .n{width:48px;height:48px;border-radius:50%;background:var(--amber);display:grid;place-items:center;font-family:var(--f-slab);font-weight:700;font-size:22px;color:var(--on-amber)}
.now-top h2{font-family:var(--f-ui); font-weight:700; font-size:19px; line-height:1.25; letter-spacing:.01em}
.now-top p{margin:4px 0 0; font-size:16px; color:var(--ink-2)}
.now .when{margin:14px 18px 0; display:flex; gap:8px; flex-wrap:wrap}
.now .when .chip{height:30px; font-size:15px; padding:0 12px}
.drv-note{margin:14px 18px 0; background:var(--amber-tint); border-left:4px solid var(--amber); padding:12px 14px; border-radius:2px; font-size:17px; line-height:1.4}
.drv-note small{display:block; font-size:13px; color:var(--warn-ink); font-weight:600; margin-bottom:2px}
.unload{margin:14px 18px 0; font-size:16px}
.unload div{display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line-soft)}
.unload div b{font-family:var(--f-slab); font-weight:600}
.unload .docs-l{font-size:13px; color:var(--ink-2); border-top:0; padding-top:0}
.drv-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:16px 18px 0}
.big{
height:56px; border-radius:12px; font-size:17px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:10px;
border:2px solid var(--teal); background:transparent; color:var(--teal); cursor:pointer; text-decoration:none;
}
.big svg.i{width:22px;height:22px}
.big.nav{background:var(--teal); color:var(--on-teal)}
.big.done{grid-column:1 / -1; height:64px; background:var(--amber); border-color:var(--amber); color:var(--on-amber); font-size:19px}
.drv-issue{display:block; text-align:center; padding:14px 0 18px; font-size:15px; color:var(--ink-2); background:none; border:0; width:100%; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.drv-sec{margin:22px 12px 0}
.drv-sec h3{font-family:var(--f-ui); font-size:15px; font-weight:600; color:var(--ink-2); margin:0 6px 8px}
.drv-list{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-phone); overflow:hidden}
.drv-stop{display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; padding:12px 14px; min-height:64px}
.drv-stop + .drv-stop{border-top:1px solid var(--line-soft)}
.drv-stop .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-slab);font-weight:600;font-size:15px;box-shadow:inset 0 0 0 2px var(--amber);color:var(--ink)}
.drv-stop b{display:block; font-size:16px; font-weight:600; line-height:1.25}
.drv-stop span{display:block; font-size:14px; color:var(--ink-2)}
.drv-stop time{font-family:var(--f-slab); font-size:17px}
.drv-stop.done .n{background:var(--teal); box-shadow:none; color:var(--on-teal)}
.drv-stop.done b,.drv-stop.done time{color:var(--ink-3)}
.drv-stop .flag{display:inline-block; margin-top:4px; font-size:13px; font-weight:600; color:var(--warn-ink)}
.drv-end{text-align:center; padding:22px 0 40px; font-size:14px; color:var(--ink-3)}
.drv-end .orn{width:90px; margin:0 auto 10px; color:var(--ink-3)}
.toast{
position:absolute; left:12px; right:12px; bottom:18px; background:var(--teal); color:var(--on-teal); border-radius:12px;
padding:14px 16px; font-size:16px; display:flex; align-items:center; gap:10px; justify-content:space-between;
transform:translateY(140%); transition:transform .25s ease;
}
.toast.show{transform:none}
.toast button{background:none; border:0; color:inherit; font-weight:600; text-decoration:underline; font-size:15px; cursor:pointer}
@media (prefers-reduced-motion:reduce){ .toast{transition:none} }
/* =========================================================
5. {AGENT} (agent)
========================================================= */
.nav .count.amber{background:var(--amber); color:var(--on-amber)}
/* chat-app layout: the tab is exactly the viewport under the header; each column scrolls on its own */
.assistant{display:grid; grid-template-columns:280px minmax(0,1fr) 300px; grid-template-rows:minmax(0,1fr); height:calc(100vh - var(--header-h)); height:calc(100dvh - var(--header-h)); overflow:hidden}
.convs{background:var(--paper); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:auto; min-height:0}
.convs > header{padding:var(--s5) var(--s5) var(--s3); display:flex; align-items:center; justify-content:space-between}
.convs > header h1{font-size:var(--t-22)}
.conv{display:block; padding:var(--s3) var(--s5); border-top:1px solid var(--line-soft); text-decoration:none; color:inherit; position:relative}
.conv:hover{background:var(--hover)}
.conv[aria-current="true"]{background:var(--amber-tint)}
.conv[aria-current="true"]::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--amber)}
.conv .r1{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2)}
.conv b{font-weight:600; font-size:var(--t-14)}
.conv time{font-size:var(--t-12); color:var(--ink-3)}
.conv p{margin:2px 0 0; font-size:var(--t-13); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.conv .pin{font-size:var(--t-12); color:var(--teal); font-weight:600}
.conv-group{padding:var(--s4) var(--s5) var(--s1); font-size:var(--t-12); color:var(--ink-3); border-top:1px solid var(--line-soft)}
.tcol{display:flex; flex-direction:column; min-width:0; min-height:0}
.thead{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s6); border-bottom:1px solid var(--line); background:var(--paper)}
.thead h2{font-size:var(--t-22)}
.thead p{margin:0; font-size:var(--t-13); color:var(--ink-2)}
.channel{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:var(--r-chip); background:var(--sky-tint); color:var(--teal); font-size:var(--t-13); font-weight:500; white-space:nowrap}
.channel svg.i{width:14px; height:14px}
.channel i{width:7px;height:7px;border-radius:50%;background:#7fc6d4;box-shadow:0 0 0 2px rgba(127,198,212,.25)}
.thead .channel{margin-left:auto}
.tscroll{flex:1; overflow:auto; min-height:0; display:flex; flex-direction:column; overscroll-behavior:contain}
/* short threads sit on the composer, like a chat app */
.tscroll > .thread{width:100%; margin-top:auto}
.thread{max-width:720px; margin:0 auto; padding:var(--s5) var(--s6) var(--s5); display:flex; flex-direction:column; gap:var(--s5)}
.daysep{align-self:center; font-size:var(--t-12); color:var(--ink-3); display:flex; align-items:center; gap:var(--s3); width:100%}
.daysep::before,.daysep::after{content:""; flex:1; height:1px; background:var(--line)}
.msg{display:grid; grid-template-columns:32px minmax(0,1fr); gap:var(--s3); align-items:start}
.av{width:32px;height:32px;border-radius:50%;background:var(--amber);color:var(--on-amber);display:grid;place-items:center;font-family:var(--f-slab);font-weight:700;font-size:16px}
/* agent mark: trim the line box to the cap height so the E centres on its caps, not on ascender/descender space;
the E carries its weight on the stem, so it moves right a hair to sit optically centred */
.av,.sendbtn{line-height:1; text-box:trim-both cap alphabetic; padding-left:.06em}
.av-sm{width:18px; height:18px; font-size:10px; flex:none}
h3.with-mark{display:flex; align-items:center; gap:8px}
.msg .meta{font-size:var(--t-12); color:var(--ink-3); margin-bottom:2px}
.msg .meta b{color:var(--ink); font-weight:600; font-size:var(--t-13); margin-right:6px}
.msg p{margin:0 0 var(--s2); line-height:1.55}
.msg p:last-child{margin-bottom:0}
.me{display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.me .bub{background:var(--me-bg); color:#fff; padding:10px 14px; border-radius:14px 14px 4px 14px; max-width:78%; line-height:1.45}
.me .meta{font-size:var(--t-12); color:var(--ink-3)}
.act{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:var(--r-panel); margin:var(--s2) 0; overflow:hidden}
.act > header{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s3) var(--s4) 0}
.act h4{margin:0; font-family:var(--f-slab); font-weight:500; font-size:var(--t-18)}
.act .ab{padding:var(--s2) var(--s4) var(--s4)}
.act .ab > p{font-size:var(--t-14); color:var(--ink-2); margin:var(--s2) 0 0}
.act footer{display:flex; gap:var(--s2); padding:var(--s3) var(--s4); border-top:1px solid var(--line-soft); background:var(--surface); align-items:center}
.act footer .note{margin-left:auto; font-size:var(--t-12); color:var(--ink-3)}
.act.info{border-left-color:var(--teal)}
.act.applied{border-left-color:var(--line); background:transparent}
.act.applied h4,.act.applied .ab{color:var(--ink-2)}
.act.applied footer{background:transparent}
.act.replaced{border-left-color:var(--line); background:transparent}
.act.replaced h4{font-size:var(--t-15); color:var(--ink-2)}
.act.replaced > header{padding-top:var(--s2)}
.act.replaced .ab{padding:2px var(--s4) var(--s2)}
.act.replaced .ab > p{margin:0; font-size:var(--t-13); color:var(--ink-3)}
.plist{margin-top:var(--s2)}
.prow{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--s3); align-items:center; padding:8px 0; border-top:1px solid var(--line-soft); font-size:var(--t-14)}
.prow:first-child{border-top:0}
.prow b{font-weight:600; display:block}
.prow span.s{font-size:var(--t-13); color:var(--ink-2)}
.prow a{font-size:var(--t-13); font-weight:600; color:var(--teal); text-decoration:none}
.prow a:hover{text-decoration:underline}
.diff{margin-top:var(--s2); font-size:var(--t-14)}
.drow{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) auto; gap:var(--s3); padding:8px 0; border-top:1px solid var(--line-soft); align-items:baseline}
.drow:first-child{border-top:0}
.drow b{font-weight:600}
.drow .ret{text-align:right}
.drow .ret s{color:var(--ink-3); text-decoration:none}
.drow .ret strong{font-family:var(--f-slab); font-weight:600; font-size:var(--t-15)}
.drow.muted{color:var(--ink-3)}
.drow.muted b{color:var(--ink-2)}
.warnbox{margin-top:var(--s3); background:var(--amber-tint); border-radius:var(--r-ctl); padding:var(--s3) var(--s3) var(--s3) var(--s4); font-size:var(--t-14); display:grid; grid-template-columns:20px 1fr; gap:var(--s2)}
.warnbox svg.i{color:var(--warn-ink-2); margin-top:2px}
.warnbox p{margin:0 0 6px}
.warnbox label{display:flex; align-items:center; gap:8px; font-weight:600; font-size:var(--t-13); cursor:pointer}
.warnbox input{accent-color:var(--teal); width:16px; height:16px}
.kvs{display:grid; grid-template-columns:auto 1fr; gap:6px var(--s4); font-size:var(--t-14); margin-top:var(--s2)}
.kvs dt{color:var(--ink-2)} .kvs dd{margin:0}
.kvs dd s{color:var(--ink-3)}
.composer{border-top:1px solid var(--line); background:var(--paper); padding:var(--s3) var(--s6) var(--s4)}
.composer .inner{max-width:720px; margin:0 auto}
.quick{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--s2)}
.qp{height:30px; padding:0 12px; border-radius:var(--r-chip); border:1px solid var(--line); background:var(--surface); font-size:var(--t-13); color:var(--ink); cursor:pointer}
.qp:hover{border-color:var(--teal); color:var(--teal)}
.cbox{display:flex; gap:var(--s2); align-items:flex-end; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:6px 6px 6px 14px}
.cbox:focus-within{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}
.cbox textarea{flex:1; border:0; resize:none; outline:none; background:transparent; font-size:var(--t-15); line-height:1.4; padding:8px 0; min-height:38px}
.cbox .btn{height:38px}
.cnote{margin:6px 0 0; font-size:var(--t-12); color:var(--ink-3)}
/* one footnote row under the main composer: hint left, rule right */
#scr-assistant .composer .ask-hint{float:left; margin-top:6px}
#scr-assistant .composer .cnote{text-align:right}
@media (max-height:780px){ #scr-assistant .composer .quick{display:none} }
.pend{background:var(--paper); border-left:1px solid var(--line); overflow:auto; min-height:0}
.pend section{padding:var(--s5) var(--s5) var(--s4)}
.pend section + section{border-top:1px solid var(--line-soft)}
.pend h3{font-size:var(--t-18)}
.pend .sub{font-size:var(--t-13); color:var(--ink-2); margin:2px 0 var(--s3)}
.pitem{display:block; padding:10px 0; border-top:1px solid var(--line-soft); font-size:var(--t-14); text-decoration:none; color:inherit}
.pitem b{display:block; font-weight:600}
.pitem span{font-size:var(--t-13); color:var(--ink-2)}
.srcs{list-style:none; margin:0; padding:0; font-size:var(--t-14)}
.srcs li{display:flex; justify-content:space-between; padding:7px 0; border-top:1px solid var(--line-soft)}
.srcs li span{color:var(--ink-2)}
/* floating button + drawer */
.fab{
position:fixed; right:var(--s5); bottom:var(--s5); z-index:40; width:60px; height:60px; border-radius:50%;
background:var(--amber); border:0; cursor:pointer; display:grid; place-items:center; color:var(--on-amber);
box-shadow:0 8px 22px rgba(72,23,11,.28), inset 0 0 0 2px rgba(72,23,11,.12);
}
.fab:hover{background:var(--amber-2)}
.fab svg{width:34px; height:34px}
.fab .n{position:absolute; top:-2px; right:-2px; min-width:22px; height:22px; border-radius:11px; background:var(--crust); color:#fff; font-size:12px; font-weight:600; display:grid; place-items:center; padding:0 6px; border:2px solid var(--flour)}
body[data-screen="assistant"] .fab, body[data-screen="driver"] .fab, body[data-screen="accounts"] .fab, body[data-screen="signin"] .fab, body.agent-open .fab{display:none}
body.ord-new .fab{display:none}
.agent-drawer{
position:fixed; top:var(--header-h); right:0; bottom:0; width:400px; z-index:35;
background:var(--flour); border-left:1px solid var(--line); box-shadow:-12px 0 32px rgba(60,24,30,.14);
display:none; flex-direction:column;
}
body.agent-open .agent-drawer{display:flex}
.agent-drawer > header{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); background:var(--paper); border-bottom:1px solid var(--line)}
.agent-drawer > header h2{font-size:var(--t-18)}
.agent-drawer > header .grow{flex:1; min-width:0}
.agent-drawer > header .channel{height:22px; font-size:var(--t-12); margin-top:2px}
.agent-drawer .thread{padding:var(--s4); gap:var(--s4)}
.agent-drawer .msg{grid-template-columns:26px minmax(0,1fr); gap:var(--s2)}
.agent-drawer .av{width:24px; height:24px; font-size:12px}
.agent-drawer .msg p{font-size:var(--t-14)}
.agent-drawer .me .bub{font-size:var(--t-14); max-width:88%}
.agent-drawer .act h4{font-size:var(--t-15)}
.agent-drawer .act > header{padding:var(--s3) var(--s3) 0; flex-wrap:wrap; gap:6px}
.agent-drawer .act .ab{padding:var(--s2) var(--s3) var(--s3)}
.agent-drawer .act footer{padding:var(--s2) var(--s3); flex-wrap:wrap}
.agent-drawer .drow{grid-template-columns:minmax(0,1fr) auto; font-size:var(--t-13)}
.agent-drawer .drow .cnt{grid-column:1; grid-row:2; font-size:var(--t-12); color:var(--ink-2); margin-top:-6px}
.agent-drawer .drow .ret{grid-row:1 / span 2; grid-column:2; align-self:center}
.agent-drawer .warnbox{font-size:var(--t-13)}
.agent-drawer .composer{padding:var(--s3) var(--s4)}
.agent-drawer .cbox textarea{min-height:48px}
.agent-drawer .prow{grid-template-columns:minmax(0,1fr) auto; font-size:var(--t-13)}
.agent-drawer .prow .chip{display:none}
.agent-drawer .kvs{font-size:var(--t-13)}
/* driver chat */
.drv-msgbar{position:absolute; left:0; right:0; bottom:0; padding:10px 12px calc(14px + var(--drv-safe)); background:linear-gradient(180deg, transparent, var(--flour) 30%); z-index:3}
.drv-msgbar button{width:100%; height:52px; border-radius:12px; border:1px solid var(--line); background:var(--paper); display:flex; align-items:center; gap:10px; padding:0 14px; font-size:16px; color:var(--ink-2); cursor:pointer; text-align:left}
.drv-msgbar button svg.i{width:22px;height:22px;color:var(--teal)}
.drv-msgbar button b{color:var(--ink); font-weight:600}
.toast{bottom:84px}
.sheet-scrim{position:absolute; inset:0; background:rgba(60,24,30,.38); display:none; z-index:8}
.sheet{position:absolute; left:0; right:0; bottom:0; height:88%; z-index:9; background:var(--flour); border-radius:20px 20px 0 0; display:none; flex-direction:column; overflow:hidden}
.scr.chat-open .sheet,.scr.chat-open .sheet-scrim{display:flex}
.sheet > header{display:flex; align-items:center; gap:10px; padding:10px 16px 12px; background:var(--paper); border-bottom:1px solid var(--line); position:relative}
.sheet > header::before{content:""; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--line)}
.sheet > header h2{font-family:var(--f-ui); font-size:17px; font-weight:700; margin-top:8px}
.sheet > header p{margin:0; font-size:13px; color:var(--ink-2)}
.sheet > header .x{margin-left:auto; width:40px; height:40px; border-radius:50%; border:0; background:var(--hover); display:grid; place-items:center; cursor:pointer; margin-top:8px}
.sheet .sbody{flex:1; overflow:auto; min-height:0; overscroll-behavior:contain; padding:14px 14px 8px; display:flex; flex-direction:column; gap:14px; font-size:16px}
.sheet .sbody > :first-child{margin-top:auto}
.sheet .ctx{align-self:center; font-size:13px; color:var(--ink-3)}
.sheet .me .bub{font-size:17px}
.sheet .msg{grid-template-columns:28px 1fr; gap:10px}
.sheet .av{width:28px;height:28px;font-size:14px}
.sheet .msg p{font-size:16px}
.sheet .callcard{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:8px 0; display:flex; align-items:center; gap:12px}
.sheet .callcard b{display:block; font-size:16px; line-height:1.25}
.sheet .callcard span{font-size:15px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.sheet .callcard .big{margin-left:auto; height:48px; padding:0 16px; font-size:16px; border-radius:10px; width:auto}
.sheet .sfoot{background:var(--paper); border-top:1px solid var(--line); padding:10px 12px 16px}
.sheet .sfoot .quick{flex-wrap:nowrap; overflow-x:auto; margin-bottom:8px}
.sheet .sfoot .qp{height:36px; font-size:14px; white-space:nowrap}
.sheet .sfoot .cbox{border-radius:999px; padding:5px 5px 5px 16px; align-items:center; background:var(--paper)}
.sheet .sfoot .cbox:focus-within{border-color:var(--amber); box-shadow:0 0 0 3px rgba(235,163,21,.22)}
.sheet .sfoot .cbox textarea{min-height:0; padding:10px 0}
.sheet .sfoot .sendp{width:44px; height:44px}
.sheet .sfoot .sendp svg.i{width:20px; height:20px}
.sheet .sfoot .cbox textarea{font-size:16px}
.sheet .sfoot .cbox .mic{width:44px; height:44px; border-radius:50%; border:0; background:transparent; color:var(--teal); display:grid; place-items:center; flex:none}
/* =========================================================
6. Λογαριασμοί + avatar menu
========================================================= */
.acct{position:relative}
.avatar{border:0; cursor:pointer}
.avatar[aria-expanded="true"],body[data-screen="accounts"] .avatar{box-shadow:0 0 0 2px var(--amber)}
.menu{position:absolute; right:0; top:44px; width:260px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-ctl); box-shadow:0 12px 30px rgba(60,24,30,.18); padding:6px 0; display:none; z-index:50}
.acct.open .menu{display:block}
.menu .who{padding:10px 16px 12px; border-bottom:1px solid var(--line-soft)}
.menu .who b{display:block; font-weight:600}
.menu .who span{font-size:var(--t-13); color:var(--ink-2)}
.menu a{display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:var(--t-14); color:var(--ink); text-decoration:none}
.menu a:hover{background:var(--hover)}
.menu hr{border:0; border-top:1px solid var(--line-soft); margin:6px 0}
.settings{max-width:1380px; margin:0 auto; padding:var(--s6); display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--s6); align-items:start}
.snav{position:sticky; top:calc(var(--header-h) + var(--s6))}
.snav h1{font-size:var(--t-22); margin-bottom:var(--s3)}
.snav a{display:block; padding:8px 12px; border-radius:var(--r-ctl); color:var(--ink-2); text-decoration:none; font-size:var(--t-14); font-weight:500}
.snav a:hover{background:var(--hover)}
.snav a[aria-current="page"]{background:var(--paper); color:var(--ink); box-shadow:inset 3px 0 0 var(--teal); font-weight:600}
.shead{display:flex; align-items:flex-end; gap:var(--s4); margin-bottom:var(--s4)}
.shead h2{font-size:var(--t-36); line-height:1.1}
.shead p{margin:6px 0 0; color:var(--ink-2); max-width:62ch}
.shead .btn{margin-left:auto}
.utable{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); font-size:var(--t-14)}
.utable th{text-align:left; font-size:var(--t-13); font-weight:500; color:var(--ink-2); padding:10px var(--s4); border-bottom:1px solid var(--line); white-space:nowrap}
.utable td{padding:12px var(--s4); border-top:1px solid var(--line-soft); vertical-align:middle}
.utable .nm b{font-weight:600; display:block}
.utable .nm span{font-size:var(--t-12); color:var(--ink-3)}
.utable .you{display:inline-block; margin-left:6px; font-size:var(--t-12); font-weight:600; color:var(--teal)}
.utable tr.off td{color:var(--ink-3)}
.utable tr.off .nm b{color:var(--ink-2)}
.utable .dim{color:var(--ink-3)}
.utable .last span{display:block; font-size:var(--t-12); color:var(--ink-3)}
.utable .tel{white-space:nowrap}
/* Οχήματα */
.vtable .plate{font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; letter-spacing:.02em}
.vtable .cap{white-space:nowrap; color:var(--ink-2)} .vtable .cap b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.vtable td .s{display:block; font-size:var(--t-12); color:var(--ink-3)}
.yn{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-13)}
.yn svg.i{width:18px; height:18px}
.yn.yes{color:var(--teal); font-weight:600}
.yn.no{color:var(--ink-3)}
.vnote{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s4); font-size:var(--t-14); color:var(--ink-2)}
.vnote .sendbtn{opacity:1}
/* admin-only settings (SoftOne, AI) */
.snav a.adm{display:flex; align-items:center; justify-content:space-between; gap:8px}
.snav a.adm svg.i{width:15px; height:15px; color:var(--ink-3)}
.chip-lock{background:var(--muted-bg); color:var(--ink-2); vertical-align:middle; margin-left:10px; font-family:var(--f-ui)}
.shead h2 .chip-lock{position:relative; top:-6px}
.sform{max-width:760px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-panel); padding:var(--s5) var(--s6) var(--s4)}
.sform .field{margin-bottom:var(--s4)}
.sform .grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 var(--s4)}
.field input[type=url],.field input[type=password]{width:100%; height:42px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); padding:0 12px; font-size:var(--t-15)}
.secret{display:flex; align-items:center; gap:var(--s3); min-height:42px; padding:0 12px; border:1px dashed var(--line); border-radius:var(--r-ctl); background:var(--flour)}
.secret .dots{font-size:18px; letter-spacing:.12em; color:var(--ink-2)}
.secret .saved{font-size:var(--t-13); color:var(--ink-3)}
.secret .acts{margin-left:auto; display:flex; gap:var(--s4)}
.secret.empty .dots{display:none} .secret.empty .saved{color:var(--warn-ink)}
.secret.editing{border-style:solid; padding:0; background:transparent; border:0}
.secret.editing input{flex:1}
.snote{display:flex; align-items:center; gap:8px; font-size:var(--t-13); color:var(--ink-2); margin:0 0 var(--s4)}
.snote svg.i{width:16px; height:16px; color:var(--ink-3)}
.sform .actions{display:flex; align-items:center; gap:var(--s3); border-top:1px solid var(--line-soft); padding-top:var(--s4); flex-wrap:wrap}
.sform .actions .btn-primary{margin-left:auto}
.sform.usage{margin-top:var(--s4)}
.sform.usage h3{margin:0 0 var(--s3); font-size:var(--t-16)}
.usage .uper{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s4)}
.usage h4{margin:0 0 6px; font-size:var(--t-14); font-weight:600}
.usage h4 span{font-weight:400; color:var(--ink-3)}
.usage table{width:100%; border-collapse:collapse; font-size:var(--t-13); font-variant-numeric:tabular-nums}
.usage th{text-align:left; font-weight:500; color:var(--ink-2); padding:4px 6px 4px 0; border-bottom:1px solid var(--line)}
.usage td{padding:5px 6px 5px 0; border-top:1px solid var(--line-soft); vertical-align:top}
.usage td.n, .usage th.n{text-align:right}
.usage .note{margin:var(--s3) 0 0; font-size:var(--t-12); color:var(--ink-3)}
@media (max-width:700px){ .usage .uper{grid-template-columns:minmax(0,1fr)} }
.test-res{display:flex; align-items:center; gap:6px; margin:0; font-size:var(--t-14); font-weight:500; flex:1 1 280px; min-width:0}
.test-res svg.i{width:18px; height:18px; flex:none}
.test-res.ok{color:var(--teal)} .test-res.err{color:var(--brick)} .test-res.busy{color:var(--ink-3)}
.role{display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--r-chip); font-size:var(--t-13); font-weight:500; white-space:nowrap}
.role.admin{background:var(--me-bg); color:#fff}
.role.disp{background:var(--teal-tint); color:var(--teal)}
.role.drv{box-shadow:inset 0 0 0 1px var(--line); color:var(--ink)}
.chan{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-13); white-space:nowrap}
.chan svg.i{width:15px; height:15px; color:var(--teal)}
.chan.web svg.i{color:var(--ink-3)}
.chan.pending{color:var(--warn-ink)}
.chan.pending svg.i{color:var(--warn-ink-2)}
.switch{position:relative; width:42px; height:24px; display:inline-block}
.switch input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.switch span{position:absolute; inset:0; border-radius:12px; background:var(--line); transition:background .15s}
.switch span::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(60,24,30,.25); transition:transform .15s}
.switch input:checked + span{background:var(--teal)}
.switch input:checked + span::after{transform:translateX(18px)}
.switch input:focus-visible + span{outline:2px solid var(--teal-2); outline-offset:2px}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled + span{opacity:.5}
@media (prefers-reduced-motion:reduce){ .switch span,.switch span::after{transition:none} }
.linkbtn{background:none; border:0; padding:0; color:var(--teal); font-weight:600; font-size:var(--t-13); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.mine{margin-top:var(--s6); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s5)}
.mine .panel{padding:var(--s5)}
.mine h3{font-size:var(--t-22); margin-bottom:var(--s3)}
.mine .kv{grid-template-columns:140px 1fr; font-size:var(--t-15); gap:10px var(--s3)}
.mine .row{display:flex; gap:var(--s2); margin-top:var(--s4); flex-wrap:wrap}
.mine p.quiet{font-size:var(--t-14); color:var(--ink-2); margin:0 0 var(--s4)}
.pin{display:flex; gap:6px; align-items:center}
.pin i{width:10px; height:10px; border-radius:50%; background:var(--ink)}
.chanlist{list-style:none; margin:0; padding:0}
.chanlist li{display:flex; align-items:center; gap:var(--s3); padding:12px 0; border-top:1px solid var(--line-soft); font-size:var(--t-15)}
.chanlist li:first-child{border-top:0}
.chanlist li span.s{font-size:var(--t-13); color:var(--ink-2); display:block}
.chanlist li .btn{margin-left:auto}
.invite{position:fixed; top:var(--header-h); right:0; bottom:0; width:460px; z-index:20; background:var(--paper); border-left:1px solid var(--line); box-shadow:-12px 0 32px rgba(60,24,30,.10); display:none; flex-direction:column}
body.invite-open .invite{display:flex}
.invite > header{padding:var(--s5) var(--s5) var(--s4); border-bottom:1px solid var(--line-soft); display:flex; align-items:flex-start; gap:var(--s3)}
.invite > header h2{font-size:var(--t-22)}
.invite > header p{margin:4px 0 0; font-size:var(--t-13); color:var(--ink-2)}
.invite > header .btn{margin-left:auto}
.invite .dbody{flex:1; overflow:auto; padding:var(--s5)}
.dbody .field,.sfields .field{margin-bottom:var(--s4)}
.field > label,.field > .lbl{display:block; font-size:var(--t-13); font-weight:500; color:var(--ink-2); margin-bottom:6px}
.field input[type=text],.field input[type=tel],.field select{width:100%; height:42px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); padding:0 12px; font-size:var(--t-15)}
.field input:focus,.field select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}
.telwrap{display:flex}
.telwrap span{display:grid; place-items:center; padding:0 12px; border:1px solid var(--line); border-right:0; border-radius:var(--r-ctl) 0 0 var(--r-ctl); background:var(--flour); font-size:var(--t-15); color:var(--ink-2)}
.telwrap input{border-radius:0 var(--r-ctl) var(--r-ctl) 0 !important}
.field .help{font-size:var(--t-12); color:var(--ink-3); margin-top:6px}
.radios{display:grid; gap:8px}
.radio{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); cursor:pointer}
.radio input{accent-color:var(--teal); width:18px; height:18px; margin:2px 0 0}
.radio b{font-weight:600; display:block; font-size:var(--t-15)}
.radio span{font-size:var(--t-13); color:var(--ink-2)}
.radio:has(input:checked){border-color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal)}
.tmp-pin{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); padding:12px 16px; border:1px dashed var(--amber); border-radius:var(--r-ctl); background:var(--amber-tint)}
.tmp-pin b{font-family:var(--f-slab); font-size:30px; font-weight:600; letter-spacing:.12em; font-variant-numeric:tabular-nums}
.tmp-pin span{font-size:var(--t-13); color:var(--warn-ink); font-weight:600}
.preview{background:var(--flour); border-radius:var(--r-ctl); padding:var(--s3) var(--s4); font-size:var(--t-14); line-height:1.5}
.preview small{display:block; font-size:var(--t-12); color:var(--ink-3); margin-bottom:4px}
.invite footer{padding:var(--s4) var(--s5); border-top:1px solid var(--line); display:flex; gap:var(--s2); justify-content:flex-end}
/* =========================================================
7. Σύνδεση (sign-in)
========================================================= */
body[data-screen="signin"] .app-head{display:none}
body[data-screen="signin"]{background:var(--flour)}
.signin{min-height:100vh; display:flex; flex-direction:column}
.si-top{background:var(--head-bg); color:#fff; padding:56px 24px 44px; text-align:center; position:relative}
.si-top img{width:84px; height:84px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.si-top .orn{width:120px; margin:18px auto 14px; color:var(--amber)}
.si-top h1{font-size:28px; font-weight:500}
.si-top p{margin:6px 0 0; color:rgba(255,255,255,.7); font-size:15px}
.si-card{width:100%; max-width:440px; margin:-20px auto 0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-phone); padding:24px 20px 22px; position:relative}
.si-card h2{font-size:22px; margin-bottom:6px}
.si-card .lead{margin:0 0 18px; color:var(--ink-2); font-size:16px}
.si-card .lead a{color:var(--teal); font-weight:600}
.si-tel{display:flex; height:58px}
.si-tel span{display:grid; place-items:center; padding:0 14px; border:1px solid var(--line); border-right:0; border-radius:12px 0 0 12px; background:var(--flour); font-size:19px; color:var(--ink-2)}
.si-tel input{flex:1; min-width:0; border:1px solid var(--line); border-radius:0 12px 12px 0; background:var(--surface); padding:0 14px; font-size:21px; letter-spacing:.04em}
.si-tel input:focus,.otp input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}
.si-help{font-size:14px; color:var(--ink-2); margin:10px 0 18px}
.si-card .big.done{width:100%; height:58px; font-size:18px}
.si-alt{display:flex; justify-content:space-between; margin-top:16px; font-size:15px}
.si-alt a,.si-alt button{color:var(--teal); font-weight:600; text-decoration:none; background:none; border:0; padding:0; font-size:15px; cursor:pointer}
.si-alt .muted{color:var(--ink-3); font-weight:500}
.otp{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.otp input{height:62px; width:100%; min-width:0; text-align:center; font-family:var(--f-slab); font-size:28px; font-weight:600; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.otp input.f{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}
.remember{display:flex; gap:10px; align-items:center; margin:16px 0 18px; font-size:15px}
.remember input{accent-color:var(--teal); width:20px; height:20px}
.si-foot{margin:auto auto 0; padding:28px 24px 32px; text-align:center; font-size:14px; color:var(--ink-3); max-width:440px}
.si-foot b{color:var(--ink-2); font-weight:600}
/* PIN: a real password field drives the dots; the keypad is for the phone, the keyboard works too */
.si-top{padding:36px 24px 40px}
.si-top img{width:64px; height:64px}
.si-top .orn{margin:14px auto 10px}
.si-top h1{font-size:26px}
.pin-row{display:flex; justify-content:space-between; align-items:baseline; margin:18px 0 8px}
.pin-row label{font-size:15px; font-weight:600}
.pin-hint{font-size:14px; color:var(--ink-3)}
.pin-in{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.pin-dots{display:flex; gap:12px; justify-content:center; height:46px; align-items:center; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.pin-dots i{width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--ink-3)}
.pin-dots i.on{background:var(--ink); box-shadow:none}
.pin-dots i.opt{box-shadow:inset 0 0 0 1.5px var(--ink-3); opacity:.55} /* 5th and 6th digit are optional */
.si-card:has(.pin-in:focus) .pin-dots{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px}
.keypad button{height:52px; border:1px solid var(--line-soft); border-radius:12px; background:var(--surface); font-family:var(--f-slab); font-size:24px; font-weight:500; color:var(--ink); cursor:pointer; display:grid; place-items:center}
.keypad button:active{background:var(--hover)}
.keypad button:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.keypad button[data-k="del"]{background:transparent; border-color:transparent; color:var(--ink-2)}
.keypad button[data-k="del"] svg.i{width:26px; height:26px}
.signin .remember{margin:14px 0 14px}
/* short phones: keep the Σύνδεση button above the fold */
@media (max-height:720px){
.si-top{padding:18px 24px 30px} .si-top img{width:44px; height:44px} .si-top .orn{display:none} .si-top h1{font-size:22px; margin-top:6px} .si-top p{font-size:14px; margin-top:2px}
.si-card{padding:18px 18px 18px} .si-card .lead{margin-bottom:12px} .si-tel{height:52px}
.pin-row{margin:12px 0 6px} .pin-dots{height:42px} .keypad{gap:6px; margin-top:8px} .keypad button{height:44px; font-size:22px}
.signin .remember{margin:10px 0} .si-card .big.done{height:52px}
}
/* =========================================================
8. Παραγγελίες (7512) + ομάδες πελατών
========================================================= */
.chip-sky{background:var(--sky-tint); color:var(--sky-ink); box-shadow:inset 0 0 0 1px var(--sky-line)}
.grp{display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:var(--r-chip); background:var(--sky-tint); color:var(--sky-ink); font-size:var(--t-12); font-weight:600; vertical-align:middle; white-space:nowrap}
.ship{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-13); white-space:nowrap}
.ship svg.i{width:16px; height:16px}
.ship.v-van svg.i{color:var(--teal)}
.ship.sea{color:var(--sky-ink); font-weight:600}
.ship.sea svg.i,.ship.cour svg.i{color:var(--sky)}
.filter.grpf{border-color:var(--sky-line)}
.filter.grpf[aria-pressed="true"]{background:var(--sky-ink); border-color:var(--sky-ink)}
.with-drawer .ctable .c-last,.with-drawer .ctable .c-grp{display:none}
.ctable.only-grp tr[data-nogrp]{display:none}
.ordhead{display:flex; align-items:flex-end; gap:var(--s5); margin-bottom:var(--s5)}
.ordhead h1{font-size:var(--t-36); line-height:1.1}
.ordhead p{margin:6px 0 0; color:var(--ink-2); max-width:68ch}
.ordhead .btn{margin-left:auto}
.otools{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3)}
.daterange{display:flex; align-items:center; gap:6px; font-size:var(--t-14); color:var(--ink-2)}
.daterange input{height:36px; width:118px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--paper); padding:0 10px; font-size:var(--t-14); font-family:var(--f-ui)}
.otools .search{margin-left:auto}
.bulk{display:flex; align-items:center; gap:var(--s3); background:var(--crust); color:#fff; padding:8px 8px 8px var(--s4); border-radius:var(--r-panel) var(--r-panel) 0 0; font-size:var(--t-14)}
.bulk b{font-weight:600}
.bulk .btn{height:34px}
.bulk .btn-quiet{color:rgba(255,255,255,.8)}
.bulk .btn-quiet:hover{background:rgba(255,255,255,.08)}
.bulk .sp{flex:1}
.otable{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); font-size:var(--t-14)}
.otable th{text-align:left; font-size:var(--t-13); font-weight:500; color:var(--ink-2); padding:10px var(--s3); border-bottom:1px solid var(--line); white-space:nowrap}
.otable td{padding:12px var(--s3); border-top:1px solid var(--line-soft); vertical-align:middle}
.otable th.n,.otable td.n{text-align:right}
.otable td.ono{font-family:var(--f-slab); font-weight:500; white-space:nowrap}
.otable .cb{width:40px; padding-left:var(--s4)}
.otable input[type=checkbox]{width:17px; height:17px; accent-color:var(--teal)}
.otable tr.open-row td{background:var(--surface)}
.otable .oc b{font-weight:600}
.otable .oc .grp{margin-left:6px}
.otable .oc span.a{display:block; font-size:var(--t-12); color:var(--ink-3)}
.otable .xp{width:36px}
.otable .xp button{width:30px; height:30px; border:0; background:transparent; border-radius:var(--r-ctl); cursor:pointer; color:var(--ink-2); display:grid; place-items:center}
.otable .xp button:hover{background:var(--hover)}
.otable .xp svg{transition:transform .15s}
.otable tr.open-row .xp svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .otable .xp svg{transition:none} }
.otable tr.lines > td{padding:0 var(--s4) var(--s3); background:var(--surface); border-top:0}
.ltable{width:100%; border-collapse:collapse; font-size:var(--t-13); border:1px solid var(--line-soft); background:var(--paper)}
.ltable th{font-weight:500; color:var(--ink-3); text-align:left; padding:7px 12px; border-bottom:1px solid var(--line-soft)}
.ltable td{padding:8px 12px; border-top:1px solid var(--line-soft)}
.ltable td.code{color:var(--ink-2); white-space:nowrap}
.ltable .n{text-align:right; white-space:nowrap}
.ltable tr.short td{background:var(--sky-tint)}
.ltable caption{caption-side:bottom; text-align:left; font-size:var(--t-12); color:var(--ink-2); padding-top:8px}
.ofoot{display:flex; justify-content:space-between; align-items:center; padding:var(--s3) var(--s4); font-size:var(--t-14); color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-top:0}
/* new order */
.neworder{display:grid; grid-template-columns:330px minmax(0,1fr) 360px; height:calc(100vh - var(--header-h)); min-height:820px}
.ncol{display:flex; flex-direction:column; min-height:0; min-width:0}
.ncol + .ncol{border-left:1px solid var(--line)}
.ncol > header{padding:var(--s4) var(--s5) var(--s3); background:var(--paper); border-bottom:1px solid var(--line-soft)}
.ncol > header .crumb{font-size:var(--t-13); color:var(--ink-2); margin-bottom:var(--s3); display:block}
.ncol > header .crumb a{color:var(--teal); text-decoration:none; font-weight:600}
.step{display:flex; align-items:center; gap:var(--s3)}
.step .sn{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-slab); font-weight:700; font-size:var(--t-14); background:var(--teal); color:var(--on-teal); flex:none}
.step.cur .sn{background:var(--amber); color:var(--on-amber)}
.step h2{font-size:var(--t-22)}
.step .chip{margin-left:auto}
.ncol .scroll{flex:1; overflow:auto; min-height:0}
.ncol .searchbox{padding:var(--s3) var(--s5)}
.ncol .searchbox .search{margin:0; width:100%}
.ncol .searchbox .search input{width:100%}
.cgrp{padding:var(--s3) var(--s5) 6px; font-size:var(--t-12); color:var(--ink-3); display:flex; justify-content:space-between; border-top:1px solid var(--line-soft)}
.cpick{display:grid; grid-template-columns:1fr auto; gap:2px var(--s2); padding:10px var(--s5); border-top:1px solid var(--line-soft); cursor:pointer; position:relative; align-items:center}
.cpick:hover{background:var(--hover)}
.cpick b{font-weight:600; font-size:var(--t-14)}
.cpick span{font-size:var(--t-13); color:var(--ink-2); grid-column:1}
.cpick .ship{grid-column:2; grid-row:1 / span 2}
.cpick.sel{background:var(--amber-tint)}
.cpick.sel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--amber)}
.recent{padding:var(--s3) var(--s5) var(--s4); background:var(--paper); border-bottom:1px solid var(--line)}
.recent h3{font-size:var(--t-15); font-family:var(--f-ui); font-weight:600; margin-bottom:var(--s2)}
.recent .rl{display:flex; gap:var(--s2); flex-wrap:wrap}
.rq{display:flex; align-items:center; gap:8px; height:34px; padding:0 12px 0 8px; border:1px solid var(--line); border-radius:var(--r-chip); background:var(--surface); font-size:var(--t-13); cursor:pointer; max-width:100%}
.rq:hover{border-color:var(--teal)}
.rq svg.i{width:16px; height:16px; color:var(--teal)}
.rq b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px}
.rq span{color:var(--ink-3); white-space:nowrap}
.rq.added{background:var(--teal-tint); border-color:var(--teal-tint)}
.prodbar{display:flex; gap:var(--s3); align-items:center; padding:var(--s3) var(--s5); border-bottom:1px solid var(--line-soft)}
.prodbar .search{margin:0; flex:1}
.prodbar .search input{width:100%}
.prow2{display:grid; grid-template-columns:88px minmax(0,1fr) 92px 120px; gap:var(--s3); align-items:center; padding:9px var(--s5); border-top:1px solid var(--line-soft); font-size:var(--t-14)}
.prow2.h{font-size:var(--t-12); color:var(--ink-3); border-top:0; padding-top:10px; padding-bottom:6px}
.prow2 .code{color:var(--ink-2); font-size:var(--t-13)}
.prow2 .nm{font-weight:500}
.prow2 .pk{font-size:var(--t-13); color:var(--ink-2)}
.prow2.has{background:var(--amber-tint)}
.prow2.has .nm{font-weight:600}
.stepper{display:inline-grid; grid-template-columns:34px 44px 34px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); overflow:hidden; height:34px; justify-self:end}
.stepper button{border:0; background:transparent; cursor:pointer; color:var(--ink-2); display:grid; place-items:center; font-size:18px; line-height:1}
.stepper button:hover{background:var(--hover); color:var(--ink)}
.stepper input{border:0; border-left:1px solid var(--line-soft); border-right:1px solid var(--line-soft); text-align:center; width:100%; font-family:var(--f-slab); font-weight:600; font-size:var(--t-15); background:transparent}
.prow2.has .stepper{border-color:var(--amber)}
.sum{background:var(--paper)}
.sum .who{padding:var(--s4) var(--s5); border-bottom:1px solid var(--line-soft)}
.sum .who b{display:block; font-weight:600}
.sum .who span{font-size:var(--t-13); color:var(--ink-2)}
.sline{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px var(--s3); padding:10px var(--s5); border-top:1px solid var(--line-soft); font-size:var(--t-14)}
.sline:first-child{border-top:0}
.sline span{font-size:var(--t-12); color:var(--ink-3)}
.sline .q{text-align:right; font-family:var(--f-slab); font-weight:600; grid-row:1 / span 2; grid-column:2; align-self:center}
.sline .q small{display:block; font-family:var(--f-ui); font-weight:400; font-size:var(--t-12); color:var(--ink-3)}
.stot{display:grid; grid-template-columns:1fr auto; gap:6px; padding:var(--s4) var(--s5); border-top:1px solid var(--line); font-size:var(--t-15)}
.stot b{font-family:var(--f-slab); font-weight:600; font-size:var(--t-22); text-align:right}
.sfields{padding:0 var(--s5) var(--s4)}
.sfields .field{margin-bottom:var(--s3)}
.sfields textarea{width:100%; min-height:64px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); padding:8px 10px; font-size:var(--t-14); resize:vertical}
.sact{padding:var(--s4) var(--s5); border-top:1px solid var(--line); display:grid; gap:var(--s2)}
.sact .btn{justify-content:center}
.erp{margin:0 var(--s5) var(--s4); padding:10px 12px; border:1px dashed var(--sky-line); border-radius:var(--r-ctl); background:var(--sky-tint); font-size:var(--t-13); color:var(--ink-2)}
.erp b{color:var(--ink); font-weight:600}
.erp .chip{height:22px; font-size:var(--t-12); margin-bottom:6px}
/* Today: shipped (not routed) */
.shipped{margin-top:var(--s5)}
.shipped h3{font-size:var(--t-18); display:flex; align-items:baseline; gap:var(--s3)}
.shipped h3 span{font-family:var(--f-ui); font-size:var(--t-13); color:var(--ink-2); font-weight:400}
.shipped .notes{margin-top:var(--s2)}
.shrow{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1.15fr) 72px minmax(0,1.6fr); gap:var(--s4); align-items:center; padding:var(--s3) var(--s4); border-top:1px solid var(--line-soft)}
.shrow:first-child{border-top:0}
.shrow .when{font-size:var(--t-13); color:var(--ink-2)}
/* =========================================================
3b. Πελάτες, read-only
========================================================= */
.cust-head p{max-width:64ch}
.ctable.cl td{vertical-align:top}
.ctable.cl tbody tr.row{cursor:pointer}
.ctable.cl tbody tr.row.open td{background:var(--surface); border-top-color:var(--line)}
.ctable.cl .shipc{width:36px; padding-left:0; padding-right:0}
.ctable.cl .shipc .ship{margin-top:1px}
.ctable.cl .prefs{display:flex; flex-wrap:wrap; gap:6px; max-width:420px}
.ctable.cl .none{color:var(--ink-3); font-size:var(--t-13)}
.ctable.cl .act-c{text-align:right; width:1%; white-space:nowrap}
.ctable.cl .act-c .btn{height:32px}
.pc{display:inline-flex; align-items:center; gap:2px; height:24px; padding:0 4px 0 10px; border-radius:var(--r-chip); font-size:var(--t-13); font-weight:500; white-space:nowrap}
.pc.pref{background:var(--teal-tint); color:var(--teal)}
.pc.need{background:var(--amber-tint); color:var(--warn-ink)}
.pc .x{width:20px; height:20px; border-radius:50%; border:0; background:transparent; color:inherit; display:grid; place-items:center; cursor:pointer; opacity:0; padding:0}
.pc .x svg.i{width:12px; height:12px; stroke-width:2.2}
.pc:hover .x,.pc .x:focus-visible{opacity:1}
.pc .x:hover{background:var(--hover)}
@media (hover:none){ .pc .x{opacity:.7} }
.legend-inline{display:flex; gap:6px}
.legend-inline .pc{padding-right:10px}
tr.cdetail > td{background:var(--surface); border-top:0; padding:0 var(--s4) var(--s5)}
.cd{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:var(--s6); padding-left:2px}
.cd h4{margin:0 0 var(--s2); font-family:var(--f-ui); font-size:var(--t-13); font-weight:600; color:var(--ink-2)}
.cd ul{list-style:none; margin:0; padding:0}
.cd li{display:grid; grid-template-columns:auto 1fr; gap:var(--s3); align-items:center; padding:8px 0; border-top:1px solid var(--line-soft)}
.cd li:first-child{border-top:0}
.cd li .pc .x{opacity:1}
.cd li .who{font-size:var(--t-13); color:var(--ink-2)}
.cd .addr2{font-size:var(--t-14)}
.cd .addr2 span{display:block; font-size:var(--t-13); color:var(--ink-3); margin-top:2px}
.cd .hint{grid-column:1 / -1; font-size:var(--t-13); color:var(--ink-2); display:flex; gap:var(--s3); align-items:center; padding-top:var(--s3); border-top:1px solid var(--line-soft)}
.cd .hint svg.i{width:16px; height:16px; color:var(--amber)}
.dtoast{position:fixed; left:50%; bottom:var(--s5); transform:translate(-50%,160%); z-index:45; background:var(--me-bg); color:#fff; border-radius:var(--r-ctl); padding:10px 12px 10px 16px; font-size:var(--t-14); display:flex; gap:var(--s4); align-items:center; box-shadow:0 10px 24px rgba(60,24,30,.25); transition:transform .2s ease; max-width:calc(100% - 32px)}
.dtoast.show{transform:translate(-50%,0)}
.dtoast button{background:none; border:0; color:var(--amber); font-weight:600; font-size:var(--t-14); cursor:pointer; padding:4px 6px}
@media (prefers-reduced-motion:reduce){ .dtoast{transition:none} }
/* driver: preferences and needs as chips */
.drv .pcs{display:flex; flex-wrap:wrap; gap:6px; margin:14px 18px 0}
.drv .pcs .pc{height:30px; font-size:15px; padding:0 12px}
.drv-stop .pcs{margin:6px 0 0}
.drv-stop .pcs .pc{display:inline-flex; height:24px; font-size:13px; padding:0 9px}
.drv-stop .pcs .pc.pref{color:var(--teal)} .drv-stop .pcs .pc.need{color:var(--warn-ink)}
.drv-stop.done .pcs{display:none}
/* =========================================================
Talk, don't click: one line to the {AGENT} per row
========================================================= */
.ask{margin-top:12px; max-width:720px}
.ask-cap{font-size:var(--t-12); color:var(--ink-2); font-weight:500; margin:0 0 4px 2px}
.ask-field{display:flex; align-items:center; gap:8px; height:42px; padding:0 5px 0 6px; border:1px solid var(--line); border-radius:999px; background:var(--paper); transition:border-color .12s, box-shadow .12s}
.ask-field:focus-within{border-color:var(--amber); box-shadow:0 0 0 3px rgba(235,163,21,.22)}
.ask .av{width:28px; height:28px; font-size:13px; flex:none}
.ask input{flex:1; min-width:0; border:0; background:transparent; height:38px; font-size:var(--t-14); color:var(--ink); outline:none; padding:0 4px}
.ask input::placeholder{color:var(--ink-3)}
.ask.has-sugg input::placeholder,.cbox.has-sugg textarea::placeholder{color:var(--ink-2)}
.ask-key{display:none; font-family:var(--f-ui); font-size:11px; font-weight:600; color:var(--ink-2); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:2px 6px; background:var(--surface); white-space:nowrap}
.ask.has-sugg:not(.typed) .ask-key{display:inline-block}
.ask-send,.sendp{width:32px; height:32px; border-radius:50%; border:0; display:grid; place-items:center; flex:none; cursor:pointer; background:var(--line-soft); color:var(--ink-3)}
.ask-send svg.i,.sendp svg.i{width:16px; height:16px}
.ask.has-sugg .ask-send,.ask.typed .ask-send,.cbox.has-sugg .sendp,.cbox.typed .sendp{background:var(--amber); color:var(--on-amber)}
@media (prefers-reduced-motion:reduce){ .ask-field{transition:none} }
.ask-hint{display:none; font-size:var(--t-12); color:var(--ink-3); white-space:nowrap}
.cbox.has-sugg:not(.typed) + .ask-hint{display:block; margin-top:6px}
.ask.sent{display:flex; flex-direction:column; gap:10px}
.ask.sent .me .bub{font-size:var(--t-14); max-width:70%}
.ask.sent .me .meta{font-size:var(--t-12); color:var(--ink-3)}
.ask.sent .msg{grid-template-columns:28px minmax(0,1fr); gap:8px; max-width:78%}
.ask.sent .msg .av{width:28px; height:28px}
.ask.sent .msg p{background:var(--paper); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:8px 12px; font-size:var(--t-14); line-height:1.45; margin:0}
.nrow .ask,.nrow .issue{grid-column:2 / -1}
.nrow .issue{margin-top:6px; font-size:var(--t-14); color:var(--ink-2)}
.nrow .issue b{color:var(--ink); font-weight:600}
.shrow .ask{grid-column:1 / -1; margin-top:0}
.otable .ask{max-width:none}
.shrow .issue{grid-column:1 / -1; font-size:var(--t-14); color:var(--ink-2); margin-top:-4px}
.shrow.issue-row{box-shadow:inset 4px 0 0 var(--amber)}
.otable tr.orow.has-ask td{padding-bottom:4px}
.otable tr.orow.has-ask td:first-child{box-shadow:inset 4px 0 0 var(--amber)}
.otable tr.askrow td:first-child{box-shadow:inset 4px 0 0 var(--amber)}
.otable tr.lines > td{box-shadow:inset 4px 0 0 var(--amber)}
.oissue{display:flex; align-items:center; gap:6px; font-size:var(--t-13); color:var(--warn-ink)}
.oissue svg.i{width:14px; height:14px}
.otable tr.orow.with-lines td{padding-bottom:12px}
.otable tr.askrow td{border-top:0; padding:0 var(--s3) 12px; background:inherit}
.otable tr.askrow .ask{margin-top:0}
.otable tr.open-row + tr.lines + tr.askrow td,.otable tr.lines + tr.askrow td{background:var(--surface)}
.act .await{font-size:var(--t-12); color:var(--ink-3)}
.sfoot .ask-hint{font-size:13px}
/* =========================================================
Send to the {AGENT}: row button + attachments
========================================================= */
.sendbtn{position:relative; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink-2); font-family:var(--f-slab); font-weight:700; font-size:14px; line-height:1; cursor:pointer; display:inline-grid; place-items:center; flex:none; opacity:.3; transition:opacity .12s}
.sendbtn:hover{border-color:var(--amber); color:var(--on-amber)}
.nrow:hover .sendbtn,.shrow:hover .sendbtn,tr:hover .sendbtn,.sendbtn:focus-visible,.sendbtn.hot{opacity:1}
.sendbtn.hot{background:var(--amber); border-color:var(--amber); color:var(--on-amber)}
.sendbtn.hot::after{content:""; position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%; background:var(--brick); border:2px solid var(--paper)}
@media (hover:none){ .sendbtn{opacity:.75} }
@media (prefers-reduced-motion:reduce){ .sendbtn{transition:none} }
.convlink{display:inline-flex; align-items:center; gap:4px; background:none; border:0; padding:0; font-size:var(--t-12); color:var(--ink-3); cursor:pointer; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.convlink:hover{color:var(--teal); text-decoration-color:currentColor}
.convlink svg.i{width:12px; height:12px}
.nrow{grid-template-columns:4px minmax(0,1.9fr) minmax(0,1.15fr) 72px 72px minmax(0,1.25fr) 32px}
.nrow .sendbtn{justify-self:end; align-self:start}
.shrow{grid-template-columns:minmax(0,1.9fr) minmax(0,1.15fr) 72px minmax(0,1.6fr) 32px}
.shrow .issue{grid-column:1 / -1}
.otable td.snd{width:44px; padding-left:0; padding-right:0; text-align:center}
.ctable.cl .act-c{display:table-cell}
.ctable.cl .act-c .acts{display:inline-flex; align-items:center; gap:8px}
.att{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:2px 10px; align-items:start; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--ink-3); border-radius:var(--r-ctl); padding:8px 8px 8px 10px; font-size:var(--t-13); text-align:left}
.att.issue{border-left-color:var(--amber)}
.att.err{border-left-color:var(--brick)}
.att .att-ic{grid-row:1 / span 3; color:var(--ink-2); padding-top:1px}
.att .att-ic svg.i{width:18px; height:18px}
.att b{font-weight:600; font-size:var(--t-13); color:var(--ink); line-height:1.3}
.att .att-m{grid-column:2; color:var(--ink-2); line-height:1.35}
.att .att-m .ship{font-size:var(--t-12)}
.att .att-w{grid-column:2; color:var(--warn-ink); line-height:1.35}
.att.err .att-w{color:var(--brick)}
.att .att-x{grid-column:3; grid-row:1; width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:var(--ink-3); display:grid; place-items:center; cursor:pointer}
.att .att-x:hover{background:var(--hover); color:var(--ink)}
.att .att-x svg.i{width:13px; height:13px; stroke-width:2.2}
.att-slot:empty{display:none}
.att-slot{margin-bottom:8px}
.att-slot .att{background:var(--surface)}
.me .att{margin-top:4px; max-width:78%; background:transparent; border-color:var(--line-soft); border-left-color:var(--line); padding:6px 8px 6px 10px}
.me .att.issue,.me .att.err{border-left-color:var(--line)}
.me .att .att-w{color:var(--ink-2)}
/* in the full thread a sent attachment shows title and first line only */
#thread-main .me .att .att-m + .att-m,#thread-main .me .att .att-w{display:none}
.agent-drawer.has-att .quick{display:none}
.xch{display:flex; flex-direction:column; gap:var(--s4); border-radius:var(--r-ctl); transition:background .6s}
.xch.flash{background:var(--amber-tint)}
.agent-drawer .xch{gap:var(--s3)}
/* driver */
.now{position:relative}
.now > .sendbtn{position:absolute; top:14px; right:14px; width:40px; height:40px; font-size:18px}
.now .now-top{padding-right:64px}
.drv-stop{grid-template-columns:36px minmax(0,1fr) auto 38px}
.drv-stop .pcs .pc{white-space:normal; height:auto; min-height:24px; padding-top:2px; padding-bottom:2px}
.drv .sendbtn{opacity:1; width:38px; height:38px; font-size:16px}
.sheet .att-slot{margin:0 0 8px}
.sheet .att{font-size:14px}
.sheet .att b{font-size:14px}
.sheet .me .att{max-width:86%}
/* map fills follow the theme (attribute selectors beat SVG presentation attributes) */
#mapsvg [fill="#cfe2e6"]{fill:var(--map-sea)}
#mapsvg [fill="#f1ece3"]{fill:var(--map-land)}
#mapsvg [fill="#ebe5da"]{fill:var(--map-land-2)}
#mapsvg g[fill="#ece5d9"]{fill:var(--map-district)}
#mapsvg g[stroke="#fff"]{stroke:var(--map-road)}
#mapsvg g[stroke="#e5ddd0"]{stroke:var(--map-road-2)}
#mapsvg g[fill="#a8968c"],#mapsvg text[fill="#a8968c"]{fill:var(--map-label)}
#mapsvg g[fill="#7aa9b4"]{fill:var(--map-sea-label)}
#mapsvg circle[fill="#faf8f4"]{fill:var(--map-dot); stroke:var(--map-other)}
#mapsvg text[fill="#48170b"]{fill:var(--ink)}
#mapsvg path[stroke="#48170b"]{stroke:var(--ink)}
.map{background:var(--map-sea)}
/* dark special cases */
:root[data-theme="dark"] .t-brown{box-shadow:inset 0 0 0 1px rgba(255,236,220,.18)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .t-brown{box-shadow:inset 0 0 0 1px rgba(255,236,220,.18)} }
/* theme toggle */
.theme-t{width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:transparent; color:rgba(255,255,255,.85); display:grid; place-items:center; cursor:pointer}
.theme-t:hover{background:rgba(255,255,255,.08)}
.theme-t svg.i{width:17px; height:17px}
.theme-t .moon{display:block} .theme-t .sun{display:none}
:root[data-theme="dark"] .theme-t .moon{display:none} :root[data-theme="dark"] .theme-t .sun{display:block}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-t .moon{display:none} :root:not([data-theme="light"]) .theme-t .sun{display:block} }
/* =========================================================
Responsive
========================================================= */
@media (max-width:1200px){
.today-grid{grid-template-columns:minmax(0,1fr)}
.routes{grid-template-columns:260px minmax(0,1fr) 380px}
}
@media (max-width:900px){
.app-head{gap:var(--s3); padding:0 var(--s4)}
.brand small,.head-meta .sync,.head-meta .date{display:none}
.nav{overflow-x:auto}
.nav a{padding:0 var(--s3)}
.wrap{padding:var(--s5) var(--s4) var(--s7)}
.today-top{grid-template-columns:1fr}
.kpis,.kpis.k3{grid-template-columns:repeat(2,1fr)}
.kpi{padding:var(--s3) var(--s4)}
.kpi:nth-child(odd){border-left:0}
.kpi:nth-child(n+3){border-top:1px solid var(--line-soft)}
.kpi:last-child{grid-column:1 / -1}
.nrow.head{display:none}
.nrow{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:var(--s3) var(--s4) var(--s3) var(--s4); position:relative}
.nrow .edge{position:absolute; left:0; top:0; bottom:0; width:4px; margin:0}
.nrow .cust{flex-basis:100%}
.nrow .status{flex-basis:100%; flex-direction:row; align-items:center; gap:8px; order:-0; margin:2px 0}
.nrow .docs{flex-direction:row; gap:10px}
.nrow .num small{display:inline; margin-left:4px}
.nrow .num .u{display:inline}
.nrow .ask,.nrow .issue{flex-basis:100%}
.nrow .sendbtn{position:absolute; right:12px; top:12px}
.nrow .cust{padding-right:40px}
.shrow .sendbtn{justify-self:end}
.ask-key{display:none !important}
.ask.sent .me .bub{max-width:88%}
.fix{grid-template-columns:1fr; flex-basis:100%; margin-top:var(--s2)}
.fix .field{flex-wrap:wrap}
.fix input{flex-basis:100%}
.fix .item{flex-wrap:wrap}
.window{gap:var(--s2)}
.window .end{font-size:var(--t-18)}
.search{margin-left:0; width:100%}
.search input{width:100%}
.routes{grid-template-columns:1fr; height:auto}
.map{min-height:420px}
.with-drawer{padding-right:var(--s4)}
.drawer{width:100%}
.ctable.cl th:nth-child(2),.ctable.cl td.addr,.ctable.cl th:nth-child(5),.ctable.cl td.last{display:none}
.cd{grid-template-columns:1fr; gap:var(--s4)}
.driver-stage{grid-template-columns:1fr; padding:0}
.assistant{grid-template-columns:1fr}
.convs,.pend{display:none}
.thead{padding:var(--s3) var(--s4); flex-wrap:wrap}
.thread{padding:var(--s4)}
.composer{padding:var(--s3) var(--s4)}
.drow{grid-template-columns:1fr auto}
.drow .cnt{grid-column:1; font-size:var(--t-12); color:var(--ink-2)}
.drow .ret{grid-row:1 / span 2; grid-column:2}
.agent-drawer{width:100%}
.settings{grid-template-columns:1fr; padding:var(--s5) var(--s4)}
.snav{position:static}
.mine{grid-template-columns:1fr}
.utable th:nth-child(3),.utable td:nth-child(3),.utable th:nth-child(6),.utable td:nth-child(6){display:none}
.invite{width:100%}
.neworder{grid-template-columns:1fr; height:auto}
.ncol + .ncol{border-left:0; border-top:1px solid var(--line)}
.prow2{grid-template-columns:minmax(0,1fr) 120px}
.prow2 .code,.prow2 .pk,.prow2.h{display:none}
.otable th:nth-child(3),.otable td:nth-child(3),.otable th:nth-child(6),.otable td:nth-child(6){display:none}
.shrow{grid-template-columns:1fr}
.driver-stage aside{display:none}
}
@media (max-width:520px){
.head-meta{display:none}
.brand small{display:none}
.wordmark{font-size:19px}
.today-top h1,.cust-head h1{font-size:var(--t-28)}
.listbar .search input{width:100%}
/* the driver sees only their phone screen, edge to edge */
body.driver-mode .app-head{display:none}
body.driver-mode .driver-stage{min-height:100vh}
body.driver-mode .phone{width:100%; height:100vh; height:100dvh; border-radius:0; padding:0; box-shadow:none; background:none}
body.driver-mode .phone .scr{border-radius:0}
body.driver-mode .drv-head{padding-top:20px}
}
/* =========================================================
Live: additions for the real Σήμερα screen (milestone 2)
========================================================= */
.kpis.k4{grid-template-columns:repeat(4,1fr)}
.nrow.clickable{cursor:pointer}
.nrow.clickable:hover{background:var(--hover)}
.nrow.clickable:focus-visible{outline-offset:-2px}
.status .tags{display:flex; flex-wrap:wrap; gap:4px}
.nrow .status .chip{white-space:normal; height:auto; min-height:24px; padding-top:2px; padding-bottom:2px; line-height:1.3}
.tag{display:inline-block; font-size:var(--t-12); line-height:18px; color:var(--ink-2); background:var(--muted-bg); border-radius:var(--r-chip); padding:0 8px; white-space:nowrap}
.tag.frozen{background:var(--sky-tint); color:var(--sky-ink)}
.tag.warn{background:var(--amber-tint); color:var(--warn-ink)}
.notes .empty{padding:var(--s5) var(--s4); color:var(--ink-2); font-size:var(--t-14); border-top:1px solid var(--line-soft)}
code{font-size:.92em; background:var(--muted-bg); padding:1px 5px; border-radius:3px}
/* map panel in the rail */
.rail{position:sticky; top:calc(var(--header-h) + var(--s4))}
.mappanel .gmap{position:relative; height:540px; border-top:1px solid var(--line-soft); background:var(--map-sea); overflow:hidden}
.maplegend{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding:10px var(--s4); font-size:var(--t-13); color:var(--ink-2); border-top:1px solid var(--line-soft)}
.maplegend .k{display:inline-flex; align-items:center; gap:6px}
.maplegend .linkbtn{margin-left:auto}
.mk{display:block; width:18px; height:18px; border-radius:50%; background:var(--teal); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer}
.mk.hot{background:#eba315; border-color:#48170b}
.mk.sm{width:12px; height:12px; border-width:1.5px; box-shadow:none; cursor:default}
.mk-depot{display:block; width:26px; height:26px; border-radius:3px; background:#48170b; color:#fff; font:700 15px/26px var(--f-slab); text-align:center; font-style:normal; box-shadow:0 1px 4px rgba(0,0,0,.35)}
.mk-depot.sm{width:14px; height:14px; font-size:9px; line-height:14px; box-shadow:none}
.gmap-ph{position:absolute; inset:0}
.gmap-ph svg{position:absolute; inset:0; width:100%; height:100%}
.gmap-ph .ph-msg{position:absolute; left:var(--s4); right:var(--s4); bottom:var(--s4); background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:var(--r-ctl); padding:12px 14px; font-size:var(--t-14); color:var(--ink-2); box-shadow:0 6px 18px rgba(60,24,30,.12)}
.gmap-ph .ph-msg b{display:block; color:var(--ink); font-weight:600; margin-bottom:2px}
/* the placeholder reuses the mockup's drawn map; follow the theme like #mapsvg does */
.gmap-ph [fill="#cfe2e6"]{fill:var(--map-sea)} .gmap-ph [fill="#f1ece3"]{fill:var(--map-land)} .gmap-ph [fill="#ebe5da"]{fill:var(--map-land-2)}
.gmap-ph g[fill="#ece5d9"]{fill:var(--map-district)} .gmap-ph g[stroke="#fff"]{stroke:var(--map-road)} .gmap-ph g[stroke="#e5ddd0"]{stroke:var(--map-road-2)}
.gmap-ph g[fill="#a8968c"],.gmap-ph text[fill="#a8968c"]{fill:var(--map-label)} .gmap-ph g[fill="#7aa9b4"]{fill:var(--map-sea-label)}
/* note drawer (same shell as the invite panel) */
.nd{position:fixed; top:var(--header-h); right:0; bottom:0; width:520px; max-width:100%; z-index:34; background:var(--paper); border-left:1px solid var(--line); box-shadow:-12px 0 32px rgba(60,24,30,.12); display:none; flex-direction:column}
body.note-open .nd{display:flex}
body.note-open .fab{display:none}
.nd > header{padding:var(--s4) var(--s5); border-bottom:1px solid var(--line-soft); display:flex; align-items:flex-start; gap:var(--s3)}
.nd > header .grow{flex:1; min-width:0}
.nd > header h2{font-size:var(--t-22)}
.nd > header p{margin:4px 0 0; font-size:var(--t-13); color:var(--ink-2)}
.nd .dbody{flex:1; overflow:auto; padding:var(--s4) var(--s5) var(--s6)}
.nd .sec{margin-bottom:var(--s5)}
.nd h4{margin:0 0 var(--s2); font-family:var(--f-ui); font-size:var(--t-13); font-weight:600; color:var(--ink-2)}
.nd h4 span{font-weight:400; color:var(--ink-3); margin-left:6px}
.nd .muted{margin:0; font-size:var(--t-14); color:var(--ink-3)}
.nd .iss{list-style:none; margin:0; padding:0}
.nd .iss li{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:start; padding:7px 0; border-top:1px solid var(--line-soft); font-size:var(--t-14)}
.nd .iss li:first-child{border-top:0}
.nd .remarks{white-space:pre-wrap; background:var(--flour); border-radius:var(--r-ctl); padding:10px 12px; font-size:var(--t-14)}
.nd .prefs{display:flex; flex-wrap:wrap; gap:6px}
.nd .pc{padding-right:10px}
.nd dl.kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 14px; margin:0; font-size:var(--t-14)}
.nd dl.kv dt{color:var(--ink-2)}
.nd dl.kv dd{margin:0; overflow-wrap:anywhere}
.nd dl.kv dd.q{font-size:var(--t-12); color:var(--ink-3)}
.nd dl.kv a{color:var(--teal)}
.nd .hint{display:flex; align-items:center; gap:var(--s3); margin:0; padding-top:var(--s3); border-top:1px solid var(--line-soft); font-size:var(--t-13); color:var(--ink-2)}
.nd .hint svg.i{width:16px; height:16px; color:var(--amber)}
.nd .hint .sendbtn{margin-left:auto; opacity:1}
/* agent drawer while the agent is not built yet */
.agent-drawer .soon{display:flex; gap:10px; margin:var(--s4); padding:12px 14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-ctl); font-size:var(--t-14)}
.agent-drawer .soon b{font-weight:600}
.agent-drawer .soon p{margin:4px 0 0; color:var(--ink-2)}
.agent-drawer .tscroll{flex:1; overflow:auto}
.cbox.is-off{opacity:.65}
.cbox.is-off textarea{cursor:not-allowed}
/* placeholder screens: say so */
.demo-flag{display:none; position:fixed; left:var(--s4); bottom:var(--s4); z-index:25; background:var(--paper); color:var(--ink-2); border:1px dashed var(--ink-3); border-radius:var(--r-chip); padding:4px 12px; font-size:var(--t-12)}
body:not([data-screen="today"]):not([data-screen="routes"]):not([data-screen="driver"]):not([data-screen="accounts"]):not([data-screen="assistant"]) .demo-flag{display:block}
@media (max-width:1200px){
.rail{position:static}
.mappanel .gmap{height:440px}
}
@media (max-width:900px){
.kpis.k4{grid-template-columns:repeat(2,1fr)}
.kpis.k4 .kpi:last-child{grid-column:auto}
.nd{width:100%}
.nd > header{padding:var(--s3) var(--s4)}
.nd .dbody{padding:var(--s4)}
}
@media (max-width:520px){
.mappanel .gmap{height:340px}
.maplegend .linkbtn{margin-left:0}
}
/* =========================================================
Live: Δρομολόγια and Οδηγός (milestone 3)
========================================================= */
/* Σήμερα: van and arrival per row */
.vanref.routed{display:flex; flex-direction:column; gap:1px; line-height:1.25}
.vanref.routed a{color:var(--ink); font-weight:600; text-decoration:none}
.vanref.routed a:hover{text-decoration:underline}
.vanref.routed b{font-family:var(--f-slab); font-weight:500; font-size:var(--t-15)}
.vanref.routed small{font-size:var(--t-12); color:var(--ink-2)}
.vanref.routed small.st.delivered{color:var(--teal)} .vanref.routed small.st.problem{color:var(--brick)}
/* the day's vans: chooser */
.vanpick{border-top:1px solid var(--line-soft); padding:0 var(--s5)}
.vanpick summary{display:flex; align-items:center; gap:var(--s2); padding:var(--s3) 0; cursor:pointer; font-size:var(--t-14); font-weight:600; list-style:none}
.vanpick summary::-webkit-details-marker{display:none}
.vanpick summary::before{content:""; width:7px; height:7px; border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2); transform:rotate(-45deg); transition:transform .15s; margin-right:4px}
.vanpick[open] summary::before{transform:rotate(45deg)}
.vanpick summary b{margin-left:auto; font-weight:500; color:var(--ink-2); font-size:var(--t-13)}
.vp-list{display:grid; gap:6px}
.vp{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; align-items:center; padding:8px 10px; border:1px solid var(--line-soft); border-radius:var(--r-ctl); background:var(--surface)}
.vp.on{border-color:var(--amber); background:var(--amber-tint)}
.vp-ck{display:flex; align-items:center; gap:8px; cursor:pointer; min-width:0}
.vp-ck input{width:18px; height:18px; accent-color:var(--amber); flex:none}
.vp-ck span{display:flex; flex-direction:column; min-width:0}
.vp-ck b{font-weight:600; font-size:var(--t-14)}
.vp-ck small{font-size:var(--t-12); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vp .vp-drv{grid-column:1 / -1; height:32px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--paper); padding:0 8px; font-size:var(--t-13); color:var(--ink)}
.vp-foot{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); padding:var(--s3) 0 var(--s4)}
.vp-msg{font-size:var(--t-13); color:var(--ink-2)}
.r-empty{padding:var(--s4) var(--s5); font-size:var(--t-14); color:var(--ink-2); border-top:1px solid var(--line-soft)}
/* van cards */
.van h2{display:flex; align-items:center; gap:8px}
.van .vsw{width:12px; height:12px; border-radius:3px; flex:none}
.van .vdrv{margin-top:var(--s2); display:flex; align-items:center; gap:6px; font-size:var(--t-14); font-weight:500}
.van .vdrv svg.i{width:16px; height:16px; color:var(--ink-3)}
.van .vdrv i{font-style:normal; color:var(--ink-3); font-weight:400}
.van .sent{display:flex; flex-wrap:wrap; gap:6px}
/* notes on no route */
.unassigned .ur{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; padding:8px 0; border-top:1px solid rgba(0,0,0,.06)}
.unassigned .ur:first-of-type{border-top:0}
.unassigned .ur b{display:block; font-size:var(--t-14); font-weight:600}
.unassigned .ur .ur-r{display:block; font-size:var(--t-12); font-weight:600; color:var(--brick); margin-top:2px}
.unassigned .ur p{margin:2px 0 0; font-size:var(--t-13); color:var(--ink-2)}
.unassigned .ur .sendbtn{opacity:1}
.unassigned .ur-go{margin-top:var(--s2); border-color:var(--brick); color:var(--brick)}
/* map */
#rmap{position:absolute; inset:0}
.map .legend{z-index:2}
.map .mapnote{z-index:2}
.mapnote svg.i{color:var(--warn-ink-2); flex:none}
.rmk{display:grid; place-items:center; min-width:24px; height:24px; padding:0 4px; border-radius:12px; color:#fff; font:700 12px/1 var(--f-slab); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer}
.rmk.off{opacity:.55; min-width:18px; height:18px; font-size:10px; border-width:1.5px}
.rmk.st{filter:grayscale(.7) brightness(1.05)}
.rmk.late{outline:2px dashed #48170b; outline-offset:2px}
/* stop list */
.stop{grid-template-columns:34px minmax(0,1fr) auto 30px; padding:10px var(--s4) 10px var(--s4); cursor:pointer}
.stop .n{color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.25)}
.stop .schips{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.stop .schips .chip{margin-top:0; white-space:normal; height:auto; min-height:22px; line-height:1.3; padding-top:2px; padding-bottom:2px}
.stop .who .for{font-size:var(--t-12); color:var(--ink-3)}
.stop .sendbtn{align-self:start; margin-top:2px}
.stop.endpoint{cursor:default}
.stop.st-delivered .who b,.stop.st-delivered .eta b{color:var(--ink-3)}
.stop.st-delivered .n,.stop.st-skipped .n{opacity:.55}
.stops footer .leglinks{display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin:0 0 var(--s3)}
.stops footer .leglinks .btn{padding:0 6px; color:var(--teal); height:28px}
.stops footer .drvlink{margin:var(--s3) 0 0; font-size:var(--t-12); overflow-wrap:anywhere}
.stops footer .drvlink a{color:var(--teal)}
.btn:disabled{opacity:.55; cursor:not-allowed}
/* driver */
.prog i.x{background:rgba(235,163,21,.45)}
.drv-pick{padding:18px}
.drv-pick h2{font-family:var(--f-ui); font-weight:700; font-size:19px}
.drv-pick p{color:var(--ink-2); font-size:16px}
.drv-van{display:grid; gap:2px; margin-top:10px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); background:var(--surface)}
.drv-van b{font-family:var(--f-slab); font-size:20px}
.drv-van span{font-size:15px} .drv-van small{font-size:14px; color:var(--ink-2)}
.now-top .for{font-size:14px; color:var(--ink-3)}
.unload em.fz{font-style:normal; font-size:12px; font-weight:700; color:var(--sky-ink); background:var(--sky-tint); border-radius:4px; padding:0 4px; margin-left:4px}
.drv-note.prob{background:var(--brick-tint); border-left-color:var(--brick)}
.drv-more{display:flex; flex-direction:column}
.drv-more .drv-issue{padding:10px 0}
.drv-more .drv-issue:last-child{padding-bottom:18px}
.drv-prob{margin:0 18px 18px; display:grid; gap:8px}
.drv-prob label{font-size:14px; font-weight:600; color:var(--ink-2)}
.drv-prob textarea{width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font:inherit; font-size:17px; background:var(--surface); color:var(--ink); resize:vertical}
.drv-prob .row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.drv-prob .big.done{grid-column:auto; height:56px; font-size:17px}
.drv-mini{height:36px; padding:0 12px; border-radius:10px; border:2px solid var(--teal); background:transparent; color:var(--teal); font-weight:600; font-size:15px; cursor:pointer}
.drv-link{text-decoration:none; color:var(--ink)}
.drv-link .n{box-shadow:none; color:var(--teal)}
.drv-link time svg.i{width:20px; height:20px; color:var(--teal)}
.drv-msgbar button:disabled{cursor:not-allowed; opacity:.7}
.drv .pc b{font-weight:600}
@media (max-width:900px){
.routes .map{min-height:420px}
.vanpick{padding:0 var(--s4)}
}
.stop .who .schips > span{display:inline-flex; align-items:center; gap:4px; font-size:var(--t-12); color:inherit}
.stop .who .schips > .tag{display:inline-block}
.stop .who .schips svg.i{width:13px; height:13px}
body[data-screen="routes"] .stops footer{padding-bottom:84px} /* clear the agent button */
.unload div b{white-space:nowrap; padding-left:10px}
#scr-driver .drv-stop{grid-template-columns:36px minmax(0,1fr) auto} /* no agent button on the live driver rows yet */
/* =========================================================
Live: sign-in, roles, accounts and settings (milestone 4)
========================================================= */
/* sign-in: pick your name, then the PIN pad */
.si-users{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.si-user{display:flex; align-items:center; gap:12px; min-height:68px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.si-user:hover{border-color:var(--ink-3)}
.si-user:active{background:var(--hover)}
.si-user:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.si-user b{font-size:16px; font-weight:600; line-height:1.25; min-width:0; overflow-wrap:anywhere}
.si-av{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--teal); color:var(--on-teal); font-family:var(--f-slab); font-size:15px; font-weight:600; letter-spacing:.02em}
.si-wait{grid-column:1 / -1; margin:6px 0; color:var(--ink-2); font-size:15px}
.si-me{display:flex; align-items:center; gap:12px; padding-bottom:6px}
.si-me .si-av{width:48px; height:48px; font-size:17px}
.si-me small{display:block; font-size:13px; color:var(--ink-3)}
.si-me b{display:block; font-family:var(--f-slab); font-size:21px; font-weight:600; line-height:1.2}
.si-me .linkbtn{margin-left:auto; font-size:14px; white-space:nowrap}
.si-err{display:flex; align-items:center; gap:8px; margin:12px 0 0; padding:10px 12px; border-radius:10px; background:var(--brick-tint); color:var(--brick); font-size:15px; font-weight:600}
.si-err svg.i{width:18px; height:18px; flex:none}
#si-form .big.done{margin-top:14px}
#si-form .big.done:disabled{opacity:.55; cursor:default}
@media (max-width:360px){ .si-users{grid-template-columns:1fr} }
/* roles: a driver sees only the driver tab; their phone header gets a sign-out button */
body[data-role="driver"] .nav a:not([data-tab="driver"]),
body[data-role="driver"] #head-sync{display:none}
body[data-role="driver"] .driver-stage aside{visibility:hidden}
.d-out{flex:none; width:40px; height:40px; margin-right:-8px; border:0; border-radius:50%; background:transparent; color:rgba(255,255,255,.8); display:grid; place-items:center; cursor:pointer}
.d-out:hover,.d-out:focus-visible{background:rgba(255,255,255,.12); color:#fff}
.d-out svg.i{width:22px; height:22px}
.menu button[role="menuitem"]{display:flex; align-items:center; gap:10px; width:100%; padding:10px 16px; border:0; background:none; font:inherit; font-size:var(--t-14); color:var(--ink); text-align:left; cursor:pointer}
.menu button[role="menuitem"]:hover{background:var(--hover)}
/* accounts */
.utable td.uact{text-align:right; width:1%; white-space:nowrap}
.utable .last .lock{color:var(--brick); font-weight:600}
.vtable select{height:36px; max-width:230px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink); padding:0 8px; font:inherit; font-size:var(--t-14)}
.vtable .capin{width:76px; height:36px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink); padding:0 8px; font:inherit; font-size:var(--t-14); font-variant-numeric:tabular-nums}
.vtable select:focus,.vtable .capin:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}
.acc-status{min-height:20px; margin:var(--s3) 0 0; font-size:var(--t-14); color:var(--ink-2)}
.acc-status.ok{color:var(--teal)} .acc-status.err{color:var(--brick)} .acc-status.busy{color:var(--ink-3)}
.flab{display:flex; align-items:baseline; gap:8px; margin-bottom:6px}
.flab > label,.flab > .lbl{font-size:var(--t-13); font-weight:500; color:var(--ink-2)}
.src{margin-left:auto; font-size:var(--t-12); font-weight:600; white-space:nowrap; color:var(--ink-3)}
.src.settings{color:var(--teal)}
.src.env{color:var(--warn-ink)}
.src.none{color:var(--brick); font-weight:500}
.field input[type=time],.field input[type=number],.sform .field input[type=text],.sform .field input[type=url]{width:100%; height:42px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink); padding:0 12px; font:inherit; font-size:var(--t-15)}
.field input[type=time]:focus,.field input[type=number]:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}
.secret.editing{gap:var(--s3)}
.secret.editing .linkbtn{flex:none}
.dbody .grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 var(--s3)}
.dbody .grid2 input[type=password]{width:100%; height:42px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink); padding:0 12px; font-size:var(--t-15); letter-spacing:.2em}
.dbody .seg button:disabled{cursor:not-allowed; opacity:.6}
#inv-form{flex:1; min-height:0; display:flex; flex-direction:column}
.invite footer{align-items:center}
.inv-err{margin:0 auto 0 0; color:var(--brick); font-size:var(--t-14); font-weight:600}
.lockbox{padding:10px 12px; border-radius:var(--r-ctl); background:var(--brick-tint); color:var(--ink); font-size:var(--t-14)}
@media (max-width:900px){
.settings{grid-template-columns:1fr; padding:var(--s4)}
.snav{position:static; display:flex; flex-wrap:wrap; gap:4px}
.snav h1{width:100%}
.utable,.vtable{display:block; overflow-x:auto}
.invite{width:100%}
}
/* ======================== the agent, live (static/js/agent.js) ======================== */
.msg .txt + .txt, .msg .txt + .tline, .msg .tline + .txt{margin-top:var(--s2)}
.msg .txt ul{margin:0 0 var(--s2); padding-left:1.2em; line-height:1.5}
.msg .txt ul:last-child{margin-bottom:0}
.tline{font-size:var(--t-13); color:var(--ink-3); line-height:1.4; padding:1px 0 1px 14px; position:relative}
.tline::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--line)}
.tline.ok::before{background:var(--teal)}
.tline.err{color:var(--brick)}
.tline.err::before{background:var(--brick)}
.tline.run::before{background:var(--amber); animation:tpulse 1s ease-in-out infinite}
@keyframes tpulse{50%{opacity:.3}}
.typing{display:inline-flex; gap:4px; padding:6px 0 2px}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:tpulse 1.1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
.msg.live .body:not(:empty) + .typing{padding-top:2px}
.aerr{margin:var(--s2) 0 0; color:var(--brick); font-size:var(--t-14)}
.act .psubj{display:block; font-weight:600; margin-top:2px}
.act .pnote{font-size:var(--t-13); color:var(--warn-ink); margin:var(--s2) 0 0}
.act .small{font-size:var(--t-13); color:var(--ink-2); margin:var(--s2) 0 0}
.act .late{font-style:normal; color:var(--brick)}
.act footer .await{margin-left:auto}
.act.flash{box-shadow:0 0 0 3px var(--amber-tint)}
.notice{display:grid; grid-template-columns:22px minmax(0,1fr); gap:var(--s2); align-items:start; background:var(--paper); border:1px dashed var(--line); border-radius:var(--r-ctl); padding:8px 12px; font-size:var(--t-14)}
.notice svg.i{width:18px; height:18px; color:var(--teal); margin-top:2px}
.notice b{font-weight:600}
.notice time{font-size:var(--t-12); color:var(--ink-3)}
.notice p{margin:2px 0 0}
.agent-drawer > header .dsub{margin:0; font-size:var(--t-12); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.agent-drawer .tscroll > .thread{margin-top:auto; width:100%}
.agent-drawer .soon a, #scr-assistant .soon a{color:var(--teal); font-weight:600}
#scr-assistant .soon{display:flex; gap:10px; padding:12px 14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-ctl); font-size:var(--t-14)}
#scr-assistant .soon b{font-weight:600} #scr-assistant .soon p{margin:4px 0 0; color:var(--ink-2)}
.cbox.busy .btn{opacity:.6}
.sheet .sbody .thread-empty{margin-top:auto}
@media (prefers-reduced-motion:reduce){ .tline.run::before,.typing i{animation:none} }
/* ---------- milestone 5b: round summary, refined suggestion, pin on the map ---------- */
.msg.summary .meta .sumtag{margin-left:8px; font-size:var(--t-12, 12px); color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:1px 8px}
.msg.summary .txt{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:10px; padding:8px 12px}
.cbox.refined{position:relative}
.cbox.refined:not(.typed)::before{content:"✦"; position:absolute; left:4px; top:3px; font-size:11px; line-height:1; color:var(--amber)}
.att-slot .pinbtn{display:inline-flex; align-items:center; gap:6px; margin:6px 0 2px 2px; font-size:var(--t-13, 13px)}
.att-slot .pinbtn .i{width:14px; height:14px}
.pinrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px}
.pinrow .btn .i{width:14px; height:14px; margin-right:4px}
.pin-banner{position:absolute; z-index:5; left:12px; right:12px; top:12px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--amber); border-radius:10px; padding:8px 10px 8px 12px; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.pin-banner span{flex:1}
.pin-banner .i{width:16px; height:16px; color:var(--amber)}
.mk.pinned{background:var(--amber); outline:3px solid rgba(235,163,21,.35)}