/* ==========================================================================
   Admin · Zahradní grily — design systém
   Vychází z v2 "Dock/Ember" (light default + dark), rozvedeno pro admin:
   sidebar shell, datové tabulky, filtry, taby, dashboard. Brand #de1100.
   ========================================================================== */

:root{
  --bg:#EDEFF3; --surface:#FFFFFF; --surface-2:#F3F5F8; --surface-3:#E7EAEF;
  --line:#E2E5EA; --line-2:#CDD2DB;
  --text:#14171C; --text-dim:#363B43; --muted:#697079; --muted-2:#9AA1AC;
  --ember:#E11900; --ember-hi:#FF4A2B; --ember-deep:#B30F00;
  --amber:#D98306; --green:#0E9D57;
  --ember-glow:0 8px 22px -10px rgba(225,25,0,.4);
  --shadow:0 8px 24px -14px rgba(20,25,35,.26);
  --shadow-sm:0 1px 2px rgba(20,25,35,.06);
  --r:13px; --r-lg:18px;
  --ff-disp:"Space Grotesk",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,monospace;
  --sideW:262px;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0E0F12; --surface:#191C22; --surface-2:#20242C; --surface-3:#272C35;
  --line:#2A2F38; --line-2:#3A404B;
  --text:#EDEFF2; --text-dim:#C3C7CE; --muted:#8B919C; --muted-2:#646A75;
  --ember-hi:#FF4A2B; --amber:#F2A93B; --green:#2FD27A;
  --ember-glow:0 0 0 1px rgba(255,74,43,.28), 0 12px 30px -10px rgba(225,25,0,.5);
  --shadow:0 14px 34px -18px rgba(0,0,0,.7); --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--ff-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%;display:block}
::selection{background:var(--ember);color:#fff}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--sideW) 1fr;grid-template-rows:auto 1fr;grid-template-areas:"top top" "side main";min-height:100dvh}
.topbar{grid-area:top;position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:12px 18px;padding-top:calc(12px + env(safe-area-inset-top,0));background:color-mix(in srgb,var(--bg) 84%, transparent);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.sidebar{grid-area:side;position:sticky;top:0;align-self:start;height:100dvh;overflow:auto;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column}
.content{grid-area:main;min-width:0;padding:24px clamp(16px,3vw,34px) 60px}

/* ── brand / topbar prvky ──────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand__mark{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center}
.brand__mark .frame{position:absolute;inset:4px}
.brand__mark .frame::before{content:"";position:absolute;inset:0;--c:var(--ember);--s:6px;--t:1.5px;background:linear-gradient(var(--c),var(--c)) 0 0/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--s) no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--s) no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--s) no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--s) no-repeat}
.brand__logo{height:18px;width:auto;display:block}
.brand__logo--dark{display:none}
[data-theme="dark"] .brand__logo--light{display:none}
[data-theme="dark"] .brand__logo--dark{display:block}
.brand__tag{font-family:var(--ff-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px}
.topbar__right{margin-left:auto;display:flex;align-items:center;gap:9px}
.who{font-family:var(--ff-mono);font-size:12px;color:var(--muted);letter-spacing:.03em}
.iconbtn{width:37px;height:37px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--text-dim);display:grid;place-items:center;cursor:pointer}
.iconbtn:active{background:var(--surface-3)}
.iconbtn svg{width:18px;height:18px}
.ico-sun{display:none}.ico-moon{display:block}
[data-theme="dark"] .ico-sun{display:block}[data-theme="dark"] .ico-moon{display:none}
.navtoggle{display:none}

/* ── sidebar nav ───────────────────────────────────────────────────────── */
.sidenav{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:2px}
.sidenav__sec{font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);padding:16px 10px 7px}
.sidenav__home,.sidenav__item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--text-dim);font-size:14px;font-weight:500;border:1px solid transparent}
.sidenav__home svg,.sidenav__ico{width:19px;height:19px;flex:0 0 auto;color:var(--muted)}
.sidenav__home:hover,.sidenav__item:hover{background:var(--surface-2)}
.sidenav__item.is-active,.sidenav__home.is-active{background:color-mix(in srgb,var(--ember) 9%, var(--surface));border-color:color-mix(in srgb,var(--ember) 26%, var(--surface));color:var(--text)}
.sidenav__item.is-active .sidenav__ico{color:var(--ember)}
.sidenav__lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidenav__foot{padding:14px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;color:var(--muted-2);border-top:1px solid var(--line)}
.tag{font-family:var(--ff-mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:5px}
.tag--demo{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%, var(--surface));border:1px solid color-mix(in srgb,var(--amber) 32%, var(--surface))}
.tag--live{color:var(--green);background:color-mix(in srgb,var(--green) 12%, var(--surface));border:1px solid color-mix(in srgb,var(--green) 30%, var(--surface))}

