/* =====================================================================
   HavanaCars ADMIN – dizajn systém
   Nadväzuje na frontend (biela téma, čierno-ružové akcenty),
   ale hustejší layout vhodný na prácu s dátami.
   ===================================================================== */

:root{
  --pink:#b4007a; --pink-600:#930063; --pink-50:#fdf1f8; --pink-100:#f6d3e8;
  --ink:#0d0f12; --ink-2:#1b1f26; --muted:#6b7280; --muted-2:#9aa2ae;
  --bg:#ffffff; --bg-soft:#f7f8fa; --bg-soft-2:#f1f3f6;
  --line:#e8eaee; --line-2:#dfe2e8;
  --ok:#12a15c; --ok-bg:#e8f8f0;
  --busy:#e11d2e; --busy-bg:#fdeced;
  --warn:#b7791f; --warn-bg:#fdf5e6;
  --info:#2563eb; --info-bg:#eaf1fe;
  --grey:#6b7280; --grey-bg:#f1f3f6;
  --radius:14px; --radius-sm:10px;
  --shadow-xs:0 1px 2px rgba(13,15,18,.05);
  --shadow-sm:0 2px 10px rgba(13,15,18,.06);
  --shadow:0 10px 30px rgba(13,15,18,.09);
  --ease:cubic-bezier(.16,1,.3,1);
  --side:264px;
}

*,*::before,*::after{box-sizing:border-box}
/* hidden musí prebiť .a-vyber{display:flex} a podobné — viď style.css */
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg-soft);color:var(--ink-2);
  font-family:'Inter','Segoe UI',system-ui,sans-serif;font-size:14.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:'Sora','Inter',sans-serif;color:var(--ink);margin:0 0 .4em;line-height:1.2;letter-spacing:-.025em}
