@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400..800&family=Spline+Sans+Mono:wght@400..600&display=swap');

:root{
  --page:#f1eee1; --bar:#24261b; --barink:#edead9; --barmut:#9da083;
  --panel:#fbfaf3; --card:#fff; --line:#e2decb; --cardline:#e7e3d3;
  --ink:#2c2f1c; --muted:#797c61; --faint:#a6a98d;
  --signal:#c6dc2e; --ok:#0e9f8e; --vac:#3b82f6; --sick:#e5484d; --warn:#c98a16;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--page);font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.mono{font-family:'Spline Sans Mono',monospace;font-variant-numeric:tabular-nums}
.disp{font-family:'Bricolage Grotesque',sans-serif}

#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.rostertog{display:none}

/* topbar */
.top{display:flex;align-items:center;gap:18px;padding:12px 20px;background:var(--bar);flex:0 0 auto}
.brand{display:flex;align-items:center;gap:11px}
.mark{font-family:'Bricolage Grotesque';font-weight:800;font-size:22px;letter-spacing:-.5px;color:var(--bar);background:var(--signal);padding:3px 11px;border-radius:9px}
.bsub{font-family:'Bricolage Grotesque';font-weight:600;font-size:15px;text-transform:uppercase;color:#d9f225}
.vtoggle{display:flex;background:#1c1e15;border:1px solid #3a3d28;border-radius:10px;padding:3px}
.vt{font-family:'Bricolage Grotesque';font-weight:600;font-size:13px;padding:4px 13px;border-radius:7px;color:var(--barmut)}
.vt.active{background:var(--signal);color:var(--bar)}
.nav{display:flex;align-items:center;gap:9px}
.arrow{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#33361f;color:var(--barmut);font-size:18px}
.arrow:hover{background:#3d4127;color:var(--barink)}
.navlabel{font-weight:600;font-size:14px;color:var(--barink);min-width:150px;text-align:center}
.navlabel.big{font-family:'Bricolage Grotesque';font-weight:700;font-size:16px}
.today-btn{font-size:12px;font-weight:600;color:var(--barmut);padding:5px 10px;border-radius:8px;background:#2e3122;border:1px solid #3a3d28}
.today-btn:hover{color:var(--barink)}
.stats{display:flex;gap:7px;margin-left:auto}
.stat{display:flex;flex-direction:column;align-items:center;min-width:68px;padding:5px 11px;border-radius:11px;background:#2e3122;border:1px solid #3a3d28}
.stat .n{font-family:'Bricolage Grotesque';font-size:20px;font-weight:700;line-height:1;color:var(--barink)}
.stat .l{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--barmut);margin-top:3px}
.stat.ok .n{color:#3fd0bd} .stat.warn .n{color:#f0c04a} .stat.sig .n{color:var(--signal)}
.iconbtn{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#2e3122;border:1px solid #3a3d28;color:var(--barmut)}
.iconbtn:hover{color:var(--barink)}

/* body */
.work{flex:1;display:flex;min-height:0}
.roster{flex:0 0 290px;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto}
.rsec{display:flex;flex-direction:column}
.rsec.fleet{border-top:1px solid var(--line);margin-top:2px}
.rh{display:flex;align-items:center;gap:7px;padding:12px 16px 6px;font-family:'Bricolage Grotesque';font-weight:700;font-size:12.5px;letter-spacing:.6px;color:var(--muted)}
.rh .n{font-family:'Hanken Grotesk';font-weight:700;font-size:11px;color:var(--muted);background:#eceadb;padding:0 7px;border-radius:20px}
.rlist{padding:0 8px 6px;display:flex;flex-direction:column;gap:1px}
.erow{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:11px;cursor:pointer}
.erow:hover{background:#f1efe4}
.einfo{flex:1;min-width:0}
.ename{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.estat{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-top:1px}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.eh{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.eh .n{font-size:13px;font-weight:600} .eh .l{font-size:9.5px;color:var(--faint);font-weight:600;margin-top:2px}
.rmore{padding:6px 16px 10px;font-size:11px;color:var(--faint)}
.ava{display:inline-grid;place-items:center;border-radius:50%;font-family:'Bricolage Grotesque';font-weight:700;color:#fff;flex:0 0 auto;vertical-align:middle}
.vava{display:inline-grid;place-items:center;border-radius:8px;flex:0 0 auto}
.plate{font-size:11px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);padding:2px 7px;border-radius:5px;font-family:'Spline Sans Mono',monospace}

/* week grid */
.grid{flex:1;display:grid;grid-template-columns:repeat(7,1fr);overflow:hidden}
.col{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0}
.col:last-child{border-right:none}
.colh{display:flex;align-items:baseline;gap:7px;padding:10px 12px;border-bottom:1px solid var(--line)}
.cday{font-family:'Bricolage Grotesque';font-weight:700;font-size:17px}
.cday.today{background:var(--signal);color:var(--bar);padding:1px 9px;border-radius:8px}
.cdate{font-size:11px;color:var(--faint)}
.ccount{margin-left:auto;font-weight:700;font-size:11px;color:var(--muted);background:#e8e4d3;padding:1px 8px;border-radius:20px}
.ccount.hot{color:#8a3b1c;background:#f4d9cb}
.addjob{margin-left:6px;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:var(--muted);font-size:16px;line-height:1}
.addjob:hover{background:#e8e4d3;color:var(--ink)}
.cjobs{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.cjobs.dense{gap:5px}
.empty{margin-top:8px;padding:14px 6px;text-align:center;font-size:12px;color:var(--faint);border:1px dashed var(--line);border-radius:11px}

.card{background:var(--card);border:1px solid var(--cardline);border-radius:12px;padding:9px 10px;cursor:pointer}
.card:hover{border-color:#cfcab2}
.ctime{font-size:12px;font-weight:600;color:#5f6a1c;font-family:'Spline Sans Mono',monospace}
.ctitle{font-family:'Bricolage Grotesque';font-weight:700;font-size:15px;line-height:1.05;margin:3px 0 4px}
.caddr{font-size:11px;color:var(--muted);margin-bottom:7px}
.crew{display:flex;flex-wrap:wrap;gap:4px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 2px;border-radius:20px;background:#faf9f2;border:1.5px solid #ccc;font-size:11px;font-weight:600}
.chip .cn{color:var(--ink);font-size:10.5px}
.chip.warn{background:#fdf4e0;border-color:#dfb24a!important}
.vrow{margin-top:6px}
.vchip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 6px;border-radius:8px;background:#f2f1e3;border:1px solid #ddd9c4;font-size:11px;flex-wrap:wrap}
.vchip .vtype{font-weight:600}
.vchip .vp{font-size:10px;font-weight:600;color:#46492f;background:#fff;border:1px solid #e0dcc8;padding:1px 5px;border-radius:4px;font-family:'Spline Sans Mono',monospace}
.vchip.warn{background:#fdeee6;border-color:#e6b7a3}
.vwarn{color:#b8462a;font-weight:700;font-size:10px;width:100%}
.alert{margin-top:7px;padding:5px 8px;border-radius:7px;background:#fdf3df;color:#876613;font-size:10.5px;font-weight:600;border:1px solid #efdca6}

/* compact (busy day) */
.ccard{background:var(--card);border:1px solid var(--cardline);border-radius:9px;padding:6px 8px;cursor:pointer}
.ccard.warn{border-left:3px solid var(--sick)}
.cc1{display:flex;align-items:center;gap:6px}
.cc1 .t{font-size:11px;font-weight:600;color:#5f6a1c;font-family:'Spline Sans Mono',monospace;flex:0 0 auto}
.cc1 .ti{font-family:'Bricolage Grotesque';font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc1 .w{margin-left:auto;color:var(--sick);font-size:11px}
.cc2{display:flex;align-items:center;gap:7px;margin-top:4px}
.minis{display:inline-flex;align-items:center}
.minis .ava{margin-right:-5px;box-shadow:0 0 0 1.5px #fff}
.more{font-size:10px;font-weight:700;color:var(--muted);margin-left:9px}
.ccplate{font-size:10px;font-weight:600;color:#46492f;display:inline-flex;align-items:center;gap:3px;margin-left:auto;font-family:'Spline Sans Mono',monospace}

/* day timeline */
.tlwrap{flex:1;display:flex;padding:14px 22px 18px;overflow-y:auto}
.tlaxis{position:relative;width:50px;flex:0 0 50px}
.tlhour{position:absolute;left:0;font-size:11px;color:var(--faint);transform:translateY(-7px);font-family:'Spline Sans Mono',monospace}
.tllanes{position:relative;flex:1;border-left:1px solid var(--line)}
.tlgrid{position:absolute;left:0;right:0;border-top:1px dashed #e6e1ce}
.tlb{position:absolute;background:var(--card);border:1px solid var(--cardline);border-radius:10px;padding:7px 9px;overflow:hidden;margin-left:6px;cursor:pointer}
.tlb.warn{border-left:3px solid var(--sick)}
.tlt{font-size:10.5px;color:#5f6a1c;font-weight:600;font-family:'Spline Sans Mono',monospace}
.tltitle{font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;line-height:1.05;margin-top:2px}
.tladdr{font-size:10.5px;color:var(--muted);margin-top:2px}
.tlfoot{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.tlnames{display:flex;flex-wrap:wrap;gap:3px 8px;margin-top:6px}
.tlname{font-size:10.5px;color:var(--muted);white-space:nowrap}
.tlname.w{color:#b8462a;font-weight:600}
.tlveh{font-size:10px;color:#46492f;font-weight:600;display:inline-flex;align-items:center;gap:3px;font-family:'Spline Sans Mono',monospace}

/* modal */
.modal-bg{position:fixed;inset:0;background:#1c1e1599;backdrop-filter:blur(3px);display:grid;place-items:center;padding:18px;z-index:50}
.modal{width:100%;max-width:440px;max-height:88vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px}
.mh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.mh .mt{font-family:'Bricolage Grotesque';font-weight:700;font-size:18px}
.mh .ms{font-size:12px;color:var(--muted);margin-top:2px}
.mx{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--muted)}
.mx:hover{background:#ece9dc}
.mbody{padding:14px 18px}
.field{margin-bottom:11px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.field.row{display:flex;gap:10px}.field.row>div{flex:1}
.seclbl{font-family:'Bricolage Grotesque';font-weight:700;font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.4px;margin:14px 0 8px}
.pick{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:11px;border:1px solid transparent;cursor:pointer}
.pick:hover{background:#f1efe4}
.pick.on{background:#eef3d6;border-color:#cfe06a}
.pinfo{flex:1;display:flex;flex-direction:column}
.pinfo .pn{font-weight:600;font-size:14px}
.pinfo .pst{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);margin-top:1px}
.pstate{font-family:'Bricolage Grotesque';font-weight:700;font-size:13px}
.pstate.on{color:var(--ok)} .pstate.add{color:var(--faint);font-size:17px} .pstate.warn{color:var(--warn);font-size:12px}
.pcnt{font-family:'Hanken Grotesk';font-weight:700;font-size:12px;color:var(--muted)}
.pickhint{padding:8px 10px;font-size:12px;color:var(--faint);font-style:italic}
.mfoot{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.btn{flex:1;font-weight:700;font-size:14px;padding:10px;border-radius:11px;background:var(--signal);color:var(--bar)}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:#ece9dc;color:var(--ink)}
.btn.danger{background:#fbe4e0;color:#a23a28;flex:0 0 auto;padding:10px 14px}

/* login */
.login-bg{position:fixed;inset:0;background:var(--bar);display:grid;place-items:center;z-index:100}
.login{width:100%;max-width:330px;background:var(--panel);border-radius:18px;padding:26px;text-align:center}
.login .mark{font-size:30px;display:inline-block;margin-bottom:14px}
.login h1{font-family:'Bricolage Grotesque';font-size:20px;margin-bottom:4px}
.login p{font-size:13px;color:var(--muted);margin-bottom:18px}
.login input{width:100%;font-size:15px;border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:11px;text-align:center}
.login .err{color:var(--sick);font-size:12.5px;font-weight:600;min-height:18px;margin-bottom:6px}
.hidden{display:none!important}

/* ── roster ⋯ menu ── */
.erow{position:relative}
.rdots{margin-left:4px;width:26px;height:26px;border-radius:8px;color:var(--faint);font-size:18px;line-height:1;flex:0 0 auto;opacity:0}
.erow:hover .rdots{opacity:1}
.rdots:hover{background:#e8e4d3;color:var(--ink)}
.popmenu{position:fixed;z-index:200;width:182px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px;box-shadow:0 10px 30px #2c2f1c22}
.popitem{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer}
.popitem:hover{background:#f1efe4}
.popitem.cur{color:var(--ink)} .popitem .pl{flex:1} .popitem .pck{color:var(--ok)}

/* ── picker occupancy ── */
.occ{font-size:11px;color:var(--muted);margin-top:3px}
.occ.clash{color:#b8462a;font-weight:700}
.pick.clash{background:#fdeee6}

/* ── day toolbar + list ── */
.daywrap{flex:1;display:flex;flex-direction:column;min-height:0}
.daybar{display:flex;justify-content:flex-end;padding:10px 22px 0}
.dmodes{display:flex;background:#eceadb;border:1px solid var(--line);border-radius:10px;padding:3px}
.dm{font-family:'Bricolage Grotesque';font-weight:600;font-size:13px;padding:5px 14px;border-radius:7px;color:var(--muted);cursor:pointer}
.dm.active{background:var(--bar);color:var(--barink)}
.dlist{flex:1;overflow-y:auto;padding:14px 22px 20px;display:flex;flex-direction:column;gap:10px}
.dcard{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--cardline);border-radius:14px;padding:14px 16px;cursor:pointer}
.dcard:hover{border-color:#cfcab2}
.dcard.warn{border-left:4px solid var(--sick)}
.dctime{display:flex;flex-direction:column;align-items:flex-start;flex:0 0 92px;font-family:'Spline Sans Mono',monospace}
.dctime .dts{font-size:19px;font-weight:600;color:var(--ink)}
.dctime .dte{font-size:13px;color:var(--faint);margin-top:2px}
.dcmain{flex:1;min-width:0}
.dctitle{font-family:'Bricolage Grotesque';font-weight:700;font-size:18px;line-height:1.1;color:var(--ink)}
.dcaddr{font-size:12.5px;color:var(--muted);margin-top:3px}
.dccrew{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dchip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:20px;background:#faf9f2;border:1.5px solid #ccc;font-size:13px;font-weight:600}
.dchip .dcn{color:var(--ink)} .dchip.warn{background:#fdf4e0;border-color:#dfb24a!important}
.dcveh{flex:0 0 auto;align-self:center}
.dcempty{font-size:12px;color:var(--faint)}

/* ── wide timeline blocks: bigger title/names ── */
.tltitle.lg{font-size:17px}
.tlnames.lg{gap:5px 12px;margin-top:8px}
.tlnames.lg .tlname{font-size:13px}

/* ── Verwaltung panel ── */
.modal.admin{max-width:540px}
.modal.sm{max-width:380px}
.modal-bg.lvl2{z-index:60}
.adsec{margin-bottom:18px}
.adh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.adadd{font-family:'Bricolage Grotesque';font-weight:700;font-size:13px;color:var(--bar);background:var(--signal);padding:6px 12px;border-radius:9px}
.adadd:hover{filter:brightness(1.05)}
.adlist{display:flex;flex-direction:column;gap:4px}
.adrow{display:flex;align-items:center;gap:11px;padding:7px 9px;border-radius:11px;background:#fff;border:1px solid var(--cardline)}
.adrow:hover{border-color:#d8d3bd}
.adinfo{flex:1;min-width:0}
.adname{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adsub{font-size:11.5px;color:var(--muted);margin-top:1px}
.adedit{width:30px;height:30px;border-radius:8px;color:var(--muted);font-size:14px;flex:0 0 auto}
.adedit:hover{background:#ece9dc;color:var(--ink)}
.adx{width:30px;height:30px;border-radius:8px;color:#b3877f;font-size:15px;font-weight:700;flex:0 0 auto}
.adx:hover{background:#fbe4e0;color:#a23a28}

/* ── team groups in roster ── */
.tgroups{display:flex;flex-direction:column;padding:6px 0}
.tgroup{margin:5px 9px;border:1px solid;border-radius:13px;overflow:hidden}
.tghead{display:flex;align-items:center;gap:8px;padding:8px 11px;cursor:pointer;user-select:none}
.tghead:hover{filter:brightness(.97)}
.tgchev{font-size:10px;width:11px;transition:transform .15s ease;opacity:.85}
.tgroup.collapsed .tgchev{transform:rotate(-90deg)}
.tgname{font-family:'Bricolage Grotesque';font-weight:700;font-size:13px;letter-spacing:.4px}
.tgn{font-weight:700;font-size:11px;padding:1px 8px;border-radius:20px;margin-left:auto}
.tgbody{padding:5px 6px}
.tgbody .erow:hover{background:#ffffff70}
.tgroup.collapsed .tgbody{display:none}
.tgtag{font-family:'Bricolage Grotesque';font-weight:700;font-size:10px;letter-spacing:.3px;padding:1px 7px;border-radius:6px;vertical-align:middle;margin-left:4px}

/* logo */
.logo{height:30px;width:auto;display:block}
.logo-login{height:54px;width:auto;display:inline-block;margin-bottom:14px}

/* photo avatars */
.ava.ph{overflow:hidden;background:#e8e4d3}
.ava.ph img{width:100%;height:100%;object-fit:cover;display:block}
/* picker rows with team stripe */
.pick{border-left:4px solid transparent}
.pick .pn{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* drag & drop */
.erow.drag{cursor:grab}
.erow.drag:active{cursor:grabbing}
#app.dragging .card,#app.dragging .ccard{transition:box-shadow .1s,border-color .1s}
.card.drop-ok,.ccard.drop-ok{border-color:var(--signal)!important;box-shadow:0 0 0 2px var(--signal)}
.card.drop-no,.ccard.drop-no{border-color:var(--sick)!important;box-shadow:0 0 0 2px var(--sick);opacity:.6}
.col.drop-ok{background:#c6dc2e1a}
.card.flash-no,.ccard.flash-no{animation:flashno .6s}
@keyframes flashno{0%,100%{box-shadow:0 0 0 2px var(--sick)}50%{box-shadow:0 0 0 4px var(--sick)}}
#app.dragging .cjobs .empty{border-color:var(--signal);color:#5f6a1c}

.ccust{font-size:11px;color:var(--ink);font-weight:600;margin-bottom:2px}

/* Telegram button */
.btn.tg{background:#2aabee;color:#fff}
.btn.tg:hover{filter:brightness(1.05)}
.btn.tg:disabled{opacity:.6}

/* чернетка нового наряду */
.draftnote{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 12px;
  background:#f3f0df;border:1px solid var(--line);border-radius:10px;
  font-size:13px;color:var(--muted)}
.draftnote .lnk{margin-left:auto;background:none;border:none;cursor:pointer;
  color:var(--ink);font-weight:600;text-decoration:underline;font-size:13px;padding:0}
.draftnote .lnk:hover{color:var(--sick)}

/* автопідказки адрес */
.acdrop{position:absolute;left:0;right:0;top:100%;z-index:50;background:#fff;
  border:1px solid var(--line);border-top:none;border-radius:0 0 10px 10px;
  box-shadow:0 8px 20px rgba(0,0,0,.10);max-height:220px;overflow-y:auto}
.acitem{padding:9px 12px;font-size:13px;color:var(--ink);cursor:pointer;border-top:1px solid #f0ecde}
.acitem:first-child{border-top:none}
.acitem:hover{background:#f3f0df}

/* файли до наряду */
.jobfiles{display:flex;flex-direction:column;gap:6px;margin:2px 0 8px}
.jfile{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--panel);border:1px solid var(--line);border-radius:9px}
.jfi{font-size:15px;flex:0 0 auto}
.jfn{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:var(--ink);text-decoration:none}
.jfn:hover{text-decoration:underline}
.jfs{flex:0 0 auto;font-size:11px;color:var(--muted);font-family:'Spline Sans Mono',monospace}
.jfx{flex:0 0 auto;background:none;border:none;color:var(--faint);cursor:pointer;font-size:13px;padding:0 2px}
.jfx:hover{color:var(--sick)}
.filedrop{display:block;text-align:center;padding:11px;border:1.5px dashed var(--line);border-radius:10px;
  color:var(--muted);font-size:13px;cursor:pointer;background:#fbfaf3;transition:.12s;margin-bottom:6px}
.filedrop:hover{border-color:var(--signal);color:var(--ink)}
.filedrop.over{border-color:var(--signal);background:#f3f7d9;color:var(--ink)}
.filedrop.busy{opacity:.6;pointer-events:none}
.cfiles{margin-left:6px;font-size:11px;color:var(--muted)}
.ckunde{margin-left:6px;font-size:11px;color:var(--muted)}

/* дрібна кнопка (надіслати файли в Telegram) */
.btn.small{padding:8px 12px;font-size:12.5px}

/* перемикач місяця + бейдж годин у ростері */
.hmonth{float:right;display:inline-flex;align-items:center;gap:2px;font-weight:600}
.hlbl{font-size:11px;color:var(--muted);min-width:74px;text-align:center;font-family:'Hanken Grotesk',sans-serif;font-weight:600}
.hnav{border:none;background:none;cursor:pointer;color:var(--muted);font-size:15px;line-height:1;padding:0 4px;border-radius:6px}
.hnav:hover{background:var(--panel);color:var(--ink)}
.erow .ehrs{flex:0 0 auto;margin-left:auto;font-size:10.5px;font-weight:600;color:var(--muted);background:#eceadb;border-radius:20px;padding:1px 8px;font-family:'Spline Sans Mono',monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.estat .stlbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.estart-row{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* ═══ mobile / phone ═══ */
@media (max-width: 720px){
  /* топбар: компактний, без наїздів; навігація окремим рядком під низ */
  .top{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .rostertog{order:1;display:grid}
  .brand{order:2}
  .vtoggle{order:3}
  [data-admin]{order:4;margin-left:auto}
  [data-fs]{display:none}
  .stats{display:none}
  .nav{order:5;width:100%;justify-content:center;gap:6px}
  .navlabel{min-width:auto;font-size:13px}
  .navlabel.big{font-size:15px}

  /* дошка на весь екран; ростер — висувна шухляда зліва */
  .roster{position:fixed;top:0;left:0;bottom:0;width:84%;max-width:320px;z-index:45;
          transform:translateX(-100%);transition:transform .22s ease;
          box-shadow:2px 0 24px #2c2f1c40;border-right:1px solid var(--line)}
  body.roster-open .roster{transform:translateX(0)}
  body.roster-open .roster-backdrop{display:block;position:fixed;inset:0;background:#1c1e1566;z-index:44}
  .erow .rdots{opacity:1}                       /* статус доступний на тач (без hover) */

  /* тиждень: горизонтальний свайп по днях (одна колонка ≈ на екран) */
  .grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:88%;
        overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .col{scroll-snap-align:start}

  /* день / таймлайн — менші поля */
  .tlwrap{padding:12px 12px 16px}
  .dlist{padding:12px 12px 18px}
  .dcard{gap:10px;padding:12px}
  .dctime{flex:0 0 62px}
  .daybar{padding:10px 12px 0}

  /* модалки майже на весь екран */
  .modal{max-width:100%;max-height:92vh;max-height:92dvh}
  .mbody{padding:12px 14px}
  .mfoot{padding:12px 14px}
  .field.row{flex-direction:column;gap:0}
}

@media (max-width: 400px){
  .bsub{display:none}                      /* лишаємо тільки логотип */
  .grid{grid-auto-columns:92%}
}

/* Alle Aufträge — список усіх замовлень */
.ajrow{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--line,#ececec)}
.ajstatus{width:14px;height:14px;border-radius:50%;flex:0 0 auto;cursor:pointer;box-shadow:0 0 0 3px transparent;transition:box-shadow .12s}
.ajstatus:hover{box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.ajmain{flex:1;min-width:0}
.ajtop{display:flex;gap:9px;align-items:baseline}
.ajaf{font-weight:700;font-size:13px}
.ajdate{font-size:12px;color:var(--faint,#999)}
.ajtitle{font-size:13px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ajcust{color:var(--faint,#999)}
.ajbtn{font-size:12px;padding:5px 11px;border:1px solid var(--line,#ddd);border-radius:7px;background:transparent;cursor:pointer;flex:0 0 auto}
.ajbtn:hover{background:rgba(0,0,0,.04)}

/* Ширший редактор замовлення + динамічний список адрес */
.modal.job{max-width:860px}
.adrline{display:flex;gap:6px;margin-bottom:6px}
.adrline input{flex:1;min-width:0}
.adrx{flex:0 0 auto;width:34px;border:1px solid var(--line,#ddd);border-radius:8px;background:transparent;cursor:pointer;color:var(--faint,#999)}
.adrx:hover{background:rgba(0,0,0,.05)}
.addr-add{margin-top:2px}
/* у ширшому редакторі: усі кнопки однакові, по центру, рівні відступи (Löschen — червоним) */
.modal.job .mfoot{justify-content:center}
.modal.job .mfoot .btn{flex:0 0 auto;min-width:160px;padding:10px}
.jfsign{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--faint,#888);cursor:pointer;white-space:nowrap;margin-left:6px}
.jfsign input{margin:0}