/*
 * Vzhled administrace Obsah je klíč: „pracovní zápisník“ ve stejném jazyce jako její
 * web Zápisník (papír s tečkami, lepicí pásky, meruňková fixa, ručně psané poznámky,
 * nadpisy Oswald verzálkami, text Work Sans). Jana 15. 9. 2026: „hoď celou aplikaci
 * do barev Míši a dej jí šmrnc, takhle je opravdu hodně základní“.
 * Přepisuje jen vzhled jádra (app.css), žádné rozložení ani chování. Bez tohoto
 * souboru zůstane vzhled jádra. Oblé karty se stíny záměrně ne (Jana 14. 9. 2026).
 */
:root {
  --ground: #F3EEE4; --surface: #FFFDF8; --surface-2: #F8F3EA;
  --ink: #1B1A18; --ink-soft: #5F5B53; --ink-faint: #8B8475;
  --border: #E4DBCB; --border-strong: #CDBFA8;
  --panel: #1E1C19; --panel-2: #2B2823; --panel-ink: #F3EEE4; --panel-ink-soft: #B3AB9C;
  --accent: #FEAB77; --accent-2: #A9582A; --accent-soft: #FFE6D4; --on-accent: #1B1A18;
  --second: #5D6B45; --second-soft: #E6EAD8;
  --good: #4C7A45; --good-soft: #E3EBD8; --warn: #8A6D08; --warn-soft: #F5ECC4; --crit: #B4453A; --crit-soft: #F6E0DC;
  --fialova: #8E6357;   /* „čeká na platbu“: místo fialové jádra její pudrová ztmavená na čitelný text */
  --font: "Work Sans", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Oswald", "Manrope", system-ui, sans-serif;
  --font-ruka: "Kalam", "Segoe Print", "Chalkboard SE", "Bradley Hand", cursive;
  --r-xl: 6px; --r-lg: 4px; --r-md: 4px; --r-sm: 3px;
  --stin-karta: 0 1px 0 rgba(90, 70, 40, .07), 0 12px 22px -20px rgba(90, 70, 40, .55);
  --stin-okno: 0 22px 50px rgba(40, 30, 15, .25);
  --paska-salvej: rgba(213, 218, 193, .88); --paska-pudr: rgba(208, 178, 169, .82);
  --paska-horcice: rgba(222, 210, 126, .85); --paska-merunka: rgba(254, 171, 119, .7);
  --fixa: linear-gradient(transparent 58%, rgba(254, 171, 119, .55) 58%, rgba(254, 171, 119, .55) 88%, transparent 88%);
}

