:root{
  --brand:#E2211C;
  --bg:#F0EFEF; --surface:#FFFFFF; --surface-2:#F7F6F6; --surface-3:#E8E6E6;
  --line:#DCD8D8; --line-2:#C2BDBD;
  --ink:#1A1718; --ink-2:#51545C; --ink-3:#7E7A7B;
  --accent:#D42119; --ok:#3F7D3A; --warn:#A8620E; --bad:#8E1B15;
  --ch-pult:#3A3F45; --ch-telefon:#0E8F88; --ch-web:#B87309; --ch-partner:#8A5595; --ch-gumiprofi:#4C7A46;
  --tint:12%;
  --shadow:0 1px 2px rgba(26,23,24,.07), 0 10px 28px -14px rgba(26,23,24,.24);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141213; --surface:#1C1A1B; --surface-2:#232021; --surface-3:#2C2829;
  --line:#332F30; --line-2:#453F40;
  --ink:#EDEAEA; --ink-2:#B0A9AA; --ink-3:#7D7677;
  --accent:#FF6257; --ok:#84C47B; --warn:#E0A54E; --bad:#F09A93;
  --ch-pult:#B3BBC3; --ch-telefon:#3ECFC8; --ch-web:#E0A54E; --ch-partner:#C48ECF; --ch-gumiprofi:#88C07F;
  --tint:22%; --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --bg:#141213; --surface:#1C1A1B; --surface-2:#232021; --surface-3:#2C2829;
  --line:#332F30; --line-2:#453F40;
  --ink:#EDEAEA; --ink-2:#B0A9AA; --ink-3:#7D7677;
  --accent:#FF6257; --ok:#84C47B; --warn:#E0A54E; --bad:#F09A93;
  --ch-pult:#B3BBC3; --ch-telefon:#3ECFC8; --ch-web:#E0A54E; --ch-partner:#C48ECF; --ch-gumiprofi:#88C07F;
  --tint:22%; --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Roboto Condensed",Roboto,sans-serif;margin:0;text-wrap:balance}
.mono{font-family:"Roboto Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px 64px}

.topbar{position:sticky;top:0;z-index:40;background:var(--brand);color:#fff;border-bottom:1px solid rgba(0,0,0,.22)}
.topbar-in{max-width:1240px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-family:"Roboto Condensed";font-weight:700}
.brand .dot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.spacer{flex:1}
.btn{background:var(--surface-2);border:1px solid var(--line-2);border-radius:6px;padding:7px 12px;font-size:13.5px;font-weight:500;transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface-3);border-color:var(--ink-3)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.topbar .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff}
.topbar .btn:hover{background:rgba(255,255,255,.28);border-color:#fff}
.topbar .btn-primary{background:#fff;border-color:#fff;color:var(--brand);font-weight:700}
/* Az eppen nyitott oldal a menusorban kiemelve: minden lapon ugyanaz a
   menusor all fent, igy latszania kell, hol jarunk. */
.topbar .btn[aria-current="page"]{background:rgba(255,255,255,.34);border-color:#fff;font-weight:700}

.head{padding:24px 0 16px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.head h1{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.02em}
.head .sub{color:var(--ink-2);font-size:14px;margin-top:4px}
.datenav{display:flex;align-items:center;gap:8px;margin-left:auto}
.datenav .day{font-family:"Roboto Condensed";font-weight:600;font-size:15px;padding:0 4px}
.arrow{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--line-2);background:var(--surface)}

.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:12px 13px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--line-2))}
.card .lbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.card .num{font-family:"Roboto Condensed";font-weight:700;font-size:26px;line-height:1.1}

.board-head{display:flex;align-items:center;gap:12px;margin:20px 0 10px;flex-wrap:wrap}
.board-head h2{font-size:18px;font-weight:600}
.board-head .hint{font-size:12.5px;color:var(--ink-3)}
.scroller{overflow:auto;max-height:min(660px,74vh);border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.board{display:grid;min-width:760px}
.colhead{position:sticky;top:0;z-index:20;background:var(--surface-2);border-bottom:1px solid var(--line);padding:10px 12px}
.colhead.time{position:sticky;left:0;top:0;z-index:30;border-right:1px solid var(--line)}
.colhead .bay{font-family:"Roboto Condensed";font-weight:600;font-size:13.5px}
.colhead .cap{font-size:11px;color:var(--ink-3)}
.timecol{border-right:1px solid var(--line);background:var(--surface-2);position:sticky;left:0;z-index:10}
.tick{height:46px;padding:2px 8px 0 0;text-align:right;font-size:11.5px;color:var(--ink-3);border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.tick.hour{color:var(--ink-2);font-weight:500}
.baycol{position:relative;border-right:1px solid var(--line)}
.baycol:last-child{border-right:none}
.slot{height:46px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);cursor:pointer;position:relative}
.slot.hour{border-bottom-color:var(--line)}
.slot:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.slot:hover::after{content:"+ foglalás";position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--accent)}
.bk{position:absolute;left:5px;right:5px;border-radius:6px;padding:0 0 2px;text-align:left;display:block;overflow:hidden;
  background:color-mix(in srgb,var(--sc,var(--st-varjuk)) var(--sttint,14%),var(--surface));
  border:1px solid color-mix(in srgb,var(--sc,var(--st-varjuk)) 80%,transparent);border-left:5px solid var(--c);}
.bk:hover{box-shadow:var(--shadow);z-index:5}
.bk .r1{display:flex;align-items:baseline;gap:6px;padding:3px 8px 2px 9px;line-height:1.2}
.bk .nm{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk .tm{font-family:"Roboto Mono";font-size:10.5px;color:var(--ink-2);margin-left:auto}
.bk .r2{display:flex;align-items:center;gap:6px;margin-top:1px;padding:0 8px 0 9px}
.bk .sv{font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bk .pl{font-family:"Roboto Mono";font-size:10px;font-weight:600;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-radius:3px;padding:0 4px;white-space:nowrap;flex:none}

.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;background:var(--c);display:inline-block}

.scrim{position:fixed;inset:0;background:rgba(8,11,15,.5);z-index:70;display:none}
.scrim.open{display:block}
.modal{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,calc(100% - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:none;max-height:88vh;overflow-y:auto}
.modal.open{display:block}
.modal-head{padding:16px 18px 0}
.modal-head .t{font-family:"Roboto Condensed";font-weight:600;font-size:16px}
.modal-head .s{font-family:"Roboto Mono";font-size:12px;color:var(--ink-3);margin-top:3px}
.modal-body{padding:16px 18px}
.modal-foot{padding:0 18px 18px;display:flex;gap:8px}
.modal-foot .btn{flex:1;text-align:center}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;padding:8px 10px;border-radius:6px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);font:inherit;font-size:14px}
.srcrow{display:flex;gap:6px;flex-wrap:wrap}
.src{font-size:12px;padding:5px 9px;border-radius:5px;border:1px solid var(--line-2);background:var(--surface-2)}
.src.sel{background:color-mix(in srgb,var(--c) var(--tint),var(--surface));border-color:var(--c);color:var(--c);font-weight:600}
.detail-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.detail-row:last-child{border-bottom:none}
.detail-row .k{color:var(--ink-3)}
.detail-row .v{font-weight:500;text-align:right}

.toasts{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:8px;width:min(370px,calc(100% - 32px));pointer-events:none}
.toast{background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--c,var(--accent));border-radius:8px;padding:10px 14px;box-shadow:var(--shadow);font-size:13.5px;animation:rise .28s ease}
.toast .t{font-weight:600;font-family:"Roboto Condensed";font-size:13.5px}
.toast .d{font-size:12.5px;color:var(--ink-2);margin-top:1px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.login{max-width:380px;margin:12vh auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px 24px;box-shadow:var(--shadow)}
.login h1{font-size:22px;margin-bottom:4px}
.login p{color:var(--ink-2);font-size:13.5px;margin:0 0 18px}
.err{color:var(--bad);font-size:13px;margin-top:10px;min-height:18px}
.empty{padding:40px;text-align:center;color:var(--ink-3);font-size:14px}

/* ---------- munkaállapot ---------- */
/* A pultnál eddig Excel-cellát színeztek: beállt, szerelés alatt, kész.
   Ugyanaz a nyelv, csak a foglaláson: a jelvény színe mutatja, hol tart az
   autó. A bal szél továbbra is azt mutatja, HONNAN jött a foglalás — a kettő
   külön kérdés, ezért nem is ugyanaz a jelzés. */
:root{
--st-varjuk:#7E7A7B; --st-beallt:#A8620E; --st-szereles:#0E6FA8; --st-kesz:#3F7D3A; --st-nem:#8E1B15;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
--st-varjuk:#9B9495; --st-beallt:#E0A54E; --st-szereles:#63B3E8; --st-kesz:#84C47B; --st-nem:#F09A93;
}}
:root[data-theme="dark"]{
--st-varjuk:#9B9495; --st-beallt:#E0A54E; --st-szereles:#63B3E8; --st-kesz:#84C47B; --st-nem:#F09A93;
}
.bk.st-varjuk{--sc:var(--st-varjuk)}
.bk.st-beallt{--sc:var(--st-beallt)}
.bk.st-szereles{--sc:var(--st-szereles)}
.bk.st-kesz{--sc:var(--st-kesz)}
.bk.st-nem_jott{--sc:var(--st-nem)}
.bk .stchip{margin-left:auto;flex:none;font-family:"Roboto Condensed",Roboto,sans-serif;font-size:10px;
font-weight:700;line-height:1;padding:3px 6px;border-radius:4px;white-space:nowrap;cursor:pointer;
background:color-mix(in srgb,var(--sc) 20%,var(--surface));color:var(--sc);
border:1px solid color-mix(in srgb,var(--sc) 45%,transparent)}
.bk .stchip:hover{background:color-mix(in srgb,var(--sc) 36%,var(--surface))}
/* A szerelés alatti autó kiemelve, a kész és a meg nem jelent halványan:
   a pultnál egy pillantás alatt látszik, mi van még hátra. */
/* A tintaerosseg allapotonkent kulon: a "varjuk" visszafogott, a bent allo
   es a szereles alatti auto viszont messzirol lathato. A pultos keresere a
   szin onmagaban egyertelmu — halvanyitas (opacity) sehol nincs. */
/* A nev mogotti sav TELJES allapotszint visel, a kartya alapszine pedig
   eros tintet kap: a pult egy pillantasbol, olvasas nelkul latja, hol tart
   az auto. A "varjuk" szandekosan semleges (meg nem tortent semmi), igy a
   tobbi negy allapot uti el magat a tablan. Halvanyitas (opacity) sehol. */
.bk{--band:transparent}
.bk.st-varjuk{--sttint:8%}
.bk.st-beallt{--sttint:34%;--band:var(--sc)}
.bk.st-szereles{--sttint:34%;--band:var(--sc)}
.bk.st-kesz{--sttint:30%;--band:var(--sc)}
.bk.st-nem_jott{--sttint:30%;--band:var(--sc)}
.bk .r1{background:var(--band)}
/* A sav szovege a felulet szinet veszi fel: vilagos temaban a sotet
   allapotszinen vilagos, sotet temaban a vilagos szinen sotet a betu. */
.bk.st-beallt .r1,.bk.st-szereles .r1,.bk.st-kesz .r1,.bk.st-nem_jott .r1{color:var(--surface)}
.bk.st-beallt .r1 .nm,.bk.st-szereles .r1 .nm,.bk.st-kesz .r1 .nm,.bk.st-nem_jott .r1 .nm{color:var(--surface);font-weight:700}
.bk.st-beallt .r1 .tm,.bk.st-szereles .r1 .tm,.bk.st-kesz .r1 .tm,.bk.st-nem_jott .r1 .tm{color:color-mix(in srgb,var(--surface) 78%,var(--sc))}
.bk.st-nem_jott .nm{text-decoration:line-through}
/* Itt hagyta az autot: a munkaallapottol fuggetlen jelzo. */
.bk .kulcs{flex:none;font-size:11px;line-height:1;padding:2px 5px;border-radius:4px;font-weight:700;
  background:color-mix(in srgb,var(--ink) 12%,var(--surface));color:var(--ink-2);
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.bk .szerz{flex:none;font-size:10px;line-height:1;padding:2px 5px;border-radius:4px;font-weight:700;
  background:color-mix(in srgb,var(--accent) 16%,var(--surface));color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stnyom{margin-top:8px;font-family:"Roboto Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink-3)}

/* --- fejleccsoportok ---------------------------------------
   A napi tabla fejleceben ket dolog keveredett: a munkaallapot
   es az, hogy honnan jott a foglalas. A cimke a racs teljes
   szelesseget elfoglalja, ezert torik a sor, es a ket blokk
   ranezesre is kulonvalik. */
.sumcim{
  grid-column:1 / -1; flex:0 0 100%; width:100%;
  margin:2px 0 -2px;
  font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}
.sumcim:not(:first-child){
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
}

/* A forras-kartyak masodlagosak. A pultnak az szamit, hol tart eppen
   egy munka; az, hogy honnan jott a foglalas, csak hattérinformacio.
   Ezert ez a blokk kisebb betuvel es vekonyabb szinsavval jelenik meg.
   A valogatas a masodik csoportcimke utani kartyakra szuk le. */
.sumcim:not(:first-child) ~ .card{ padding:8px 10px; border-radius:7px }
.sumcim:not(:first-child) ~ .card::before{ width:2px; opacity:.7 }
.sumcim:not(:first-child) ~ .card .lbl{ font-size:9.5px; letter-spacing:.05em }
.sumcim:not(:first-child) ~ .card .num{ font-size:17px; line-height:1.15 }
.sumcim:not(:first-child){ opacity:.85 }
/* A negyedik, kinti allas jelolese a pultos tabla fejlecen. A nyilvanos
   foglalon ez az allas nem valaszthato (a bays sor active=false). */
.colhead .belso{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 5px;border-radius:4px;vertical-align:1px;
  background:color-mix(in srgb,var(--ink) 10%,var(--surface));color:var(--ink-3);
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}