/* CRM Labmet — vizuální identita (teal/cyan, lab/industrial-tech) + animace */
:root{
  --primary:#0F5E6B; --primary-600:#0B4A55; --accent:#17B3C4; --accent-soft:#E3F2F4;
  --heading:#0F172A; --text:#334155; --text-soft:#5B6B80; --bg:#F8FAFC; --card:#FFFFFF; --line:#E2E8F0;
  --ok:#16A34A; --warn:#D97706; --err:#DC2626;
  --ok-bg:#DCFCE7; --warn-bg:#FEF3C7; --err-bg:#FEE2E2; --none-bg:#EEF2F6;
  --radius:12px;
  --shadow:0 1px 2px rgba(15,94,107,.05),0 2px 8px rgba(15,94,107,.05);
  --shadow-lg:0 10px 30px -8px rgba(15,94,107,.22),0 4px 10px -4px rgba(15,94,107,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--accent);text-decoration:none}

/* ---------- keyframes ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideL{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.9)}60%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35)}50%{box-shadow:0 0 0 5px rgba(220,38,38,0)}}
@keyframes shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
@keyframes growBar{from{width:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:var(--card);color:var(--text-soft);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;border-right:1px solid var(--line);z-index:10}
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px 20px;animation:fadeIn .5s var(--ease)}
.brand .tile{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#17B3C4,#0F5E6B);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 6px 14px -6px rgba(15,94,107,.5);transition:transform .5s var(--ease)}
.brand:hover .tile{transform:rotate(-8deg) scale(1.05)}
.brand-tx b{font-size:19px;font-weight:700;letter-spacing:.2px;color:var(--heading);display:block;line-height:1.1}
.brand-tx span{font-size:12px;color:var(--text-soft);font-weight:500}
.nav{padding:4px 12px;flex:1;overflow:auto}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:#51606e;font-weight:500;margin-bottom:3px;position:relative;transition:background .18s var(--ease),color .18s var(--ease);animation:slideL .4s var(--ease) backwards}
.nav a:nth-child(1){animation-delay:.03s}.nav a:nth-child(2){animation-delay:.06s}.nav a:nth-child(3){animation-delay:.09s}.nav a:nth-child(4){animation-delay:.12s}.nav a:nth-child(5){animation-delay:.15s}.nav a:nth-child(6){animation-delay:.18s}.nav a:nth-child(7){animation-delay:.21s}
.nav a svg{opacity:.85;transition:transform .2s var(--ease)}
.nav a:hover{background:#f1f5f7;color:var(--primary)}
.nav a:hover svg{transform:scale(1.08)}
.nav a.active{background:#e8f3f4;color:var(--primary);font-weight:600}
.nav a.active svg{opacity:1;color:var(--primary)}
.nav a.active::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:22px;background:var(--primary);border-radius:0 3px 3px 0}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:16px;padding:12px 28px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;animation:fadeIn .4s var(--ease)}
.topbar .search{flex:1;max-width:560px;position:relative}
.topbar .search svg:first-child{position:absolute;left:13px;top:11px;color:var(--text-soft);transition:color .2s;z-index:1}
.topbar .search input{width:100%;padding:11px 40px 11px 40px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--bg);transition:box-shadow .2s var(--ease),border-color .2s var(--ease),background .2s}
.topbar .search input:focus{outline:0;border-color:var(--accent);background:var(--card);box-shadow:0 0 0 4px rgba(23,179,196,.14)}
.topbar .search:focus-within svg:first-child{color:var(--accent)}
.topbar .search .kbd{position:absolute;right:12px;top:9px;width:22px;height:22px;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-soft);background:var(--card)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.ic-btn{width:38px;height:38px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s var(--ease),color .18s,border-color .18s,transform .18s}
.ic-btn:hover{background:#f1f5f7;color:var(--primary)}
.theme-toggle:hover{transform:none;border-color:transparent}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
.tb-user{display:flex;align-items:center;gap:10px;padding-left:10px;margin-left:4px;border-left:1px solid var(--line)}
.u-ava{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#17B3C4,#0F5E6B);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.tb-user .u-tx b{font-size:13.5px;color:var(--heading);display:block;line-height:1.2}
.tb-user .u-tx span{font-size:12px;color:var(--text-soft)}
.content{padding:28px;max-width:1280px;width:100%}
.content>*{animation:fadeUp .5s var(--ease) backwards}
.content>h1{animation-delay:.02s}.content>.sub{animation-delay:.06s}.content>.toolbar{animation-delay:.08s}
.content>.kpis{animation-delay:.1s}.content>.card,.content>.grid2{animation-delay:.16s}
h1{font-size:22px;font-weight:700;margin:0 0 4px;letter-spacing:-.3px}
.sub{color:var(--text-soft);margin:0 0 22px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease);animation:fadeUp .5s var(--ease) backwards}
.kpis .kpi:nth-child(1){animation-delay:.1s}.kpis .kpi:nth-child(2){animation-delay:.17s}.kpis .kpi:nth-child(3){animation-delay:.24s}.kpis .kpi:nth-child(4){animation-delay:.31s}
.kpi::after{content:'';position:absolute;inset:0;background:radial-gradient(120px 60px at 100% 0,rgba(23,179,196,.08),transparent);opacity:0;transition:opacity .3s}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.kpi:hover::after{opacity:1}
.kpi .lbl{font-size:12px;color:var(--text-soft);font-weight:500;display:flex;align-items:center;gap:7px}
.kpi .dot{width:9px;height:9px;border-radius:50%;transition:transform .3s}
.kpi:hover .dot{transform:scale(1.3)}
.kpi .val{font-size:30px;font-weight:700;margin-top:8px;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.kpi .hint{font-size:12px;color:var(--text-soft);margin-top:2px}
.kpi.accent{background:linear-gradient(135deg,var(--primary),#15788a);color:#fff;border:0;background-size:160% 160%;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-position .6s var(--ease)}
.kpi.accent:hover{background-position:100% 100%}
.kpi.accent .lbl,.kpi.accent .hint{color:#bfe6ec}

/* ---------- card + table ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .25s var(--ease)}
.card:hover{box-shadow:var(--shadow-lg)}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:15px;font-weight:600;margin:0}
.card-h .muted{font-size:12px;color:var(--text-soft)}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-soft);font-weight:600;padding:11px 20px;border-bottom:1px solid var(--line);background:#fbfcfd}
td{padding:12px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .18s var(--ease),box-shadow .18s var(--ease);position:relative}
tbody tr td:first-child{box-shadow:inset 0 0 0 0 var(--accent);transition:box-shadow .2s var(--ease)}
tbody tr:hover{background:linear-gradient(90deg,#f4fbfc,#fafcfd)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 0 var(--accent)}
td.num{font-variant-numeric:tabular-nums;color:var(--text-soft)}
.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px}
.strong{font-weight:600;color:var(--heading);transition:color .18s}
tbody tr:hover .strong{color:var(--primary)}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;transition:transform .18s var(--ease)}
.badge:hover{transform:translateY(-1px)}
.badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.badge.ok{color:var(--ok);background:var(--ok-bg)}
.badge.soon{color:var(--warn);background:var(--warn-bg)}
.badge.warn{color:var(--warn);background:var(--warn-bg)}
.badge.expired{color:var(--err);background:var(--err-bg);animation:pulse 2.4s ease-in-out infinite}
.badge.none,.badge.gray{color:var(--text-soft);background:var(--none-bg)}

/* ---------- filters / buttons ---------- */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;background:var(--card);transition:box-shadow .2s var(--ease),border-color .2s}
.toolbar input:focus,.toolbar select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(23,179,196,.14)}
.toolbar input[type=search]{min-width:260px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-weight:500;cursor:pointer;transition:transform .15s var(--ease),box-shadow .2s var(--ease),background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(15,94,107,.3);border-color:#cfe0e4}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.primary:hover{background:var(--primary-600);box-shadow:0 8px 18px -6px rgba(15,94,107,.55)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.chip{padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text-soft);font-size:13px;font-weight:500;transition:all .18s var(--ease)}
.chip:hover{border-color:var(--accent);color:var(--primary);transform:translateY(-1px)}
.chip.on{background:var(--accent-soft);color:var(--primary);border-color:transparent;font-weight:600}

/* ---------- pager ---------- */
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:16px;color:var(--text-soft);font-size:13px}
.pager a,.pager span{padding:6px 11px;border-radius:8px;border:1px solid var(--line);background:var(--card);transition:all .18s var(--ease)}
.pager a:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 5px 12px -5px rgba(15,94,107,.3)}
.pager .cur{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ---------- detail ---------- */
.grid2{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.detail-h{display:flex;align-items:center;gap:14px;margin-bottom:18px;animation:fadeUp .5s var(--ease)}
.detail-h .ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.detail-h:hover .ic{transform:rotate(12deg) scale(1.05)}
.detail-h h1{margin:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0}
.fields .f{padding:14px 20px;border-bottom:1px solid var(--line);transition:background .18s}
.fields .f:hover{background:#fafcfd}
.fields .f:nth-child(odd){border-right:1px solid var(--line)}
.fields .f .k{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-soft);font-weight:600;margin-bottom:4px}
.fields .f .v{font-size:14px;color:var(--heading);font-weight:500}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 20px}
.tabs a{padding:12px 14px;font-weight:600;color:var(--text-soft);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s var(--ease)}
.tabs a.active{color:var(--primary);border-bottom-color:var(--accent)}
.tabs a:hover{color:var(--text)}

/* ---------- timeline ---------- */
.timeline{padding:6px 20px 16px}
.tl{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);animation:fadeUp .45s var(--ease) backwards}
.tl:nth-child(1){animation-delay:.04s}.tl:nth-child(2){animation-delay:.09s}.tl:nth-child(3){animation-delay:.14s}.tl:nth-child(4){animation-delay:.19s}.tl:nth-child(5){animation-delay:.24s}.tl:nth-child(n+6){animation-delay:.28s}
.tl:last-child{border-bottom:0}
.tl .tl-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:5px;flex:0 0 auto;box-shadow:0 0 0 4px var(--accent-soft);transition:transform .2s}
.tl:hover .tl-dot{transform:scale(1.25)}
.tl .tl-b{flex:1;min-width:0}
.tl .tl-t{font-weight:600;color:var(--heading)}
.tl .tl-m{color:var(--text-soft);font-size:13px;margin-top:2px;white-space:pre-wrap;word-break:break-word}
.tl .tl-d{color:var(--text-soft);font-size:12px;white-space:nowrap}
.empty{padding:40px 20px;text-align:center;color:var(--text-soft);animation:fadeIn .4s}

