/* ═══════════════════════════════════════════════════════════════════════════════
   SmartKey design – jednotný vzhled firemních aplikací („soft UI“)
   Předloha: Domov obchodníka (5038), poprvé převzato do Nezaplacených faktur (5008), 22.10.2026.

   Použití:  <link rel="stylesheet" href="http://<server>:5000/static/smartkey-design.css">
             (sdílí SmartKey Manager), nebo zkopírovat soubor do static/ aplikace.
   Režim:    světlý je výchozí; tmavý = <html data-theme="dark">.
   Velikost: vše je v rem → plynule roste s šířkou okna (clamp) a násobí se --sk-zoom
             (ovladač A− / 100 % / A+ v levém panelu, viz README.md / ukazka.html).
   Rozvržení reaguje: < 86 rem (úzký monitor, tablet, mobil, velké zvětšení) je panel lišta nahoře s rozbalovacím menu.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  --sk-zoom: 1;
  --bg:#ccd6df; --surface:#eef2f6; --surface2:rgba(255,255,255,.42); --border:rgba(120,140,160,.22);
  --text:#22313f; --text2:#4d5f6f; --text3:#7d8c99;
  --accent-c:#3d8d91; --accent-h:#2f777b; --accent-dim:rgba(61,141,145,.16); --accent-txt:#2b6d71;
  --glass:rgba(255,255,255,.5); --glass-brd:rgba(255,255,255,.7); --solid:#e7edf2;
  --side:linear-gradient(180deg,#36495c,#263849); --side-txt:#e6edf3;
  --bg-img:radial-gradient(1200px 600px at 75% -10%,rgba(255,255,255,.55),transparent 60%),linear-gradient(160deg,#dbe3ea 0%,#c4cfda 55%,#b8c5d1 100%);
  --red-dim:#fee2e2; --red-txt:#991b1b; --green-dim:#dcfce7; --green-txt:#166534; --amber-dim:#fef3c7; --amber-txt:#92400e;
  --blue-dim:#dbeafe; --blue-txt:#1e40af; --violet-dim:#ede9fe; --violet-txt:#6b21a8; --gray-dim:#e2e8f0; --gray-txt:#475569;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626;
  --shadow:0 .7rem 2rem rgba(38,58,78,.16), inset 0 1px 0 rgba(255,255,255,.75); --shadow-lg:0 1.2rem 3.5rem rgba(30,45,60,.32);
  --input-bg:rgba(255,255,255,.75);
  --t1:linear-gradient(150deg,#a6dcd6,#7fc0bb); --t2:linear-gradient(150deg,#dfe6ed,#c4ced8);
  --t3:linear-gradient(150deg,#f4f8fb,#d6e4ee); --t4:linear-gradient(150deg,#b3b0e0,#8f8ec7); --t-txt:#1f2f3c;
  --pill:linear-gradient(180deg,#56a7aa,#3b878b); --pill-h:linear-gradient(180deg,#4e9fa2,#337b7f);
  --side-w: 16.5rem;
}
:root[data-theme="dark"] {
  --bg:#16202a; --surface:#1d2935; --surface2:rgba(255,255,255,.04); --border:rgba(255,255,255,.09);
  --text:#e3eaf0; --text2:#a9b7c4; --text3:#7b8a98;
  --accent-c:#5fb3b6; --accent-h:#4a9ea1; --accent-dim:rgba(95,179,182,.16); --accent-txt:#8fd3d5;
  --glass:rgba(34,48,62,.62); --glass-brd:rgba(255,255,255,.07); --solid:#223140;
  --side:linear-gradient(180deg,#121c26,#0d151d); --side-txt:#dfe7ee;
  --bg-img:radial-gradient(1200px 600px at 75% -10%,rgba(95,179,182,.10),transparent 60%),linear-gradient(160deg,#1b2733 0%,#141d26 100%);
  --red-dim:#3b0a0a; --red-txt:#fca5a5; --green-dim:#052e16; --green-txt:#86efac; --amber-dim:#451a03; --amber-txt:#fcd34d;
  --blue-dim:#172554; --blue-txt:#93c5fd; --violet-dim:#2e1065; --violet-txt:#d8b4fe; --gray-dim:#2b364a; --gray-txt:#cbd5e1;
  --ok:#22c55e; --warn:#f59e0b; --err:#f87171;
  --shadow:0 .7rem 2rem rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); --shadow-lg:0 1.2rem 3.5rem rgba(0,0,0,.6);
  --input-bg:rgba(255,255,255,.06);
  --t1:linear-gradient(150deg,#2f6f6c,#245955); --t2:linear-gradient(150deg,#2e3d4b,#253240);
  --t3:linear-gradient(150deg,#344a5c,#2a3b4b); --t4:linear-gradient(150deg,#4a4a7c,#3b3b66); --t-txt:#eef3f7;
}

/* ── plynulá velikost: 1rem ≈ 13 px (notebook) … 14 px (1440) … 16 px (1920) … 18 px (2560+), × zvětšení ── */
html { font-size: calc(var(--sk-zoom) * clamp(12.5px, 0.42vw + 8px, 18px)); }

