/* ============ DESIGN TOKENS ============ */
:root{
  --brand-900:#062038; --brand-800:#0B2A4A; --brand-700:#123B63; --brand-600:#1B5185;
  --accent-600:#0E9F53; --accent-500:#16B364; --accent-400:#3ECC85; --accent-050:#E8F8EF;
  --amber-500:#E0930B; --amber-050:#FDF4E3;
  --red-500:#DC3A3A; --red-050:#FCECEC;
  --radius-s:10px; --radius-m:16px; --radius-l:22px; --radius-xl:28px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --maxw:1120px;
  --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="light"]{
  --bg:#EEF2F7; --bg-grad-a:#E3EBF4; --bg-grad-b:#F7F9FC;
  --surface:#FFFFFF; --surface-2:#F5F8FB; --surface-3:#EDF2F7;
  --text:#0C1D30; --text-2:#4A5C70; --text-3:#7A8A9C;
  --border:#DDE5EE; --border-2:#C9D5E2;
  --shadow-s:0 1px 2px rgba(11,42,74,.06),0 2px 8px rgba(11,42,74,.05);
  --shadow-m:0 4px 12px rgba(11,42,74,.07),0 12px 32px rgba(11,42,74,.08);
  --shadow-l:0 12px 28px rgba(11,42,74,.10),0 32px 64px rgba(11,42,74,.12);
  --header-bg:rgba(255,255,255,.82);
  --hero:linear-gradient(135deg,#0B2A4A 0%,#123B63 55%,#0E5F7A 100%);
  --ring:rgba(22,179,100,.18);
  /* Smer hovoru — modrá prichádzajúci, zelená odchádzajúci. Nie sú
     v .viz-root, lebo stránka Telefón ten obal nemá. */
  --tel-in:#2a78d6;  --tel-in-bg:rgba(42,120,214,.11);  --tel-in-br:rgba(42,120,214,.30);
  --tel-out:#0E9F53; --tel-out-bg:rgba(14,159,83,.12);  --tel-out-br:rgba(14,159,83,.32);
}
html[data-theme="dark"]{
  --bg:#070E18; --bg-grad-a:#0A1524; --bg-grad-b:#060B13;
  --surface:#101C2C; --surface-2:#16253A; --surface-3:#1D3049;
  --text:#EAF1F9; --text-2:#9FB3C8; --text-3:#6E8299;
  --border:#1E3149; --border-2:#2A4260;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 6px 18px rgba(0,0,0,.45);
  --shadow-l:0 18px 48px rgba(0,0,0,.55);
  --header-bg:rgba(16,28,44,.78);
  --hero:linear-gradient(135deg,#0B2A4A 0%,#10395C 55%,#0C5468 100%);
  --accent-050:rgba(22,179,100,.12);
  --amber-050:rgba(224,147,11,.14);
  --red-050:rgba(220,58,58,.14);
  --ring:rgba(62,204,133,.22);
  --tel-in:#5AA4F0;  --tel-in-bg:rgba(90,164,240,.15);  --tel-in-br:rgba(90,164,240,.34);
  --tel-out:#3ECC85; --tel-out-bg:rgba(62,204,133,.15); --tel-out-br:rgba(62,204,133,.34);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);color:var(--text);
  background:
    radial-gradient(1200px 700px at 12% -8%, var(--bg-grad-a), transparent 60%),
    radial-gradient(900px 600px at 92% 4%, var(--bg-grad-b), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s var(--ease),color .35s var(--ease);
  line-height:1.55;
}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
button{font-family:inherit}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ============ HEADER ============ */
.hdr{position:sticky;top:0;z-index:60;backdrop-filter:blur(18px) saturate(1.6);
  background:var(--header-bg);border-bottom:1px solid var(--border);transition:background .35s var(--ease)}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.logo-img{height:34px;width:auto;display:block;flex:none}
html[data-theme="light"] .logo-dark{display:none}
html[data-theme="dark"]  .logo-light{display:none}
.hdr-sp{flex:1}
.hdr-act{display:flex;align-items:center;gap:8px}

/* kontakty v hlavičke */
.hdr-contact{display:flex;align-items:center;gap:6px;margin-right:6px}
.hc{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;border-radius:12px;
  text-decoration:none;transition:.2s var(--ease)}
.hc:hover{background:var(--surface-2)}
.hc-ic{width:34px;height:34px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);
  color:var(--accent-500);display:grid;place-items:center;flex:none;transition:.2s var(--ease)}
.hc:hover .hc-ic{border-color:var(--accent-500)}
.hc-ic svg{width:16px;height:16px}
.hc-tx{display:flex;flex-direction:column;line-height:1.25}
.hc-tx strong{font-size:13.5px;font-weight:680;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.hc-tx em{font-style:normal;font-size:11px;color:var(--text-3);white-space:nowrap}

/* na užších obrazovkách zostanú z kontaktov len ikony */
@media(max-width:1080px){
  .hc-tx{display:none}
  .hc{padding:0}
  .hdr-contact{gap:8px;margin-right:2px}
}
@media(max-width:620px){
    .logo-img{height:30px}
  .hdr-in{gap:10px;padding:10px 16px}
}
@media(max-width:420px){
  .ghost-btn span,.ghost-btn{font-size:0;padding:0 12px}
  .ghost-btn svg{width:17px;height:17px}
}
.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-2);display:grid;place-items:center;cursor:pointer;
  transition:.2s var(--ease)}
.icon-btn:hover{color:var(--text);border-color:var(--border-2);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
.ghost-btn{height:38px;padding:0 15px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-2);font-size:13.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:.2s var(--ease)}
.ghost-btn:hover{color:var(--text);border-color:var(--border-2)}
.ghost-btn svg{width:16px;height:16px}
.sun{display:none}.moon{display:block}
html[data-theme="dark"] .sun{display:block}
html[data-theme="dark"] .moon{display:none}

/* ============ SCREENS ============ */
.screen{display:none;animation:fade .5s var(--ease)}
.screen.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============ LOGIN ============ */
.login-wrap{min-height:calc(100vh - 63px);display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:56px;max-width:var(--maxw);margin:0 auto;padding:48px 20px}
@media(max-width:900px){.login-wrap{grid-template-columns:1fr;gap:34px;padding:32px 20px 56px}}
.pitch h1{font-size:clamp(30px,4.6vw,46px);font-weight:800;margin-bottom:16px}
.pitch h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent-500),#12B5C9);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pitch p{font-size:17px;color:var(--text-2);max-width:44ch}
.pitch-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:13px}
.pitch-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--text-2)}
.tick{width:22px;height:22px;border-radius:7px;background:var(--accent-050);color:var(--accent-500);
  display:grid;place-items:center;flex:none;margin-top:1px}
.tick svg{width:13px;height:13px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-l);padding:34px 32px;transition:background .35s var(--ease),border-color .35s var(--ease)}
@media(max-width:520px){.card{padding:26px 20px;border-radius:var(--radius-l)}}
.card h2{font-size:22px;font-weight:750;margin-bottom:6px}
.card .sub{font-size:14px;color:var(--text-3);margin-bottom:26px}
.field{margin-bottom:17px}
.field label{display:block;font-size:12.5px;font-weight:650;color:var(--text-2);
  margin-bottom:7px;letter-spacing:.01em}
.inp-shell{position:relative;display:flex;align-items:center}
.inp-shell > svg{position:absolute;left:14px;width:17px;height:17px;color:var(--text-3);pointer-events:none}
.field input{width:100%;height:50px;padding:0 14px 0 42px;border-radius:14px;
  border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);
  font-size:15.5px;font-weight:550;letter-spacing:.01em;outline:none;transition:.2s var(--ease)}
.field input::placeholder{color:var(--text-3);font-weight:450;letter-spacing:0}
.field input:focus{border-color:var(--accent-500);background:var(--surface);box-shadow:0 0 0 4px var(--ring)}
.hint{font-size:11.5px;color:var(--text-3);margin-top:6px}
.btn{width:100%;height:52px;border:0;border-radius:14px;cursor:pointer;font-size:15.5px;font-weight:700;
  color:#fff;background:linear-gradient(120deg,var(--accent-600),var(--accent-500));
  box-shadow:0 6px 18px rgba(14,159,83,.28);display:flex;align-items:center;justify-content:center;gap:9px;
  transition:.22s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(14,159,83,.34)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px}
.btn.secondary{background:var(--surface-2);color:var(--text);border:1.5px solid var(--border);box-shadow:none}
.btn.secondary:hover{border-color:var(--border-2);box-shadow:var(--shadow-s)}
.btn.danger-ghost{background:transparent;color:var(--red-500);border:1.5px solid var(--border);box-shadow:none}
.btn.danger-ghost:hover{background:var(--red-050);border-color:var(--red-500)}
.err{display:none;margin-bottom:16px;padding:11px 14px;border-radius:12px;background:var(--red-050);
  color:var(--red-500);font-size:13.5px;font-weight:600;border:1px solid rgba(220,58,58,.25)}
.err.on{display:block;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.demo{margin-top:22px;padding:13px 15px;border-radius:13px;background:var(--surface-2);
  border:1px dashed var(--border-2);font-size:12.5px;color:var(--text-3);line-height:1.7}
.demo b{color:var(--text-2);font-weight:650}
.help-row{display:flex;justify-content:center;gap:6px;margin-top:20px;font-size:13px;color:var(--text-3)}
.help-row a{color:var(--accent-500);font-weight:650;text-decoration:none}

/* ============ STATUS PAGE ============ */
.status-page{padding:26px 0 80px}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-3);margin-bottom:18px}
.crumb svg{width:14px;height:14px}
.hero{border-radius:var(--radius-xl);background:var(--hero);color:#fff;padding:30px 32px;
  box-shadow:var(--shadow-l);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 90% -20%,rgba(62,204,133,.35),transparent 65%);pointer-events:none}
@media(max-width:520px){.hero{padding:24px 20px;border-radius:var(--radius-l)}}
.hero-top{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;justify-content:space-between;position:relative;z-index:1}
.hero-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;opacity:.72}
.hero h1{font-size:clamp(26px,4vw,36px);font-weight:800;margin:6px 0 10px;font-variant-numeric:tabular-nums}
.hero-dev{font-size:16px;font-weight:600;opacity:.9;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hero-dev svg{width:18px;height:18px;opacity:.85}
.pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 17px;border-radius:999px;
  font-size:14px;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);color:#fff}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent-400);box-shadow:0 0 0 0 rgba(62,204,133,.7);
  animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,204,133,.65)}70%{box-shadow:0 0 0 11px rgba(62,204,133,0)}100%{box-shadow:0 0 0 0 rgba(62,204,133,0)}}
.hero-meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);position:relative;z-index:1}
.hero-meta > div{min-width:120px}
.hero-meta dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;opacity:.65;font-weight:700}
.hero-meta dd{margin:5px 0 0;font-size:16px;font-weight:650;font-variant-numeric:tabular-nums}

.grid{display:grid;grid-template-columns:1fr 350px;gap:22px;margin-top:22px;align-items:start}
@media(max-width:960px){.grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  box-shadow:var(--shadow-m);overflow:hidden;transition:background .35s var(--ease),border-color .35s var(--ease)}
.panel + .panel{margin-top:22px}
.panel-hd{padding:20px 24px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
@media(max-width:520px){.panel-hd{padding:18px 18px 0}}
.panel-hd h3{font-size:16.5px;font-weight:720;display:flex;align-items:center;gap:10px}
.panel-hd h3 svg{width:18px;height:18px;color:var(--accent-500)}
.panel-bd{padding:18px 24px 24px}
@media(max-width:520px){.panel-bd{padding:16px 18px 20px}}
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.badge.ok{background:var(--accent-050);color:var(--accent-600)}
.badge.warn{background:var(--amber-050);color:var(--amber-500)}
.badge.mut{background:var(--surface-3);color:var(--text-3)}
html[data-theme="dark"] .badge.ok{color:var(--accent-400)}

/* progress */
.prog-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.prog-head span:first-child{font-size:13.5px;color:var(--text-2);font-weight:600}
.prog-head span:last-child{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,var(--accent-500),#12B5C9);-webkit-background-clip:text;background-clip:text;color:transparent}
.prog{height:9px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.prog i{display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--accent-600),var(--accent-400));
  transition:width 1.3s var(--ease)}

/* timeline */
.tl{list-style:none;margin:24px 0 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:15px;top:14px;bottom:16px;width:2px;background:var(--border)}
.tl li{position:relative;padding:0 0 26px 48px}
.tl li:last-child{padding-bottom:0}
.tl-node{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);border:2px solid var(--border);
  color:var(--text-3);z-index:1}
.tl-node svg{width:14px;height:14px}
.tl li.done .tl-node{background:var(--accent-500);border-color:var(--accent-500);color:#fff;
  box-shadow:0 0 0 4px var(--accent-050)}
.tl li.now .tl-node{background:var(--surface);border-color:var(--accent-500);color:var(--accent-500);
  box-shadow:0 0 0 4px var(--accent-050)}