/* ---------- side panel ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;transition:box-shadow .25s var(--ease)}
.panel:hover{box-shadow:var(--shadow-lg)}
.panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-soft);margin:0 0 12px}
.panel .cust{display:flex;align-items:center;gap:12px}
.panel .cust .av{width:40px;height:40px;border-radius:10px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;transition:transform .25s var(--ease)}
.panel .cust:hover .av{transform:scale(1.06) rotate(-4deg)}
.panel .cust .nm{font-weight:600;color:var(--heading)}
.panel .row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.panel .row:last-child{border-bottom:0}
.panel .row span{color:var(--text-soft)}

/* ---------- report bars ---------- */
.seg-bar{display:flex;height:24px;border-radius:7px;overflow:hidden;margin-bottom:16px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.seg-bar>div{animation:growBar .9s var(--ease) backwards;transition:filter .2s}
.seg-bar>div:hover{filter:brightness(1.08)}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0b4b56,#0F5E6B 55%,#14788a);background-size:200% 200%;animation:bgShift 14s ease infinite}
@keyframes bgShift{0%,100%{background-position:0 0}50%{background-position:100% 100%}}
.login .box{background:#fff;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.3);padding:38px 36px;width:380px;animation:pop .55s var(--ease)}
.login .lg{display:flex;align-items:center;gap:11px;margin-bottom:6px;color:var(--primary)}
.login .lg b{font-size:22px;font-weight:700}
.login .lg span{font-size:12px;color:var(--text-soft)}
.login h1{font-size:18px;margin:18px 0 20px}
.login label{display:block;font-size:12px;font-weight:600;color:var(--text-soft);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.4px}
.login input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;transition:box-shadow .2s var(--ease),border-color .2s}
.login input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(23,179,196,.16)}
.login .pw{position:relative}
.login .pw .eye{position:absolute;right:10px;top:9px;cursor:pointer;color:var(--text-soft);background:none;border:0;transition:color .2s,transform .2s}
.login .pw .eye:hover{color:var(--primary);transform:scale(1.1)}
.login .btn.primary{width:100%;justify-content:center;margin-top:22px;padding:12px}
.login .hint{font-size:12px;color:var(--text-soft);margin-top:16px;text-align:center}
.login .twofa{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-soft);margin-top:14px;padding:10px 12px;background:var(--accent-soft);border-radius:9px}
.err{background:var(--err-bg);color:var(--err);padding:10px 12px;border-radius:9px;font-size:13px;margin-top:14px;animation:pop .35s var(--ease)}

