/* ERIOS — Stavebný denník · aplikačný štýl. Farby výhradne z tokenov ERIOS.
   Mobile-first (terénny nástroj): veľké dotykové ciele, čitateľnosť na slnku. */

:root{
  --crimson:#C8003C; --magenta:#98154B; --plum:#6C2448; --teal:#0C5448; --teal-ink:#0B201D;
  --paper:#FAF8F3; --ink:#0E211C; --ink2:#3C5048; --ink3:#647A71; --teal-light:#7FD9C9;
  --accent:#C8003C;
  --grad:linear-gradient(100deg,var(--crimson) 0%,var(--magenta) 32%,var(--plum) 55%,var(--teal) 100%);
  --line:#E5E1D8; --card:#FFFFFF; --danger:#B3261E; --ok:#0C7C59; --warn:#A8690B;
  --r:14px; --r-sm:9px;
  --shadow:0 1px 2px rgba(14,33,28,.05),0 8px 22px -10px rgba(14,33,28,.14);
  --font-d:'Sora',system-ui,sans-serif;
  --font-b:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}

/* Ikony (líniové SVG, dedia farbu textu) */
.ico{display:inline-block;vertical-align:-.18em;flex:0 0 auto}
.btn .ico{vertical-align:-.15em}
.sidebar a .ico{color:inherit;opacity:.9}
.badge .ico{vertical-align:-.12em}
body{margin:0;font-family:var(--font-b);font-size:16px;line-height:1.5;color:var(--ink);background:var(--paper);overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font-d);line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(1.4rem,4vw,1.9rem);font-weight:800}
h2{font-size:1.25rem;font-weight:700}
h3{font-size:1.05rem;font-weight:700}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--crimson)}
p{margin:0 0 .8em}
small{color:var(--ink3)}

/* ── Layout: topbar + sidebar ─────────────────────────── */
.app{min-height:100vh}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.topbar-logo img{height:26px;display:block}
.topbar-sep{flex:1}
.topbar .who{font-size:.82rem;color:var(--ink3)}
.topbar .who b{color:var(--ink2);font-weight:600}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:1rem;cursor:pointer}

.shell{display:flex;align-items:flex-start;max-width:1200px;margin:0 auto}
.sidebar{flex:0 0 218px;padding:18px 12px;position:sticky;top:50px;height:calc(100vh - 50px);overflow:auto}
.sidebar a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;color:var(--ink2);font-weight:500}
.sidebar a:hover{background:rgba(12,84,72,.06);color:var(--ink)}
.sidebar a.active{background:var(--teal);color:#fff}
.sidebar .nav-sep{margin:14px 8px 6px;font-family:var(--font-m);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3)}
.main{flex:1;min-width:0;padding:22px 26px 80px}

/* ── Page head ─────────────────────────────────────────── */
.page-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{margin:0}
.page-head .sub{color:var(--ink3);font-size:.9rem;margin-top:3px}
.page-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.eyebrow{font-family:var(--font-m);font-size:.68rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}

/* ── Cards ─────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
.card h2{margin-top:0}
.card-flush{padding:0;overflow:hidden}
.muted{color:var(--ink3)}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

.stat{display:block;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--card)}
.stat .label{font-size:.78rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.stat .value{font-family:var(--font-d);font-size:1.7rem;font-weight:800;line-height:1.1;margin-top:4px}
.stat .value.mono{font-family:var(--font-m)}

/* ── Buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-d);
  font-weight:700;font-size:.95rem;padding:.7em 1.2em;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,color .2s;white-space:nowrap;
  min-height:44px}
.btn-primary{background:var(--grad);color:#fff;background-size:160% 100%;box-shadow:0 10px 24px -12px rgba(200,0,60,.5)}
.btn-primary:hover{transform:translateY(-1px);background-position:100% 0;color:#fff}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-ink);color:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink2);background:var(--card)}
.btn-ghost:hover{border-color:var(--teal);color:var(--ink)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:.45em .9em;font-size:.85rem;min-height:36px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── Forms ─────────────────────────────────────────────── */
.field{margin-bottom:15px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px;color:var(--ink2)}
.field .req{color:var(--crimson)}
.field .hint{font-size:.78rem;color:var(--ink3);margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=number],input[type=datetime-local],select,textarea{
  width:100%;font-family:var(--font-b);font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;min-height:46px}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(12,84,72,.12)}
.field-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 18px}
fieldset legend{font-family:var(--font-d);font-weight:700;padding:0 8px;color:var(--ink)}

/* ── Tables ────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--paper);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);font-weight:700}
tr:hover td{background:rgba(12,84,72,.025)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-m)}
.table-wrap{overflow-x:auto}
/* Akcie v bunke — kompaktne vedľa seba, zalomia sa keď treba */
.td-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.td-actions form{display:inline-flex;margin:0}

/* ── Badges / chips ────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-m);font-size:.72rem;font-weight:500;
  padding:3px 9px;border-radius:999px;background:rgba(12,84,72,.1);color:var(--teal);white-space:nowrap}
.badge.ok{background:rgba(12,124,89,.13);color:var(--ok)}
.badge.warn{background:rgba(168,105,11,.14);color:var(--warn)}
.badge.danger{background:rgba(179,38,30,.12);color:var(--danger)}
.badge.muted{background:rgba(100,122,113,.13);color:var(--ink3)}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* lifecycle dots */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.dot-zalozeny{background:var(--ink3)} .dot-prevzatie{background:var(--warn)}
.dot-v_realizacii{background:var(--ok)} .dot-uzatvoreny{background:var(--teal)}