.tl li.now .tl-node::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--accent-500);animation:ring 2s infinite}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.tl-t{font-size:15px;font-weight:680;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tl li.pend .tl-t{color:var(--text-3)}
.tl-d{font-size:13px;color:var(--text-3);margin-top:3px;font-variant-numeric:tabular-nums}
.tl-note{margin-top:9px;padding:11px 14px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--border);font-size:13.5px;color:var(--text-2);line-height:1.6}
.now-tag{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-600);background:var(--accent-050);padding:2px 8px;border-radius:6px}
html[data-theme="dark"] .now-tag{color:var(--accent-400)}

/* info rows */
.rows{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.rows > div{background:var(--surface);padding:13px 16px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;font-size:14px}
.rows dt{color:var(--text-3);font-weight:550;flex:none}
.rows dd{margin:0;font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
/* Riadok, ktorý sa NEPRIPOČÍTAVA — je len rozpisom riadku nad ním.
   Odsadenie a slabšie písmo to majú povedať na prvý pohľad. */
.rows > div.pod{padding-top:9px;padding-bottom:9px;font-size:13px}
.rows > div.pod dt{padding-left:14px;position:relative;font-weight:500}
.rows > div.pod dt::before{content:'↳';position:absolute;left:0;opacity:.55}
.rows > div.pod dd{font-weight:550;color:var(--text-2)}

/* photos */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.shot{aspect-ratio:4/3;border-radius:14px;overflow:hidden;position:relative;cursor:pointer;
  border:1px solid var(--border);background:var(--surface-2);transition:.25s var(--ease)}
.shot:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--accent-500)}
.shot svg{width:100%;height:100%;display:block}
.shot-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 11px 8px;font-size:11.5px;font-weight:650;
  color:#fff;background:linear-gradient(transparent,rgba(6,32,56,.85))}
.shot-zoom{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:8px;
  background:rgba(6,32,56,.55);backdrop-filter:blur(4px);display:grid;place-items:center;opacity:0;transition:.25s var(--ease)}
.shot:hover .shot-zoom{opacity:1}
.shot-zoom svg{width:13px;height:13px;color:#fff}

/* price approval */
.quote{border-radius:var(--radius-m);border:1.5px solid var(--amber-500);background:var(--amber-050);padding:20px 22px}
.quote-hd{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.quote-hd .ic{width:34px;height:34px;border-radius:11px;background:var(--amber-500);color:#fff;display:grid;place-items:center;flex:none}
.quote-hd .ic svg{width:18px;height:18px}
.quote-hd h4{font-size:15.5px;font-weight:720}
.quote-hd p{font-size:12.5px;color:var(--text-3)}
.quote-lines{display:grid;gap:9px;margin-bottom:16px}
.quote-lines > div{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;color:var(--text-2)}
.quote-lines > div span:last-child{font-weight:650;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.quote-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:13px;
  border-top:1.5px dashed var(--border-2);margin-bottom:18px}
.quote-total span:first-child{font-size:13.5px;font-weight:650;color:var(--text-2)}
.quote-total b{font-size:27px;font-weight:820;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.quote-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.quote-actions{grid-template-columns:1fr}}
.quote-actions .btn{height:46px;font-size:14.5px}
.quote-foot{margin-top:12px;font-size:11.5px;color:var(--text-3);text-align:center;line-height:1.6}
.quote.resolved{border-color:var(--accent-500);background:var(--accent-050)}
.resolved-msg{display:flex;gap:11px;align-items:center;font-size:14px;font-weight:650;color:var(--accent-600)}
html[data-theme="dark"] .resolved-msg{color:var(--accent-400)}
.resolved-msg svg{width:22px;height:22px;flex:none}

/* docs */
.doc{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--border);
  background:var(--surface-2);text-decoration:none;transition:.22s var(--ease);cursor:pointer}
.doc + .doc{margin-top:10px}
.doc:hover{border-color:var(--accent-500);transform:translateX(3px);box-shadow:var(--shadow-s)}
.doc-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--red-050);color:var(--red-500)}
.doc-ic svg{width:19px;height:19px}
.doc-tx{flex:1;min-width:0}
.doc-tx strong{display:block;font-size:14px;font-weight:680}
.doc-tx span{display:block;font-size:12px;color:var(--text-3)}
.doc > svg:last-child{width:17px;height:17px;color:var(--text-3);flex:none}

/* contact aside */
.contact-row{display:flex;align-items:center;gap:13px;padding:11px 0;text-decoration:none}
.contact-row + .contact-row{border-top:1px solid var(--border)}
.contact-ic{width:36px;height:36px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);
  color:var(--accent-500);display:grid;place-items:center;flex:none}
.contact-ic svg{width:17px;height:17px}
.contact-row div strong{display:block;font-size:14px;font-weight:650}
.contact-row div span{display:block;font-size:12.5px;color:var(--text-3)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,20,36,.88);backdrop-filter:blur(10px);
  display:none;place-items:center;padding:24px;animation:fade .25s var(--ease)}
.lb.on{display:grid}
.lb-box{max-width:760px;width:100%;background:var(--surface);border-radius:var(--radius-l);overflow:hidden;
  box-shadow:var(--shadow-l)}
.lb-box > svg{width:100%;display:block;background:var(--surface-2)}
.lb-cap{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.lb-cap strong{font-size:14.5px;font-weight:680}
.lb-cap span{font-size:12.5px;color:var(--text-3)}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:300;
  background:var(--brand-800);color:#fff;padding:13px 20px;border-radius:14px;font-size:14px;font-weight:600;
  box-shadow:var(--shadow-l);display:flex;align-items:center;gap:10px;transition:transform .45s var(--ease);max-width:92vw}
.toast.on{transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:var(--accent-400);flex:none}

.foot{text-align:center;padding:34px 20px 46px;font-size:12.5px;color:var(--text-3);line-height:1.8}
.foot b{color:var(--text-2);font-weight:650}

/* ============ DOPLNKY PRE OSTRÚ VERZIU ============ */
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.lb-box img{max-height:75vh;object-fit:contain;background:var(--surface-2)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}
[hidden]{display:none!important}
.screen:not(.on){display:none}

/* ============ TLAČ / PDF (protokol.php) ============ */
.print-doc{max-width:820px;margin:0 auto;padding:36px 30px 60px}
.print-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding-bottom:20px;border-bottom:2px solid var(--brand-800);margin-bottom:26px}
.print-hd h1{font-size:24px;font-weight:800}
.print-hd .co{text-align:right;font-size:12.5px;color:var(--text-2);line-height:1.7}
.print-sec{margin-bottom:26px}
.print-sec h2{font-size:14px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);
  margin-bottom:10px;font-weight:750}
table.print{width:100%;border-collapse:collapse;font-size:13.5px}
table.print td{padding:9px 12px;border:1px solid var(--border);vertical-align:top}
table.print td:first-child{width:38%;color:var(--text-3);font-weight:600;background:var(--surface-2)}
.print-actions{display:flex;gap:10px;justify-content:center;margin:28px 0}
.print-actions .btn{width:auto;padding:0 26px}
@media print{
  .hdr,.print-actions,.foot{display:none!important}
  body{background:#fff!important}
  .print-doc{padding:0}
  table.print td:first-child{background:#f4f6f8!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ============ ADMINISTRÁCIA ============ */
.admin-wrap{max-width:980px;margin:0 auto;padding:28px 20px 70px}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:820px){.admin-grid{grid-template-columns:1fr}}
.admin-wrap .field input,.admin-wrap .field select,.admin-wrap .field textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:14.5px;font-family:inherit;outline:none}
.admin-wrap .field input{height:46px;padding-left:14px}
.admin-wrap .field textarea{min-height:80px;resize:vertical}
.admin-wrap .field input:focus,.admin-wrap .field select:focus,.admin-wrap .field textarea:focus{
  border-color:var(--accent-500);box-shadow:0 0 0 4px var(--ring)}
.qi-row{display:grid;grid-template-columns:1fr 120px 40px;gap:8px;margin-bottom:8px}
.qi-row input{margin:0}
.qi-del{border:1px solid var(--border);background:var(--surface-2);color:var(--red-500);
  border-radius:12px;cursor:pointer;font-size:18px;line-height:1}
.flash{padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;margin-bottom:18px}
.flash.ok{background:var(--accent-050);color:var(--accent-600)}
.flash.bad{background:var(--red-050);color:var(--red-500)}

/* ============ UPOZORNENIA NAD ČASOVOU OSOU ============ */
.alert{display:flex;gap:15px;align-items:flex-start;margin-top:22px;padding:18px 22px;
  border-radius:var(--radius-l);border:1.5px solid;box-shadow:var(--shadow-s)}
.alert-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff}
.alert-ic svg{width:20px;height:20px}
.alert strong{display:block;font-size:15.5px;font-weight:720;margin-bottom:4px}
.alert p{font-size:14px;color:var(--text-2);line-height:1.6}
.alert-date{display:inline-block;margin-top:8px;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.alert-warning{border-color:var(--amber-500);background:var(--amber-050)}
.alert-warning .alert-ic{background:var(--amber-500)}
.alert-danger{border-color:var(--red-500);background:var(--red-050)}
.alert-danger .alert-ic{background:var(--red-500)}
@media(max-width:520px){.alert{padding:16px 18px;border-radius:var(--radius-m)}}

/* krok, ktorý zákazka preskočila (napr. nebolo treba objednávať diel) */
.tl li.skip .tl-node{background:var(--surface);border-color:var(--border-2);color:var(--text-3);box-shadow:none}
.tl li.skip .tl-t{color:var(--text-3);font-weight:600}
.skip-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);background:var(--surface-3);padding:2px 8px;border-radius:6px}
.pill-done{background:rgba(62,204,133,.22);border-color:rgba(62,204,133,.45)}

/* ============ HLAVIČKA ADMINISTRÁCIE ============ */
.admin-wrap .sub{font-size:14px;color:var(--text-3)}
@media(max-width:620px){
  .admin-wrap{padding:20px 16px 60px}
}

/* ============ PRIHLÁSENIE DO ADMINISTRÁCIE ============ */
.signin{min-height:calc(100vh - 63px);display:grid;place-items:center;padding:40px 20px 70px}
.signin-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-l);padding:38px 34px 30px;text-align:left;
  position:relative;overflow:hidden}
.signin-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--brand-800),var(--accent-500),#12B5C9)}
.signin-ic{width:52px;height:52px;border-radius:16px;background:var(--hero);color:#fff;
  display:grid;place-items:center;margin-bottom:20px;box-shadow:var(--shadow-m)}
.signin-ic svg{width:24px;height:24px}
.signin-card h2{font-size:21px;font-weight:750;margin-bottom:6px}
.signin-card .sub{font-size:13.5px;color:var(--text-3);margin-bottom:26px;line-height:1.6}
.signin-card .field input{height:48px}
.signin-card .btn{height:50px;margin-top:6px}
.signin-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--text-3);text-align:center}
@media(max-width:520px){.signin-card{padding:30px 22px 24px;border-radius:var(--radius-l)}}

/* ============ NAVIGÁCIA ADMINISTRÁCIE ============ */
.nav{border-top:1px solid var(--border);background:var(--header-bg)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 20px;display:flex;gap:2px;overflow-x:auto}
.nav-a{position:relative;padding:12px 16px;font-size:14px;font-weight:620;color:var(--text-3);
  text-decoration:none;white-space:nowrap;transition:.2s var(--ease)}
.nav-a:hover{color:var(--text)}
.nav-a.on{color:var(--accent-600)}
html[data-theme="dark"] .nav-a.on{color:var(--accent-400)}
.nav-a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--accent-500);border-radius:2px}
.who{display:flex;flex-direction:column;line-height:1.25;margin-right:6px;text-align:right}
.who strong{font-size:13.5px;font-weight:680;color:var(--text)}
.who span{font-size:11.5px;color:var(--text-3)}
@media(max-width:720px){.who{display:none}}

/* ============ TABUĽKY V ADMINISTRÁCII ============ */
.tbl-wrap{overflow-x:auto;margin:0 -4px}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-3);font-weight:750;padding:0 12px 10px;border-bottom:1px solid var(--border)}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.off td{opacity:.55}
.tbl .mono{font-size:13px;color:var(--text-2)}
.tbl .dim{color:var(--text-3)}
.tbl .acts{text-align:right;white-space:nowrap}
.tbl .acts .ghost-btn{height:32px;padding:0 12px;font-size:12.5px;margin-left:6px}
.you{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:6px;background:var(--accent-050);
  color:var(--accent-600);font-size:10.5px;font-weight:750;text-transform:uppercase;letter-spacing:.05em}
html[data-theme="dark"] .you{color:var(--accent-400)}

/* ============ PRÁVA ============ */
.perm-group{margin-bottom:18px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;
  background:var(--surface-2)}
.perm-group h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);
  font-weight:750;margin-bottom:12px}