/* ---------- AUTH (split screen dle vzoru) ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:53% 47%;font-family:'Inter',system-ui,sans-serif}
.auth-left{position:relative;background:#0e5560;color:#fff;overflow:hidden;padding:40px 56px;display:flex;flex-direction:column;isolation:isolate}
.auth-left .grid{position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:38px 38px;mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35))}
.auth-left .ruler{position:absolute;left:0;right:0;top:0;height:16px;z-index:-1;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 15px)}
.auth-left .ruler::after{content:'';position:absolute;left:0;right:0;top:0;height:9px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 1px,transparent 1px 75px)}
.gauge-wm{position:absolute;z-index:-1;right:-70px;top:50%;transform:translateY(-50%);width:640px;height:640px;color:rgba(255,255,255,.11);animation:fadeIn 1.2s var(--ease)}
.auth-left .brand-l{display:flex;align-items:center;gap:12px;color:#fff;animation:slideL .5s var(--ease)}
.auth-left .brand-l .tile{width:40px;height:40px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;color:#0e5560}
.auth-left .brand-l b{font-size:21px;font-weight:700}
.auth-left .mid{margin-top:auto;margin-bottom:auto;max-width:460px;animation:fadeUp .7s var(--ease)}
.eyebrow{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:#7fc5cf;font-weight:600;margin-bottom:18px}
.auth-left h1{font-size:46px;line-height:1.08;font-weight:700;letter-spacing:-1px;margin:0 0 20px;color:#fff}
.auth-left .lead{font-size:16px;line-height:1.6;color:#c6e4e8;max-width:420px}
.auth-left .foot-l{font-size:13px;color:#8cc3cb;animation:fadeIn 1s var(--ease)}

.auth-right{display:flex;align-items:center;justify-content:center;background:#f6f7f9;padding:40px 48px}
.auth-form{width:100%;max-width:392px;animation:fadeUp .6s var(--ease)}
.auth-form .brand-r{display:flex;align-items:center;gap:10px;color:var(--primary);margin-bottom:26px}
.auth-form .brand-r b{font-size:21px;font-weight:700}
.auth-form h1{font-size:26px;font-weight:700;margin:0 0 6px;color:var(--heading)}
.auth-form .desc{color:var(--text-soft);font-size:14px;margin:0 0 26px}
.auth-form label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:8px}
.auth-form .lbl-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px}
.auth-form .lbl-row a{font-size:12.5px;font-weight:500}
.auth-form input[type=email],.auth-form input[type=text],.auth-form input[type=password]{width:100%;padding:13px 14px;border:1px solid #d9e0e6;border-radius:11px;font:inherit;background:#fff;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.auth-form input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(23,179,196,.15)}
.auth-form .pw{position:relative}
.auth-form .pw .eye{position:absolute;right:12px;top:12px;cursor:pointer;color:#94a3b8;background:none;border:0;transition:color .2s}
.auth-form .pw .eye:hover{color:var(--primary)}
.auth-form .remember{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13.5px;color:#334155;cursor:pointer}
.auth-form .remember input{width:18px;height:18px;accent-color:var(--accent)}
.auth-form .submit{width:100%;margin-top:22px;padding:14px;background:var(--primary);color:#fff;border:0;border-radius:11px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .2s}
.auth-form .submit:hover{background:#0c4e59;transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(15,94,107,.6)}
.auth-form .twofa{display:flex;gap:11px;align-items:flex-start;margin-top:22px;padding:14px 16px;background:#fff;border:1px solid #e5eaf0;border-radius:11px;font-size:12.5px;line-height:1.5;color:var(--text-soft)}
.auth-form .twofa svg{flex:0 0 auto;color:var(--accent);margin-top:1px}
.auth-form .copy{margin-top:26px;font-size:12.5px;color:#94a3b8}
.auth-form .err{border-radius:11px}

@media (max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-left{display:none}
  .auth-right{padding:28px 20px}
}

/* ---------- row reveal (JS adds .in) ---------- */
tbody.reveal tr{opacity:0;transform:translateY(8px)}
tbody.reveal tr.in{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}