/* ── základ ── */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); background-image: var(--bg-img); background-attachment: fixed; color: var(--text);
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; font-size: 1rem; }
a { color: var(--accent-txt); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin: 0 0 .3rem; color: var(--text);
  text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 .2rem .55rem rgba(30,50,70,.18); }
:root[data-theme="dark"] h1 { text-shadow: 0 .15rem .55rem rgba(0,0,0,.5); }
h2 { font-size: 1.1rem; font-weight: 800; margin: 1.6rem 0 .55rem; border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
.muted { color: var(--text3); } .small { font-size: .88rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; } .row.between { justify-content: space-between; } .row.gap { gap: .7rem; }
.mt { margin-top: 1rem; }
code { background: var(--accent-dim); color: var(--accent-txt); padding: .07rem .5rem; border-radius: .4rem; font-weight: 700; font-size: .86em; white-space: nowrap; }

/* ── rozvržení: levý panel + obsah na celou šířku ── */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); gap: .4rem; min-height: 100vh; }
.shell.bez-panelu { grid-template-columns: 1fr; }
.side { position: sticky; top: .85rem; height: calc(100vh - 1.7rem); margin: .85rem 0 .85rem .85rem; border-radius: 2rem; background: var(--side);
  color: var(--side-txt); box-shadow: 0 1.2rem 2.8rem rgba(20,32,44,.35), inset 0 1px 0 rgba(255,255,255,.12); display: flex;
  flex-direction: column; padding: 1.5rem 1rem 1.1rem; overflow: auto; }
.ava { width: 6.4rem; height: 6.4rem; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; font-size: 2.2rem; font-weight: 800;
  color: #fff; background: linear-gradient(150deg,#5aa9ac,#3b7f8a); border: .28rem solid rgba(255,255,255,.75); flex: none;
  box-shadow: 0 .55rem 1.4rem rgba(0,0,0,.35), inset 0 .15rem .4rem rgba(255,255,255,.35); }
.ahoj { text-align: center; font-size: 1.2rem; font-weight: 800; margin: 1rem 0 .3rem; word-break: break-word; }
.role { text-align: center; font-size: .82rem; opacity: .65; margin-bottom: 1.25rem; }
.menu { display: flex; flex-direction: column; gap: .4rem; }
.menu a, .side-dole a { display: flex; align-items: center; gap: .85rem; padding: .78rem 1rem; border-radius: 1.1rem; color: var(--side-txt);
  text-decoration: none; font-weight: 600; font-size: .95rem; cursor: pointer; opacity: .88; transition: .15s; white-space: nowrap; }
