/* ==========================================================================
   PartyStyl Akce — interní systém akcí
   Design systém shodný s HUBem a weby PartyStyl / PartyRozvoz / PartySklad
   ========================================================================== */

:root {
  --bg: #f4f8fa;
  --paper: #ffffff;
  --surface-2: #e9eff3;
  --ink: #223640;
  --ink-soft: #5c7480;
  --ink-faint: #93a7b1;
  --line: #dbe5ea;
  --blue: #0090cc;
  --blue-dark: #006189;
  --blue-soft: #e6f5fc;
  --gold: #b4671a;
  --gold-soft: #fdf4e7;
  --ok: #128a5e;
  --ok-soft: #e8f7f0;
  --zla: #b3403a;
  --zla-soft: #fbeceb;
  --r: 14px;
  --r-sm: 9px;
  --shadow: 0 1px 2px rgba(34, 54, 64, .04), 0 8px 26px rgba(34, 54, 64, .07);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --hlavicka: 58px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; margin: 0; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--blue-dark); }

button, input, select, textarea { font: inherit; color: inherit; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.skryte { display: none !important; }

/* ---- tlačítka ---- */

.tl {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 8px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: .89rem; font-weight: 500; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tl:hover { background: var(--surface-2); }
.tl:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tl.hlavni { background: var(--blue); border-color: var(--blue-dark); color: #fff; }
.tl.hlavni:hover { background: var(--blue-dark); }
.tl.zla { color: var(--zla); border-color: #eccfcd; background: var(--zla-soft); }
.tl.maly { padding: 5px 10px; font-size: .82rem; }
.tl:disabled { opacity: .5; cursor: not-allowed; }

/* ---- formulářová pole ---- */

.pole { display: grid; gap: 5px; }
.pole > label { font-size: .76rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .02em; }
input[type=text], input[type=password], input[type=date], input[type=time],
input[type=email], input[type=tel], input[type=search], select, textarea {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

/* ---- hlavička ---- */

.hlavicka {
  position: sticky; top: 0; z-index: 40;
  height: var(--hlavicka);
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.znacka { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; white-space: nowrap; }
.znacka span { color: var(--blue); }

.nav { display: flex; gap: 2px; margin-left: 6px; }
.nav button {
  padding: 7px 13px; border: 0; background: transparent; border-radius: var(--r-sm);
  color: var(--ink-soft); font-size: .89rem; font-weight: 500; cursor: pointer;
}
.nav button:hover { background: var(--surface-2); color: var(--ink); }
.nav button.tam { background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; }

/* Kolonka, ve které něco čeká na zařazení — ať to jde přehlédnout jen těžko. */
.nav button.ceka { background: var(--gold-soft); color: var(--gold); font-weight: 700; }
.nav button.ceka.tam { background: var(--gold); color: #fff; }
.spodni-nav button.ceka { color: var(--gold); font-weight: 700; }

.hlavicka .vpravo { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hlavicka .vpravo .tl { white-space: nowrap; flex: 0 0 auto; }

.hledani { width: 190px; }

.ja {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  color: #fff; font-weight: 600; font-size: .8rem; flex: 0 0 auto;
}

/* ---- plocha ---- */

.plocha { padding: 18px; }
.plocha.siroka { padding: 0; }

.panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}

.radek-nastroju {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.radek-nastroju .mezera { flex: 1 1 auto; }

.titulek-obdobi { font-family: var(--serif); font-size: 1.35rem; min-width: 210px; }

/* ---- filtry ---- */

.filtry {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
}
.filtr-stitek {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper);
  font-size: .82rem; user-select: none;
}
.filtr-stitek input { display: none; }
.filtr-stitek .tecka { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.filtr-stitek.zap { border-color: transparent; background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; }
.filtr-nadpis { font-size: .74rem; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }

/* ---- kalendář ---- */

.kal-mrizka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.kal-hlava { background: var(--surface-2); padding: 7px 10px; font-size: .76rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.kal-den { background: var(--paper); min-height: 118px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.kal-den.mimo { background: #fafcfd; }
.kal-den.minulost { background: #e4ebef; }
.kal-den.minulost .kal-cislo { color: var(--ink-faint); }
.kal-den.dnes { background: var(--blue-soft); }
.kal-cislo { font-size: .8rem; font-weight: 600; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; }
.kal-den.dnes .kal-cislo { color: var(--blue-dark); }
.kal-den.mimo .kal-cislo { color: var(--ink-faint); font-weight: 400; }
.kal-pridat { border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 3px; opacity: 0; }
.kal-den:hover .kal-pridat { opacity: 1; }

.udalost {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-left: 3px solid var(--blue);
  background: var(--surface-2); border-radius: 5px;
  padding: 3px 6px; font-size: .78rem; line-height: 1.3;
}
.udalost:hover { background: var(--blue-soft); }
.udalost .cas { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); margin-right: 4px; }
.udalost .nazev { font-weight: 500; }
.udalost.probehlo { opacity: .55; }
.udalost.probehlo .nazev { text-decoration: line-through; }

.kal-vice { font-size: .72rem; color: var(--ink-faint); padding-left: 4px; background: 0; border: 0; cursor: pointer; text-align: left; }

/* kalendář — seznam */
.kal-seznam { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.kal-seznam-den { background: var(--paper); padding: 10px 14px; display: grid; grid-template-columns: 150px 1fr; gap: 14px; }
.kal-seznam-den.minulost { background: #e4ebef; color: var(--ink-soft); }
.kal-seznam-datum { font-weight: 600; font-size: .88rem; }
.kal-seznam-datum small { display: block; font-weight: 400; color: var(--ink-faint); }
.kal-seznam-akce { display: grid; gap: 5px; }

/* ---- tabule ---- */

.tabule-pas { display: flex; gap: 12px; padding: 0 18px 18px; overflow-x: auto; align-items: flex-start; min-height: 60vh; }
.sloupec { flex: 0 0 265px; background: var(--surface-2); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - var(--hlavicka) - 120px); }
.sloupec > .hlava { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; padding: 0 3px; }
.sloupec > .hlava .pocet { margin-left: auto; color: var(--ink-faint); font-size: .78rem; }
.sloupec .karty { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 2px; min-height: 34px; }
.sloupec.cil { outline: 2px dashed var(--blue); outline-offset: -3px; }

.karta {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--ink-faint);
  border-radius: var(--r-sm); padding: 9px 10px; cursor: grab;
  display: grid; gap: 5px; box-shadow: 0 1px 2px rgba(34,54,64,.05);
}
.karta:hover { border-color: var(--blue); }
.karta.táhne { opacity: .45; }
.karta .nazev { font-size: .87rem; font-weight: 600; line-height: 1.3; }
.karta .radka { font-size: .76rem; color: var(--ink-soft); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.karta .odznaky { display: flex; gap: 4px; flex-wrap: wrap; }

.odznak { font-size: .67rem; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink-soft); white-space: nowrap; }
.odznak.zap { color: #fff; }
.odznak.lidi { background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; }

/* ---- kuchyň ---- */

.kuchyn-tyden { display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }
.kuchyn-den { background: var(--paper); padding: 10px; display: flex; flex-direction: column; gap: 9px; min-width: 180px; }
.kuchyn-den.dnes { background: var(--blue-soft); }
.kuchyn-den.minulost { background: #e4ebef; }
.kuchyn-den > .hlava { font-size: .88rem; font-weight: 700; padding-bottom: 6px; border-bottom: 2px solid var(--blue); display: flex; justify-content: space-between; align-items: baseline; }
.kuchyn-den > .hlava small { font-weight: 500; color: var(--ink-soft); }
.kuchyn-prazdno { color: var(--ink-faint); font-size: .8rem; padding: 6px 2px; }

.kuchyn-karta { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); padding: 9px 10px; display: grid; gap: 6px; border-left: 3px solid var(--blue); }
.kuchyn-karta .cas { font-family: var(--mono); font-size: 1.16rem; font-weight: 600; color: var(--blue-dark); line-height: 1.1; }
.kuchyn-karta .kdo { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.kuchyn-karta .kde { font-size: .78rem; color: var(--ink-soft); }
.kuchyn-karta .polozky { font-size: .84rem; white-space: pre-wrap; line-height: 1.45; border-top: 1px dashed var(--line); padding-top: 6px; margin: 0; font-family: var(--sans); }
.kuchyn-karta.sbaleno .polozky { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.kuchyn-karta .vic { background: 0; border: 0; padding: 0; font-size: .76rem; color: var(--blue-dark); cursor: pointer; text-align: left; font-weight: 600; }

/* ---- rozvoz ---- */

.zastavky { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.zastavka { background: var(--paper); padding: 13px 16px; display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: start; }
.zastavka .cas { font-family: var(--mono); font-weight: 600; color: var(--blue-dark); }
.zastavka .kdo { font-weight: 600; }
.zastavka .kde { font-size: .85rem; color: var(--ink-soft); }
.zastavka .tel { font-family: var(--mono); font-size: .84rem; }
.zastavka .akce-tl { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- panel detailu ---- */

.zaves { position: fixed; inset: 0; background: rgba(34, 54, 64, .38); z-index: 60; display: flex; justify-content: flex-end; }
.detail {
  width: min(720px, 100%); height: 100%; background: var(--bg);
  display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(34,54,64,.18);
}
.detail > header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.detail > header .nadpis { font-family: var(--serif); font-size: 1.2rem; flex: 1 1 auto; }
.detail .telo { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: grid; gap: 14px; }
.detail footer { padding: 11px 16px; background: var(--paper); border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }

.blok { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: grid; gap: 11px; }
.blok > .nadpis-bloku { font-size: .74rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .09em; }
.mrizka-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 11px; }

.termin-radek { display: grid; grid-template-columns: 1fr 92px 92px 1fr auto; gap: 7px; align-items: center; }
.seznam-ukolu { display: grid; gap: 6px; }
.ukol { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; }
.ukol input { margin-top: 4px; }
.ukol.hotovo span { text-decoration: line-through; color: var(--ink-faint); }

.zprava { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--paper); display: grid; gap: 5px; }
.zprava > .hlava { font-size: .76rem; color: var(--ink-faint); display: flex; gap: 10px; }
.zprava .text { white-space: pre-wrap; font-size: .88rem; line-height: 1.5; }
.zprava.sbalena .text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

.priloha { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font-size: .86rem; }
.priloha .role { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--blue-dark); background: var(--blue-soft); padding: 2px 7px; border-radius: 4px; }
.priloha .mezera { flex: 1 1 auto; }

/* ---- přihlášení ---- */

.prihlaseni { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.prihlaseni .panel { width: min(370px, 100%); padding: 26px; display: grid; gap: 14px; }
.prihlaseni h1 { font-size: 1.5rem; }

/* ---- hlášky ---- */

.hlasky { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; }
.hlaska { background: var(--ink); color: #fff; padding: 10px 17px; border-radius: 999px; font-size: .87rem; box-shadow: var(--shadow); }
.hlaska.zla { background: var(--zla); }

.prazdno { padding: 40px 20px; text-align: center; color: var(--ink-faint); }

/* ---- nastavení ---- */

.nast-radek { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.nast-radek:last-child { border-bottom: 0; }

/* ---- mobil ---- */

.spodni-nav { display: none; }

@media (max-width: 860px) {
  .hlavicka { gap: 10px; padding: 0 12px; }
  .hlavicka .nav { display: none; }
  .hledani { width: 100%; max-width: 150px; }
  .plocha { padding: 12px; padding-bottom: 74px; }
  .tabule-pas { padding: 0 12px 76px; }
  .kal-den { min-height: 82px; }
  .kal-den .udalost .nazev { font-size: .72rem; }
  .kuchyn-tyden { grid-template-columns: 1fr; }
  .kal-seznam-den { grid-template-columns: 1fr; gap: 6px; }
  .zastavka { grid-template-columns: 62px 1fr; }
  .zastavka .akce-tl { grid-column: 1 / -1; }
  .termin-radek { grid-template-columns: 1fr 1fr; }
  .detail { width: 100%; }

  .spodni-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--paper); border-top: 1px solid var(--line);
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
  }
  .spodni-nav button {
    flex: 1 1 0; border: 0; background: 0; cursor: pointer;
    display: grid; gap: 1px; justify-items: center;
    padding: 5px 2px; font-size: .66rem; color: var(--ink-soft);
  }
  .spodni-nav button .ik { font-size: 1.1rem; line-height: 1.1; }
  .spodni-nav button.tam { color: var(--blue-dark); font-weight: 700; }
}

/* ---- tisk ---- */

@media print {
  .hlavicka, .spodni-nav, .filtry, .radek-nastroju, .zaves > *:not(.detail),
  .detail > header, .detail footer, .kal-pridat, .tl, .hlasky { display: none !important; }
  body { background: #fff; font-size: 11.5pt; }
  .zaves { position: static; background: 0; display: block; }
  .detail { width: 100%; height: auto; box-shadow: none; background: #fff; }
  .detail .telo { overflow: visible; padding: 0; }
  .panel, .blok, .kuchyn-karta, .kuchyn-den { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .kuchyn-tyden { grid-template-columns: repeat(2, 1fr); overflow: visible; }
  .kuchyn-karta.sbaleno .polozky { -webkit-line-clamp: unset; overflow: visible; display: block; }
  .kuchyn-karta .vic { display: none; }
  .tisk-hlavicka { display: block !important; margin-bottom: 12px; }
}
.tisk-hlavicka { display: none; }