.perm{display:flex;gap:11px;align-items:flex-start;padding:7px 0;cursor:pointer}
.perm input{width:18px;height:18px;margin-top:1px;accent-color:var(--accent-500);flex:none;cursor:pointer}
.perm input:disabled{cursor:not-allowed;opacity:.6}
.perm span{font-size:14px;color:var(--text);line-height:1.45}
.perm em{display:block;font-style:normal;font-size:11.5px;color:var(--text-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:1px}

/* ============ MODUL DENNÉ TRŽBY ============ */
/* Farby sérií sú z palety overenej na farbosleposť aj kontrast
   (validátor dataviz, svetlý aj tmavý režim). */
.viz-root{
  --s-cash:#2a78d6; --s-card:#eb6834; --s-mimo:#E0930B;
  --c0:#2a78d6; --c1:#eb6834; --c2:#1baf7a; --c3:#eda100;
  --c4:#e87ba4; --c5:#008300; --c6:#4a3aa7; --c7:#e34948;
  --grid:var(--border); --ax:var(--text-3);
}
html[data-theme="dark"] .viz-root{
  --s-cash:#3987e5; --s-card:#d95926; --s-mimo:#EBA61F;
  --c0:#3987e5; --c1:#d95926; --c2:#199e70; --c3:#c98500;
  --c4:#d55181; --c5:#008300; --c6:#9085e9; --c7:#e66767;
}

.day-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.day-head h1{font-size:24px;font-weight:800}
.day-nav{display:flex;gap:8px;align-items:center}
.day-nav input[type=date]{height:38px;padding:0 12px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:14px}
.day-nav .ghost-btn{height:38px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:16px 18px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:4px}
.tile-hero{grid-column:span 2;background:var(--hero);color:#fff;border:0;box-shadow:var(--shadow-m)}
/* Na mobile držíme dva stĺpce — inak by sa predajca k číslam
   doscrolloval až na druhú obrazovku. Hlavná dlaždica ide cez celú šírku. */
@media(max-width:640px){
  .tiles{grid-template-columns:1fr 1fr;gap:11px}
  .tile{padding:13px 14px}
  .tile-hero{grid-column:1 / -1}
  .tile-v{font-size:21px}
  .tile-hero .tile-v{font-size:28px}
}
.tile-l{font-size:12px;font-weight:650;letter-spacing:.02em;opacity:.8;display:flex;align-items:center;gap:7px}
.tile-hero .tile-l{opacity:.75}
.tile-v{font-size:26px;font-weight:820;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile-hero .tile-v{font-size:34px}
.tile-n{font-size:12px;color:var(--text-3)}
.tile-hero .tile-n{color:rgba(255,255,255,.8)}
.tile-hero .tile-n.ok{color:#9df0c0}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.sw-cash{background:var(--s-cash)} .sw-card{background:var(--s-card)}
/* Mimo kasy má farbu štítka „mimo kasy“ — aby sa dlaždica, štítok
   pri položke aj stĺpec v grafe čítali ako jedna vec. */
.sw-mimo{background:var(--s-mimo)}

.note-row{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-m);padding:13px 16px;
  font-size:13.5px;color:var(--text-2);line-height:1.6;margin-bottom:18px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;align-items:start}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* graf */
.legend{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--text-2);margin-bottom:12px}
.legend i{margin-right:6px}
.legend b{color:var(--text);font-variant-numeric:tabular-nums}
.chart-wrap{position:relative}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--grid);stroke-width:1}
.chart .ax{fill:var(--ax);font-size:11px;font-family:var(--font)}
.chart .s-cash{fill:var(--s-cash)}
.chart .s-card{fill:var(--s-card)}
.chart .s-mimo{fill:var(--s-mimo)}
.chart .hit{fill:transparent}
.chart .bar{cursor:default;outline:none}
.chart .bar:hover .hit,.chart .bar:focus .hit{fill:var(--surface-3);opacity:.55}
.tip{position:absolute;top:4px;transform:translateX(-50%);background:var(--brand-800);color:#fff;
  border-radius:12px;padding:10px 14px;font-size:12.5px;line-height:1.7;pointer-events:none;
  box-shadow:var(--shadow-l);min-width:170px;z-index:5}
.tip b{display:block;margin-bottom:4px;font-size:13px}
.tip span{display:flex;align-items:center;gap:7px}
.tip em{font-style:normal;margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.tip .tot{border-top:1px solid rgba(255,255,255,.2);margin-top:5px;padding-top:5px}
.tip .dim{color:rgba(255,255,255,.6);font-size:11.5px}
.tbl-toggle{margin-top:16px}
.tbl-toggle summary{cursor:pointer;font-size:13px;color:var(--text-3);padding:6px 0}
.tbl-toggle summary:hover{color:var(--text-2)}

/* vodorovné pruhy */
.hbar{margin-bottom:14px}
.hbar-t{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;margin-bottom:5px}
.hbar-t b{font-variant-numeric:tabular-nums}
.hbar-track{height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.hbar-track i{display:block;height:100%;border-radius:99px}
.hbar-n{font-size:11.5px;color:var(--text-3)}
.hbar-track i.c0{background:var(--c0)} .hbar-track i.c1{background:var(--c1)}
.hbar-track i.c2{background:var(--c2)} .hbar-track i.c3{background:var(--c3)}
.hbar-track i.c4{background:var(--c4)} .hbar-track i.c5{background:var(--c5)}
.hbar-track i.c6{background:var(--c6)} .hbar-track i.c7{background:var(--c7)}

.ok-txt{color:var(--accent-600);font-weight:700}
html[data-theme="dark"] .ok-txt{color:var(--accent-400)}
.warn-txt{color:var(--amber-500);font-weight:700}
.bad-txt{color:var(--red-500);font-weight:700}

/* =====================================================================
   KOSTRA ERP SYSTÉMU
   Farebný pás cez celú šírku hore + bočný panel s modulmi vľavo.
   Používa sa len v administrácii; zákaznícky portál má vlastnú hlavičku.
   ===================================================================== */
:root{--band-h:58px; --side-w:250px; --side-mini:72px}

/* --- horný pás ---
   Svetlý, aby ERP nepôsobil ťažko, ale s jemným modrým nádychom podľa
   loga — nie biely ako všetko ostatné. V tmavom režime to isté, len
   v nočných tónoch. */
.band{position:fixed;top:0;left:0;right:0;height:var(--band-h);z-index:100;display:flex;
  align-items:center;gap:12px;padding:0 20px;color:var(--text);
  background:linear-gradient(112deg,#E8F1FB 0%,#F1F8FD 58%,#E9F6F2 100%);
  border-bottom:1px solid #D2E1F0;box-shadow:0 1px 3px rgba(11,42,74,.05)}
html[data-theme="dark"] .band{box-shadow:none;
  background:linear-gradient(112deg,#0E2033 0%,#12293C 58%,#102C32 100%);
  border-bottom-color:#1E3349}
/* Tenký farebný prúžok pod pásom — jediné miesto, kde sa v kostre
   objaví značková farba. Bez neho pôsobí rozhranie ako prázdny formulár. */
.band::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--brand-700),var(--accent-500) 45%,#12B5C9)}

.band-mark{display:flex;align-items:center;flex:none;padding-left:2px}
.band-mark img{height:30px;width:auto;display:block}
html[data-theme="light"] .band-mark .logo-dark{display:none}
html[data-theme="dark"]  .band-mark .logo-light{display:none}
.band .sp{flex:1}
.band-act{display:flex;align-items:center;gap:8px}
.band-who{display:flex;align-items:center;gap:9px;font-size:13px;margin-right:4px;white-space:nowrap;
  color:var(--text-2);font-weight:600}
.band-who i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--brand-700),var(--brand-600));color:#fff;
  font-style:normal;font-weight:750;font-size:12.5px}
.band-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:12.5px;
  font-weight:650;cursor:pointer;text-decoration:none;white-space:nowrap;transition:.16s var(--ease)}
.band-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-2)}
.band-btn svg{width:15px;height:15px;stroke-width:2}

/* --- bočný panel --- */
.side{position:fixed;top:var(--band-h);left:0;bottom:0;width:var(--side-w);z-index:80;
  background:var(--surface-2);border-right:1px solid var(--border);display:flex;flex-direction:column;
  transition:transform .25s var(--ease)}
.side-nav{flex:1;overflow-y:auto;padding:12px 10px 24px}
.side-grp{margin:15px 0 5px;padding:0 10px;font-size:10.5px;font-weight:750;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.side-grp:first-child{margin-top:2px}
.side-a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--text-2);
  font-size:14px;font-weight:600;white-space:nowrap;position:relative;text-decoration:none;
  transition:.16s var(--ease)}
.side-a svg{width:19px;height:19px;flex:none;stroke-width:1.9;color:var(--text-3);transition:.16s var(--ease)}
.side-a:hover{background:var(--surface);color:var(--text);box-shadow:var(--shadow-s)}
.side-a:hover svg{color:var(--text-2)}
.side-a.on{background:linear-gradient(90deg,var(--accent-050),rgba(255,255,255,0));
  color:var(--accent-600);font-weight:700;box-shadow:none}
html[data-theme="dark"] .side-a.on{color:var(--accent-400);
  background:linear-gradient(90deg,rgba(22,179,100,.16),rgba(0,0,0,0))}
.side-a.on svg{color:var(--accent-500)}
.side-a.on::before{content:"";position:absolute;left:-10px;top:5px;bottom:5px;width:3px;
  border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--accent-400),var(--accent-600))}
.side-lbl{overflow:hidden;text-overflow:ellipsis}
.side-badge{margin-left:auto;background:var(--accent-500);color:#04240f;font-size:11px;font-weight:800;
  padding:0 7px;border-radius:99px;line-height:19px}

/* --- hlavná plocha --- */
.erp-main{margin-left:var(--side-w);padding-top:var(--band-h);min-height:100vh;
  display:flex;flex-direction:column;position:relative}
/* Jemné svetlo zhora — plocha potom nepôsobí ako mŕtve sivé pozadie. */
.erp-main::before{content:"";position:absolute;left:0;right:0;top:var(--band-h);height:280px;
  pointer-events:none;z-index:0;
  background:radial-gradient(900px 260px at 22% 0%, rgba(22,179,100,.07), transparent 70%),
             radial-gradient(700px 240px at 85% 0%, rgba(27,81,133,.07), transparent 70%)}
html[data-theme="dark"] .erp-main::before{
  background:radial-gradient(900px 260px at 22% 0%, rgba(22,179,100,.10), transparent 70%),
             radial-gradient(700px 240px at 85% 0%, rgba(18,181,201,.08), transparent 70%)}
.erp-main > *{position:relative;z-index:1}
.erp-main .admin-wrap{max-width:1280px;margin:0;padding:26px 24px 60px;width:100%}
.erp-main .foot{text-align:left;padding:0 24px 40px;margin-top:auto}
.erp-main .signin{min-height:calc(100vh - var(--band-h))}
/* prihlásenie a registrácia — bez bočného panela */
.erp-main.solo{margin-left:0}

.scrim{position:fixed;inset:0;background:rgba(6,32,56,.5);z-index:70;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease)}
body.drawer .scrim{opacity:1;pointer-events:auto}
.mob-only{display:none}

/* --- spodná lišta na mobile --- */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--surface);
  border-top:1px solid var(--border);padding:5px 4px calc(5px + env(safe-area-inset-bottom))}
.tabbar a,.tabbar button{flex:1;border:0;background:none;display:flex;flex-direction:column;
  align-items:center;gap:2px;padding:5px 2px;color:var(--text-3);font-size:10.5px;font-weight:650;
  cursor:pointer;text-decoration:none;min-width:0}
.tabbar svg{width:21px;height:21px;stroke-width:1.9;flex:none}
.tabbar span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tabbar .on{color:var(--accent-600)}
html[data-theme="dark"] .tabbar .on{color:var(--accent-400)}

@media(max-width:1150px){
  .erp-main .admin-wrap{padding:24px 20px 60px}
}
@media(max-width:860px){
  .side{transform:translateX(-100%);box-shadow:var(--shadow-m)}
  body.drawer .side{transform:none}
  .erp-main{margin-left:0}
  .tabbar{display:flex}
  .mob-only{display:grid}
  .desk-only{display:none}
  .band{padding:0 14px;gap:8px}
  .band-mark img{height:26px}
  .band-who span{display:none}
  .erp-main .admin-wrap{padding:18px 15px 92px}
  .erp-main .foot{padding:0 15px 92px}
}

/* ============ VÝPIS PREDANÝCH POLOŽIEK ============ */
.hd-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tfoot td{border-top:2px solid var(--border-2);border-bottom:0;padding-top:14px;
  background:var(--surface-2)}
.items-wrap{margin-top:14px}
.items-wrap .tbl{min-width:680px}
.items-tbl tbody tr:hover{background:var(--surface-2)}
.items-tbl td b{font-weight:680}
/* Dlhé názvy tovaru nesmú roztiahnuť tabuľku do šírky obrazovky. */
.items-tbl .c-name{max-width:340px}
.items-tbl .it-grp{display:none}
/* Na mobile skryjeme skupinu a jednotkovú cenu — inak by suma, teda to
   najdôležitejšie, skončila mimo obrazovky a muselo by sa posúvať vodorovne.
   Skupinu ukážeme pod názvom položky. */
@media(max-width:640px){
  .items-wrap .tbl{min-width:0}
  .items-tbl .c-grp,.items-tbl .c-unit,.items-tbl .c-qty{display:none}
  .items-tbl .c-name{max-width:none}
  .items-wrap .tbl th,.items-wrap .tbl td{padding-left:10px;padding-right:10px}
  .items-tbl .it-grp{display:block;font-size:12px;color:var(--text-3);font-weight:550}
  .items-tbl .it-doc{display:none}
  .items-tbl .c-time{white-space:nowrap;vertical-align:top;padding-top:15px}
}
/* malé tlačidlo na prepínanie mesiacov v hlavičke panela */
.ghost-btn.sm{height:30px;padding:0 11px;font-size:14px;line-height:1;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;min-width:34px}
/* Na mobile by sa graf pri zachovaní pomeru strán stlačil na pár desiatok
   pixelov. Necháme mu čitateľnú výšku a mesiac sa prezerá posunom do strany. */
