:root{
  --ink:#1b1826;--sub:#5d596b;--line:#e4e0ee;--paper:#f7f6fb;--card:#fff;
  --deep:#2a2340;--purple:#6b5aa2;--lilac:#ece9f5;--ok:#2e7d55;--warn:#a86a12;--bad:#b3261e;
  --r:10px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.5}
h1,h2,h3{font-weight:900;letter-spacing:-.02em;line-height:1.15;margin:0}
h1{font-size:30px}h2{font-size:22px}h3{font-size:17px}
a{color:var(--purple)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid #b9aee0;outline-offset:2px}
.muted{color:var(--sub)}.small{font-size:14px}
.hidden{display:none!important}

/* login */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--deep)}
.gate form{width:100%;max-width:360px;background:var(--card);border-radius:14px;padding:28px}
.gate .mark{color:#fff;text-align:center;margin-bottom:18px}
.gate .mark b{display:block;font-size:34px;font-weight:900;letter-spacing:-.03em}
.gate .mark span{color:#c9c1e6;font-size:15px}
.gate .err{color:var(--bad);font-weight:700;min-height:1.5em;margin-top:8px}

/* fields and buttons */
.field{display:block;margin:0 0 14px}
.field>span{display:block;font-weight:700;font-size:14px;margin-bottom:5px}
.field>small{display:block;color:var(--sub);font-size:13px;margin-top:4px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%;border:2px solid var(--line);border-radius:8px;padding:9px 11px;background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--purple);outline:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:8px;padding:10px 18px;font-weight:800;cursor:pointer;background:var(--purple);color:#fff}
.btn.big{width:100%;padding:13px}
.btn.quiet{background:var(--lilac);color:var(--deep)}
.btn.bad{background:#fbe9e7;color:var(--bad)}
.linkish{background:none;border:0;color:var(--purple);font-weight:700;cursor:pointer;padding:0}
.check{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--purple)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 18px}
[data-md]{flex-wrap:nowrap}[data-md] select{width:auto}[data-md] select+select{flex:1}

/* shell */
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--deep);color:#fff;padding:22px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.side .name{font-size:24px;font-weight:900;letter-spacing:-.03em;padding:0 10px}
.side .ver{color:#a79dcb;font-size:12px;padding:0 10px 18px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav button{background:none;border:0;color:#dcd6f0;text-align:left;padding:10px 12px;border-radius:8px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.side nav button:hover{background:#3a3159}
.side nav button.on{background:#fff;color:var(--deep)}
.side nav button em{font-style:normal;font-size:11px;font-weight:700;color:#a79dcb}
.side nav button.on em{color:var(--sub)}
.side .foot{margin-top:auto;padding:10px;font-size:14px;color:#c9c1e6}
.side .foot a,.side .foot button{color:#fff;font-weight:700}
.main{padding:28px 32px 60px;max-width:1440px;width:100%}
.main>header{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.main>header p{margin:4px 0 0;color:var(--sub)}

/* blocks */
.block{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:18px}
.block>h2{margin-bottom:4px}
.block>.lead{margin:0 0 16px;color:var(--sub)}
.rules{border-left:4px solid var(--purple);background:#fff;padding:14px 18px 14px 20px;border-radius:0 var(--r) var(--r) 0;margin-bottom:22px}
.rules p{margin:0 0 8px}.rules p:last-child{margin:0}
.soon{border:2px dashed var(--line);border-radius:var(--r);padding:28px;text-align:center;color:var(--sub)}
.soon b{display:block;color:var(--ink);font-size:18px;margin-bottom:4px}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:800;background:var(--lilac);color:var(--deep)}
.pill.ok{background:#e3f2ea;color:var(--ok)}.pill.left{background:#f1eff5;color:var(--sub)}.pill.warn{background:#fdf1dc;color:var(--warn)}
.savebar{display:flex;gap:10px;align-items:center;margin-top:6px}
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.subtabs button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-weight:800;cursor:pointer;color:var(--deep)}
.subtabs button.on{background:var(--deep);border-color:var(--deep);color:#fff}

/* tables */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t th{text-align:left;font-size:13px;color:var(--sub);font-weight:700;padding:8px 10px;border-bottom:2px solid var(--line)}
table.t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr.click{cursor:pointer}table.t tr.click:hover td{background:#faf9fe}

/* shift types editor */
.stypes{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.stypes .st{display:flex;gap:8px;align-items:center}
.stypes .st input{max-width:160px}

/* sheet */
.sheet{position:fixed;inset:0;background:rgba(27,24,38,.45);display:flex;justify-content:flex-end;z-index:50}
.sheet .panel{background:#fff;width:100%;max-width:460px;height:100%;overflow:auto;padding:24px}
.sheet .panel h2{margin-bottom:14px}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--deep);color:#fff;padding:11px 18px;border-radius:8px;font-weight:700;z-index:80}
.busy{position:fixed;top:14px;right:14px;background:var(--deep);color:#fff;padding:8px 14px;border-radius:8px;z-index:80}

@media (max-width:820px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{position:sticky;height:auto;padding:12px;z-index:20}
  .side .name{font-size:20px}.side .ver{display:none}
  .side nav{flex-direction:row;overflow-x:auto;gap:4px}
  .side nav button{white-space:nowrap;padding:8px 12px}
  .side nav button em{display:none}
  .side .foot{display:none}
  .main{padding:18px 16px 60px}
  h1{font-size:25px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* rota */
.note.warnbox,.warnbox{background:#fff4e0;border:1px solid #f0d49b;border-radius:var(--r);padding:12px 14px;margin:0 0 14px;font-size:15px}
.rtools{margin:0 0 12px}.rtools .btn.on{background:var(--deep);color:#fff}
.btn[disabled]{opacity:.45;cursor:default}
.bulkbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--deep);color:#fff;border-radius:var(--r);padding:10px 12px;margin:0 0 12px;position:sticky;top:8px;z-index:5}
.bulkbar .muted{color:#c9c1e6}
.rota{display:grid;grid-template-columns:1fr 210px;gap:14px;align-items:start}
.rweek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.rday{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px;min-height:170px;display:flex;flex-direction:column;gap:6px}
.rday h3{font-size:14px;letter-spacing:0;margin:0 0 2px}
.rday.today{border-color:var(--purple);box-shadow:0 0 0 2px #d9d2f0}
.rday.past{opacity:.72}
.rday.over{background:#f1eefa;border-style:dashed;border-color:var(--purple)}
.rs{border-left:5px solid var(--c);background:#faf9fd;border-radius:7px;padding:6px 7px;cursor:grab;font-size:13px;line-height:1.3;display:flex;flex-direction:column;gap:1px}
.rs b{font-size:13px}.rs span{font-weight:700}.rs small{color:var(--sub)}.rs em{font-style:normal;color:var(--bad);font-weight:800;font-size:12px}
.rs.open{background:#fdecea;border-left-color:var(--bad)}.rs.open span{color:var(--bad)}
.rs.clash{outline:2px solid var(--bad)}
.rs.sel{background:#e3dcf6;outline:2px solid var(--deep)}
.rs.over{outline:2px dashed var(--purple)}
.rs.dragging{opacity:.4}
.tag{font-size:12px;font-weight:800;border-radius:6px;padding:3px 6px}
.tag.bh{background:#e6f1ea;color:var(--ok)}.tag.off{background:#fff4e0;color:var(--warn)}.tag.gap{background:#fdecea;color:var(--bad)}
.radd{margin-top:auto;background:none;border:1px dashed var(--line);border-radius:7px;padding:5px;color:var(--sub);font-weight:700;cursor:pointer;font-size:13px}
.radd:hover{border-color:var(--purple);color:var(--purple)}
.rstaff{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;position:sticky;top:8px}
.rstaff h3{margin:0 0 4px}
.chip{border-left:5px solid var(--c);background:#faf9fd;border-radius:7px;padding:7px 9px;margin:0 0 6px;cursor:grab;display:grid;grid-template-columns:1fr auto;gap:0 8px;font-size:14px}
.chip small{grid-column:1/-1;color:var(--sub);font-size:12px}
.types{margin:0 0 12px}.types .btn{padding:6px 10px;font-size:13px}
.grid2.tight{grid-template-columns:1fr 1fr;gap:0 12px}
.days .check{margin:0 10px 6px 0}
.panel hr{border:0;border-top:1px solid var(--line);margin:18px 0}
/* calendar */
.cal-h,.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-h b{font-size:13px;color:var(--sub);padding:0 4px}
.cd{background:var(--card);border:1px solid var(--line);border-radius:8px;min-height:104px;padding:6px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.3}
.cd:hover{border-color:var(--purple)}
.cd.out{opacity:.4}.cd.today{border-color:var(--purple);box-shadow:0 0 0 2px #d9d2f0}.cd.gap{background:#fdf3f2}
.cd .n{font-weight:900;font-size:14px}.cd .bh{color:var(--ok);font-weight:800}
.cd .ln{border-left:3px solid var(--c);padding-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd .ln.off{border-color:var(--warn);color:var(--warn);font-weight:700}.cd .ln i{color:var(--bad);font-style:normal;font-weight:800}
@media (max-width:1100px){.rota{grid-template-columns:1fr}.rstaff{position:static;display:flex;flex-wrap:wrap;gap:6px}.rstaff h3,.rstaff p{width:100%}.chip{margin:0}}
@media (max-width:900px){.rweek{grid-template-columns:1fr}.rday{min-height:0}.cal-g .cd{min-height:70px}.cd .ln{font-size:11px}}

/* week and month picker: the date and the arrows together */
.weeknav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 16px}
.wn-arrow{width:48px;height:56px;border:2px solid var(--line);background:#fff;border-radius:10px;font-size:30px;line-height:1;font-weight:700;color:var(--deep);cursor:pointer}
.wn-arrow:hover{border-color:var(--purple);color:var(--purple)}
.wn-mid{min-width:280px;height:56px;border:2px solid var(--deep);background:#fff;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 16px;text-align:center}
.wn-mid b{font-size:18px;line-height:1.1}.wn-mid span{font-size:14px;color:var(--sub)}
.wn-jump{display:flex;align-items:center;gap:8px;margin-left:auto;font-weight:700;font-size:14px}.wn-jump input{width:auto}
@media (max-width:700px){.wn-mid{min-width:0;flex:1}.wn-jump{margin-left:0;width:100%}}

/* holiday and absence */
.tag.ask{background:#ece9f5;color:var(--purple)}.tag.sick{background:#fdecea;color:var(--bad)}
.neg{color:var(--bad)}
.req{border:1px solid var(--line);border-left:5px solid var(--purple);border-radius:var(--r);padding:14px;margin:0 0 12px;background:#fff}
.req-top{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}.req .big{font-size:19px}
.req-bal{display:flex;gap:18px;text-align:right}.req-bal span{display:flex;flex-direction:column;font-size:13px;color:var(--sub)}.req-bal b{font-size:22px;color:var(--ink)}.req-bal b.neg{color:var(--bad)}
.req-ctx{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.bd{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bd>div{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line)}.bd>div:last-child{border-bottom:0}
.bd .tot{background:var(--lilac);font-size:18px}
.wdays .check{margin:0 10px 6px 0}
@media (max-width:700px){.req-ctx{grid-template-columns:1fr}}
.pill.bad{background:#fdecea;color:var(--bad)}

.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 14px}

/* costs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 16px}
.kpis>div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column}
.kpis span{font-size:13px;color:var(--sub);font-weight:700}.kpis b{font-size:24px;letter-spacing:-.02em}
.kpis .hi{background:var(--deep);color:#fff;border-color:var(--deep)}.kpis .hi span{color:#c9c1e6}
.mm{justify-content:space-between;border-top:1px solid #f0d49b;padding:8px 0}
.mailprev{white-space:pre-wrap;background:#faf9fd;border:1px solid var(--line);border-radius:var(--r);padding:14px;font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;margin-top:12px}

/* profile page */
.ph{margin:6px 0 14px!important}.ph p{font-size:16px}
.ptabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin:0 0 18px}
.ptabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:10px 14px;font-weight:800;color:var(--sub);cursor:pointer}
.ptabs button.on{color:var(--deep);border-bottom-color:var(--purple)}
.ptabs button:hover{color:var(--deep)}
.pl{display:grid;grid-template-columns:130px 130px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.wk{margin:14px 0 4px;font-size:15px}.wk .muted{font-weight:600}
.grid2.top{align-items:start}
.nowrap{white-space:nowrap}
@media (max-width:700px){.pl{grid-template-columns:1fr 1fr}.pl .small{grid-column:1/-1}}
.rs.leave{opacity:.55;background:repeating-linear-gradient(45deg,#faf9fd,#faf9fd 6px,#f1eff5 6px,#f1eff5 12px);cursor:pointer}.rs.leave em{color:var(--warn)}