/* ---------- Papír ---------- */
body { background: var(--ground) radial-gradient(#DCD2C1 1px, transparent 1.2px) 0 0 / 22px 22px; font-size: 15px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
::selection { background: #FFD3B4; }

/* ---------- Boční panel: tmavá deska, aktivní položka podtržená fixou ---------- */
.sidebar { background: var(--panel) radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.2px) 0 0 / 18px 18px; border-right: 1px solid #000; }
.side-brand { border-bottom: 1px dashed rgba(243, 238, 228, .16); }
.side-brand .nm { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 16px; }
.side-brand .sb { font-family: var(--font-ruka); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--accent); margin-top: 1px; }
.nav-group-label { font-family: var(--font-ruka); text-transform: lowercase; letter-spacing: 0; font-size: 15px; font-weight: 400; color: #D9A27E; padding: 18px 12px 4px; }
.side-item { color: var(--panel-ink-soft); font-weight: 450; border-radius: 3px; }
.side-item:hover { background: rgba(243, 238, 228, .06); color: var(--panel-ink); }
.side-item.active { background: var(--accent); color: var(--ink); font-weight: 600; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); transform: rotate(-.6deg); }
.side-item.active svg { color: var(--ink); }
.side-user { border-top: 1px dashed rgba(243, 238, 228, .16); }

/* ---------- Mobilní hlavička a spodní lišta ---------- */
.header { background: var(--surface); border-bottom: 1px solid var(--border); }
.brand-name { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.navbar { background: color-mix(in srgb, var(--surface) 96%, transparent); border-top: 1px solid var(--border-strong); }
.nav-item.active { color: var(--ink); border-top-color: var(--accent); background: linear-gradient(to bottom, rgba(254, 171, 119, .18), transparent 70%); }

/* ---------- Pozdrav nahoře: velký nadpis s tahem fixy ---------- */
.greeting h1 { font-size: 34px; font-weight: 600; letter-spacing: .02em; line-height: 1.1; display: inline-block; padding-bottom: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 60 3, 140 2, 298 6' stroke='%23FEAB77' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 12px no-repeat; }
.greeting p { font-size: 15.5px; }
.greeting p b { color: var(--ink); background: var(--fixa); font-weight: 650; }
.topbar h1 { font-weight: 600; }

/* ---------- Karty jako listy papíru ---------- */
.card, .table-card, .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--stin-karta); }
.card h2, .karta-hlava h2 { font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.karta-hlava { border-bottom: 1px dashed var(--border-strong); background: var(--surface-2); }
.karta-hlava span { font-family: var(--font-ruka); font-size: 14.5px; color: var(--ink-soft); }
.karta-hlava a { color: var(--accent-2); }

/* ---------- Dlaždice s čísly: každá přilepená páskou jiné barvy ---------- */
.kpi { position: relative; padding-top: 20px; }
.kpi::before { content: ""; position: absolute; top: -9px; left: 50%; width: 74px; height: 18px; margin-left: -37px; background: var(--paska-salvej); transform: rotate(-3deg); box-shadow: 0 1px 1px rgba(60, 50, 30, .12); }
.kpi:nth-child(2)::before { background: var(--paska-pudr); transform: rotate(2deg); }
.kpi:nth-child(3)::before { background: var(--paska-horcice); transform: rotate(-1.5deg); }
.kpi:nth-child(4)::before { background: var(--paska-merunka); transform: rotate(2.5deg); }
.kpi-label { font-family: var(--font-head); font-weight: 500; letter-spacing: .08em; color: var(--ink-soft); }
.kpi-value { font-family: var(--font-head); font-weight: 600; letter-spacing: .01em; }
.kpi-meta { color: var(--ink-soft); }

/* ---------- Upozornění jako lísteček ---------- */
.upozorneni { background: #FFF1E4; border: 1px solid #F3CFB2; border-left: 4px solid var(--accent); border-radius: 2px; box-shadow: 0 10px 18px -16px rgba(120, 70, 30, .6); }
.upozorneni > svg { color: var(--accent-2); }

/* ---------- Tlačítka jako na webu: meruňková s tvrdým stínem ---------- */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: .01em; }
.btn.primary { background: var(--accent); color: var(--ink); box-shadow: 0 3px 0 #DC8E5C; }
.btn.primary:hover { background: #FFB98B; }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #DC8E5C; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); box-shadow: 0 2px 0 var(--border-strong); }
.btn.ghost:hover { background: #FFF8EF; }
.btn.tmavy { background: var(--ink); color: var(--ground); box-shadow: 0 3px 0 #000; }
.btn.jemny { background: var(--accent-soft); color: var(--accent-2); }

/* ---------- Štítky jako razítka ---------- */
.pill, .stitek { border-radius: 3px; font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: .07em; font-size: 11px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.pill::before { border-radius: 1px; }

/* ---------- Řádky seznamů jako linkovaný papír ---------- */
.row-item { border-bottom: 1px dashed var(--border); }
.row-item:hover { background: #FFF8EE; }

/* ---------- Formuláře: psaní na linku ---------- */
.field label, .field .label { font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea { background: #FFFEFB; border: 1px solid var(--border); border-bottom: 2px solid var(--ink); border-radius: 3px 3px 0 0; font-family: var(--font); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--border-strong); border-bottom-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }
.field input::placeholder, .field textarea::placeholder { font-family: var(--font-ruka); font-size: 16px; color: #A59C8B; }

/* ---------- Kalendář týdne ---------- */
.kal-hlava { font-family: var(--font-head); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.kal-den { border-right: 1px dashed var(--border); }
.kal-den.dnes { background: linear-gradient(to bottom, #FFEBDC, transparent 55%); }
.kal-udalost { border-radius: 2px; box-shadow: 0 6px 10px -9px rgba(90, 70, 40, .6); }

/* ---------- Vysvětlivka i ---------- */
.info-i { background: var(--accent-soft); color: var(--accent-2); }

/* ---------- Přihlášení ---------- */
.login-brand .nm { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Přehled: šalvějový pás s penězi, oranžová akce, barevné lístky (Jana 13. 10. 2026: „kombinace A a B“, černá ne) ---------- */
.pr-cislo { background: #5D6B45; color: #fff; border-radius: var(--r-xl); box-shadow: var(--stin-karta); }
.pr-cislo-popis, .pr-kampan-nad { font-family: var(--font-head); font-weight: 500; }
.pr-cislo-popis, .pr-cislo-meta { color: rgba(255, 255, 255, .78); }
.pr-cislo-hodnota { font-family: var(--font-head); font-weight: 600; font-size: 64px; letter-spacing: .01em; }
.pr-sloupky i { background: rgba(255, 255, 255, .28); }
.pr-sloupky i.dnes { background: #FEAB77; }
.pr-kampan { background: #FEAB77; color: var(--ink); border-radius: var(--r-xl); box-shadow: var(--stin-karta); }
.pr-kampan-nad { font-family: var(--font-ruka); font-size: 22px; text-transform: none; letter-spacing: 0; opacity: 1; }
.pr-kampan h3 { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: 30px; }
.pr-odpocet b { font-family: var(--font-head); font-weight: 600; font-size: 26px; }
.pr-skupina-nadpis { font-family: var(--font-ruka); font-size: 22px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--accent-2); margin: 10px 0 8px; }
.pr-listky { gap: 22px 16px; }
.pr-listky .kpi { border: 0; padding: 24px 18px 18px; min-height: 140px; transition: transform .15s; }
.pr-listky .kpi:nth-child(3n+1) { background: #E6EAD8; transform: rotate(-.8deg); }
.pr-listky .kpi:nth-child(3n+2) { background: #F3E3DD; transform: rotate(.6deg); }
.pr-listky .kpi:nth-child(3n+3) { background: #F4EDC8; transform: rotate(-.5deg); }
.pr-listky .kpi:hover { transform: rotate(0) translateY(-3px); }
.pr-listky .kpi-value { font-size: clamp(26px, 2.6vw, 38px); margin-top: 14px; white-space: nowrap; }
.pr-listky .kpi.pozor { outline: 3px solid #FEAB77; outline-offset: -3px; }