@media(max-width:640px){
  .chart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .chart{width:640px;max-width:none;height:200px}
  .chart .ax{font-size:13px}
}

/* ============ POČÍTADLO HOTOVOSTI ============ */
.inp-row{display:flex;gap:8px;align-items:stretch}
.inp-row input{flex:1;min-width:0}
.inp-row .ghost-btn{flex:none;height:auto;white-space:nowrap}
@media(max-width:520px){
  .inp-row .ghost-btn{padding:0 12px;font-size:0;gap:0}
  .inp-row .ghost-btn svg{width:18px;height:18px}
}

.cash-back{position:fixed;inset:0;background:rgba(6,32,56,.55);z-index:120}
.cash-modal{position:fixed;z-index:121;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(460px,calc(100vw - 28px));max-height:min(88vh,760px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);overflow:hidden}
.cash-hd{display:flex;align-items:center;gap:12px;padding:16px 18px 0}
.cash-hd h3{flex:1;font-size:17px;font-weight:750}
.cash-sub{padding:2px 18px 12px;font-size:13px;color:var(--text-3)}
.cash-body{flex:1;overflow-y:auto;padding:0 18px 8px;-webkit-overflow-scrolling:touch}
.cash-grp{font-size:10.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);margin:12px 0 6px}
.cash-row{display:flex;align-items:center;gap:8px;padding:5px 0}
.cash-n{width:56px;flex:none;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.cash-pm{width:36px;height:38px;flex:none;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-2);font-size:19px;line-height:1;cursor:pointer;
  display:grid;place-items:center;-webkit-user-select:none;user-select:none}
.cash-pm:active{background:var(--surface-3)}
.cash-q{width:62px;flex:none;height:38px;text-align:center;border-radius:10px;
  border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);
  font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;outline:none}