/* ── Flash ─────────────────────────────────────────────── */
.flash{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:14px;font-weight:500;border:1px solid}
.flash-ok{background:rgba(12,124,89,.08);border-color:rgba(12,124,89,.3);color:var(--ok)}
.flash-err{background:rgba(179,38,30,.07);border-color:rgba(179,38,30,.3);color:var(--danger)}
.flash-info{background:rgba(12,84,72,.06);border-color:rgba(12,84,72,.25);color:var(--teal)}

/* ── Record list (denník) ──────────────────────────────── */
.zaznam{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;background:var(--card)}
.zaznam-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zaznam-head .cislo{font-family:var(--font-m);font-weight:700;color:var(--teal)}
.zaznam-head .datum{font-weight:600}
.zaznam-meta{font-size:.82rem;color:var(--ink3);margin-top:4px}
.zaznam .popis{margin-top:8px;white-space:pre-wrap}
.polozka{border-left:3px solid var(--teal-light);padding:6px 0 6px 12px;margin:8px 0;font-size:.92rem}
.polozka .typ{font-family:var(--font-m);font-size:.72rem;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}

/* ── Onboarding / auth ─────────────────────────────────── */
.auth-wrap{max-width:440px;margin:6vh auto;padding:0 18px}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 28px;box-shadow:var(--shadow)}
.auth-logo{text-align:center;margin-bottom:18px}
.auth-logo img{height:34px}
.steps{display:flex;gap:8px;margin-bottom:20px}
.steps .step{flex:1;height:5px;border-radius:3px;background:var(--line)}
.steps .step.done{background:var(--grad)}

/* ── Compliance matrix ─────────────────────────────────── */
.cov-bar{height:12px;border-radius:6px;background:var(--line);overflow:hidden}
.cov-bar > span{display:block;height:100%;background:var(--grad)}

/* ── Utility ───────────────────────────────────────────── */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stack-sm > * + *{margin-top:8px}
.mono{font-family:var(--font-m)}
.text-danger{color:var(--danger)} .text-ok{color:var(--ok)} .text-muted{color:var(--ink3)}
.hidden{display:none}
hr.sep{border:none;border-top:1px solid var(--line);margin:18px 0}

/* ── Spodná navigácia (app-like, len mobil) ────────────── */
.bottomnav{display:none}

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width:820px){
  /* ukotvený header so safe-area (notch) */
  .topbar{padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;gap:8px}
  .burger{display:none}                 /* nahradené spodnou navigáciou */
  .topbar .who{display:none}            /* meno skryté na mobile — šetrí šírku */
  .topbar .lbl{display:none}            /* horné tlačidlá len ako ikony */
  .topbar .btn-sm{padding:9px 11px}

  .shell{display:block}
  /* sidebar = výsuvný „Viac" panel */
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:78%;max-width:300px;background:var(--card);
    padding:18px 14px;padding-top:calc(18px + env(safe-area-inset-top,0px));
    border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .22s;z-index:60;height:auto;overflow:auto}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vmax rgba(11,32,29,.4)}

  /* obsah nad spodnou lištou */
  .main{padding:16px 16px calc(86px + env(safe-area-inset-bottom,0px))}

  .grid-2,.grid-3{grid-template-columns:1fr}
  .page-actions{width:100%}
  .page-actions .btn{flex:1}
  .page-head h1{font-size:1.45rem}

  /* spodná navigačná lišta */
  .bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--card);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -3px 14px -8px rgba(14,33,28,.22);
  }
  .bottomnav a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 2px 7px;min-height:56px;color:var(--ink3);font-size:.66rem;font-weight:600;
    letter-spacing:.01em;text-decoration:none;position:relative;
  }
  .bottomnav a .ico{color:var(--ink3);transition:color .15s}
  .bottomnav a.active{color:var(--teal)}
  .bottomnav a.active .ico{color:var(--teal)}
  .bottomnav a.active::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;
    border-radius:0 0 3px 3px;background:var(--grad)}
  .bottomnav a:active{background:rgba(12,84,72,.06)}

  /* karty a tlačidlá pohodlnejšie na dotyk */
  .card{padding:16px}
  .btn{min-height:46px}

  /* tabuľka označená .table-cards → na mobile ako stohované karty (žiadny vodorovný scroll) */
  .table-cards{display:block}
  .table-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-cards tbody{display:block}
  .table-cards tr{display:block;border:1px solid var(--line);border-radius:var(--r-sm);
    padding:10px 12px;margin:0 0 10px;background:var(--card)}
  .table-cards tr:hover td{background:none}
  .table-cards td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
    padding:5px 0;border:none;text-align:right;min-width:0;overflow-wrap:anywhere}
  .table-cards td::before{content:attr(data-label);font-weight:600;color:var(--ink3);
    font-size:.78rem;text-align:left;flex:0 0 auto}
  .table-cards td.mono{word-break:break-all}
  .table-cards td.td-actions{display:flex;flex-wrap:wrap;gap:8px;text-align:left;padding-top:10px;margin-top:4px;border-top:1px solid var(--line)}
  .table-cards td.td-actions::before{flex-basis:100%;margin-bottom:2px}
  .table-cards td[data-label=""]::before,
  .table-cards td:not([data-label])::before{content:none}   /* bunky akcií / prázdne stavy bez štítku */
}