/* assets/css/base.css — ODPADY unified skeleton with robust dark/light toggle */
:root{
  --bg: #0b0c0f;
  --surface: #0e1015;
  --panel: #121521;
  --text: #e7e9ee;
  --muted: #a8adbb;
  --primary: #3b82f6;
  --accent: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius-xl: 18px;
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 22px 60px -30px rgba(0,0,0,.8);
  --wrap: min(1400px, 100% - 0rem);
  --nav-h: 56px;
  --focus: 2px solid color-mix(in srgb, var(--primary) 70%, transparent);
}
/* light theme override (robust selector) */
html[data-theme="light"],
:root[data-theme="light"]{
  --bg: #f7f8fb;
  --surface: #ffffff;
  --panel: #ffffff;
  --text: #0a0b0e;
  --muted: #5e6472;
  --shadow: 0 1px 0 rgba(0,0,0,.06) inset, 0 20px 40px -28px rgba(10,11,14,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body {
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--bg);
}

.wrap{width:var(--wrap);margin-inline:auto;padding:1rem}
:focus-visible{ outline:var(--focus); outline-offset:2px; }
.skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--panel); color:var(--text); border-radius:var(--radius-sm); box-shadow:var(--shadow) }

/* Header */
.site-header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(150%) blur(6px);
  background: linear-gradient(180deg, rgba(0,100,255,.25), rgba(0,0,0,0)) , transparent;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:var(--nav-h); }
.brand{ display:flex; align-items:center; gap:.75rem; }
.brand__logo{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background: linear-gradient(135deg, var(--primary), #8ab4ff); color:white; font-weight:700; box-shadow: 0 6px 18px -10px rgba(59,130,246,.8);
}
.brand__name{ color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.2px; }

.site-nav ul{ display:flex; gap:.25rem; list-style:none; padding:0; margin:0; }
.nav-link{ display:inline-block; padding:.5rem .75rem; border-radius:10px; text-decoration:none; color:var(--text); }
.nav-link:is(:hover,:focus){ background: color-mix(in srgb, var(--panel) 40%, transparent); }
.nav-link.is-active{ background: color-mix(in srgb, var(--primary) 18%, transparent); outline:1px solid color-mix(in srgb, var(--primary) 30%, transparent); }

.userbox{ display:flex; align-items:center; gap:.5rem; }
.userbox__name{ opacity:.85; font-size:.95rem; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem .9rem;
  border-radius:10px; border:1px solid transparent; background: color-mix(in srgb, var(--panel) 85%, transparent);
  color:var(--text); text-decoration:none; cursor:pointer; box-shadow:var(--shadow);
}
.btn-primary{ background: color-mix(in srgb, var(--primary) 18%, transparent); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.btn-ghost{ background: transparent; border-color: color-mix(in srgb, var(--text) 12%, transparent); }
.btn-full{ width:100%; padding:.75rem 1rem; font-weight:600; }

/* Layout (bez hlavního boxu na site-main) */
.layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:1rem;
  width:var(--wrap);
  margin-inline:auto;
  padding:1rem;
}
/* hlavní obsah – žádný box; jen konzistentní mezery */
main.site-main{ display:block; }
main.site-main > * + *{ margin-top:18px; }

/* sidebar – box ponechán */
.site-sidebar{
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: var(--shadow);
  padding:1rem;
}
@media (min-width: 900px){
  .layout{ grid-template-columns: minmax(0,1fr) 320px; align-items:start; }
}

/* Hero + cards */
.hero .wrap{ padding-block: 2rem; }
h1,h2,h3{ line-height:1.2; margin:0 0 .5rem 0; }
p{ margin:.25rem 0 1rem 0; }
.content-blocks{ display:grid; grid-template-columns: 1fr; gap:1rem; }
@media (min-width: 700px){ .content-blocks{ grid-template-columns: repeat(3, 1fr); } }

/* Karty – jedna definice */
.card{
  padding:1rem;
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow:var(--shadow);
  overflow: hidden;
}
.card > .hd{
  display:flex; align-items:center; gap:.5rem; justify-content:space-between;
  padding: .8rem 1rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--text) 12%, transparent);
}
.card > .bd{ padding: 1rem; }

/* Sidebar cards */
.sidebar-card{ padding: .5rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--text) 12%, transparent); }
.sidebar-card:last-child{ border-bottom:0; }
.sidebar-card h2{ font-size:1rem; text-transform:uppercase; letter-spacing:.06em; opacity:.9; }
.list{ margin:.5rem 0 0 0; padding-left:1.2rem; }

/* Footer */
.site-footer{ margin-top:2rem; }
.footer-inner{ width:var(--wrap); margin-inline:auto; padding:1.25rem; color:var(--muted); }
.muted{ color:var(--muted); font-size:.95rem; }