.cash-q:focus{border-color:var(--accent-500);background:var(--surface);box-shadow:0 0 0 3px var(--ring)}
.cash-s{flex:1;text-align:right;font-size:13.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.cash-row.has .cash-s{color:var(--text);font-weight:650}
.cash-ft{flex:none;border-top:1px solid var(--border);background:var(--surface-2);padding:14px 18px}
.cash-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.cash-total span{font-size:13px;color:var(--text-2);font-weight:650}
.cash-total b{font-size:24px;font-weight:820;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cash-acts{display:flex;gap:10px}
.cash-acts .ghost-btn{flex:none}
.cash-acts .btn{flex:1}
@media(max-width:520px){
  .cash-modal{left:0;right:0;bottom:0;top:auto;transform:none;width:100%;max-height:92vh;
    border-radius:20px 20px 0 0;border-bottom:0}
  .cash-ft{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .cash-n{width:52px}
  .cash-pm{width:42px}
}

/* ============ MODUL ÚLOHY ============ */
/* Prehľad je hore v dlaždiciach, samotné úlohy dole. Bočný panel
   z prvej verzie tu už nie je — projekty a zoznamy sú štítky. */

/* Počítadlo v štítku projektu aj zoznamu. */
.ul-n{min-width:20px;text-align:center;background:var(--surface-3);color:var(--text-2);
  font-size:11px;font-weight:750;padding:1px 6px;border-radius:99px}
.ul-n.bad{background:var(--red-050);color:var(--red-500)}
.zk-chip.on .ul-n{background:rgba(255,255,255,.24);color:inherit}

/* Druhý rad štítkov (zoznamy vo vybranom projekte) je tichší, aby bolo
   vidieť, že patrí pod prvý. */
.zk-stavy.je-druhy{margin:-8px 0 16px;padding-left:12px;gap:6px;
  border-left:2px solid var(--border)}
.zk-stavy.je-druhy .zk-chip{font-size:12.5px;padding:5px 11px}

/* Zakladanie projektov a zoznamov — bokom, nech nekričí. */
.ul-sprava{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.ul-add{background:var(--surface);border:1px solid var(--border);border-radius:13px;
  flex:0 1 300px;min-width:0}
@media(max-width:560px){.ul-add{flex:1 1 100%}}
.ul-add summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--text-3);
  padding:9px 14px;border-radius:12px;list-style:none;transition:.16s var(--ease)}
.ul-add summary::-webkit-details-marker{display:none}
.ul-add summary:hover{color:var(--text)}
.ul-add[open] summary{color:var(--text);border-bottom:1px solid var(--border);
  border-radius:12px 12px 0 0}
.ul-add form{padding:12px 14px}
.ul-add .field{margin-bottom:10px}
.ul-add .field input{height:38px;font-size:14px;padding-left:12px}
.ul-add .btn{height:38px;font-size:13.5px;width:auto;padding:0 18px}

/* Hľadanie v úlohách má vedľa poľa ešte výber stavu. */
.zk-hladanie select{height:46px;padding:0 12px;border-radius:13px;flex:none;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-family:inherit;font-size:14.5px}
/* Na mobile: pole na celú šírku, stav a tlačidlo vedľa seba pod ním —
   tri pásy pod sebou by odtlačili úlohy zbytočne nízko. */
@media(max-width:560px){
  .zk-hladanie.ul-hladanie{flex-direction:row;flex-wrap:wrap;gap:8px}
  .zk-hladanie.ul-hladanie .zk-pole{flex:1 1 100%}
  .zk-hladanie.ul-hladanie select{flex:1 1 0;width:auto;min-width:0}
  .zk-hladanie.ul-hladanie .btn{flex:1 1 0;width:auto;padding:0;min-width:0}
}

/* Kto úlohu rieši — môže ich byť viac, tak sú to zaškrtávacie štítky
   a nie rozbaľovačka, v ktorej sa viacnásobný výber ovláda ctrl-om. */
.ludia-vyber{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ludia-kus{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-size:13px;font-weight:650;cursor:pointer;user-select:none;transition:.15s var(--ease)}
.ludia-kus:hover{border-color:var(--border-2);color:var(--text)}
.ludia-kus.on{border-color:transparent;background:var(--accent-600);color:#fff}
/* Dve triedy schválne: .admin-wrap .field input je vyššie v súbore
   a spravilo by z políčka pole na celú šírku a 46 bodov vysoké. */
.ludia-vyber .ludia-kus input[type=checkbox]{
  width:15px;height:15px;min-width:0;flex:none;margin:0;padding:0;
  border-radius:4px;box-shadow:none;background:none;
  accent-color:var(--accent-500);cursor:pointer}
.ludia-vyber .ludia-kus.on input[type=checkbox]{accent-color:#fff}

/* Odkazy pri úlohe. Adresa sa vypisuje len ako pomôcka — nesmie
   roztiahnuť riadok, tak sa skracuje. */
.odkaz-adr{max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;direction:ltr}
@media(max-width:640px){.odkaz-adr{display:none}}
.odkaz-novy{display:flex;gap:8px;flex-wrap:wrap}
.odkaz-novy input{flex:1 1 180px;min-width:0;height:40px;padding:0 13px;border-radius:11px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  font-family:inherit;font-size:14px;outline:none}
.odkaz-novy input:focus{border-color:var(--accent-500);background:var(--surface);box-shadow:0 0 0 3px var(--ring)}
.odkaz-novy .btn{width:auto;padding:0 20px;height:40px;flex:none}

/* Archív projektov */
.ul-archiv-odkaz{margin:-6px 0 16px;font-size:13px}
.ul-archiv-odkaz a{color:var(--text-3);text-decoration:none;border-bottom:1px dashed var(--border-2)}
.ul-archiv-odkaz a:hover{color:var(--text)}
.ul-archiv{margin-bottom:18px}
.ul-archiv-riadok{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;font-size:14px;font-weight:600}
.ul-archiv-meno{min-width:0}
.ul-archiv-meno b{display:block;font-size:14.5px}
.ul-archiv-meno .dim{display:block;font-size:12px;font-weight:500;margin-top:2px}
.ul-archiv-akcie{display:flex;gap:8px;flex:none}
.ul-archiv-akcie .ghost-btn{height:34px;padding:0 12px}
.ghost-btn.je-zle{color:var(--red-500)}
.ghost-btn.je-zle:hover{background:var(--red-050);border-color:var(--red-500);color:var(--red-500)}

/* Potvrdenie mazania — nedá sa vrátiť, tak sa nesnaží byť nenápadné. */
.ul-zmazat{margin:0 0 12px;padding:12px 14px;border-radius:12px;
  background:var(--red-050);border:1px solid var(--red-500)}
.ul-zmazat-t{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--text-2);font-weight:500}
.ul-zmazat-t b{color:var(--red-500)}
.ul-zmazat-r{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ul-zmazat-r input{flex:1 1 220px;min-width:0;height:40px;padding:0 13px;border-radius:11px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-family:inherit;font-size:14px;outline:none}
.ul-zmazat-r input:focus{border-color:var(--red-500);box-shadow:0 0 0 3px var(--red-050)}
.ul-zmazat-r .btn{width:auto;padding:0 18px;height:40px;flex:none}
.ul-zmazat-r .ghost-btn{height:40px;flex:none}
.btn.danger{background:var(--red-500);box-shadow:none}
.btn.danger:hover{filter:brightness(.93)}

/* Riadky v archíve oddeľuje čiara. Medzi dvoma riadkami je vždy
   (schovaný) formulár mazania, preto sa pýtame naň. */
.ul-zmazat + .ul-archiv-riadok{border-top:1px solid var(--border)}

/* Na mobile ide prehľad po dvojiciach — inak by štyri dlaždice pod sebou
   odtlačili samotné úlohy až pod okraj obrazovky. */
@media(max-width:560px){
  /* Dve triedy schválne — inak by neskorší .zk-tiles toto prebil. */
  .tiles.ul-tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tiles.ul-tiles .tile{padding:12px 13px}
  .tiles.ul-tiles .tile-v{font-size:21px}
  .tiles.ul-tiles .tile-l{font-size:11.5px}
  .tiles.ul-tiles .tile-n{font-size:11px}
}

/* Úlohy zoskupené podľa termínu. */
.ul-skupina{margin-bottom:20px}
.ul-skupina:last-child{margin-bottom:0}
.ul-sk-hd{display:flex;align-items:center;gap:9px;margin:0 0 9px 2px;
  font-size:11px;font-weight:780;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3)}
.ul-sk-n{min-width:20px;text-align:center;background:var(--surface-3);color:var(--text-2);
  font-size:11px;font-weight:750;padding:1px 7px;border-radius:99px;letter-spacing:0}
.ul-skupina.je-zle .ul-sk-hd{color:var(--red-500)}
.ul-skupina.je-zle .ul-sk-n{background:var(--red-050);color:var(--red-500)}
.ul-skupina.je-dnes .ul-sk-hd{color:var(--amber-500)}
.ul-skupina.je-dnes .ul-sk-n{background:var(--amber-050);color:var(--amber-500)}
/* Farebný prúžok vľavo — po termíne a dnes sa nájdu okom hneď. */
.ul-skupina.je-zle .ul-list{border-left:3px solid var(--red-500)}
.ul-skupina.je-dnes .ul-list{border-left:3px solid var(--amber-500)}

.ul-filter{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.search-shell{position:relative;display:flex;align-items:center;flex:1;min-width:180px}
.search-shell svg{position:absolute;left:13px;width:16px;height:16px;color:var(--text-3);pointer-events:none}
.search-shell input{width:100%;height:40px;padding:0 14px 0 38px;border-radius:11px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;outline:none}
.search-shell input:focus{border-color:var(--accent-500);box-shadow:0 0 0 3px var(--ring)}
.ul-filter select{height:40px;padding:0 10px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:14px}
.ul-filter .ghost-btn{height:40px}
.ul-new{margin-bottom:16px}
.ul-new textarea{width:100%;border-radius:12px;border:1.5px solid var(--border);background:var(--surface-2);
  color:var(--text);font:inherit;font-size:14.5px;padding:11px 13px;outline:none;resize:vertical}
.ul-new textarea:focus{border-color:var(--accent-500);background:var(--surface);box-shadow:0 0 0 4px var(--ring)}
.ul-new .ghost-btn{margin-left:10px}
.ul-new select,.ul-new input[type=datetime-local]{width:100%;height:46px;border-radius:12px;
  border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);
  font-family:inherit;font-size:14.5px;padding:0 12px;outline:none}

.ul-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  box-shadow:var(--shadow-s);overflow:hidden}
.ul-task{display:flex;align-items:center;gap:12px;padding:13px 16px;text-decoration:none;
  border-bottom:1px solid var(--border);transition:.14s var(--ease)}
.ul-task:last-child{border-bottom:0}
.ul-task:hover{background:var(--surface-2)}
.ul-check{width:22px;height:22px;flex:none;border-radius:7px;border:2px solid var(--border-2);
  display:grid;place-items:center;color:transparent}
.ul-check svg{width:13px;height:13px}
.ul-check.on{background:var(--accent-500);border-color:var(--accent-500);color:#fff}
.ul-body{flex:1;min-width:0}
.ul-title{display:block;font-size:14.5px;font-weight:680;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ul-task.done .ul-title{text-decoration:line-through;color:var(--text-3);font-weight:600}
.ul-pri{font-style:normal;display:inline-grid;place-items:center;width:17px;height:17px;border-radius:5px;
  background:var(--red-050);color:var(--red-500);font-size:11.5px;font-weight:800;margin-right:5px;
  vertical-align:1px}
.ul-meta{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ul-due{flex:none;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:99px;
  background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.ul-due.today{background:var(--amber-050);color:var(--amber-500)}
.ul-due.soon{background:var(--amber-050);color:var(--amber-500)}
.ul-due.overdue{background:var(--red-050);color:var(--red-500)}
.ul-who{flex:none;width:120px;text-align:right;font-size:12.5px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:720px){
  .ul-who{display:none}
  .ul-task{padding:12px 14px;gap:10px}
  .ul-title{white-space:normal}
}

/* ---- detail úlohy: komentáre a prílohy ---- */
.cmt-list{display:flex;flex-direction:column;gap:14px}
.cmt{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.cmt-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.cmt-hd b{font-size:13.5px;font-weight:700}
.cmt-hd span{font-size:12px;color:var(--text-3)}
.cmt p{font-size:14px;line-height:1.65;color:var(--text-2)}
.panel-bd textarea{width:100%;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface-2);color:var(--text);font:inherit;font-size:14.5px;padding:11px 13px;
  outline:none;resize:vertical}
.panel-bd textarea:focus{border-color:var(--accent-500);background:var(--surface);box-shadow:0 0 0 4px var(--ring)}
.panel-bd select{width:100%;height:46px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:14.5px;padding:0 12px;outline:none}
.panel-bd input[type=datetime-local]{width:100%;height:46px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:14.5px;padding:0 12px;outline:none}

.file-list{display:flex;flex-direction:column;gap:2px}
.file-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.file-row:last-child{border-bottom:0}
.file-row a{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-decoration:none;
  font-size:13.5px;font-weight:650;color:var(--text)}
.file-row a:hover{color:var(--accent-600)}
.file-row svg{width:17px;height:17px;flex:none;color:var(--text-3)}
.file-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-row .dim{font-size:12.5px;color:var(--text-3);flex:none}
.file-row form{flex:none}
.file-row .ghost-btn{height:30px;width:32px;padding:0;justify-content:center;font-size:17px;line-height:1}

/* ---- zvonček s upozorneniami ---- */
.bell-wrap{position:relative}
.bell-n{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:var(--red-500);color:#fff;font-size:10.5px;font-weight:800;font-style:normal;
  display:grid;place-items:center;line-height:1;border:2px solid var(--surface)}
.bell-box{position:absolute;right:0;top:calc(100% + 10px);width:min(330px,calc(100vw - 28px));
  background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-l);
  overflow:hidden;z-index:130;max-height:70vh;overflow-y:auto}
.bell-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text)}
.bell-all{font-size:12px;color:var(--accent-600);font-weight:650;text-decoration:none}
.bell-empty{padding:22px 14px;text-align:center;font-size:13px;color:var(--text-3)}
.bell-item{display:block;padding:11px 14px;border-bottom:1px solid var(--border);text-decoration:none}
.bell-item:last-child{border-bottom:0}
.bell-item:hover{background:var(--surface-2)}
.bell-item b{display:block;font-size:13.5px;font-weight:700;color:var(--text)}
.bell-item span{display:block;font-size:12.5px;color:var(--text-2);margin-top:2px}
.bell-item em{display:block;font-style:normal;font-size:11.5px;color:var(--text-3);margin-top:4px}
/* Detail úlohy — obsah vľavo, údaje vpravo. Trieda, nie inline štýl,
   inak by sa na mobile nedal prebiť na jeden stĺpec. */
.task-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
@media(max-width:900px){.task-grid{grid-template-columns:1fr;gap:16px}}
.file-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.file-pick .dim{flex:1;min-width:80px;font-size:13px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-pick .btn{width:auto;height:38px;padding:0 20px;font-size:13.5px}

/* ---- tržby: spočítanie kasy a tržby mimo kasy pod sebou ---- */
.stack2{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px}

/* ---- spôsob úhrady vo výpise položiek ---- */
.pay-tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;
  background:var(--surface-3);color:var(--text-2);white-space:nowrap}
/* Pozor na názvy: samotné .cash / .card by kolidovali s triedou .card
   prihlasovacej karty a štítok by z nej zdedil biele pozadie a tieň. */
.pay-tag.is-cash{background:rgba(42,120,214,.14);color:#2a78d6}
.pay-tag.is-card{background:rgba(235,104,52,.14);color:#c9531f}
html[data-theme="dark"] .pay-tag.is-cash{color:#7fb2f0}
html[data-theme="dark"] .pay-tag.is-card{color:#f5a37f}
.tag-mimo{display:inline-block;font-size:11px;font-weight:750;padding:1px 8px;border-radius:99px;
  background:var(--amber-050);color:var(--amber-500);margin-left:6px;vertical-align:1px}

/* ---- výber skladovej karty ---- */
.pick{position:relative}
.pick-in{position:relative;display:flex;align-items:center}
.pick-ic{position:absolute;left:14px;width:17px;height:17px;color:var(--text-3);pointer-events:none}
/* Selektor je zámerne konkrétnejší: .admin-wrap .field input inde
   prepisuje odsadenie a pole by potom písalo cez ikonu lupy. */
.admin-wrap .pick-in input{width:100%;height:50px;padding:0 44px 0 42px;border-radius:14px;
  border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);
  font-size:15.5px;font-weight:550;outline:none;transition:.2s var(--ease)}
.admin-wrap .pick-in input:focus{border-color:var(--accent-500);background:var(--surface);
  box-shadow:0 0 0 4px var(--ring)}
.admin-wrap .pick.done .pick-in input{font-weight:680;border-color:var(--accent-500);
  background:var(--accent-050)}
.pick.done .pick-ic{color:var(--accent-600)}
.pick-x{position:absolute;right:8px;width:32px;height:32px;border-radius:9px;border:0;
  background:transparent;color:var(--text-3);cursor:pointer;display:grid;place-items:center}
.pick-x:hover{background:var(--surface-3);color:var(--text)}
.pick-x svg{width:16px;height:16px}

/* Ponuka sa vysunie pod pole a prekryje obsah pod ním. */
.pick-drop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:70;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-l);overflow:hidden;
  animation:pickIn .16s var(--ease)}
@keyframes pickIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pick-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);
  font-size:11.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.pick-close{border:0;background:none;color:var(--accent-600);font-size:11.5px;font-weight:750;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:2px 4px}
.pick-body{max-height:320px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pick-opt{display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;text-align:left;
  border:0;background:none;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--border)}
.pick-opt:last-child{border-bottom:0}
.pick-opt.on,.pick-opt:focus{background:var(--surface-2);outline:none}
.pick-name{grid-column:1;font-size:14px;font-weight:650;color:var(--text);line-height:1.35}
.pick-name mark{background:rgba(22,179,100,.22);color:inherit;border-radius:3px;padding:0 1px}
.pick-code{grid-column:2;grid-row:1;font-size:12px;font-weight:700;color:var(--text-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;align-self:start}
.pick-cat{grid-column:1;font-size:12px;color:var(--text-3)}
.pick-none{padding:18px 14px;text-align:center;font-size:13px;color:var(--text-3)}

/* Na mobile sa ponuka vysunie zdola cez celú šírku — v úzkom stĺpci
   by sa do nej názvy tovaru nezmestili. */
@media(max-width:640px){
  body.pick-open{overflow:hidden}
  .pick-drop{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:20px 20px 0 0;
    border-bottom:0;animation:pickUp .2s var(--ease);z-index:130;background:var(--surface)}
  @keyframes pickUp{from{transform:translateY(100%)}to{transform:none}}
  /* Stmavenie pozadia je samostatná vrstva pod ponukou. Ako ::before vnútri
     ponuky by presvitalo cez položky, ktoré vlastné pozadie nemajú. */
  body.pick-open::after{content:"";position:fixed;inset:0;z-index:125;
    background:rgba(6,32,56,.45);animation:pickFade .2s var(--ease)}
  @keyframes pickFade{from{opacity:0}to{opacity:1}}
  .pick-body{background:var(--surface)}
  .pick-hd{padding:13px 16px;font-size:12px}
  .pick-body{max-height:60vh;padding-bottom:env(safe-area-inset-bottom)}
  .pick-opt{padding:13px 16px}
  .pick-name{font-size:15px}
}

@media(max-width:640px){
  /* Úhrada je na mobile v druhom riadku pod názvom. */
  .items-tbl .c-pay{display:none}
}

/* ---- dlaždice ako filter výpisu položiek ---- */
.tile-link{text-decoration:none;cursor:pointer;transition:.16s var(--ease);position:relative}
.tile-link:hover{border-color:var(--border-2);transform:translateY(-1px);box-shadow:var(--shadow-m)}
/* Nápoveda je vidieť stále, nielen po nabehnutí myšou — inak by nikto
   netušil, že sa dlaždicou dá filtrovať. Na dotykových zariadeniach
   sa navyše „hover" nekoná vôbec. */
.tile-link .tile-n{color:var(--text-3);display:flex;align-items:center;gap:5px}
.tile-link:hover .tile-n{color:var(--accent-600)}
html[data-theme="dark"] .tile-link:hover .tile-n{color:var(--accent-400)}
.tile-link.on{border-color:var(--accent-500);box-shadow:0 0 0 3px var(--ring)}
.tile-link.on .tile-n{opacity:1;color:var(--accent-600)}
html[data-theme="dark"] .tile-link.on .tile-n{color:var(--accent-400)}
.panel-hd h3 .pay-tag{margin-left:8px;vertical-align:2px}

/* ---- prepínač obdobia v celkových tržbách ---- */
.per-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.per-nav .ghost-btn{height:38px}
.per-nav .ghost-btn.on,.ghost-btn.sm.on{background:var(--accent-050);border-color:var(--accent-500);
  color:var(--accent-600);font-weight:700}
html[data-theme="dark"] .per-nav .ghost-btn.on,html[data-theme="dark"] .ghost-btn.sm.on{color:var(--accent-400)}
.range-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:14px 16px;box-shadow:var(--shadow-s)}
.range-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:650;color:var(--text-2)}
.range-form input[type=date]{height:42px;padding:0 12px;border-radius:11px;border:1.5px solid var(--border);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:14.5px}
.range-form .btn{height:42px}
@media(max-width:640px){
  .per-nav{width:100%}
  .per-nav .ghost-btn{flex:1;justify-content:center;padding:0 10px}
  .range-form label{flex:1;min-width:130px}
}

/* ---- ponuka nastavení pod ozubeným kolieskom ---- */
.set-box{width:min(240px,calc(100vw - 28px))}
.set-item{display:flex;align-items:center;gap:11px;padding:10px 14px;text-decoration:none;
  font-size:14px;font-weight:600;color:var(--text-2);border-bottom:1px solid var(--border)}
.set-item:last-child{border-bottom:0}
.set-item:hover{background:var(--surface-2);color:var(--text)}
.set-item.on{background:var(--accent-050);color:var(--accent-600);font-weight:700}
html[data-theme="dark"] .set-item.on{color:var(--accent-400)}
.set-item svg{width:18px;height:18px;flex:none;stroke-width:1.9;fill:none;stroke:currentColor}
/* Odhlásenie je v ponuke len na mobile — na počítači je tlačidlo v páse. */
.set-item.mob-item{display:none;border-top:1px solid var(--border)}
@media(max-width:860px){.set-item.mob-item{display:flex}}

/* Na úzkom mobile sa do pásu nezmestí všetko naraz. Koliesko s menom
   je len ozdoba, logo sa zmenší — ikony sú dôležitejšie. */
@media(max-width:640px){
  .band-who{display:none}
  .band-mark img{height:24px;max-width:150px;object-fit:contain}
  .band-act{gap:6px}
}

/* ---- nadpis stránky v ERP ---- */
.admin-wrap h1{font-size:26px;font-weight:820;letter-spacing:-.025em}
.admin-wrap .day-head{margin-bottom:22px}
.admin-wrap .day-head .sub{font-size:13.5px;color:var(--text-3);margin-top:5px}
@media(max-width:640px){
  .admin-wrap h1{font-size:21px}
}


/* =====================================================================
   MODUL PREHĽAD
   Deň, dátum a meniny hore; pod tým to, čo na používateľa čaká.
   ===================================================================== */
.dnes{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  box-shadow:var(--shadow-s);padding:20px 24px;margin-bottom:20px;position:relative;overflow:hidden}
.dnes::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--brand-700),var(--accent-500))}
/* Hotovosť v kase — pás na celú šírku pod dňom. Je to to isté číslo,
   aké je v Denných tržbách pod „Malo by byť v kase“. */
.kasa-pas{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  box-shadow:var(--shadow-s);padding:18px 24px;margin-bottom:20px;
  position:relative;overflow:hidden;text-decoration:none;color:inherit}