/* ── page header ───────────────────────────────────────────────────────── */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.eyebrow{font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin:0 0 5px}
.pagetitle{font-family:var(--ff-disp);font-weight:700;font-size:26px;letter-spacing:-.01em;margin:0}
.pagehead__act{display:flex;gap:10px;flex-wrap:wrap}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{appearance:none;border:0;cursor:pointer;min-height:42px;padding:0 16px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ff-disp);font-weight:600;font-size:14px;background:var(--ember);color:#fff;box-shadow:var(--ember-glow);white-space:nowrap;transition:transform .06s,background .15s}
.btn:active{transform:translateY(1px);background:var(--ember-deep)}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);box-shadow:none}
.btn--ghost:active{background:var(--surface-2)}
.btn--steel{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);box-shadow:none}
.btn--steel:active{background:var(--surface-3)}
.btn--sm{min-height:34px;padding:0 11px;font-size:12.5px;border-radius:8px}
.btn--block{width:100%}

/* ── cards ─────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.card--pad{padding:18px}
.card__h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card__h b{font-family:var(--ff-disp);font-size:15px;font-weight:600}
.card__h .card__meta{margin-left:auto;font-family:var(--ff-mono);font-size:11px;color:var(--muted)}

/* ── dashboard ─────────────────────────────────────────────────────────── */
.dash{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.modcard{position:relative;display:flex;flex-direction:column;gap:13px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:transform .12s,border-color .12s,box-shadow .12s}
.modcard:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}
.modcard__top{display:flex;align-items:flex-start;justify-content:space-between}
.modcard__ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ember)}
.modcard__ico svg{width:24px;height:24px}
.modcard__lbl{font-family:var(--ff-disp);font-weight:600;font-size:17px;margin:0}
.modcard__short{color:var(--muted);font-size:13px;margin:3px 0 0}
.modcard__go{margin-top:auto;font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:7px}
.modcard:hover .modcard__go{color:var(--ember)}

/* ── stat cards ────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.stat{padding:15px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.stat__k{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.stat__v{font-family:var(--ff-disp);font-weight:700;font-size:24px;margin-top:6px;letter-spacing:-.01em}
.stat__v small{font-size:13px;font-weight:500;color:var(--muted)}
.stat--ok .stat__v{color:var(--green)} .stat--warn .stat__v{color:var(--amber)} .stat--err .stat__v{color:var(--ember)}

/* ── filters ───────────────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.select,.inp{font-family:var(--ff-body);font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:9px 12px;min-height:40px}
.select:focus,.inp:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px color-mix(in srgb,var(--ember) 16%, transparent)}
.inp--search{min-width:220px;flex:1;max-width:340px}
.filters__spacer{flex:1}

/* ── tabulka ───────────────────────────────────────────────────────────── */
.tablewrap{overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.data th{text-align:left;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface-2);white-space:nowrap}
table.data td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--surface-2)}
.mono{font-family:var(--ff-mono);font-size:13px;letter-spacing:.02em}
.num{font-family:var(--ff-mono);text-align:right;white-space:nowrap}
.dim{color:var(--muted)}
.row--ok{background:color-mix(in srgb,var(--green) 6%, var(--surface))}
.row--warn{background:color-mix(in srgb,var(--amber) 7%, var(--surface))}