/* AUTH (login) */
.auth-body{
  min-height:100dvh;
  display:grid; place-items:center;
  background:
    radial-gradient(1100px 600px at 12% -10%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
    radial-gradient(900px 450px at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
    var(--bg);
}
.auth-shell{ width:min(480px, 100% - 2rem); }
.auth-card{
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.auth-brand{ display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; }
.auth-brand__text h1{ margin:0; }
.auth-form{ margin-top:.5rem; }
.field{ display:grid; gap:.35rem; margin:.5rem 0 .9rem 0; }
.label{ font-size:.9rem; color:var(--muted); }
input[type=email], input[type=password]{
  width:100%; padding:.8rem .9rem; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color:var(--text);
}
input:focus{ outline: var(--focus); }
.alert{ padding:.6rem .8rem; border-radius:12px; margin:.6rem 0 .9rem 0; }
.alert-danger{ background: color-mix(in srgb, var(--danger) 18%, transparent); border:1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.auth-extras{ display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:.75rem; }
.link{ color: color-mix(in srgb, var(--text) 80%, transparent); text-decoration: none; }
.link:hover{ text-decoration: underline; }
.dot{ opacity:.5; }

/* ===== Dashboard (sjednoceno dle „základní info“) ===== */
.hero--home .hero__head h1{font-size:1.6rem;margin:0 0 .25rem}
.hero--home .hero__head .muted{margin:0 0 1rem}

.stats{
  display:grid; gap:.75rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 780px){ .stats{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.stat{
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--radius);
  padding:.9rem 1rem;
  box-shadow: var(--shadow);
}
.stat__label{ font-size:.9rem; color:var(--muted); margin-bottom:.25rem }
.stat__value{ font-weight:800; font-size:1.5rem; letter-spacing:.2px }
.stat__value--warn{ color: var(--warning); }

.grid--dashboard{
  display:grid; gap:1rem; margin-top:1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 960px){
  .grid--dashboard{ grid-template-columns: 1.2fr 1fr 1fr; }
}

.card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem }
.btn--sm{ padding:.35rem .6rem; font-size:.9rem; }

.card--list .list--items{ margin:0; padding:0; list-style:none; }
.card--list .list--items li{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.55rem .25rem; border-bottom:1px dashed color-mix(in srgb, var(--text) 12%, transparent);
}
.card--list .list--items li:last-child{ border-bottom:0 }
.card--list .list--items a{ color:var(--text); text-decoration:none }
.card--list .list--items a:hover{ text-decoration:underline }
.card--list .list--items time{ color:var(--muted); font-size:.9rem }

.list--calendar, .list--files{ margin:0; padding-left:0; list-style:none }
.list--calendar li, .list--files li{
  display:flex; align-items:center; gap:.6rem; padding:.5rem 0;
  border-bottom:1px dashed color-mix(in srgb, var(--text) 12%, transparent);
}
.list--calendar li:last-child, .list--files li:last-child{ border-bottom:0 }
.badge{
  display:inline-grid; place-items:center; padding:.25rem .5rem; font-weight:700;
  border-radius:8px; border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.list--files span{ color:var(--muted); font-size:.9rem; margin-left:auto }

/* === Bridge: sjednocení detailu s dashboardem (bez úprav HTML) === */
/* 1) Šířka a centrování jako .wrap */
.page-title,
.row,
section.card {
  width: var(--wrap);
  margin-inline: auto;
}
/* 2) Titulek stránky – spacing jako v hero */
.page-title { padding: .75rem 0 0; }
.page-title h2 { margin: 0 0 .25rem 0; line-height: 1.2; }
.page-title .meta { color:var(--muted); }
/* 3) Grid pro .row: 2:1 + stejné mezery jako dashboard */
.row{
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr); /* mobile */
  align-items: start;
}
@media (min-width: 960px){
  .row{ grid-template-columns: 2fr 1fr; }
}
.col-2, .col-1{ min-width: 0; } /* aby se nepretekal obsah */

/* 8) Tabulky – stejné odsazení a linky */
.card table{ width:100%; border-collapse: collapse; }
.card table th,
.card table td{ padding:.55rem .6rem; text-align:left; }
.card table thead th{
  font-weight:700; border-bottom:1px solid color-mix(in srgb, var(--text) 16%, transparent);
}
.card table tbody tr + tr td{
  border-top: 1px dashed color-mix(in srgb, var(--text) 12%, transparent);
}
.card table tfoot th, .card table tfoot td{
  border-top:1px solid color-mix(in srgb, var(--text) 16%, transparent);
  font-weight:700;
}

/* 9) Graf – sjednotit barvy os/popisků s paletou */
.chart .note{ color:var(--muted); margin-top:.4rem; font-size:.9rem; }
.chart line{ stroke: color-mix(in srgb, var(--text) 18%, transparent); }
.chart text{ fill: color-mix(in srgb, var(--text) 45%, transparent); }
.chart rect{ fill: color-mix(in srgb, var(--primary) 70%, white 0%); }

/* Globální mezery mezi hlavními kartami */
.card + .card {
  margin-top: 1.5rem;
}

code {
  font-family: inherit;                  /* vezme font z base.css */
  font-size: .85rem;                     /* jemně menší než text */
  font-style: italic;                    /* kurziva */
  background: color-mix(in srgb, var(--panel) 75%, transparent);
  padding: .15rem .40rem;
  border-radius: 8px;
  display: inline-block;
  line-height: 1.4;
  color: var(--text);
}