/* Dehkon HR admin. Colours live in variables: :root is the light theme, [data-theme=dark] the dark one. */
:root{
  --bg:#f6f7fb;--panel:#fff;--panel-2:#f9fafb;--hover:#f3f4f6;--input:#fff;--line:#e5e7eb;--line-2:#d1d5db;
  --text:#111827;--text-2:#374151;--muted:#6b7280;--faint:#9ca3af;
  --accent:#4f46e5;--accent-dark:#4338ca;--accent-2:#eef2ff;--accent-3:#e0e7ff;--ring:#c7d2fe;
  --warn:#b45309;--warn-bg:#fffbeb;--warn-line:#fde68a;--bad:#b91c1c;--bad-bg:#fef2f2;--bad-line:#fecaca;--good:#047857;--good-bg:#ecfdf5;--good-line:#a7f3d0;
  --c-ok:#10b981;--c-late:#f59e0b;--c-absent:#ef4444;--track:#e5e7eb;--red:#ef4444;
  --side:#1e1b4b;--side-text:#c7d2fe;--side-on:#3730a3;--side-hover:rgba(55,48,163,.55);--side-line:rgba(165,180,252,.2);
  --shadow:0 1px 2px rgba(16,24,40,.05);--shadow-lg:0 12px 32px rgba(16,24,40,.12);--seg:#eef0f6;
  --r:10px;--font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:light;
}
[data-theme=dark]{
  --bg:#0b1020;--panel:#111827;--panel-2:#0f172a;--hover:#1a2235;--input:#0d1424;--line:#1f2937;--line-2:#2b3648;
  --text:#e5e7eb;--text-2:#cbd5e1;--muted:#94a3b8;--faint:#64748b;
  --accent:#6366f1;--accent-dark:#4f46e5;--accent-2:rgba(99,102,241,.16);--accent-3:rgba(99,102,241,.26);--ring:rgba(129,140,248,.45);
  --warn:#fbbf24;--warn-bg:rgba(245,158,11,.13);--warn-line:rgba(245,158,11,.35);--bad:#f87171;--bad-bg:rgba(239,68,68,.13);--bad-line:rgba(239,68,68,.35);
  --good:#34d399;--good-bg:rgba(16,185,129,.13);--good-line:rgba(16,185,129,.35);--track:#1f2937;
  --side:#0a0f1e;--side-text:#a5b4fc;--side-on:#312e81;--side-hover:rgba(49,46,129,.6);--side-line:rgba(129,140,248,.16);
  --shadow:0 1px 2px rgba(0,0,0,.3);--shadow-lg:0 16px 40px rgba(0,0,0,.5);--seg:#0f172a;color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.ic{flex:none;display:block}
::selection{background:var(--accent-3)}

/* shell */
.shell{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh}
.side{background:var(--side);color:var(--side-text);padding:16px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(165,180,252,.25) transparent;z-index:20}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;font-weight:700;font-size:18px;color:#fff;text-decoration:none;letter-spacing:.01em}
.brand img{height:30px;width:auto;display:block}
.brand b{color:#a5b4fc;font-weight:700}
.side .group{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#818cf8;padding:6px 12px}
.side .item{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:8px;color:var(--side-text);text-decoration:none;font-weight:500;cursor:pointer;list-style:none;user-select:none;transition:background .15s,color .15s}
.side .item::-webkit-details-marker{display:none}
.side .item:hover{background:var(--side-hover);color:#fff}
.side .item.on{background:var(--side-on);color:#fff;box-shadow:inset 3px 0 0 #a5b4fc}
.side .item span{flex:1}
.side details[open]>summary .ic:last-child{transform:rotate(90deg)}
.side summary .ic:last-child{opacity:.7;transition:transform .2s}
.side details[open] .sub{animation:slide-in .2s ease-out both}
.side .sub{display:flex;align-items:center;gap:8px;margin:1px 0 1px 30px;padding:7px 12px;color:var(--side-text);text-decoration:none;font-size:13.5px;border-left:1px solid var(--side-line);border-radius:0 8px 8px 0;transition:background .15s,color .15s}
.side .sub:hover{background:var(--side-hover);color:#fff}
.side .sub.on{background:var(--side-on);color:#fff;border-left-color:#a5b4fc}
.side .grow{flex:1;min-height:12px}
.side .me{display:flex;align-items:center;gap:10px;padding:12px 8px 4px;border-top:1px solid var(--side-line);margin-top:8px}
.side .me i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-style:normal;font-weight:700;flex:none}
.side .me span{flex:1;min-width:0}
.side .me b{display:block;color:#fff;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .me small{display:block;color:#a5b4fc;font-size:12px}
.side .me form button{height:32px;width:32px;padding:0;justify-content:center;background:transparent;border:0;color:var(--side-text);box-shadow:none}
.side .me form button:hover{color:#fff;background:var(--side-hover)}
.side .badge{margin-left:auto;line-height:18px;font-size:11px}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:64px;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px;position:sticky;top:0;z-index:10}
.topbar .crumb{flex:1;min-width:0;font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .crumb a{color:var(--muted);text-decoration:none;font-weight:500}.topbar .crumb a:hover{color:var(--accent)}
.topbar .crumb .sep{color:var(--faint);margin:0 6px;font-weight:400}
.topbar .search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:9px;padding:0 8px 0 10px;height:38px;width:300px;color:var(--muted);background:var(--input);cursor:text;transition:border-color .15s,box-shadow .15s}
.topbar .search:hover{border-color:var(--faint)}
.topbar .search span{flex:1;font-size:13.5px;white-space:nowrap;overflow:hidden}
kbd{font:600 11px/1 var(--font);padding:3px 6px;border-radius:5px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--muted)}
.icon-btn{position:relative;color:var(--muted);display:grid;place-items:center;width:38px;height:38px;border-radius:9px;border:0;background:transparent;padding:0;cursor:pointer;box-shadow:none;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--hover);color:var(--text)}
.icon-btn em{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-style:normal;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--panel)}
.icon-btn.menu{display:none}
.theme-btn .ic-moon{display:none}[data-theme=dark] .theme-btn .ic-sun{display:none}[data-theme=dark] .theme-btn .ic-moon{display:block}
.topbar .avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent-2);color:var(--accent);font-weight:700}
.langs{display:flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.langs a{padding:6px 10px;font-size:12px;font-weight:600;text-decoration:none;color:var(--muted);transition:background .15s,color .15s}
.langs a:hover{color:var(--text)}
.langs a.on{background:var(--accent);color:#fff}
.content{padding:24px;min-width:0;max-width:1600px;width:100%}
.scrim{display:none}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes slide-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.content>*{animation:rise .32s cubic-bezier(.2,.7,.2,1) both}
.content>:nth-child(2){animation-delay:.03s}.content>:nth-child(3){animation-delay:.06s}.content>:nth-child(4){animation-delay:.09s}
.content>:nth-child(5){animation-delay:.12s}.content>:nth-child(n+6){animation-delay:.15s}
#progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s}
#progress.on{opacity:1}#progress i{display:block;height:100%;width:40%;background:linear-gradient(90deg,transparent,var(--accent),#a5b4fc);animation:load 1s ease-in-out infinite}
button.busy,.btn.busy{pointer-events:none;opacity:.8}
button.busy::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* page head: title and its note stacked on the left, actions on the right */
.top{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-columns:max-content;grid-auto-flow:column;column-gap:10px;align-items:start;margin-bottom:18px}
.top:empty{display:none}
.top>*{grid-row:1/span 2}
.top>h1,.top>div:first-child{grid-column:1;grid-row:1}
.top>div:first-child{grid-row:1/span 2}
.top>p{grid-column:1;grid-row:2;max-width:860px}
.top h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
.top p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.top .btn,.top button,.top>a{white-space:nowrap}
.head-actions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}

/* blocks */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.metrics>div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);transition:border-color .15s,transform .15s,box-shadow .15s}
.metrics>div:has(a):hover{border-color:var(--ring);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.metrics span{display:block;color:var(--muted);font-size:12px}
.metrics b{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.metrics b.small{font-size:16px}
.metrics a{color:inherit;text-decoration:none;display:block}
.metrics .warn b{color:var(--warn)}
.metrics .bad b{color:var(--bad)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.panel h2{margin:0 0 4px;font-size:16px}
.panel h2.gap{margin-top:16px}
.panel>p{margin:0 0 12px;color:var(--muted)}
.alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);margin-bottom:14px;font-weight:500;border:1px solid transparent;transition:opacity .4s,transform .4s}
.alert.good{background:var(--good-bg);color:var(--good);border-color:var(--good-line)}
.alert.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.alert.gone{opacity:0;transform:translateY(-6px)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:12px}
.filters .grow{flex:1}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--text-2);min-width:150px}
input,select,textarea{height:38px;border:1px solid var(--line-2);border-radius:8px;padding:0 12px;font:inherit;color:var(--text);background:var(--input);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
input[type=file]{padding:6px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
textarea{height:auto;padding:8px 10px;line-height:1.4;resize:vertical}
button,.btn{height:36px;padding:0 16px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:var(--shadow);transition:background .15s,border-color .15s,color .15s,transform .1s}
button:hover,.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
button:active,.btn:active{transform:translateY(1px)}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ring)}
button.ghost,.btn.ghost{background:var(--panel);color:var(--text-2);border-color:var(--line-2)}
button.ghost:hover,.btn.ghost:hover{background:var(--hover);color:var(--text)}
button.danger{background:var(--panel);color:var(--bad);border-color:var(--bad-line)}
button.danger:hover{background:var(--bad-bg)}
.btn.ghost-link{background:var(--panel);color:var(--accent);border-color:var(--accent)}
.btn.ghost-link:hover{background:var(--accent-2)}
button.link-btn{height:auto;padding:0;border:0;background:none;color:var(--accent);font-size:12px;font-weight:500;text-decoration:underline;box-shadow:none}
.table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:12px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
th{background:var(--panel-2);border-top:0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
tr:hover>td{background:var(--hover)}
td{transition:background .12s}
td small{display:block;color:var(--muted);font-size:12px}
td.actions{text-align:right;white-space:nowrap}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--good-bg);color:var(--good);white-space:nowrap}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.bad{background:var(--bad-bg);color:var(--bad)}
.tag.muted{background:var(--hover);color:var(--muted)}
.empty{padding:22px;text-align:center;color:var(--muted)}
.note{color:var(--muted);font-size:12px;margin-top:10px}
.hint{margin:0;color:var(--muted);font-size:13px}
.inline{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.inline input{width:110px}.inline input.r{width:80px}
.inline input[type=checkbox]{width:auto;height:auto}.inline input[type=time]{width:120px}.inline input[name=reason]{width:170px}
.warn-text{color:var(--warn)!important}
.badge{font-style:normal;background:var(--red);color:#fff;border-radius:999px;padding:0 7px;font-size:12px;font-weight:700}
.badge.soft{background:var(--warn-bg);color:var(--warn)}
a.name{font-weight:700;color:var(--text);text-decoration:none}
a.name:hover{color:var(--accent);text-decoration:underline}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.login .brandside{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 0% 0%,#312e81 0%,#1e1b4b 45%,#0b1020 100%);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.login .brandside::after{content:"";position:absolute;width:520px;height:520px;right:-180px;bottom:-200px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.35),transparent 70%)}
.login .brandside img{height:56px;width:auto;align-self:flex-start}
.login .brandside h2{font-size:34px;line-height:1.15;margin:0 0 12px;letter-spacing:-.02em;max-width:440px}
.login .brandside p{color:#c7d2fe;margin:0;max-width:420px}
.login .brandside small{color:#818cf8}
.login .formside{display:grid;place-items:center;padding:24px;background:var(--bg)}
.login form{width:100%;max-width:380px;display:grid;gap:14px;animation:pop .35s cubic-bezier(.2,.7,.2,1) both}
.login h1{margin:0;font-size:24px;letter-spacing:-.01em}.login form>p{margin:-8px 0 6px;color:var(--muted)}
.login label{min-width:0}.login input{height:44px}.login button{height:44px;font-size:15px}
.login .langs{justify-self:center;margin-top:6px}

/* timesheet and misc */
.sheet table{min-width:0;font-size:12px}
.sheet th,.sheet td{padding:6px 5px;text-align:center}
.sheet th.who,.sheet td.who{text-align:left;min-width:180px;position:sticky;left:0;background:var(--panel);z-index:1}
.sheet th.who{background:var(--panel-2)}
.sheet th.we{color:var(--bad)}
.sheet td.c{font-weight:600;min-width:26px}
.sheet td.ok{color:var(--good)}
.sheet td.late{background:var(--warn-bg);color:var(--warn)}
.sheet td.absent{background:var(--bad-bg);color:var(--bad)}
.sheet td.off,.sheet td.waiting,.sheet td.free{color:var(--muted)}
tr.voided td{color:var(--muted);text-decoration:line-through}
tr.voided td small,tr.voided td form{text-decoration:none}
.days{display:inline-flex;gap:4px;flex-wrap:wrap}
label.day{flex-direction:row;align-items:center;gap:3px;min-width:0;font-size:12px;color:var(--text)}
label.day input{height:auto}
.rules input{width:110px}
.total-line{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 12px;color:var(--muted)}
.total-line b{color:var(--text)}
.sum-row td{font-weight:600;background:var(--panel-2)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:10px 0 6px}
.form-grid label{min-width:0}
.form-grid label small{color:var(--muted);font-size:11px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.bar{display:block;height:8px;border-radius:99px;background:var(--track);overflow:hidden;margin-top:5px;min-width:90px}
.bar i{display:block;height:100%;background:var(--c-ok);transform-origin:left;animation:grow .6s cubic-bezier(.2,.7,.2,1) both}
.bar.mid i{background:var(--c-late)}.bar.low i{background:var(--c-absent)}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.daychart{display:flex;align-items:flex-end;gap:4px;height:150px;padding:8px 0 0;overflow-x:auto}
.daychart .col{flex:1 0 18px;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;justify-content:flex-end}
.daychart .stack{width:100%;max-width:26px;display:flex;flex-direction:column-reverse;border-radius:5px 5px 0 0;overflow:hidden;min-height:2px;background:var(--track)}
.daychart .stack .l{background:var(--c-late)}.daychart .stack .a{background:var(--c-absent)}
.daychart small{font-size:10px;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.two table{min-width:0}
@media (max-width:1100px){.two{grid-template-columns:1fr}}
.face-row{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.face-ref img{width:120px;height:150px;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block}
.face-ref small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.face-empty{width:120px;height:150px;border-radius:12px;border:1px dashed var(--line-2);display:grid;place-items:center;text-align:center;color:var(--muted);font-size:12px;padding:8px}
img.thumb{width:56px;height:70px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block;transition:transform .15s}
img.thumb:hover{transform:scale(1.06)}
.pair{display:flex;gap:6px}.pair figure{margin:0;text-align:center}.pair figcaption{font-size:10px;color:var(--muted)}
label.check{flex-direction:row;align-items:center;gap:8px;font-weight:600}
label.check input{width:auto;min-width:0;height:auto}
.lesson-kind{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--hover);color:var(--muted);margin-right:6px}
.add-lesson{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.add-lesson details{margin-bottom:8px}
.add-lesson summary{cursor:pointer;font-weight:700;padding:6px 0}
.question{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:10px}
.question ol{margin:6px 0 0;padding-left:20px}
.question li.right{color:var(--good);font-weight:700}
.opts{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;max-width:640px}
.chat{display:flex;flex-direction:column;gap:8px;max-height:65vh;overflow:auto}
.msg{max-width:72%;padding:8px 12px;border-radius:14px;background:var(--hover);align-self:flex-start;animation:rise .25s ease-out both}
.msg.out{align-self:flex-end;background:var(--accent-2)}
.msg .text{white-space:pre-wrap}.msg small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.msg img{max-width:260px;border-radius:10px;display:block}
.fb{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:10px}
.fb .text{white-space:pre-wrap;margin:6px 0}
.rbar{display:grid;grid-template-columns:minmax(120px,260px) 1fr 50px;gap:8px;align-items:center;margin:4px 0;font-size:13px}
.history{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px}.history small{color:var(--muted);display:inline}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* dashboard */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:16px}
.hero a{position:relative;overflow:hidden;border-radius:14px;padding:22px 22px 20px;color:#fff;text-decoration:none;box-shadow:0 6px 18px rgba(79,70,229,.22);transition:transform .2s,box-shadow .2s}
.hero a:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(79,70,229,.3)}
.hero a::before,.hero a::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1);transition:transform .4s}
.hero a:hover::before{transform:scale(1.15)}
.hero a::before{width:160px;height:160px;right:-40px;top:-60px}.hero a::after{width:110px;height:110px;right:40px;bottom:-60px}
.hero .indigo{background:linear-gradient(135deg,#4f46e5,#4338ca)}.hero .emerald{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 6px 18px rgba(5,150,105,.22)}
.hero span{display:block;font-size:14px;opacity:.9}.hero b{display:block;font-size:34px;font-weight:700;margin:6px 0 2px;font-variant-numeric:tabular-nums}.hero small{opacity:.85}
.hero .ic{position:absolute;right:18px;top:18px;opacity:.9}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:16px}
.kpis a{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:border-color .15s,transform .15s,box-shadow .15s}
.kpis a:hover{border-color:var(--ring);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.kpis i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:none}
.kpis span{flex:1;min-width:0}.kpis small{display:block;color:var(--muted);font-size:13px}.kpis span small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpis b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.kpis a>svg{color:var(--faint);flex:none}
@media (min-width:1280px){.kpis{grid-template-columns:repeat(6,minmax(0,1fr))}.kpis a{gap:10px;padding:14px 12px}.kpis a>svg{display:none}.kpis i{width:38px;height:38px}}
.c-indigo{background:#eef2ff;color:#4f46e5}.c-green{background:#ecfdf5;color:#059669}.c-amber{background:#fffbeb;color:#d97706}.c-red{background:#fef2f2;color:#dc2626}.c-sky{background:#f0f9ff;color:#0284c7}.c-violet{background:#f5f3ff;color:#7c3aed}
[data-theme=dark] .c-indigo{background:rgba(99,102,241,.16);color:#a5b4fc}[data-theme=dark] .c-green{background:rgba(16,185,129,.15);color:#6ee7b7}
[data-theme=dark] .c-amber{background:rgba(245,158,11,.15);color:#fcd34d}[data-theme=dark] .c-red{background:rgba(239,68,68,.15);color:#fca5a5}
[data-theme=dark] .c-sky{background:rgba(14,165,233,.15);color:#7dd3fc}[data-theme=dark] .c-violet{background:rgba(139,92,246,.16);color:#c4b5fd}
.dash{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:stretch}
.dash>.chart{display:flex;flex-direction:column}.dash>.chart .bars{flex:1;min-height:220px;height:auto}
@media (max-width:1100px){.dash{grid-template-columns:1fr}}
.chart-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.chart-sum small{display:block;color:var(--muted);font-size:12px}.chart-sum b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.month-sum{margin:0 0 14px;padding:0 0 14px;border-top:0;border-bottom:1px solid var(--line)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-head h2{margin:0}.panel-head>a{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}.panel-head>a:hover{text-decoration:underline}
.legend .ok,.bars .ok{background:var(--c-ok)}.legend .late,.bars .late{background:var(--c-late)}.legend .absent,.bars .absent{background:var(--c-absent)}
.bars{display:flex;align-items:flex-end;gap:8px;height:220px;padding-top:6px}
.bars .col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;text-decoration:none;min-width:0}
.bars .stack{width:100%;max-width:34px;display:flex;flex-direction:column;border-radius:6px 6px 2px 2px;overflow:hidden;min-height:2px;background:var(--track);transform-origin:bottom;animation:rise-bar .6s cubic-bezier(.2,.7,.2,1) both}
.bars .col:nth-child(n){animation-delay:calc(var(--i,0) * 30ms)}
@keyframes rise-bar{from{transform:scaleY(0)}to{transform:none}}
.bars .stack i{display:block;min-height:0}
.bars small{font-size:11px;color:var(--muted)}.bars .today small{color:var(--accent);font-weight:700}
.bars .col:hover .stack{filter:brightness(1.08)}
.todo h2{margin-bottom:10px}.todo h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 6px}
.todo a{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:8px;color:var(--text);text-decoration:none;font-weight:500;transition:background .15s,padding .15s}
.todo a:hover{background:var(--hover);padding-left:12px}.todo a span{flex:1}.todo a .ic{color:var(--accent)}
.feed>div{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.feed>div:first-child{border-top:0}
.feed>div>span:nth-child(2){flex:1;min-width:0}.feed a.name{font-weight:600}.feed small{display:block;color:var(--muted);font-size:12px}
.feed .when{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;min-width:48px}.feed .face{font-size:13px;color:var(--muted);min-width:64px;text-align:right}
.kind{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.kind.in{background:var(--good-bg);color:var(--good)}.kind.out{background:var(--bad-bg);color:var(--bad)}
.ranks>div{display:grid;grid-template-columns:minmax(0,1fr) 120px 44px;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.ranks>div:first-child{border-top:0}
.ranks b{font-weight:600}.ranks small{display:block;color:var(--muted);font-size:12px}.ranks .pct{text-align:right;font-variant-numeric:tabular-nums}
.meter{height:8px;border-radius:99px;background:var(--accent-2);overflow:hidden}
.meter i{display:block;height:100%;background:var(--c-ok);border-radius:99px;transform-origin:left;animation:grow .7s cubic-bezier(.2,.7,.2,1) both}
.meter i.mid{background:var(--c-late)}.meter i.low{background:var(--c-absent)}
.score{font-weight:700;font-variant-numeric:tabular-nums;color:var(--good)}.score.low{color:var(--bad)}

/* avatars */
.av{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:12.5px;font-weight:700;flex:none;letter-spacing:.02em}
.av0{background:#e0e7ff;color:#4338ca}.av1{background:#d1fae5;color:#047857}.av2{background:#fef3c7;color:#b45309}.av3{background:#fee2e2;color:#b91c1c}
.av4{background:#e0f2fe;color:#0369a1}.av5{background:#ede9fe;color:#6d28d9}.av6{background:#fce7f3;color:#be185d}.av7{background:#ccfbf1;color:#0f766e}
[data-theme=dark] .av0{background:rgba(99,102,241,.2);color:#a5b4fc}[data-theme=dark] .av1{background:rgba(16,185,129,.18);color:#6ee7b7}
[data-theme=dark] .av2{background:rgba(245,158,11,.18);color:#fcd34d}[data-theme=dark] .av3{background:rgba(239,68,68,.18);color:#fca5a5}
[data-theme=dark] .av4{background:rgba(14,165,233,.18);color:#7dd3fc}[data-theme=dark] .av5{background:rgba(139,92,246,.2);color:#c4b5fd}
[data-theme=dark] .av6{background:rgba(236,72,153,.18);color:#f9a8d4}[data-theme=dark] .av7{background:rgba(20,184,166,.18);color:#5eead4}
.av.av-icon{background:var(--accent-2);color:var(--accent)}
.av.av-lg{width:60px;height:60px;font-size:20px}
img.av-img{object-fit:cover;padding:0}
.who{display:flex;align-items:center;gap:12px;min-width:0}.who>span:last-child{min-width:0}
.who a.name,.who b{display:inline;font-weight:600;color:var(--text);text-decoration:none}.who a.name:hover{color:var(--accent)}
.profile{display:flex;align-items:center;gap:16px}.profile h1{margin:0;font-size:22px}.profile p{margin:4px 0 0;color:var(--muted);font-size:13.5px}

/* tabs */
.seg{display:inline-flex;gap:4px;padding:4px;margin-bottom:14px;background:var(--seg);border:1px solid var(--line);border-radius:12px;max-width:100%;overflow-x:auto}
.seg a{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:9px;color:var(--muted);font-weight:600;font-size:13.5px;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.seg a.on{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}.seg a:hover:not(.on){color:var(--text)}
.seg .badge{margin-left:2px}
[data-tab]:not([hidden]){animation:fade .2s ease-out}

/* dialogs */
.modal{border:1px solid var(--line);border-radius:16px;padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-shadow:var(--shadow-lg);color:var(--text);background:var(--panel)}
.modal[open]{animation:pop .22s cubic-bezier(.2,.7,.2,1)}
.modal.wide{width:min(760px,calc(100vw - 32px))}
.modal::backdrop{background:rgba(10,14,30,.5);backdrop-filter:blur(2px);animation:fade .2s}
.modal form{display:flex;flex-direction:column;gap:12px;padding:20px 22px}
.modal header{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 4px}.modal header h2{margin:0;font-size:18px}
.modal .x{background:none!important;border:0!important;box-shadow:none!important;color:var(--muted);font-size:24px;line-height:1;padding:4px 8px;cursor:pointer}
.modal .x:hover{color:var(--text)}
.modal footer{display:flex;gap:8px;align-items:center;margin-top:6px}.modal footer span{flex:1}

/* command palette */
.palette{border:1px solid var(--line);border-radius:16px;padding:0;width:min(620px,calc(100vw - 24px));margin-top:12vh;background:var(--panel);color:var(--text);box-shadow:var(--shadow-lg)}
.palette[open]{animation:pop .18s cubic-bezier(.2,.7,.2,1)}
.palette::backdrop{background:rgba(10,14,30,.45);backdrop-filter:blur(3px);animation:fade .15s}
.palette .q{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.palette .q input{flex:1;border:0;height:28px;padding:0;font-size:16px;background:transparent;box-shadow:none!important}
.palette .res{max-height:min(420px,60vh);overflow:auto;padding:8px}
.palette .res h4{margin:8px 10px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}
.palette .res a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;color:var(--text);text-decoration:none}
.palette .res a small{color:var(--muted);margin-left:auto;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.palette .res a.on{background:var(--accent-2);color:var(--accent)}
.palette .res .ic{color:var(--muted)}.palette .res a.on .ic{color:var(--accent)}
.palette .res p{margin:18px;text-align:center;color:var(--muted)}
.palette footer{display:flex;gap:14px;padding:10px 16px;border-top:1px solid var(--line);color:var(--faint);font-size:12px}

/* branches map */
.map{height:320px;border-radius:12px;border:1px solid var(--line);z-index:0}
.map-panel{padding:0;overflow:hidden}.map-panel .map{height:300px;border:0;border-radius:0}
.map-search{display:flex;gap:8px}.map-search input{flex:1}
[data-theme=dark] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}
[data-theme=dark] .leaflet-container{background:#0f172a}

/* phones and tablets: the menu becomes a drawer */
@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:280px;transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.7,.2,1);box-shadow:var(--shadow-lg)}
  body.nav-open .side{transform:none}
  .scrim{display:block;position:fixed;inset:0;background:rgba(10,14,30,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:15}
  body.nav-open .scrim{opacity:1;pointer-events:auto}
  .icon-btn.menu{display:grid}
  .topbar{padding:0 12px;gap:6px}
  .topbar .search{width:auto;flex:none;padding:0 10px}.topbar .search span,.topbar .search kbd{display:none}
  .topbar .crumb{font-size:16px}.topbar .crumb a,.topbar .crumb .sep{display:none}
  .topbar .avatar{display:none}
  .content{padding:16px}
  .login{grid-template-columns:1fr}.login .brandside{padding:28px;min-height:auto}.login .brandside h2{font-size:24px}.login .brandside .pitch p,.login .brandside small{display:none}
}
@media (max-width:560px){.top{grid-auto-flow:row}.top>*{grid-row:auto!important;grid-column:1!important}.top .btn,.top button{justify-self:start;margin-top:10px}.langs{display:none}.form-grid.three{grid-template-columns:1fr}}
.topbar .crumb .muted-part{color:var(--muted);font-weight:500}
.topbar .search{justify-content:flex-start;font-weight:400;box-shadow:none;text-align:left}.topbar .search:hover{background:var(--input);color:var(--text)}