/* ---------- dashboard (dle grafiky) ---------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.greeting h1{font-size:26px;font-weight:700;letter-spacing:-.4px;margin:0 0 4px;color:var(--heading)}
.greeting .sub{margin:0;color:var(--text-soft)}
.actions{display:flex;gap:10px;flex:0 0 auto}

.watcher{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:22px 24px;margin-bottom:22px;transition:box-shadow .25s var(--ease)}
.watcher:hover{box-shadow:var(--shadow-lg)}
.watcher-h{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.watcher-h .wi{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#17B3C4,#0F5E6B);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.watcher-h .wt b{font-size:16px;color:var(--heading);display:block}
.watcher-h .wt span{font-size:13px;color:var(--text-soft)}
.wkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.wkpi{border:1px solid var(--line);border-radius:11px;padding:16px 16px 14px;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.wkpi:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d7e2e6}
.wkpi .top{display:flex;align-items:center;justify-content:space-between}
.wkpi .lbl{font-size:12.5px;color:var(--text-soft);font-weight:500}
.wkpi .ic{color:var(--text-soft);opacity:.7}
.wkpi .val{font-size:30px;font-weight:700;letter-spacing:-.6px;margin-top:10px;font-variant-numeric:tabular-nums;color:var(--heading)}
.wkpi .val.amber{color:var(--warn)}.wkpi .val.red{color:var(--err)}
.wkpi .hint{font-size:12.5px;color:var(--text-soft);margin-top:3px}

.seg-bar{display:flex;height:12px;border-radius:7px;overflow:hidden;margin-bottom:14px;background:var(--none-bg)}
.seg-bar>div{animation:growBar .9s var(--ease) backwards;transition:filter .2s}
.seg-bar>div:hover{filter:brightness(1.08)}
.legend{display:flex;gap:26px;flex-wrap:wrap;font-size:13px}
.legend .lg{display:flex;align-items:center;gap:8px;color:var(--text-soft)}
.legend .lg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.legend .lg b{color:var(--heading);font-variant-numeric:tabular-nums}

/* avatar zákazníka v tabulce */
.u-chip{display:inline-flex;align-items:center;gap:9px}
.u-chip .c-ava{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex:0 0 auto}
.pill{display:inline-block;padding:3px 11px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:12px;font-weight:600}
.pill.g{background:var(--ok-bg);color:var(--ok)}.pill.r{background:var(--err-bg);color:var(--err)}