.kasa-pas::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--s-cash,#2a78d6)}
.kasa-pas:hover{border-color:var(--accent-500)}
.kasa-t{display:flex;flex-direction:column;gap:2px;padding-left:6px;min-width:0}
.kasa-l{font-size:12.5px;font-weight:650;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.04em}
.kasa-v{font-size:30px;font-weight:820;letter-spacing:-.025em;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1.15}
.kasa-n{font-size:12.5px;color:var(--text-3)}
.kasa-s{display:flex;flex-direction:column;gap:3px;align-items:flex-end;text-align:right}
.kasa-b{font-size:13px;font-weight:750;padding:4px 12px;border-radius:999px;white-space:nowrap}
.kasa-b.je-ok{color:var(--accent-600);background:var(--accent-050)}
.kasa-b.je-zle{color:var(--red-500);background:var(--red-050)}
.kasa-b.je-caka{color:var(--text-3);background:var(--surface-2)}
@media(max-width:560px){
  .kasa-pas{align-items:flex-start}
  .kasa-s{align-items:flex-start;text-align:left}
}

.dnes-den{display:flex;flex-direction:column;gap:2px;padding-left:6px}
.dnes-dow{font-size:24px;font-weight:820;letter-spacing:-.025em;color:var(--text)}
.dnes-dat{font-size:14px;color:var(--text-3)}
.dnes-meniny{display:flex;align-items:center;gap:10px;padding:9px 15px;border-radius:99px;
  background:var(--accent-050);color:var(--accent-600);font-size:14px}
html[data-theme="dark"] .dnes-meniny{color:var(--accent-400)}
.dnes-meniny svg{width:19px;height:19px;flex:none}
.dnes-meniny b{font-weight:750}

.stat-riadok{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.stat{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-2);
  background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:6px 14px}
.stat b{font-weight:800;font-variant-numeric:tabular-nums}
.stat.bad{background:var(--red-050);border-color:transparent;color:var(--red-500)}
.stat.warn{background:var(--amber-050);border-color:transparent;color:var(--amber-500)}

.upo-bod{width:9px;height:9px;flex:none;border-radius:50%;background:var(--accent-500);margin:0 6px}

.cisto{text-align:center;padding:46px 26px}
.cisto-ic{width:56px;height:56px;border-radius:18px;margin:0 auto 16px;display:grid;place-items:center;
  background:var(--accent-050);color:var(--accent-600)}
html[data-theme="dark"] .cisto-ic{color:var(--accent-400)}
.cisto-ic svg{width:28px;height:28px}
.cisto-t{font-size:18px;font-weight:780;margin-bottom:6px}
.cisto-p{font-size:14px;color:var(--text-3);line-height:1.7}

@media(max-width:640px){
  .dnes{padding:16px 16px 16px 18px;gap:12px}
  .dnes-dow{font-size:20px}
  .dnes-meniny{width:100%;justify-content:center}
}

/* ---- blížiace sa narodeniny a meniny ---- */
.oslavy{display:grid;gap:10px;margin-bottom:20px}
.oslava{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:var(--radius-m);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-s)}
/* Pozor na názov: samotné .dnes je hlavička dňa nad prehľadom a riadok
   by z nej zdedil rozloženie aj farebný prúžok. */
.oslava.je-dnes{background:var(--amber-050);border-color:transparent}
.oslava-ic{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--amber-050);color:var(--amber-500)}
.oslava.je-dnes .oslava-ic{background:var(--surface);color:var(--amber-500)}
.oslava-ic svg{width:20px;height:20px}
.oslava-t{font-size:14px;color:var(--text-2);min-width:0}
.oslava-t b{color:var(--text);font-weight:750}
.oslava-t em{font-style:normal;font-weight:750;color:var(--amber-500)}
.oslava-d{display:block;font-size:12px;color:var(--text-3);margin-top:1px}

/* ---- suma s eurom (výbery z kasy) ---- */
.eur-in{position:relative;display:block}
.eur-in .eur-zn{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-size:15px;font-weight:700;color:var(--text-3)}
.admin-wrap .eur-in input{padding-right:34px;font-variant-numeric:tabular-nums}

/* Výber z kasy vo výpise položiek — červený, nech sa nepletie s predajom. */
.pay-tag.is-vyber{background:var(--red-050);color:var(--red-500)}
html[data-theme="dark"] .pay-tag.is-vyber{color:#F08A8A}

/* ---- výbery z kasy pod spočítaním ---- */
.vyb{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.vyb-hd{font-size:14px;font-weight:750;margin-bottom:12px}
.vyb-hd .dim{font-weight:550}
.vyb-list{margin-bottom:14px}
.vyb-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;
  background:var(--surface-2);margin-bottom:7px}
.vyb-nazov{flex:1;min-width:0;font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis}
.vyb-suma{font-weight:750;color:var(--red-500);white-space:nowrap;font-variant-numeric:tabular-nums}
.vyb-row form{display:flex}
.vyb-row .ghost-btn{height:30px;padding:0 11px;font-size:15px;line-height:1}
.vyb-form{display:grid;grid-template-columns:180px 1fr auto;gap:12px;align-items:end}
.vyb-form .field{margin:0}
.vyb-form .btn{height:46px}
@media(max-width:720px){
  .vyb-form{grid-template-columns:1fr}
  .vyb-form .btn{width:100%}
}

/* Krížik na odstránenie vlastného zápisu vo výpise položiek. */
.items-tbl .c-del{width:44px;text-align:right;padding-left:0}
.items-tbl .c-del form{display:inline-flex}
.items-tbl .c-del .ghost-btn{height:28px;padding:0 9px;font-size:14px;line-height:1;
  opacity:0;transition:opacity .15s var(--ease)}
.items-tbl tr:hover .c-del .ghost-btn,.items-tbl .c-del .ghost-btn:focus{opacity:1}
@media(max-width:860px){
  .items-tbl .c-del .ghost-btn{opacity:1}
}

/* Štítok „mimo kasy“ v dlaždiciach tržby. */
.tile-l .tag-mimo{margin-left:7px;vertical-align:1px}
.tile-hero .tag-mimo{background:rgba(255,255,255,.16);color:#fff}

/* =====================================================================
   PRIPOMIENKY
   Plávajúce tlačidlo v pravom dolnom rohu a okno pod ním.
   ===================================================================== */
.fb-btn{position:fixed;right:20px;bottom:20px;z-index:75;display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 20px;border:0;border-radius:99px;cursor:pointer;
  background:linear-gradient(135deg,var(--brand-700),#0C6B80);color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:700;box-shadow:var(--shadow-m);
  transition:.18s var(--ease)}
.fb-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-l)}
.fb-btn span{font-size:16px;line-height:1}

.fb-box{position:fixed;right:20px;bottom:78px;z-index:76;width:min(380px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);padding:18px 20px 16px;animation:fbIn .18s var(--ease)}
@keyframes fbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fb-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.fb-hd h4{font-size:16.5px;font-weight:780}
.fb-hd .icon-btn{width:32px;height:32px;border:0;background:none}
.fb-sub{font-size:13.5px;color:var(--text-3);line-height:1.55;margin-bottom:12px}
.fb-box textarea{width:100%;min-height:96px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface-2);color:var(--text);padding:11px 13px;font-family:inherit;font-size:14.5px;
  outline:none;resize:vertical;transition:.2s var(--ease)}
.fb-box textarea:focus{border-color:var(--accent-500);background:var(--surface);box-shadow:0 0 0 4px var(--ring)}
.fb-file{display:flex;align-items:center;gap:8px;margin:10px 0 14px;padding:9px 12px;border-radius:11px;
  border:1px dashed var(--border-2);color:var(--text-3);font-size:13px;font-weight:600;cursor:pointer;
  transition:.16s var(--ease)}
.fb-file:hover{border-color:var(--accent-500);color:var(--text-2);background:var(--surface-2)}
.fb-file svg{width:16px;height:16px;flex:none}
.fb-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-note{text-align:center;margin-top:12px;font-size:13px}
.fb-note a{color:var(--accent-600);font-weight:650}
html[data-theme="dark"] .fb-note a{color:var(--accent-400)}

@media(max-width:860px){
  /* Nad spodnou lištou, nech sa neprekrývajú. */
  .fb-btn{bottom:calc(66px + env(safe-area-inset-bottom));right:14px;height:42px;padding:0 16px;font-size:13.5px}
  .fb-box{bottom:calc(116px + env(safe-area-inset-bottom));right:14px;left:14px;width:auto}
}

/* ---- stránka pripomienok ---- */
.fb-meta{font-size:12.5px;color:var(--text-3);margin-bottom:8px}
.fb-text{font-size:14.5px;line-height:1.65;color:var(--text)}
.fb-files{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.fb-file-item{display:flex;flex-direction:column;gap:6px;width:150px;text-decoration:none;
  font-size:12px;color:var(--text-3)}
.fb-file-item img{width:150px;height:100px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.fb-file-ic{width:150px;height:100px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);display:grid;place-items:center;font-weight:800;color:var(--text-3)}
.fb-file-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-stav{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--border)}
.fb-stav label{font-size:13px;font-weight:650;color:var(--text-2)}
.fb-stav select{width:auto;min-width:170px;height:38px;padding:0 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-family:inherit;font-size:14px}
.fb-replies{display:grid;gap:12px}
.fb-reply{padding:12px 14px;border-radius:var(--radius-m);background:var(--surface-2)}
.fb-reply.je-autor{background:var(--surface);border:1px solid var(--border)}
.fb-dot{width:9px;height:9px;flex:none;border-radius:50%;margin:0 6px;background:var(--text-3)}
.fb-dot.new{background:var(--amber-500)}
.fb-dot.doing{background:var(--accent-500)}
.fb-dot.done{background:var(--accent-600)}
.fb-dot.closed{background:var(--border-2)}
.ul-filter .ghost-btn.on{background:var(--accent-050);color:var(--accent-600);border-color:transparent}
html[data-theme="dark"] .ul-filter .ghost-btn.on{color:var(--accent-400)}

/* Potvrdenie po odoslaní pripomienky. */
.fb-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  max-width:min(520px,calc(100vw - 32px));padding:12px 20px;border-radius:99px;
  background:var(--accent-600);color:#fff;font-size:14px;font-weight:650;text-align:center;
  box-shadow:var(--shadow-l);cursor:pointer;animation:fbIn .2s var(--ease);transition:opacity .3s var(--ease)}
.fb-toast.prec{opacity:0;pointer-events:none}
@media(max-width:860px){
  .fb-toast{bottom:calc(120px + env(safe-area-inset-bottom))}
}

/* =====================================================================
   TERMINÁL DOCHÁDZKY (/pipanie.php)
   Veľké terče na dotyk — terminál býva tablet na stene.
   ===================================================================== */
.pip-body{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:22px 16px 40px}
.pip-wrap{width:100%;max-width:920px}
.pip-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.pip-logo{height:34px;width:auto}
.pip-clock{text-align:right;line-height:1.15}
.pip-clock b{display:block;font-size:30px;font-weight:820;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pip-clock span{font-size:13px;color:var(--text-3)}

.pip-flash{border-radius:var(--radius-m);padding:14px 18px;margin-bottom:18px;font-size:15px;font-weight:650}
.pip-flash.ok{background:var(--accent-050);color:var(--accent-600)}
.pip-flash.bad{background:var(--red-050);color:var(--red-500)}
html[data-theme="dark"] .pip-flash.ok{color:var(--accent-400)}

.pip-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  box-shadow:var(--shadow-m);padding:40px 30px;text-align:center}
.pip-stop h1{font-size:22px;font-weight:800;margin-bottom:10px}
.pip-stop p{font-size:15px;color:var(--text-2);line-height:1.7}
.pip-hint{font-size:13px;color:var(--text-3);margin-top:10px}

.pip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.pip-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;
  border-radius:var(--radius-l);border:1px solid var(--border);background:var(--surface);
  box-shadow:var(--shadow-s);cursor:pointer;font-family:inherit;transition:.16s var(--ease)}