.menu a:hover, .side-dole a:hover { background: rgba(255,255,255,.08); opacity: 1; text-decoration: none; }
.menu a.on { background: linear-gradient(180deg,#eef3f7,#d5dee6); color: #24384a; opacity: 1; box-shadow: 0 .4rem 1rem rgba(0,0,0,.28), inset 0 1px 0 #fff; }
.menu .ic, .side-dole .ic { width: 1.55rem; height: 1.55rem; flex: none; display: grid; place-items: center; }
.menu svg, .side-dole svg, .tile .ik svg { width: 1.4rem; height: 1.4rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-dole { margin-top: auto; padding: .85rem .7rem .3rem; border-radius: 1.4rem; background: rgba(255,255,255,.06); display: flex; flex-direction: column; gap: .15rem; }
.side-dole a { padding: .55rem .7rem; font-size: .88rem; }
/* ovladač velikosti A− / 100 % / A+ */
.velikost { display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding: .35rem .5rem .5rem; font-size: .82rem; color: var(--side-txt); }
.velikost button { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: var(--side-txt); box-shadow: none;
  padding: .25rem .6rem; font-size: .8rem; border-radius: .7rem; backdrop-filter: none; }
.velikost button:hover { background: rgba(255,255,255,.2); }
.velikost .pct { min-width: 3.2rem; text-align: center; font-weight: 700; cursor: pointer; opacity: .85; }
.hlavni { min-width: 0; }
.container { max-width: none; margin: 0; padding: 1.5rem 1.8rem 2.8rem; }

/* ── karty ze skla, pastelové dlaždice, úvodní banner ── */
.card { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 1.7rem; box-shadow: var(--shadow);
  backdrop-filter: blur(14px); padding: 1.25rem 1.4rem; }
.card h2 { margin-top: 0; border: none; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.1rem; margin-bottom: 1rem; }
.tile { border: 1px solid rgba(255,255,255,.55); border-radius: 1.7rem; padding: 1.25rem; color: var(--t-txt); position: relative; overflow: hidden;
  box-shadow: 0 .85rem 1.8rem rgba(38,58,78,.18), inset 0 1px 0 rgba(255,255,255,.6); background: var(--t1); }
.tile:nth-child(4n+2) { background: var(--t2); } .tile:nth-child(4n+3) { background: var(--t3); } .tile:nth-child(4n+4) { background: var(--t4); }
.tile .ik { width: 3.3rem; height: 3.3rem; border-radius: 1.1rem; display: grid; place-items: center; margin-bottom: .85rem;
  background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 .4rem .85rem rgba(0,0,0,.12), inset 0 1px 0 #fff; }
.tile .l { font-size: 1rem; font-weight: 700; opacity: .92 } .tile .v { font-size: 2.1rem; font-weight: 800; margin-top: .3rem }
.tile .s { opacity: .8; font-size: .86rem; margin-top: .3rem }
.tile.warn::after, .tile.err::after { content: ''; position: absolute; top: 1.1rem; right: 1.1rem; width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 .28rem rgba(255,255,255,.4); } .tile.err::after { background: var(--err); }
.hero { position: relative; overflow: hidden; border-radius: 1.8rem; padding: 1.8rem 2.1rem; margin-bottom: 1.1rem; color: #eef4f8;
  background: linear-gradient(135deg,#4b6175 0%,#3a4e61 55%,#2f4153 100%); box-shadow: 0 1rem 2.4rem rgba(30,45,60,.30), inset 0 1px 0 rgba(255,255,255,.15); }
.hero h2 { border: 0; margin: 0 0 .4rem; font-size: 1.7rem; }

/* ── tlačítka – tyrkysové pilulky ── */
button, .btn { cursor: pointer; border: 1px solid var(--glass-brd); background: var(--glass); color: var(--accent-txt);
  padding: .55rem 1.1rem; border-radius: 999px; font: inherit; font-size: .93rem; font-weight: 700; display: inline-block;
  box-shadow: 0 .2rem .55rem rgba(38,58,78,.12), inset 0 1px 0 rgba(255,255,255,.7); backdrop-filter: blur(10px); }
button:hover, .btn:hover { background: rgba(255,255,255,.75); text-decoration: none; }
:root[data-theme="dark"] button:hover, :root[data-theme="dark"] .btn:hover { background: rgba(255,255,255,.1); }
.primary, button.primary, .btn.primary { background: var(--pill); color: #fff; border: 0; box-shadow: 0 .4rem 1rem rgba(30,90,95,.30), inset 0 1px 0 rgba(255,255,255,.35); }
.primary:hover, button.primary:hover, .btn.primary:hover { background: var(--pill-h); }
.danger, button.danger { color: var(--err); }
.big { padding: .85rem 1.5rem; font-size: 1.05rem; } button.small, .btn.small { padding: .35rem .85rem; font-size: .86rem; }
button:disabled, .btn:disabled { opacity: .5; cursor: default; }

/* ── záložky ── */
.tabs { display: flex; gap: .55rem; flex-wrap: wrap; margin: .85rem 0 1.25rem; }
.tab { padding: .5rem 1.05rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-brd); color: var(--text2);
  font-weight: 700; font-size: .93rem; box-shadow: 0 .15rem .4rem rgba(38,58,78,.10), inset 0 1px 0 rgba(255,255,255,.6); backdrop-filter: blur(10px); }
.tab:hover { color: var(--accent-txt); text-decoration: none; }
.tab.active, .tab.on { background: var(--pill); color: #fff; border-color: transparent; }

/* ── tabulky ── */
.table-wrap { overflow-x: auto; background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 1.7rem; box-shadow: var(--shadow);
  backdrop-filter: blur(14px); padding: .3rem 1rem .55rem; }
table { width: 100%; border-collapse: collapse; margin: .55rem 0 1.25rem; }
.table-wrap table { margin: 0; }
th, td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text3); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover td { background: rgba(255,255,255,.35); }
:root[data-theme="dark"] tbody tr:hover td { background: rgba(255,255,255,.04); }

/* ── štítky a hlášky ── */
.badge { display: inline-block; padding: .14rem .62rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.badge.ok { background: var(--green-dim); color: var(--green-txt); } .badge.err { background: var(--red-dim); color: var(--red-txt); }
.badge.warn { background: var(--amber-dim); color: var(--amber-txt); } .badge.info { background: var(--blue-dim); color: var(--blue-txt); }
.badge.mut { background: var(--gray-dim); color: var(--gray-txt); } .badge.vio { background: var(--violet-dim); color: var(--violet-txt); }
.badge.acc { background: var(--accent-dim); color: var(--accent-txt); }
.alert { padding: .78rem 1.1rem; border-radius: 1.1rem; margin: .7rem 0; box-shadow: var(--shadow); }
.alert.ok { background: var(--green-dim); color: var(--green-txt); } .alert.warn { background: var(--amber-dim); color: var(--amber-txt); }
.alert.error, .alert.err { background: var(--red-dim); color: var(--red-txt); } .alert.info { background: var(--blue-dim); color: var(--blue-txt); }

/* ── formuláře, přihlášení ── */
input, select, textarea { font: inherit; background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: .85rem; padding: .55rem .78rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-c); box-shadow: 0 0 0 .2rem var(--accent-dim); }
label { color: var(--text2); font-weight: 600; font-size: .93rem; }
.login { max-width: 28rem; margin: 12vh auto; background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 2rem;
  backdrop-filter: blur(14px); box-shadow: var(--shadow-lg); padding: 2rem; }
.login input { width: 100%; margin-top: .4rem; }

/* ── okna ── */
.modal { background: var(--surface); border-radius: 1.7rem; box-shadow: var(--shadow-lg); }

/* ── užší okno / mobil / velké zvětšení: panel je lišta nahoře s tlačítkem „☰ <stránka>“, menu se rozbalí s celými názvy ──
   (třídy sk-uzke / sk-mobil nastavuje smartkey-design.js podle šířky v rem; tlačítko a obal .menu-obal doplní sám) */
.menu-obal { display: contents; }
.menu-prepinac { display: none; }
:root.sk-uzke { --side-w: 1fr; }
:root.sk-uzke .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; }
:root.sk-uzke .side { align-self: start; position: sticky; top: .5rem; z-index: 40; height: auto; margin: .6rem .6rem 0; padding: .55rem .7rem;
  flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .7rem; border-radius: 1.3rem; overflow: visible; }
:root.sk-uzke .side .ava { width: 2.6rem; height: 2.6rem; font-size: .95rem; border-width: .15rem; margin: 0; }
:root.sk-uzke .side .ahoj, :root.sk-uzke .side .role { display: none; }
:root.sk-uzke .menu-prepinac { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; padding: .6rem 1rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: var(--side-txt); border-radius: 1rem;
  font-size: 1.02rem; font-weight: 800; text-align: left; box-shadow: none; backdrop-filter: none; }
:root.sk-uzke .menu-prepinac:hover { background: rgba(255,255,255,.2); }
.menu-prepinac .menu-aktualni, .menu-prepinac #menu-aktualni { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-prepinac .ham { display: inline-flex; flex-direction: column; gap: .2rem; }
.menu-prepinac .ham i { display: block; width: 1.2rem; height: .17rem; border-radius: 1px; background: currentColor; }
.menu-prepinac .sipka { transition: transform .15s; }
.side.otevreno .menu-prepinac .sipka { transform: rotate(180deg); }
:root.sk-uzke .menu-obal { display: none; }
:root.sk-uzke .side.otevreno .menu-obal { display: flex; flex-direction: column; gap: .5rem; position: absolute; left: 0; right: 0; top: calc(100% + .4rem);
  max-height: calc(100vh - 6rem); overflow: auto; padding: .7rem; border-radius: 1.3rem; background: var(--side); box-shadow: var(--shadow-lg); }
:root.sk-uzke .side.otevreno .menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .3rem; margin: 0; width: auto; }
:root.sk-uzke .side .menu a, :root.sk-uzke .side .side-dole a { font-size: 1rem; gap: .85rem; padding: .75rem 1rem; justify-content: flex-start; }
:root.sk-uzke .side .menu .sekce { grid-column: 1 / -1; display: block; width: auto; height: auto; margin: .5rem .6rem 0; color: var(--side-txt); opacity: .6; }
:root.sk-uzke .side .side-dole { margin: 0; flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; padding: .4rem; }
:root.sk-uzke .side .velikost { flex-direction: row; padding: .2rem .5rem; }
:root.sk-uzke .container { padding: 1.1rem 1rem 2.4rem; }
:root.sk-mobil .container { padding: .8rem; }
:root.sk-mobil h1 { font-size: 1.55rem; }