/* feed historie */
.feed{padding:4px 0}
.feed-item{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);animation:fadeUp .45s var(--ease) backwards}
.feed-item:last-child{border-bottom:0}
.feed .f-ava{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex:0 0 auto}
.feed .f-b{flex:1;min-width:0}
.feed .f-top{font-size:13.5px}
.feed .f-top b{color:var(--heading)}
.feed .f-top .t{color:var(--text-soft);font-weight:400}
.feed .f-m{color:var(--text-soft);font-size:13px;margin:2px 0}
.feed .f-link{font-size:13px;font-weight:600;color:var(--primary)}
:root[data-theme="dark"] .greeting h1,:root[data-theme="dark"] .watcher-h .wt b,:root[data-theme="dark"] .wkpi .val,:root[data-theme="dark"] .legend .lg b,:root[data-theme="dark"] .feed .f-top b,:root[data-theme="dark"] .tb-user .u-tx b{color:#eef3f7}

/* ---------- náhled dokumentu ---------- */
.doc-preview{padding:36px 24px;text-align:center}
.doc-preview .dp-ic{display:inline-flex;animation:pop .5s var(--ease)}
.doc-preview .dp-name{margin-top:14px;font-weight:600;color:var(--heading);word-break:break-all}
.doc-preview .dp-meta{color:var(--text-soft);font-size:13px;margin-top:4px}
.doc-preview .dp-actions{display:flex;gap:10px;justify-content:center;margin-top:20px}
.doc-preview .dp-note{margin:20px auto 0;max-width:420px;font-size:12.5px;color:var(--text-soft);background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:12px 14px}

/* ---------- plánovač: kalendář měsíců ---------- */
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;padding:20px}
.mo{text-align:center}
.mo-bar{height:70px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:8px}
.mo-fill{width:70%;max-width:34px;border-radius:5px 5px 0 0;animation:growBar .8s var(--ease) backwards;transition:filter .2s}
.mo:hover .mo-fill{filter:brightness(1.1)}
.mo-n{font-weight:700;font-size:15px;color:var(--heading)}
.mo-l{font-size:12px;color:var(--text)}
.mo-y{font-size:11px;color:var(--text-soft)}
@media(max-width:900px){.months{grid-template-columns:repeat(6,1fr)}}