/* ── chips / stavy ─────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:7px;border:1px solid transparent;white-space:nowrap}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip--ok{color:var(--green);background:color-mix(in srgb,var(--green) 12%, var(--surface));border-color:color-mix(in srgb,var(--green) 30%, var(--surface))}
.chip--warn{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%, var(--surface));border-color:color-mix(in srgb,var(--amber) 32%, var(--surface))}
.chip--err{color:var(--ember);background:color-mix(in srgb,var(--ember) 10%, var(--surface));border-color:color-mix(in srgb,var(--ember) 30%, var(--surface))}
.chip--neutral{color:var(--muted);background:var(--surface-2);border-color:var(--line-2)}

/* ── taby (reporty) ────────────────────────────────────────────────────── */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--line)}
.tab{appearance:none;border:0;background:none;cursor:pointer;padding:11px 14px;font-family:var(--ff-body);font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:8px}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--ember);border-bottom-color:var(--ember)}
.tab .cnt{font-family:var(--ff-mono);font-size:11px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px;color:var(--muted)}
.tabpane{display:none} .tabpane.is-active{display:block}

/* ── login ─────────────────────────────────────────────────────────────── */
.login{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:26px}
.login__brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:28px}
.login__mark{position:relative;width:60px;height:60px;border-radius:15px;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;box-shadow:var(--shadow)}
.login__mark .frame{position:absolute;inset:10px}
.login__mark .frame::before{content:"";position:absolute;inset:0;--c:var(--ember);--s:13px;--t:2px;background:linear-gradient(var(--c),var(--c)) 0 0/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--s) no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--s) no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--s) no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--s) no-repeat}
.login__mark .spark{width:12px;height:12px;border-radius:50%;background:var(--ember);box-shadow:var(--ember-glow)}
.login__logo{height:30px} .login__logo--dark{display:none}
[data-theme="dark"] .login__logo--light{display:none}[data-theme="dark"] .login__logo--dark{display:block}
.login__sub{font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.login__card{width:100%;max-width:370px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px}
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field .inp{width:100%;font-size:16px}
.login .btn{width:100%;min-height:48px;margin-top:6px}
.alert{display:flex;gap:8px;align-items:center;margin-bottom:12px;background:color-mix(in srgb,var(--ember) 10%, var(--surface));border:1px solid color-mix(in srgb,var(--ember) 34%, var(--surface));color:var(--ember);border-radius:10px;padding:10px 12px;font-size:13.5px}
.alert svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.9}

/* ── prázdný / info stav ───────────────────────────────────────────────── */
.note{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);padding:13px 15px;font-size:13.5px;color:var(--text-dim)}
.note svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--muted);fill:none;stroke-width:1.8;margin-top:1px}
.note--demo{background:color-mix(in srgb,var(--amber) 8%, var(--surface));border-color:color-mix(in srgb,var(--amber) 26%, var(--surface))}

/* ── list (popisy) ─────────────────────────────────────────────────────── */
.list{display:flex;flex-direction:column;gap:12px}
.listitem{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow-sm)}
.listitem__ico{width:40px;height:40px;flex:0 0 auto;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ember)}
.listitem__ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.listitem__b{min-width:0;flex:1}
.listitem__t{font-family:var(--ff-disp);font-weight:600;font-size:15px}
.listitem__d{color:var(--muted);font-size:13.5px;margin-top:3px}
.listitem__meta{font-family:var(--ff-mono);font-size:11px;color:var(--muted-2);margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}

/* ── off-canvas nav (mobil) ────────────────────────────────────────────── */
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25}
@media (max-width:900px){
  .shell{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  .navtoggle{display:grid}
  .sidebar{position:fixed;top:0;left:0;height:100dvh;width:var(--sideW);z-index:40;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .scrim{display:block}
  .who{display:none}
}