h1{font-size:1.6rem;font-weight:800}
h2{font-size:1.15rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
p{margin:0 0 .8rem}
::selection{background:var(--pink);color:#fff}
.ico{flex:0 0 auto}

/* ---------- Layout ---------- */
.a-shell{display:flex;min-height:100vh}
.a-main{flex:1;min-width:0;display:flex;flex-direction:column}
.a-body{padding:26px 30px 60px;flex:1}
.a-wrap{max-width:1420px;margin-inline:auto;width:100%}

/* ---------- Bočné menu ---------- */
.a-side{
  width:var(--side);flex:0 0 var(--side);background:var(--ink);color:#96a0ad;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:60;
}
.a-side::-webkit-scrollbar{width:6px}
.a-side::-webkit-scrollbar-thumb{background:#2a3038;border-radius:6px}
.a-side__logo{padding:18px 20px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.a-side__logo .logo-svg{height:38px;width:auto;max-width:100%;object-fit:contain}
.a-side__logo a{display:block}
.a-side__tag{
  display:inline-block;margin-top:9px;padding:2px 9px;border-radius:100px;
  background:rgba(180,0,122,.22);color:var(--pink);
  font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.a-nav{padding:14px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.a-nav__sec{
  padding:16px 10px 7px;font-size:.63rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#5b6673;
}
.a-nav a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  font-size:.885rem;font-weight:520;color:#a8b2be;position:relative;
  transition:background .2s,color .2s,transform .2s var(--ease);
}
.a-nav a .ico{color:#6d7885;transition:color .2s,transform .3s var(--ease)}
.a-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.a-nav a:hover .ico{color:var(--pink);transform:scale(1.12)}
.a-nav a.is-active{background:var(--pink);color:#fff;font-weight:650;box-shadow:0 8px 20px rgba(180,0,122,.34)}
.a-nav a.is-active .ico{color:#fff}
.a-nav__badge{
  margin-left:auto;padding:1px 8px;border-radius:100px;background:rgba(255,255,255,.12);
  font-size:.68rem;font-weight:700;
}
.a-nav a.is-active .a-nav__badge{background:rgba(0,0,0,.22)}
.a-nav__badge--alert{background:var(--busy);color:#fff}
.a-side__foot{padding:14px;border-top:1px solid rgba(255,255,255,.08);font-size:.78rem}
.a-side__foot a{color:#8b95a2}
.a-side__foot a:hover{color:var(--pink)}

/* ---------- Horná lišta ---------- */
.a-top{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:0 30px;height:62px;background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line);
}
.a-top__burger{display:none;width:38px;height:38px;border:1px solid var(--line-2);border-radius:9px;background:#fff;align-items:center;justify-content:center;cursor:pointer}
.a-top__title{font-family:'Sora',sans-serif;font-weight:700;color:var(--ink);font-size:1rem}
.a-top__crumb{font-size:.78rem;color:var(--muted)}
.a-top__right{margin-left:auto;display:flex;align-items:center;gap:10px}
.a-search{position:relative}
.a-search input{
  width:230px;padding:8px 12px 8px 34px;border:1px solid var(--line-2);border-radius:100px;
  background:var(--bg-soft);font-size:.85rem;transition:all .25s;
}
.a-search input:focus{outline:0;width:280px;background:#fff;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-50)}
.a-search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.a-user{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border-radius:100px;border:1px solid var(--line);background:#fff}
.a-avatar{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--ink);color:#fff;font-weight:800;font-size:.78rem;font-family:'Sora',sans-serif;
}
.a-user__n{font-size:.82rem;font-weight:650;color:var(--ink);line-height:1.2}
.a-user__r{font-size:.68rem;color:var(--muted)}

/* ---------- Karty ---------- */
.a-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-xs);overflow:hidden;
}
.a-card__h{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.a-card__h h2,.a-card__h h3{margin:0}
.a-card__h .a-right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.a-card__b{padding:20px}
.a-card__b--flush{padding:0}
.a-grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g-side{grid-template-columns:1fr 340px;align-items:start}

/* ---------- KPI dlaždice ---------- */
.kpi{
  position:relative;padding:18px 20px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.kpi::after{
  content:'';position:absolute;right:-24px;top:-24px;width:88px;height:88px;border-radius:50%;
  background:var(--pink-50);opacity:.9;transition:transform .5s var(--ease);
}
.kpi:hover::after{transform:scale(1.5)}
.kpi > *{position:relative;z-index:1}
.kpi__l{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.kpi__l .ico{color:var(--pink)}
.kpi__v{font-family:'Sora',sans-serif;font-size:1.85rem;font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1.1;margin-top:8px}
.kpi__s{font-size:.76rem;color:var(--muted);margin-top:3px}
.kpi--alert::after{background:var(--busy-bg)}
.kpi--alert .kpi__l .ico{color:var(--busy)}
.kpi--ok::after{background:var(--ok-bg)}
.kpi--ok .kpi__l .ico{color:var(--ok)}

/* ---------- Tabuľky ---------- */
.a-tablewrap{overflow-x:auto}
.a-tablewrap::-webkit-scrollbar{height:8px}
.a-tablewrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
.a-table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:640px}
.a-table th{
  text-align:left;padding:11px 16px;background:var(--bg-soft);color:var(--muted);
  font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:1;
}
.a-table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.a-table tbody tr{transition:background .18s}
.a-table tbody tr:hover{background:var(--pink-50)}
.a-table tbody tr:last-child td{border-bottom:0}
.a-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.a-table .nowrap{white-space:nowrap}
.a-table__t{font-weight:650;color:var(--ink)}
.a-table__s{font-size:.76rem;color:var(--muted)}
.a-table a.a-table__t:hover{color:var(--pink)}
.a-table--zebra tbody tr:nth-child(even){background:#fcfcfd}
.a-table--zebra tbody tr:hover{background:var(--pink-50)}

/* ---------- Odznaky ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:100px;
  font-size:.72rem;font-weight:700;white-space:nowrap;line-height:1.5;
}
.tag::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.tag--ok{background:var(--ok-bg);color:var(--ok)}
.tag--busy{background:var(--busy-bg);color:var(--busy)}
.tag--warn{background:var(--warn-bg);color:var(--warn)}
.tag--info{background:var(--info-bg);color:var(--info)}
.tag--pink{background:var(--pink-50);color:var(--pink)}
.tag--grey{background:var(--grey-bg);color:var(--grey)}
.tag--plain::before{display:none}

/* ---------- Tlačidlá ---------- */
.a-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border:1px solid var(--line-2);border-radius:9px;background:#fff;
  font-size:.85rem;font-weight:620;cursor:pointer;white-space:nowrap;
  transition:all .25s var(--ease);
}
.a-btn:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.a-btn--pink{background:var(--pink);border-color:var(--pink);color:#fff}
.a-btn--pink:hover{background:var(--pink-600);border-color:var(--pink-600);box-shadow:0 8px 20px rgba(180,0,122,.34)}
.a-btn--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.a-btn--dark:hover{background:#000}
.a-btn--danger{color:var(--busy);border-color:#f5c2c7}
.a-btn--danger:hover{background:var(--busy);border-color:var(--busy);color:#fff}
.a-btn--sm{padding:6px 11px;font-size:.78rem;border-radius:8px}
.a-btn--icon{padding:7px;width:34px;height:34px}
.a-btn[disabled]{opacity:.45;pointer-events:none}
.a-btns{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Filtre / záložky ---------- */
.a-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:18px}
.a-tabs a,.a-tabs button{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border:0;border-bottom:2px solid transparent;background:0;cursor:pointer;
  font-size:.86rem;font-weight:600;color:var(--muted);transition:all .25s;
}
.a-tabs a:hover,.a-tabs button:hover{color:var(--ink)}
.a-tabs .is-active{color:var(--pink);border-bottom-color:var(--pink)}
/* Počítadlo v záložke — koľko záznamov je za ňou. */
.a-tabs small{
  padding:1px 7px;border-radius:100px;background:var(--bg-soft-2);color:var(--muted);
  font-size:.7rem;font-weight:700;
}
.a-tabs .is-active small{background:var(--pink-50);color:var(--pink)}
.a-chips{display:flex;gap:7px;flex-wrap:wrap}
.a-chip{
  padding:6px 14px;border:1px solid var(--line-2);border-radius:100px;background:#fff;
  font-size:.8rem;font-weight:600;cursor:pointer;transition:all .25s var(--ease);
}
.a-chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.a-chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.a-chip small{opacity:.55;margin-left:4px}

/* ---------- Formuláre ---------- */
.a-form{display:grid;gap:16px}
.a-f{display:flex;flex-direction:column;gap:6px}
.a-f label{font-size:.78rem;font-weight:700;color:var(--ink)}
.a-f small{font-size:.73rem;color:var(--muted)}
.a-in{
  width:100%;padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:#fff;font-size:.88rem;transition:border-color .2s,box-shadow .2s;
}
.a-in:hover{border-color:var(--muted-2)}
.a-in:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-50)}
textarea.a-in{min-height:88px;resize:vertical}
select.a-in{
  appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.a-fs{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:0}
.a-fs legend{padding:0 8px;font-family:'Sora',sans-serif;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.a-check{display:flex;gap:9px;align-items:flex-start;font-size:.84rem}
.a-check input{margin-top:3px;accent-color:var(--pink);width:16px;height:16px;flex:0 0 auto}
.a-switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:.84rem}
.a-switch input{position:absolute;opacity:0;width:0;height:0}
.a-switch i{width:38px;height:22px;border-radius:100px;background:var(--line-2);position:relative;transition:background .25s}
.a-switch i::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .25s var(--ease);box-shadow:var(--shadow-xs)}
.a-switch input:checked + i{background:var(--pink)}
.a-switch input:checked + i::after{transform:translateX(16px)}

/* ---------- Alerty ---------- */
.a-alert{
  display:flex;gap:11px;align-items:flex-start;padding:13px 16px;
  border-radius:var(--radius-sm);font-size:.86rem;margin-bottom:16px;border:1px solid transparent;
}
.a-alert--ok{background:var(--ok-bg);color:#0c7a45;border-color:#bfe8d3}
.a-alert--err{background:var(--busy-bg);color:var(--busy);border-color:#f5c2c7}
.a-alert--warn{background:var(--warn-bg);color:var(--warn);border-color:#f3e0b8}
.a-alert--info{background:var(--info-bg);color:var(--info);border-color:#c9dcfb}
.a-alert strong{color:inherit}
.a-alert a{text-decoration:underline}

.a-demo{
  display:flex;align-items:center;gap:10px;padding:9px 16px;
  background:linear-gradient(90deg,var(--pink-50),#fff);border-bottom:1px solid var(--pink-100);
  font-size:.8rem;color:var(--ink-2);
}
.a-demo .ico{color:var(--pink)}
.a-demo b{color:var(--pink)}
.a-demo a{text-decoration:underline}

/* Varovanie, ktoré treba naozaj vyriešiť — napr. chýbajúce heslo k SMTP. */
.a-demo--alert{
  background:linear-gradient(90deg,var(--warn-bg),#fff);border-bottom-color:#f3e0b8;
}
.a-demo--alert .ico,.a-demo--alert b{color:var(--warn)}

/* ---------- Rozbaľovací blok (details/summary) ---------- */
.a-detail{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-soft)}
.a-detail > summary{
  padding:11px 15px;cursor:pointer;font-size:.86rem;font-weight:650;color:var(--ink);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.a-detail > summary::-webkit-details-marker{display:none}
.a-detail > summary::before{content:'▸';color:var(--pink);font-size:.9rem;transition:transform .2s}
.a-detail[open] > summary::before{transform:rotate(90deg)}
.a-detail > summary:hover{color:var(--pink)}
.a-detail__b{padding:4px 15px 15px;background:#fff;border-top:1px solid var(--line)}

/* Hodnota na opísanie alebo skopírovanie — má byť jednoznačná. */
.kod{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.82rem;white-space:nowrap}

/* ---------- Voľba z niekoľkých možností (rádiá ako karty) ---------- */
.a-volba{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;cursor:pointer;
  border:1.5px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.a-volba:hover{border-color:var(--pink-100);background:var(--bg-soft)}
.a-volba.is-active{border-color:var(--pink);background:var(--pink-50);box-shadow:0 0 0 3px var(--pink-50)}
.a-volba input{margin-top:3px;flex:0 0 auto;accent-color:var(--pink)}
.a-volba b{display:block;font-size:.92rem;color:var(--ink)}
.a-volba small{display:block;margin-top:3px;font-size:.8rem;color:var(--muted);line-height:1.55}

/* ---------- Progres / merače ---------- */
.bar{height:7px;border-radius:100px;background:var(--bg-soft-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:100px;background:var(--pink);transition:width .8s var(--ease)}
.bar--ok i{background:var(--ok)}
.bar--warn i{background:var(--warn)}
.bar--busy i{background:var(--busy)}
.meter{display:flex;align-items:center;gap:10px}
.meter span{font-size:.78rem;font-weight:700;color:var(--ink);min-width:42px;text-align:right;font-variant-numeric:tabular-nums}
.meter .bar{flex:1;min-width:60px}

/* ---------- Timeline / kalendár ---------- */
.tl2{display:flex;gap:2px}
.tl2 i{flex:1;height:22px;border-radius:4px;background:var(--ok-bg);transition:transform .2s}
.tl2 i:hover{transform:scaleY(1.4)}
.tl2 i.b{background:var(--busy)}
.tl2 i.n{background:var(--info)}
.tl2 i.p{background:var(--bg-soft-2)}
.tl2 i.t{outline:2px solid var(--pink);outline-offset:1px}

/* ---------- Zoznam / definičné páry ---------- */
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:.87rem;margin:0}
.dl dt{color:var(--muted);white-space:nowrap}
.dl dd{margin:0;font-weight:600;color:var(--ink);text-align:right}
.dl--l dd{text-align:left}

.a-list{list-style:none;margin:0;padding:0}
.a-list li{display:flex;gap:12px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);transition:background .2s}
.a-list li:last-child{border-bottom:0}
.a-list li:hover{background:var(--bg-soft)}
.a-list__i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--pink-50);color:var(--pink);flex:0 0 auto}
.a-list__i--busy{background:var(--busy-bg);color:var(--busy)}
.a-list__i--warn{background:var(--warn-bg);color:var(--warn)}
.a-list__i--ok{background:var(--ok-bg);color:var(--ok)}
.a-list__t{font-weight:620;color:var(--ink);font-size:.87rem}
.a-list__s{font-size:.76rem;color:var(--muted)}
.a-list__r{margin-left:auto;text-align:right;flex:0 0 auto}

/* ---------- Vozidlo mini ---------- */
.vmini{display:flex;align-items:center;gap:11px}
.vmini .car-shadow{display:none}

/* ---------- Obrázok vozidla v pevnom rámčeku ----------
   Fotky chodia na výšku aj naširoko. Rámček má vždy rovnaký pomer strán
   a fotka sa doň oreže na stred, takže riadky tabuľky nikdy nepoposkakujú
   a karty majú rovnakú výšku. Kreslená silueta sa nereže — tá sa zmestí celá. */
.voz-media{
  position:relative;overflow:hidden;border-radius:10px;
  background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;
}
.voz-media__f{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
.voz-media--kresba{padding:8px 6px}
.voz-media--kresba .car-svg{width:100%;height:auto;max-height:100%}

/* Koľko fotiek vozidlo má — drobný odznak v rohu */
.voz-media__pocet{
  position:absolute;right:5px;bottom:5px;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:rgba(13,15,18,.68);color:#fff;
  font-size:.68rem;font-weight:650;line-height:18px;text-align:center;
  backdrop-filter:blur(3px);
}

/* V zozname vozidiel je rámček malý — odznak by tam už len zavadzal. */
.vmini__img{width:64px;flex:0 0 64px}
.vmini__img .voz-media__pocet{display:none}

/* Väčší rámček v bočnom paneli detailu */
.a-card__b > .voz-media{margin:-4px 0}

.spz{
  display:inline-block;padding:2px 8px;border:1.5px solid var(--ink);border-radius:5px;
  font-family:'Sora',monospace;font-weight:800;font-size:.74rem;letter-spacing:.04em;
  background:#fff;color:var(--ink);position:relative;padding-left:16px;
}
.spz::before{content:'';position:absolute;left:0;top:0;bottom:0;width:11px;background:#0b3d91;border-radius:3px 0 0 3px}
.spz::after{content:'SK';position:absolute;left:1.5px;bottom:1px;font-size:.42rem;color:#fc0;font-weight:700}

/* ---------- Prázdny stav ---------- */
.a-empty{padding:52px 20px;text-align:center;color:var(--muted)}
.a-empty .ico{margin:0 auto 12px;color:var(--muted-2)}

/* ---------- Vlajky / známky ---------- */
.flag{font-size:1.05rem;line-height:1}
.vig{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.vig:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--pink-100)}
.vig__n{font-weight:700;color:var(--ink);font-size:.87rem}
.vig__s{font-size:.74rem;color:var(--muted)}

/* ---------- Prihlásenie ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#fff}
.login__side{
  position:relative;background:var(--ink);color:#9aa3b0;padding:48px;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
}
.login__side::before{
  content:'';position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(180,0,122,.58),transparent 68%);top:-200px;right:-180px;
}
.login__side::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
}
.login__side > *{position:relative;z-index:1}
.login__side .logo-svg{height:46px;width:auto;max-width:260px;object-fit:contain}
.login__side h2{color:#fff;font-size:1.9rem}
.login__form{display:flex;align-items:center;justify-content:center;padding:40px}
.login__box{width:100%;max-width:370px}
.login__demo{margin-top:22px;padding:14px 16px;border:1px dashed var(--pink-100);border-radius:var(--radius-sm);background:var(--pink-50);font-size:.79rem}
.login__demo table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.76rem}
.login__demo td{padding:3px 0}
.login__demo code{background:#fff;padding:1px 6px;border-radius:4px;border:1px solid var(--pink-100);font-size:.73rem}

/* ---------- Tlač (zmluva, protokol) ---------- */
.doc{max-width:820px;margin:26px auto;background:#fff;padding:44px 52px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);font-size:13px;line-height:1.6}
.doc h1{font-size:1.35rem;margin-bottom:4px}
.doc .logo-svg{height:auto;width:100%;max-width:190px;filter:none}
.doc h2{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin:26px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.doc table{width:100%;border-collapse:collapse;font-size:12.5px}
.doc table td{padding:5px 0;vertical-align:top}
.doc table td:first-child{color:var(--muted);width:38%}
.doc__head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.doc__cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.doc__sign{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-top:52px}
.doc__sign div{border-top:1px solid var(--ink);padding-top:7px;font-size:11.5px;color:var(--muted);text-align:center}
.doc__box{border:1px solid var(--line);border-radius:8px;padding:13px 15px;background:var(--bg-soft)}
.doc__note{font-size:11px;color:var(--muted);line-height:1.55}
.doc ol{padding-left:18px;font-size:11.5px;color:var(--ink-2)}
.doc ol li{margin-bottom:5px}
.doc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.doc__cell{border:1px solid var(--line-2);border-radius:6px;padding:9px 11px;font-size:11.5px}
.doc__cell b{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin-bottom:2px}
.doc__car{background:var(--bg-soft);border-radius:10px;padding:12px}
.doc__dmg{position:relative;border:1px solid var(--line-2);border-radius:10px;padding:14px;background:#fff}
.doc__dmg .car-svg{opacity:.32}
.doc__dmg .car-shadow{display:none}

@media print{
  body{background:#fff}
  .a-side,.a-top,.a-demo,.noprint{display:none!important}
  .a-body{padding:0}
  .doc{margin:0;border:0;box-shadow:none;padding:0;max-width:none}
  .doc__sign{page-break-inside:avoid}
  @page{margin:16mm}
}

/* ---------- Utility ---------- */
.mt0{margin-top:0}.mt8{margin-top:8px}.mt14{margin-top:14px}.mt20{margin-top:20px}.mt28{margin-top:28px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb14{margin-bottom:14px}.mb20{margin-bottom:20px}
.muted{color:var(--muted)}
.small{font-size:.79rem}
.tiny{font-size:.72rem}
.b{font-weight:700}
.tp{color:var(--pink)}
.tr{text-align:right}
.tc{text-align:center}
.flex{display:flex;gap:10px;align-items:center}
.flex-wrap{flex-wrap:wrap}
.ml-auto{margin-left:auto}
.mono{font-variant-numeric:tabular-nums}
.hr{height:1px;background:var(--line);border:0;margin:18px 0}
.len-mobil{display:none}
@media (max-width:720px){
  .len-pc{display:none !important}
  .len-mobil{display:inline}
}

/* ---------- Responzív ---------- */
@media (max-width:1200px){
  .g-side{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:980px){
  .a-side{
    position:fixed;left:0;top:0;height:100dvh;transform:translateX(-100%);
    transition:transform .3s var(--ease);box-shadow:var(--shadow);
    width:min(300px, 86vw);flex-basis:min(300px, 86vw);
  }
  .a-side.is-open{transform:none}
  .a-overlay{
    position:fixed;inset:0;z-index:55;background:rgba(13,15,18,.45);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
  }
  .a-overlay.is-open{opacity:1;visibility:visible}
  body.a-menu-otvorene{overflow:hidden}

  .a-top__burger{display:flex}
  .a-body{padding:18px 14px 40px}
  .a-top{padding:0 14px;gap:12px}
  .a-search input{width:140px}
  .a-search input:focus{width:170px}
  .g3,.g2{grid-template-columns:1fr}
  .login{grid-template-columns:1fr}
  .login__side{display:none}
  .doc{padding:26px 20px}
  .doc__cols,.doc__sign{grid-template-columns:1fr;gap:20px}
  .doc__grid{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   MOBIL — telefóny do 720 px
   Najväčšia zmena: tabuľky sa rozpadnú na karty, aby sa nemuselo
   posúvať do strán. Názvy stĺpcov dopĺňa JavaScript.
   ===================================================================== */
@media (max-width:720px){

  body{font-size:15px}
  .a-body{padding:16px 12px 40px}
  h1{font-size:1.3rem}
  .a-top{height:58px;padding:0 12px}
  .a-top__title{font-size:.95rem}
  .a-top__crumb{display:none}

  /* horná lišta: hľadanie sa rozbalí cez celú šírku */
  .a-search{position:static}
  .a-search input{width:38px;padding-left:34px;padding-right:6px;cursor:pointer}
  .a-search input:focus{
    position:absolute;left:12px;right:12px;top:9px;width:auto;z-index:60;
    padding-right:14px;box-shadow:0 0 0 3px var(--pink-50), var(--shadow);
  }
  .a-user{padding:4px}
  .a-user__n,.a-user__r{display:none}

  /* KPI dlaždice po dvoch */
  .g4,.g3,.g2,.g-auto{grid-template-columns:repeat(2,1fr)}
  .a-grid{gap:12px}
  .kpi{padding:14px 15px}
  .kpi__l{font-size:.65rem;letter-spacing:.07em}
  .kpi__v{font-size:1.45rem;margin-top:5px}
  .kpi__s{font-size:.7rem}
  .kpi::after{width:60px;height:60px;right:-18px;top:-18px}

  /* karty */
  .a-card__h{padding:14px 16px;gap:10px}
  .a-card__b{padding:16px}
  .a-card__h h2{font-size:1.02rem}
  .a-card__h .a-right{margin-left:0;width:100%}

  /* filtre ako posuvný pás */
  .a-chips{
    flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:2px 16px 6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .a-chips::-webkit-scrollbar{display:none}
  .a-chip{flex:0 0 auto;min-height:40px;display:flex;align-items:center}

  .a-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .a-tabs::-webkit-scrollbar{display:none}
  .a-tabs a,.a-tabs button{flex:0 0 auto;white-space:nowrap}

  /* ---------- TABUĽKY → KARTY ---------- */
  .a-tablewrap{overflow:visible}

  .a-table--karty{min-width:0;width:100%;display:block}
  .a-table--karty thead{display:none}
  .a-table--karty tbody,
  .a-table--karty tfoot{display:block}

  .a-table--karty tbody tr{
    display:block;background:#fff;border:1px solid var(--line);
    border-radius:12px;margin:0 0 10px;padding:4px 2px;
    box-shadow:var(--shadow-xs);
  }
  .a-table--karty tbody tr:hover{background:#fff}
  .a-table--zebra.a-table--karty tbody tr:nth-child(even){background:#fff}

  .a-table--karty td{
    display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
    padding:9px 14px;border-bottom:1px solid var(--line);text-align:right;
  }
  .a-table--karty tr td:last-child{border-bottom:0}

  .a-table--karty td::before{
    content:attr(data-stlpec);
    flex:0 0 40%;text-align:left;
    font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);padding-top:2px;
  }
  .a-table--karty td.bez-popisu::before,
  .a-table--karty td[data-stlpec=""]::before{display:none}

  /* prvá bunka je hlavička karty — popisok ide nad hodnotu */
  .a-table--karty tbody tr td:first-child{
    display:block;text-align:left;padding:11px 14px 10px;
    background:var(--bg-soft);border-radius:10px 10px 0 0;
  }
  .a-table--karty tbody tr td:first-child::before{
    display:block;flex:none;margin-bottom:3px;font-size:.64rem;
  }
  .a-table--karty tbody tr td:first-child .a-table__t{font-size:1rem}

  /* posledná bunka = akcie, tlačidlá cez celú šírku */
  .a-table--karty tbody tr td.tr:last-child,
  .a-table--karty tbody tr td:last-child:has(.a-btn){
    display:flex;justify-content:flex-start;flex-wrap:wrap;gap:8px;
    text-align:left;padding:12px 14px;background:var(--bg-soft);
    border-radius:0 0 10px 10px;
  }
  .a-table--karty td .a-btn--icon{width:auto;padding:8px 14px;min-height:40px}

  .a-table--karty .num{text-align:right}
  .a-table--karty .meter{width:100%;max-width:190px}
  .a-table--karty .vmini{gap:10px}
  .a-table--karty .vmini__img{width:96px;flex-basis:96px}
  .a-table--karty .vmini__img .voz-media__pocet{display:block}
  .a-table--karty tfoot tr{border:0;background:0;box-shadow:none;margin:0}
  .a-table--karty tfoot th{
    display:flex;justify-content:space-between;padding:12px 14px;
    background:var(--bg-soft);border-radius:10px;
  }

  /* ---------- FORMULÁRE ---------- */
  .a-in,input,select,textarea{font-size:16px}   /* iOS inak stránku priblíži */
  .a-in{padding:12px 14px}
  .a-f label{font-size:.82rem}
  .a-fs{padding:14px 14px}
  .a-btn{min-height:46px;padding:12px 18px}
  .a-btn--sm{min-height:40px;padding:9px 14px}
  .a-btn--icon{width:40px;height:40px;padding:8px}
  .a-btns{gap:8px}
  .a-btns .a-btn{flex:1 1 auto;justify-content:center}
  .a-btns .ml-auto{margin-left:0;width:100%}

  /* ---------- PLÁNOVAČ ---------- */
  .cal-table th{
    position:sticky;left:0;z-index:3;background:#fff;
    box-shadow:1px 0 0 var(--line);min-width:140px;max-width:140px;
  }
  .cal-table thead th:first-child{z-index:4}
  .tl2 i{height:26px}

  /* ---------- ZOZNAMY ---------- */
  .a-list li{padding:12px 14px;flex-wrap:wrap}
  .a-list__r{margin-left:auto}
  .dl{grid-template-columns:1fr auto;font-size:.85rem}

  /* ---------- DOKUMENTY NA TLAČ ---------- */
  .doc{padding:20px 16px;margin:12px 0;border-radius:12px}
  .doc__head{flex-direction:column;gap:14px}
  .doc__head > div:last-child{text-align:left !important}
  .doc__grid{grid-template-columns:1fr}
  .doc h1{font-size:1.15rem}

  /* prihlásenie */
  .login__form{padding:26px 18px}
  .login__box{max-width:none}

  /* ---------- LEPKAVÉ TLAČIDLO ULOŽIŤ ----------
     Pri dlhých formulároch (vozidlo, rezervácia) nemusí obsluha
     scrollovať až na koniec — uloženie je stále na dosah palca. */
  .a-btns--lepkave{
    position:sticky;bottom:0;z-index:40;
    margin:16px -12px 0;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(12px) saturate(160%);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 18px rgba(13,15,18,.07);
  }
  .a-btns--lepkave .a-btn--pink{flex:2 1 60%}
}

@media (max-width:400px){
  .g4,.g3,.g2,.g-auto{grid-template-columns:1fr}
  .a-table--karty td::before{flex-basis:44%;font-size:.66rem}
  .a-card__b{padding:14px}
  .doc__grid{grid-template-columns:1fr}
}

/* Dotykové zariadenia — bez hover efektov, väčšie plochy */
@media (hover:none) and (pointer:coarse){
  .kpi:hover,.a-btn:hover,.a-chip:hover{transform:none;box-shadow:none}
  .a-table tbody tr:hover{background:inherit}
  .a-nav a{min-height:46px}
  .a-btn:active{transform:scale(.97)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Hromadný výber v tabuľkách ---------- */
.a-vyber__th,.a-vyber__td{width:42px;padding-right:0!important;text-align:center}
.a-vyber__th input,.a-vyber__td input{
  width:17px;height:17px;accent-color:var(--pink);cursor:pointer;margin:0;vertical-align:middle;
}
.a-table tbody tr.je-vybrany{background:var(--pink-50)!important}
.a-table tbody tr.je-vybrany td{border-color:var(--pink-100)}

/* Lišta s akciami sa vysunie zdola, keď je niečo označené. */
.a-vyber{
  position:sticky;bottom:0;z-index:20;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 20px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  box-shadow:0 -6px 20px rgba(13,15,18,.07);
  animation:vyberHore .25s var(--ease) both;
}
@keyframes vyberHore{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.a-vyber__pocet{font-size:.88rem;color:var(--muted)}
.a-vyber__pocet strong{
  display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;
  margin-right:6px;border-radius:100px;background:var(--pink);color:#fff;
  font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.a-vyber__medzera{flex:1}

@media (max-width:720px){
  .a-vyber{padding:12px 14px}
  .a-vyber__medzera{display:none}
  .a-vyber .a-btn{flex:1 1 auto;justify-content:center}
  /* V kartovom zobrazení má políčko vlastný riadok s popisom. */
  .a-table--karty .a-vyber__td{width:auto;text-align:left}
  .a-table--karty .a-vyber__td::before{content:'Vybrať';margin-right:8px}
}