/* ---------- nastavení: funkce / přepínače ---------- */
.feat-sec{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-soft);font-weight:700;padding:16px 20px 8px;background:var(--bg);border-bottom:1px solid var(--line)}
.feat-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-bottom:1px solid var(--line);transition:background .15s}
.feat-row:hover{background:#fafcfd}
.feat-tx{min-width:0}
.feat-sub{margin-top:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--text-soft)}
.switch{position:relative;width:44px;height:25px;flex:0 0 auto;display:inline-block}
.switch i{position:absolute;inset:0;background:var(--none-bg);border-radius:999px;transition:background .22s var(--ease)}
.switch i::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s var(--ease)}
.switch:hover i{filter:brightness(.97)}
.switch.on i{background:var(--primary)}
.switch.on i::after{transform:translateX(19px)}
:root[data-theme="dark"] .feat-row:hover{background:#0f1e29}

/* ---------- TMAVÝ REŽIM ---------- */
:root[data-theme="dark"]{
  --heading:#F8FAFC; --text:#E2E8F0; --text-soft:#9FB0C3; --bg:#0B1620; --card:#122230; --line:#213A4E;
  --accent-soft:#10333c; --none-bg:#1E3446;
  --ok-bg:#12291d; --warn-bg:#2b2010; --err-bg:#2c1416;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.35);
  --shadow-lg:0 14px 36px -8px rgba(0,0,0,.6),0 4px 12px -4px rgba(0,0,0,.5);
}
:root[data-theme="dark"] body{background:var(--bg)}
:root[data-theme="dark"] .topbar{background:rgba(19,36,49,.82)}
:root[data-theme="dark"] .topbar .search input,
:root[data-theme="dark"] .toolbar input,
:root[data-theme="dark"] .toolbar select,
:root[data-theme="dark"] .login input{background:#0e1d28;color:var(--text);border-color:var(--line)}
:root[data-theme="dark"] th{background:#0f1e29}
:root[data-theme="dark"] tbody tr:hover{background:linear-gradient(90deg,#102732,#132431)}
:root[data-theme="dark"] .fields .f:hover{background:#0f1e29}
:root[data-theme="dark"] .strong,:root[data-theme="dark"] .kpi .val,
:root[data-theme="dark"] h1,:root[data-theme="dark"] .fields .f .v,
:root[data-theme="dark"] .tl .tl-t,:root[data-theme="dark"] .panel .cust .nm{color:#eef3f7}
:root[data-theme="dark"] .btn{background:#132431;color:var(--text)}
:root[data-theme="dark"] .chip{background:#132431}
:root[data-theme="dark"] .login .box{background:#101f2b}
:root[data-theme="dark"] .login .box,:root[data-theme="dark"] .login h1{color:var(--text)}
:root[data-theme="dark"] .card-h h2{color:#eef3f7}
:root[data-theme="dark"] .pager a,:root[data-theme="dark"] .pager span{background:#132431}

/* sidebar v tmavém režimu */
:root[data-theme="dark"] .sidebar{background:#0f1e29;border-right-color:#1a2b36}
:root[data-theme="dark"] .nav a{color:#9fb2bf}
:root[data-theme="dark"] .nav a:hover{background:#13242f;color:#eaf3f5}
:root[data-theme="dark"] .nav a.active{background:#10333c;color:#59c6d4}
:root[data-theme="dark"] .nav a.active::before{background:#59c6d4}
:root[data-theme="dark"] .brand-tx b{color:#eef3f7}
:root[data-theme="dark"] .ic-btn:hover{background:#13242f}
:root[data-theme="dark"] .tb-user .u-tx b{color:#eef3f7}
:root[data-theme="dark"] .topbar .search .kbd{background:#132431}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --text:#e4ebf1; --text-soft:#8ea4b2; --bg:#0b1620; --card:#132431; --line:#203342;
    --accent-soft:#10333c; --none-bg:#1b2b37; --ok-bg:#12291d; --warn-bg:#2b2010; --err-bg:#2c1416;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) body{background:var(--bg)}
}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;overflow:auto}
  .nav{display:flex;gap:4px}.nav .sep,.side-foot,.brand span{display:none}
  .nav a.active::before{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}