/* LITHIO / CRM Box - dizajnovy system (Unicos style) */

:root{
  --primary:#10b981;
  --primary-soft: color-mix(in srgb, var(--primary) 14%, white);
  --primary-softer: color-mix(in srgb, var(--primary) 8%, white);
  --primary-dark: color-mix(in srgb, var(--primary) 78%, black);
  --primary-ring: color-mix(in srgb, var(--primary) 30%, white);
  --bg:#eef1f6;
  --ink:#1f2733;
  --muted:#94a3b8;
}

*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; scrollbar-gutter:stable; }
body{
  font-family:'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 100% -5%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
    radial-gradient(700px 500px at -10% 0%, #ffe7d6aa, transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

/* ---------- Tlacidla ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; border-radius:.85rem;
  padding:.62rem 1.1rem; font-size:.9rem; transition:transform .16s ease, background .16s ease, box-shadow .16s ease; cursor:pointer; border:1px solid transparent; line-height:1; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 10px 22px -10px var(--primary); }
.btn-primary:hover{ background:var(--primary-dark); box-shadow:0 14px 26px -10px var(--primary); }
.btn-amber{ background:#f6a609; color:#fff; box-shadow:0 10px 22px -10px #f6a609; }
.btn-amber:hover{ background:#e0950a; box-shadow:0 14px 26px -10px #f6a609; }
.btn-ghost{ background:#fff; color:#475569; border-color:#e7ebf2; }
.btn-ghost:hover{ background:#f8fafc; border-color:#d4dbe6; }
.btn-danger{ background:#fff; color:#ef4444; border-color:#fecaca; }
.btn-danger:hover{ background:#fef2f2; }
.btn-sm{ padding:.42rem .75rem; font-size:.8rem; border-radius:.65rem; }

/* ---------- Karty ---------- */
.card{ background:#fff; border:1px solid #eef1f6; border-radius:1.25rem; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 18px 40px -28px rgba(16,24,40,.22); }
.card-pad{ padding:1.35rem 1.5rem; }
.card-table{ overflow:hidden; }
.card:has(.tbl){ overflow:hidden; }
.lift{ transition:transform .2s ease, box-shadow .2s ease; }
.lift:hover{ transform:translateY(-4px); box-shadow:0 1px 2px rgba(16,24,40,.05), 0 28px 50px -26px rgba(16,24,40,.32); }

/* ---------- Inputy ---------- */
.field{ width:100%; border:1px solid #e7ebf2; border-radius:.85rem; padding:.62rem .85rem; font-size:.9rem; background:#fff; transition:border-color .15s, box-shadow .15s, background .15s; color:var(--ink); }
.field:hover{ border-color:#d4dbe6; }
.field:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-ring); }
.label{ display:block; font-size:.78rem; font-weight:600; color:#64748b; margin-bottom:.35rem; }
textarea.field{ resize:vertical; min-height:2.4rem; }
select.field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center; padding-right:2rem; }

/* ---------- Dropzone (upload) ---------- */
.dropzone{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:9rem;
  border:2px dashed #cdd6e4; border-radius:1rem; background:rgba(255,255,255,.45);
  backdrop-filter:saturate(1.1) blur(2px); padding:1.6rem 1.2rem; text-align:center; cursor:pointer; transition:border-color .18s, background .18s, transform .18s; }
.dropzone:hover{ border-color:var(--primary); background:var(--primary-softer); transform:translateY(-1px); }
.dropzone.is-filled{ border-style:solid; border-color:var(--primary); background:var(--primary-softer); }
.dropzone .dz-ico{ width:3rem; height:3rem; border-radius:.9rem; background:var(--primary-soft); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center; margin:0 auto .65rem; transition:transform .18s; }
.dropzone:hover .dz-ico{ transform:scale(1.06) translateY(-1px); }

/* ---------- Sidebar nav ---------- */
.nav-link{ position:relative; display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; border-radius:.85rem; color:#64748b; font-weight:500; font-size:.92rem; transition:background .15s, color .15s, transform .15s; }
.nav-link:hover{ background:var(--primary-softer); color:var(--primary-dark); transform:translateX(3px); }
.nav-link.active{ background:var(--primary-soft); color:var(--primary-dark); font-weight:600; }
.nav-link.active::before{ content:""; position:absolute; left:-.9rem; top:50%; transform:translateY(-50%); width:.32rem; height:1.5rem; border-radius:0 .3rem .3rem 0; background:var(--primary); }
.nav-link svg{ width:1.2rem; height:1.2rem; flex:none; }

/* ---------- Topbar icon button ---------- */
.icon-btn{ position:relative; width:2.75rem; height:2.75rem; border-radius:.9rem; border:1px solid #e7ebf2; background:#fff; display:flex; align-items:center; justify-content:center; color:#64748b; transition:color .15s, border-color .15s, background .15s, transform .15s; }
.icon-btn:hover{ color:var(--primary-dark); border-color:var(--primary-soft); background:var(--primary-softer); transform:translateY(-2px); }
.icon-dot{ position:absolute; top:-.25rem; right:-.25rem; min-width:1.15rem; height:1.15rem; padding:0 .25rem; border-radius:999px; color:#fff; font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }

/* ---------- Badge ---------- */
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600; padding:.28rem .7rem; border-radius:999px; }

/* ---------- Tabulka ---------- */
.tbl{ width:100%; border-collapse:separate; border-spacing:0; }
.tbl th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#9aa6b6; font-weight:600; padding:.7rem 1rem; }
.tbl td{ padding:.85rem 1rem; border-top:1px solid #f1f4f9; font-size:.9rem; color:#3b4759; }
.tbl tbody tr{ transition:background .14s ease; }
.tbl tbody tr:hover{ background:#f6f9f8; }
.tbl tfoot td{ border-top:2px solid #eef1f6; }
/* zarovnanie hlavicky musi sledovat hodnoty (inak .tbl th prebije text-right) */
.tbl th.text-right, .tbl td.text-right{ text-align:right; }
.tbl th.text-center, .tbl td.text-center{ text-align:center; }
.tbl th.text-left, .tbl td.text-left{ text-align:left; }
.row-link{ cursor:pointer; }

/* ---------- Hero balance karta ---------- */
.hero{ position:relative; overflow:hidden; border-radius:1.25rem; color:#fff;
  background:linear-gradient(135deg, #5b5d80 0%, #474963 55%, #3f4059 100%); box-shadow:0 24px 50px -24px rgba(63,64,89,.65); transition:transform .25s ease, box-shadow .25s ease; }
.hero:hover{ transform:translateY(-3px); box-shadow:0 32px 60px -26px rgba(63,64,89,.7); }
.hero::after{ content:""; position:absolute; right:-40px; bottom:-90px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%); }
.hero::before{ content:""; position:absolute; right:30px; top:-60px; width:150px; height:150px; border-radius:50%;
  border:26px solid rgba(255,255,255,.06); }

/* ---------- Stat karty ---------- */
.stat{ position:relative; overflow:hidden; display:flex; align-items:center; gap:1rem; border-radius:1.25rem; padding:1.3rem 1.4rem; color:#fff;
  box-shadow:0 18px 36px -20px rgba(16,24,40,.5); transition:transform .2s ease, box-shadow .2s ease; }
.stat:hover{ transform:translateY(-5px); box-shadow:0 28px 48px -20px rgba(16,24,40,.55); }
.stat .stat-ico{ width:3.3rem; height:3.3rem; border-radius:1rem; border:2px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; flex:none; transition:transform .2s ease; }
.stat:hover .stat-ico{ transform:scale(1.08) rotate(-3deg); }
.stat .stat-ico svg{ width:1.5rem; height:1.5rem; }
.stat .stat-label{ font-size:.82rem; opacity:.92; font-weight:500; }
.stat .stat-val{ font-size:1.9rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.stat-emerald{ background:linear-gradient(135deg,#16c79a,#0e9f7a); }
.stat-blue{ background:linear-gradient(135deg,#5b6ef5,#4a59e8); }
.stat-purple{ background:linear-gradient(135deg,#a55cf0,#8b3fe0); }
.stat-red{ background:linear-gradient(135deg,#ff7a7a,#f0525f); }

/* ---------- Logo ---------- */
.logo-mark{ width:2.35rem; height:2.35rem; border-radius:.75rem; background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:-.03em; box-shadow:0 10px 20px -8px var(--primary); }

.stat-num{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; color:#0f172a; }
.muted{ color:var(--muted); }
a.link{ color:var(--primary-dark); font-weight:600; }
a.link:hover{ text-decoration:underline; }
[x-cloak]{ display:none !important; }

/* ---------- Respektuj redukovany pohyb ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
  .btn:hover, .nav-link:hover, .icon-btn:hover, .stat:hover, .stat:hover .stat-ico, .hero:hover, .lift:hover, .dropzone:hover{ transform:none !important; }
}