.pip-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-m);border-color:var(--border-2)}
.pip-card.je-tu{border-color:var(--accent-500);box-shadow:0 0 0 3px var(--ring)}
.pip-ini{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin-bottom:4px;
  background:linear-gradient(135deg,var(--brand-700),#0C6B80);color:#fff;font-size:22px;font-weight:800}
.pip-card.je-tu .pip-ini{background:linear-gradient(135deg,var(--accent-600),var(--accent-500))}
.pip-meno{font-size:16px;font-weight:750;color:var(--text);text-align:center}
.pip-stav{font-size:12.5px;color:var(--text-3);text-align:center}

.pip-modal{position:fixed;inset:0;z-index:120;background:rgba(6,32,56,.55);
  display:flex;align-items:center;justify-content:center;padding:16px}
.pip-modal-in{position:relative;width:100%;max-width:380px;background:var(--surface);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-l);padding:26px 24px 24px;text-align:center}
.pip-modal-in h2{font-size:20px;font-weight:800;margin-bottom:14px}
.pip-x{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;background:none;
  font-size:24px;line-height:1;color:var(--text-3);cursor:pointer}
.pip-kinds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.pip-kind{padding:11px 8px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-2);font-family:inherit;font-size:13.5px;font-weight:650;cursor:pointer;transition:.14s var(--ease)}
.pip-kind.on{background:var(--brand-700);border-color:transparent;color:#fff}
.pip-sub{font-size:13.5px;color:var(--text-3);margin-bottom:10px}
.pip-pin{display:flex;justify-content:center;gap:10px;margin-bottom:16px;min-height:16px}
.pip-pin i{width:13px;height:13px;border-radius:50%;background:var(--surface-3);
  border:1px solid var(--border-2);transition:.14s var(--ease)}
.pip-pin i.plny{background:var(--brand-700);border-color:transparent}
.pip-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pip-key{height:58px;border-radius:14px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);font-family:inherit;font-size:22px;font-weight:700;cursor:pointer;transition:.1s var(--ease)}
.pip-key:active{transform:scale(.96);background:var(--surface-3)}
.pip-key-a{color:var(--text-3);font-size:18px}
.pip-key-ok{background:var(--accent-600);border-color:transparent;color:#fff;font-size:24px}
.pip-foot{text-align:center;font-size:12px;color:var(--text-3);margin-top:26px}

@media(max-width:520px){
  .pip-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pip-card{padding:16px 10px}
  .pip-ini{width:44px;height:44px;font-size:18px}
  .pip-meno{font-size:14px}
  .pip-clock b{font-size:24px}
}

/* ---- nastavenie dochádzky ---- */
.ck{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text-2);cursor:pointer}
.ck input{width:18px;height:18px;accent-color:var(--accent-500);flex:none;cursor:pointer}
.rozvrh{display:grid;gap:8px}
.rozvrh-row{display:grid;grid-template-columns:150px auto 14px auto;gap:10px;align-items:center;
  padding:8px 12px;border-radius:10px;background:var(--surface-2)}
.rozvrh-row input[type=time]{height:38px;padding:0 10px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:14px}
.rozvrh-row .ck{font-weight:650}
.kluc-panel{border-color:var(--accent-500)}
code.kluc{display:block;padding:12px 14px;border-radius:10px;background:var(--surface-3);
  font-size:13px;word-break:break-all;line-height:1.6;user-select:all}
@media(max-width:640px){
  .rozvrh-row{grid-template-columns:1fr 1fr;gap:8px}
  .rozvrh-row .ck{grid-column:1 / -1}
  .rozvrh-row .dim{display:none}
}

/* ---- modul Dochádzka ---- */
.kto-tu{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;padding:12px 16px;
  border-radius:var(--radius-m);background:var(--accent-050)}
.kto-tu-l{font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-600)}
html[data-theme="dark"] .kto-tu-l{color:var(--accent-400)}
.kto-tu-i{font-size:13.5px;color:var(--text-2);background:var(--surface);border-radius:99px;padding:4px 12px}
.kto-tu-i.obed{color:var(--amber-500)}
.kto-tu-i b{color:var(--text);font-weight:700}

.pochvala{display:flex;align-items:center;gap:10px;margin:-4px 0 18px;padding:12px 16px;
  border-radius:var(--radius-m);background:var(--amber-050);color:var(--text-2);font-size:14px}
.pochvala span{font-size:18px;line-height:1}
.pochvala b{color:var(--text)}

.doch-tbl td{vertical-align:middle}
.doch-tbl tr.chyba-den td{background:var(--red-050)}
.doch-tag{display:inline-block;font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:99px;
  margin-left:6px;vertical-align:1px}
.doch-tag.ok{background:var(--accent-050);color:var(--accent-600)}
.doch-tag.bad{background:var(--red-050);color:var(--red-500)}
.doch-tag.warn{background:var(--amber-050);color:var(--amber-500)}
html[data-theme="dark"] .doch-tag.ok{color:var(--accent-400)}
.doch-tbl .c-del{white-space:nowrap;text-align:right}
.doch-tbl .c-del form{display:inline-flex;margin-left:4px}
.doch-tbl .c-del .ghost-btn{height:26px;padding:0 8px;font-size:13px;line-height:1;opacity:.35}
.doch-tbl tr:hover .c-del .ghost-btn{opacity:1}
.doch-add{display:grid;grid-template-columns:auto auto auto auto;gap:12px;align-items:end}
.doch-add .field{margin:0}
.doch-add input,.doch-add select{height:44px}
@media(max-width:720px){
  .doch-add{grid-template-columns:1fr 1fr}
  .doch-add .btn{grid-column:1 / -1;width:100%}
}

/* ---- kalendár dovoleniek ---- */
.kal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.kal-hd{font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);text-align:center;padding-bottom:4px}
.kal-prazdny{min-height:78px}
.kal-den{min-height:78px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  padding:6px 7px;display:flex;flex-direction:column;gap:3px}
.kal-den.vikend{background:var(--surface-2)}
.kal-den.je-sviatok{background:var(--amber-050);border-color:transparent}
.kal-den.dnes{border-color:var(--accent-500);box-shadow:0 0 0 2px var(--ring)}
.kal-c{font-size:13px;font-weight:750;color:var(--text-2)}
.kal-den.dnes .kal-c{color:var(--accent-600)}
.kal-sv{font-size:10.5px;font-weight:650;color:var(--amber-500);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kal-osoba{font-size:11px;font-weight:650;padding:2px 6px;border-radius:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kal-osoba.je-volno{background:var(--accent-050);color:var(--accent-600)}
.kal-osoba.je-caka{background:var(--surface-3);color:var(--text-3)}
html[data-theme="dark"] .kal-osoba.je-volno{color:var(--accent-400)}
.kal-leg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);margin-left:10px}
.kal-leg i{width:11px;height:11px;border-radius:4px;display:inline-block}
.kal-leg i.je-volno{background:var(--accent-500)}
.kal-leg i.je-caka{background:var(--border-2)}
.kal-leg i.je-sviatok{background:var(--amber-500)}
.kal-leg i.je-uloha{background:var(--s-cash,#2A78D6)}

/* Termíny úloh v mriežke — modrou, aby sa nepomýlili s dovolenkou
   (zelená) ani so sviatkom (jantárová). */
.kal-uloha{display:block;font-size:10.5px;font-weight:650;padding:2px 6px;border-radius:6px;
  text-decoration:none;background:rgba(42,120,214,.13);color:var(--s-cash,#2A78D6);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kal-uloha:hover{background:rgba(42,120,214,.22)}
.kal-uloha.overdue,.kal-uloha.today{background:var(--red-050);color:var(--red-500)}
.kal-uloha.je-viac{background:transparent;color:var(--text-3);padding-left:0}
/* Bez tej výnimky by úloha po termíne mala v tme modrý text na červenom
   podklade — pravidlo nižšie by červenú prebilo. */
html[data-theme="dark"] .kal-uloha:not(.overdue):not(.today):not(.je-viac){color:#7fb2f0}

.ziadost{padding:14px 0;border-bottom:1px solid var(--border)}
.ziadost:last-of-type{border-bottom:0}
.ziadost-t{margin-bottom:10px;font-size:14px;color:var(--text-2)}
.ziadost-t b{font-size:15px;color:var(--text);margin-right:8px}
.ziadost-t em{display:block;font-style:normal;font-size:13px;color:var(--text-3);margin-top:3px}
.ziadost-akcie{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ziadost-akcie input{flex:1;min-width:180px;height:42px;padding:0 14px;border-radius:11px;
  border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);
  font-family:inherit;font-size:14px;outline:none}
.ziadost-akcie input:focus{border-color:var(--accent-500);background:var(--surface);box-shadow:0 0 0 4px var(--ring)}
.ziadost-akcie .btn{width:auto;padding:0 20px;height:42px}
.ziadost-akcie .ghost-btn{height:42px}

.ziadost-list{display:grid;gap:8px}
.ziadost-r{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:var(--surface-2)}
.ziadost-d{flex:1;min-width:0;font-size:13.5px;line-height:1.5}
.ziadost-d b{display:block;color:var(--text);font-size:14px}
.ziadost-d em{display:block;font-style:normal;font-size:12.5px;margin-top:2px}
.ziadost-r .ghost-btn{height:30px;padding:0 10px;line-height:1}

@media(max-width:720px){
  .ziadost-akcie input{min-width:100%}
}

/* Kalendár: nárok s formulárom vedľa zoznamu žiadostí. Pod 1000 px
   sa to skladá pod seba — na mobile je stĺpec vždy čitateľnejší. */
.kal-2col{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px}
@media(min-width:1000px){ .kal-2col{grid-template-columns:1fr 1fr;align-items:start} }

/* Kalendár na mobile: sedem stĺpcov musí ostať vedľa seba, inak sa
   stratí prehľad o týždni. Zmestia sa tak, že miesto celého mena
   ukážeme iniciály a namiesto názvu sviatku len slovo „sviatok“. */
.kal-kratke{display:none}
@media(max-width:760px){
  .kal{gap:4px}
  .kal-hd{font-size:9.5px;letter-spacing:.03em}
  .kal-den,.kal-prazdny{min-height:58px}
  .kal-den{padding:4px;gap:2px;border-radius:8px}
  .kal-c{font-size:11.5px}
  .kal-sv{font-size:9px}
  .kal-osoba{font-size:9.5px;padding:1px 4px;border-radius:5px;text-align:center}
  .kal-dlhe{display:none}
  .kal-kratke{display:inline}
  .kal-leg{margin-left:0;font-size:11px}
}

/* Prehľad upozornení v Nastaveniach — zoznam, nie tabuľka: v úzkom
   stĺpci Firmy by sa štyri stĺpce aj tak orezali. */
.ozn-list{border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden}
.ozn-r{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;border-bottom:1px solid var(--border)}
.ozn-r:last-child{border-bottom:0}
.ozn-r:nth-child(odd){background:var(--surface-2)}
.ozn-t b{display:block;font-size:14px}
.ozn-t .dim{font-size:12.5px}
.ozn-k{display:flex;gap:6px;flex-shrink:0}
@media(max-width:520px){
  .ozn-r{flex-direction:column;align-items:flex-start;gap:7px}
}

/* Výber mesiaca v hlavičke grafu — vedľa šípok, aby sa dalo skočiť
   rovno na január a nemuselo sa preklikávať mesiac po mesiaci. */
.mes-vyber{display:inline-flex;margin:0}
.mes-vyber input[type=month]{height:30px;padding:0 8px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.mes-vyber input[type=month]:hover{border-color:var(--border-2)}

/* Štítok „mimo kasy“ pri filtri položiek — rovnaká farba ako v grafe. */
.pay-tag.is-mimo{background:var(--amber-050);color:var(--amber-500)}
html[data-theme="dark"] .pay-tag.is-mimo{color:#EBA61F}

/* ---- Celkové tržby: tovar vs. služby ----
   Zámerne NIE modrá a oranžová: tie na tej istej stránke držia hotovosť
   a kartu. Fialová a zelená sú iný rozmer, nepomýlia sa s úhradami. */
.viz-root{ --s-tovar:#4a3aa7; --s-sluzby:#1baf7a; --s-ine:var(--text-3) }
html[data-theme="dark"] .viz-root{ --s-tovar:#9085e9; --s-sluzby:#199e70 }
.sw-tovar{background:var(--s-tovar)} .sw-sluzby{background:var(--s-sluzby)} .sw-ine{background:var(--s-ine)}

.druh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:14px}
.druh-box{border:1px solid var(--border);border-radius:var(--radius-m);padding:15px 17px;
  background:var(--surface-2);display:flex;flex-direction:column;gap:4px}
.druh-l{font-size:12.5px;font-weight:700;color:var(--text-2);display:flex;align-items:center;gap:8px}
.druh-v{font-size:27px;font-weight:820;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.druh-n{font-size:12.5px;color:var(--text-3)}
.druh-n b{color:var(--text-2)}

/* Pomer jedným pruhom — podiel sa z neho prečíta rýchlejšie než z čísel. */
.druh-pruh{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--surface-3)}
.druh-pruh span{display:block;height:100%}
.druh-pruh .is-tovar{background:var(--s-tovar)}
.druh-pruh .is-sluzby{background:var(--s-sluzby)}
.druh-pruh .is-ine{background:var(--s-ine);opacity:.5}

/* =====================================================================
   ZÁKAZKY — zoznam, hľadanie, filtre
   ===================================================================== */
.zk-hladanie{display:flex;gap:10px;margin-bottom:18px}
.zk-pole{position:relative;flex:1;display:flex;align-items:center}
.zk-pole svg{position:absolute;left:14px;width:18px;height:18px;color:var(--text-3);pointer-events:none}
.zk-pole input{width:100%;height:46px;padding:0 40px 0 42px;border-radius:13px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-family:inherit;font-size:15px}
.zk-pole input:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px var(--ring)}
.zk-zrus{position:absolute;right:12px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;color:var(--text-3);text-decoration:none;font-size:17px;line-height:1}
.zk-zrus:hover{background:var(--surface-3);color:var(--text)}

/* Krúžok pri živom hľadaní — aby bolo vidieť, že sa niečo deje, a zároveň
   aby sa pole pod ním nehýbalo. */
.zk-hlada{position:absolute;right:14px;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--accent-500);
  animation:zkToci .7s linear infinite;pointer-events:none}
@keyframes zkToci{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.zk-hlada{animation-duration:2s}}
.zk-hladanie .btn{width:auto;padding:0 26px;height:46px;flex:none}
@media(max-width:560px){
  .zk-hladanie{flex-direction:column}
  .zk-hladanie .btn{width:100%}
}

/* Dlaždice sú zároveň rýchle filtre. */
.zk-tiles{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.zk-tiles .tile-v{font-size:24px}
.sw-vprace{background:var(--s-cash)}
.sw-dnes{background:var(--amber-500)}
.sw-hotova{background:var(--accent-500)}
.sw-dlho{background:var(--red-500,#DC3A3A)}

/* Štítky stavov — farba podľa toho, v ktorom kroku zákazka je. */
.zk-stavy{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.zk-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-size:12.5px;font-weight:650;text-decoration:none;transition:.15s var(--ease)}
.zk-chip:hover{border-color:var(--border-2);color:var(--text)}
.zk-chip i{font-style:normal;font-size:11px;font-weight:750;color:var(--text-3)}
.zk-chip.on{border-color:transparent;background:var(--accent-600);color:#fff}
.zk-chip.on i{color:rgba(255,255,255,.75)}

.zk-stav{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;
  white-space:nowrap}
.zk-stav.je-vprace,.zk-chip.je-vprace i{color:var(--s-cash)}
.zk-stav.je-vprace{background:rgba(42,120,214,.13)}
.zk-stav.je-caka{background:var(--amber-050);color:var(--amber-500)}
.zk-stav.je-pripravena{background:var(--accent-050);color:var(--accent-600)}
.zk-stav.je-hotova{background:var(--surface-3);color:var(--text-3)}
.zk-stav.je-ine{background:var(--surface-3);color:var(--text-3)}
html[data-theme="dark"] .zk-stav.je-vprace{color:#7fb2f0}

/* Ďalšie filtre sú zabalené — bežne stačí hľadanie a stavy. */
.zk-filtre{border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface)}
.zk-filtre>summary{padding:11px 16px;cursor:pointer;font-size:13.5px;font-weight:650;color:var(--text-2);
  display:flex;align-items:center;gap:8px}
.zk-filtre>summary:hover{color:var(--text)}
.zk-pocet{font-style:normal;font-size:11px;font-weight:750;background:var(--accent-600);color:#fff;
  min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:grid;place-items:center}
.zk-filtre-bd{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  padding:4px 16px 16px;align-items:end}
.zk-filtre-bd .field{margin:0}
.zk-filtre-akcie{display:flex;gap:8px;align-items:center}
.zk-filtre-akcie .btn{width:auto;padding:0 22px}

/* Výpis. Riadok dlho otvorenej zákazky je jemne červený — nech bije do očí. */
.zk-tbl td{vertical-align:top;padding-top:11px;padding-bottom:11px}
.zk-tbl tr.je-dlho td{background:var(--red-050,rgba(220,58,58,.06))}
.zk-tbl .c-doc a{text-decoration:none;color:var(--accent-600)}
.zk-tbl .c-doc a:hover{text-decoration:underline}
.zk-tbl .c-doc .dim,.zk-tbl .c-zar .dim,.zk-tel{display:block;font-size:12px;margin-top:2px}
.zk-tel{color:var(--text-3);text-decoration:none}
.zk-tel:hover{color:var(--accent-600)}
.zk-tbl .c-zar{max-width:320px}
.zk-tbl .c-zar b{font-weight:650}

.zk-strany{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 16px;
  border-top:1px solid var(--border);font-size:13px}

@media(max-width:900px){
  /* Na mobile z tabuľky spravíme karty — sedem stĺpcov sa nezmestí.
     Vľavo je zákazka, vpravo stav a termíny, nech je karta nízka. */
  .zk-tbl thead{display:none}
  /* .tbl má min-width 620px kvôli širokým tabuľkám — tu ju rušíme,
     inak by karty prečnievali a museli by sa posúvať do strany. */
  .zk-tbl{min-width:0}
  .zk-tbl,.zk-tbl tbody,.zk-tbl td{display:block;width:auto}
  .zk-tbl tr{display:grid;grid-template-columns:1fr auto;gap:1px 12px;align-items:start;
    border-bottom:1px solid var(--border);padding:12px 14px}
  .zk-tbl td{border:0;padding:1px 0}
  .zk-tbl .c-zar{max-width:none}
  .zk-tbl td:nth-child(1){grid-column:1;grid-row:1}
  .zk-tbl td:nth-child(2){grid-column:1;grid-row:2}
  .zk-tbl td:nth-child(3){grid-column:1;grid-row:3;margin-top:4px}
  .zk-tbl td:nth-child(4){grid-column:2;grid-row:1}
  .zk-tbl td:nth-child(5){grid-column:2;grid-row:2;text-align:right}
  .zk-tbl td:nth-child(6){grid-column:2;grid-row:3;text-align:right}
  .zk-tbl td:nth-child(7){grid-column:2;grid-row:4;text-align:right}
  .zk-tbl td.num::before{content:"v servise "}
  .zk-tbl td:last-child::before{content:"technik "}
  .zk-tbl td.num::before,.zk-tbl td:last-child::before{color:var(--text-3);font-size:11.5px}
  .zk-tbl .c-doc .dim{display:inline;margin-left:6px}
}

/* ---- detail zákazky ---- */
.zk-spat{display:inline-block;font-size:12.5px;font-weight:650;color:var(--text-3);
  text-decoration:none;margin-bottom:4px}
.zk-spat:hover{color:var(--accent-600)}

.zk-zar{padding:12px 0;border-bottom:1px solid var(--border)}
.zk-zar:first-child{padding-top:0}
.zk-zar:last-child{border-bottom:0;padding-bottom:0}
.zk-zar>b{display:block;font-size:15px;margin-bottom:6px}
.zk-zar-r{display:block;font-size:13px;color:var(--text-2);line-height:1.7}
.zk-zar-r i{font-style:normal;display:inline-block;min-width:110px;color:var(--text-3);font-size:12px}
.zk-zar-r code{font-size:12.5px}

/* Priebeh — najnovšie hore, aktuálny krok zvýraznený. */
.zk-os{list-style:none;margin:0;padding:0;position:relative}
.zk-os::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--border)}
.zk-os li{position:relative;padding:0 0 16px 26px}
.zk-os li:last-child{padding-bottom:0}
.zk-os-bod{position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--border-2)}
.zk-os li.je-teraz .zk-os-bod{background:var(--accent-500);border-color:var(--accent-500);
  box-shadow:0 0 0 3px var(--ring)}
.zk-os-t b{display:block;font-size:14px}
.zk-os li.je-teraz .zk-os-t b{color:var(--accent-600)}
.zk-os-t .dim{font-size:12px}
.zk-os-t em{display:block;font-style:normal;font-size:12.5px;color:var(--text-2);margin-top:3px}

/* Na mobile štítky stavov nezaberajú päť riadkov — posúvajú sa do strany. */
@media(max-width:720px){
  .zk-stavy{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .zk-stavy::-webkit-scrollbar{display:none}
  .zk-chip{flex:none}
}

/* =====================================================================
   TELEFÓN
   ===================================================================== */
.sw-prijaty{background:var(--accent-500)}
.sw-zmeskany{background:var(--red-500)}

/* Smer hovoru je štítok, nie len iný odtieň sivej — v dlhom zozname sa
   prichádzajúce a odchádzajúce inak zlievajú. Modrá a zelená sú z tej istej
   palety ako grafy, teda čitateľné aj pri farbosleposti. */
.tel-smer{display:inline-block;font-size:11px;font-weight:700;margin-left:8px;
  padding:2px 8px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent}
.tel-smer.je-in{color:var(--tel-in);background:var(--tel-in-bg);border-color:var(--tel-in-br)}
.tel-smer.je-out{color:var(--tel-out);background:var(--tel-out-bg);border-color:var(--tel-out-br)}

.tel-pozn{display:block;font-style:normal;font-size:12px;color:var(--text-2);margin-top:3px}
.tel-tbl td{vertical-align:top;padding-top:11px;padding-bottom:11px}

.zk-stav.tel-je-zvoni{background:var(--amber-050);color:var(--amber-500)}
.zk-stav.tel-je-prijaty{background:var(--accent-050);color:var(--accent-600)}
.zk-stav.tel-je-zmeskany{background:var(--red-050);color:var(--red-500)}
.zk-stav.tel-je-ine{background:var(--surface-3);color:var(--text-3)}

/* Panel „Práve teraz“ na stránke modulu. */
.tel-ziva{margin-bottom:20px;border-color:var(--amber-500)}
.tel-ziva .panel-hd h3{color:var(--amber-500)}

/* ---- vyskakovacie okno o hovore ---- */
.hovor-vrstva{position:fixed;right:20px;top:76px;z-index:1200;display:flex;flex-direction:column;
  gap:12px;width:340px;max-width:calc(100vw - 32px)}
.hovor{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--amber-500);
  border-radius:var(--radius-m);box-shadow:var(--shadow-l,0 18px 40px rgba(12,29,48,.18));
  overflow:hidden;animation:hovorPrid .28s var(--ease)}
.hovor.je-znamy{border-left-color:var(--accent-500)}
@keyframes hovorPrid{from{opacity:0;transform:translateX(16px) scale(.98)}to{opacity:1;transform:none}}

.hovor-hd{display:flex;align-items:flex-start;gap:11px;padding:13px 14px 10px}
.hovor-ic{font-size:20px;line-height:1.1;animation:hovorZvoni 1s ease-in-out infinite}
@keyframes hovorZvoni{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.hovor-hd>div{flex:1;min-width:0}
.hovor-hd b{display:block;font-size:12.5px;color:var(--text-3);font-weight:650}
.hovor-cislo{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em}
.hovor-x{background:none;border:0;font-size:20px;line-height:1;color:var(--text-3);cursor:pointer;
  padding:0 2px}
.hovor-x:hover{color:var(--text)}

.hovor-bd{padding:0 14px 14px}
.hovor-meno{margin:0 0 8px;font-size:15px;font-weight:700}
.hovor-meno.je-nezname{font-size:13px;font-weight:600;color:var(--text-3)}
.hovor-klapka{margin:0 0 10px;font-size:12px;color:var(--text-3)}
.hovor-zak{display:block;padding:8px 10px;border-radius:9px;background:var(--surface-2);
  text-decoration:none;color:var(--text);margin-bottom:6px;border:1px solid var(--border)}
.hovor-zak:hover{border-color:var(--accent-500)}
.hovor-zak b{display:inline-block;font-size:13px;color:var(--accent-600);margin-right:7px}
.hovor-zak em{display:block;font-style:normal;font-size:12px;color:var(--text-3);margin-top:3px}
.hovor-viac{margin:4px 0 0;font-size:12px;color:var(--text-3)}

/* Úlohy naviazané na volajúce číslo. Vizuálne odlíšené od zákaziek —
   toto je to, na čo sa človek pri zdvihnutí pozerá ako prvé. */
.hovor-ulohy{margin:8px 0 10px;padding:8px 10px;border-radius:10px;
  background:var(--amber-050);border:1px solid transparent}
.hovor-ulohy-hd{margin:0 0 6px;font-size:10.5px;font-weight:780;letter-spacing:.07em;
  text-transform:uppercase;color:var(--amber-500)}
.hovor-ul{display:flex;align-items:center;gap:8px;padding:5px 0;text-decoration:none;color:var(--text)}
.hovor-ul + .hovor-ul{border-top:1px solid var(--border)}
.hovor-ul b{flex:1;min-width:0;font-size:13px;font-weight:680;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hovor-ul:hover b{text-decoration:underline}

/* Kým hovor beží, okno ostáva; keď skončí, prestane zvoniť a stlmí sa. */
.hovor.je-koniec{border-left-color:var(--border)}
.hovor.je-koniec .hovor-ic{animation:none;opacity:.45}

/* Nová úloha rovno z okna hovoru */
.hovor-akcie{margin-top:10px}
.hovor-nova{width:100%;padding:8px 10px;border-radius:9px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font:inherit;font-size:13px;font-weight:650}
.hovor-nova:hover{border-color:var(--accent-500);color:var(--accent-600)}
.hovor-uloha{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.hovor-uloha input,.hovor-uloha select{width:100%;font:inherit;font-size:13px;
  padding:8px 10px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface);color:var(--text)}
.hovor-uloha input:focus,.hovor-uloha select:focus{outline:none;border-color:var(--accent-500)}
.hovor-uloha-r{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.hovor-uloha-r select{flex:1 1 120px;min-width:0}
.hovor-uloha-r button{flex:0 0 auto;padding:8px 16px;border:0;border-radius:9px;cursor:pointer;
  background:var(--accent-600);color:#fff;font:inherit;font-size:13px;font-weight:700}
.hovor-uloha-r button:disabled{opacity:.6;cursor:default}
.hovor-ok{margin:10px 0 0;font-size:13px;font-weight:650;color:var(--accent-600)}
.hovor-ok a{color:inherit}

@media(max-width:560px){
  .hovor-vrstva{right:10px;left:10px;width:auto;top:68px}
  /* Na telefóne sa dve rozbaľovačky vedľa seba nezmestia. */
  .hovor-uloha-r{flex-direction:column;align-items:stretch}
  .hovor-uloha-r button{width:100%}
}