/* KSPACE CREW — design systém
 *
 * Pravidla, která platí všude a nesmí se porušit:
 *  1. Text se nikdy nevejde-nevejde a nevyjede. Všechny bloky s obsahem od
 *     lidí mají overflow-wrap: anywhere, žádné pevné výšky.
 *  2. Mezery dělá layout (gap), ne margin na jednotlivých prvcích.
 *  3. Každá barva je token a je definovaná pro světlý i tmavý motiv.
 *  4. Dotyková plocha nikdy pod 44 px.
 *  5. Nic neroluje do stran. Široké věci (tabulky) rolují uvnitř sebe.
 */

/* ---------------- tokeny: světlý motiv ---------------- */

:root {
  --page: #F3F0FB;
  --plocha: #FFFFFF;
  --plocha-2: #F5F1FE;
  --text: #211B33;
  --text-2: #524B69;
  --text-3: #665F7D;
  --linka: #E5DEF6;
  --linka-2: #D3C9EC;

  --akcent: #5B2FCC;
  --akcent-tmavy: #4A249F;
  --akcent-jemny: #EEE8FF;
  --na-akcentu: #FFFFFF;

  --ruzova: #B32068;
  --ruzova-jemna: #FFE4F0;
  --na-ruzove: #FFFFFF;

  --ok: #136B52;
  --ok-jemny: #DCF1E9;
  --pozor: #8A5310;
  --pozor-jemny: #FBEBD6;

  --stin: 0 1px 2px rgba(33, 27, 51, .06);
  --stin-2: 0 8px 24px rgba(33, 27, 51, .08);

  --r: 16px;
  --r-s: 10px;
  --dotyk: 44px;

  --f-nadpis: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------- tokeny: tmavý motiv ---------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-motiv="svetly"]) {
    --page: #121020;
    --plocha: #1C1830;
    --plocha-2: #241F3C;
    --text: #F1EDFC;
    --text-2: #BDB6D2;
    --text-3: #9A93B4;
    --linka: #2C2747;
    --linka-2: #3B3459;

    --akcent: #B79BFF;
    --akcent-tmavy: #CDBAFF;
    --akcent-jemny: #2B2249;
    --na-akcentu: #16112B;

    --ruzova: #FF9BC6;
    --ruzova-jemna: #3A2136;
    --na-ruzove: #2E1225;

    --ok: #6ED3AC;
    --ok-jemny: #122F26;
    --pozor: #E7B26B;
    --pozor-jemny: #33260F;

    --stin: 0 1px 2px rgba(0, 0, 0, .35);
    --stin-2: 0 8px 24px rgba(0, 0, 0, .4);
  }
}

:root[data-motiv="tmavy"] {
  --page: #121020;
  --plocha: #1C1830;
  --plocha-2: #241F3C;
  --text: #F1EDFC;
  --text-2: #BDB6D2;
  --text-3: #9A93B4;
  --linka: #2C2747;
  --linka-2: #3B3459;
  --akcent: #B79BFF;
  --akcent-tmavy: #CDBAFF;
  --akcent-jemny: #2B2249;
  --na-akcentu: #16112B;
  --ruzova: #FF9BC6;
  --ruzova-jemna: #3A2136;
  --na-ruzove: #2E1225;
  --ok: #6ED3AC;
  --ok-jemny: #122F26;
  --pozor: #E7B26B;
  --pozor-jemny: #33260F;
  --stin: 0 1px 2px rgba(0, 0, 0, .35);
  --stin-2: 0 8px 24px rgba(0, 0, 0, .4);
}

/* ---------------- základ ---------------- */

* { box-sizing: border-box; min-width: 0; }
[hidden] { display: none !important; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-nadpis);
  margin: 0;
  line-height: 1.2;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
p { margin: 0; overflow-wrap: anywhere; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: 6px; }

/* Každý text od lidí. Nikdy nevyjede, ani jedno dlouhé slovo. */
.text { overflow-wrap: anywhere; hyphens: auto; }

.cisla { font-family: var(--f-nadpis); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------------- rozvržení ---------------- */

.sloupec { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.sloupec-s { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.radek {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-width: 0;
}
.radek .klic { color: var(--text-2); font-size: 13.5px; overflow-wrap: anywhere; }
.radek .hodnota {
  font-family: var(--f-nadpis); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 14px; text-align: right; white-space: nowrap; flex: none;
}
/* Hodnota, která není číslo, ale volný text od lidí (jméno, číslo skříňky).
   Čísla se nesmí zalamovat, text ano — jinak dlouhé jméno vyjede z karty. */
.radek .hodnota.text {
  white-space: normal; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0;
}

.obrazovka { display: flex; flex-direction: column; gap: 13px; padding: 16px; min-width: 0; }

/* ---------------- karta ---------------- */

.karta {
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: var(--r);
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--stin);
  min-width: 0;
}
.karta h3 { font-size: 16.5px; }
.karta p { font-size: 13.5px; color: var(--text-2); }

.nadpisek {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}

/* ---------------- hero (dnešní směna) ---------------- */

.hero {
  /* Pevná barva pod přechodem: kdyby se přechod nevykreslil (starý prohlížeč,
     tisk, úsporný režim), zůstane text na fialové, ne na bílé. */
  background-color: #5B2FCC;
  background-image: linear-gradient(142deg, #6B41E0 0%, #5B2FCC 48%, #A03A87 118%);
  color: #FFFFFF;
  border-radius: var(--r);
  padding: 19px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--stin-2);
}
.hero .nadpisek { color: rgba(255, 255, 255, .82); }
.hero .cas {
  font-family: var(--f-nadpis); font-size: 30px; font-weight: 600;
  letter-spacing: -.03em; white-space: nowrap;
}
.hero .kdo { font-size: 13.5px; color: rgba(255, 255, 255, .88); overflow-wrap: anywhere; }
.hero .tlacitko.plne { background: #FFFFFF; color: #4A249F; }
.hero .tlacitko.obrys { border-color: rgba(255, 255, 255, .5); color: #FFFFFF; }

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

.tlacitko {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--dotyk);
  padding: 11px 18px;
  border-radius: 99px;
  background: var(--akcent);
  color: var(--na-akcentu);
  font-weight: 700; font-size: 14.5px;
  text-align: center; width: 100%;
  overflow-wrap: anywhere;
}
.tlacitko.obrys {
  background: transparent; color: var(--text);
  border: 1.5px solid var(--linka-2); font-weight: 600;
}
.tlacitko.ruzove { background: var(--ruzova); color: var(--na-ruzove); }
.tlacitko.male { width: auto; padding: 9px 16px; font-size: 13.5px; }
.tlacitko[disabled] { opacity: .55; cursor: default; }
.tlacitka { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- štítky ---------------- */

.stitek {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 99px; white-space: nowrap;
  background: var(--plocha-2); color: var(--text-3);
}
.stitek.fialovy { background: var(--akcent-jemny); color: var(--akcent-tmavy); }
.stitek.ruzovy { background: var(--ruzova-jemna); color: var(--ruzova); }
.stitek.zeleny { background: var(--ok-jemny); color: var(--ok); }
.stitek.oranzovy { background: var(--pozor-jemny); color: var(--pozor); }

/* ---------------- checklist ---------------- */

.ukol {
  display: flex; gap: 12px; align-items: flex-start;
  width: 100%; text-align: left;
  padding: 11px 0; min-height: var(--dotyk);
  border-bottom: 1px solid var(--linka);
}
.ukol:last-child { border-bottom: 0; }
.ukol .ctverec {
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--linka-2); border-radius: 7px;
  display: grid; place-items: center; color: transparent;
}
.ukol[aria-checked="true"] .ctverec { background: var(--ok); border-color: var(--ok); color: var(--na-akcentu); }
.ukol[aria-checked="true"] .popis { color: var(--text-3); text-decoration: line-through; }
.ukol .popis { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }

.pruh { height: 6px; background: var(--plocha-2); border-radius: 99px; overflow: hidden; }
.pruh i { display: block; height: 100%; background: var(--akcent); border-radius: 99px; }

/* ---------------- zpráva na nástěnce ---------------- */

.zprava {
  border-radius: var(--r); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--akcent-jemny); min-width: 0;
}
.zprava.ruzova { background: var(--ruzova-jemna); }
.zprava.pozor { background: var(--pozor-jemny); }
.zprava.dobra { background: var(--ok-jemny); }
.zprava .kdy { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.zprava .nadpis { font-family: var(--f-nadpis); font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.zprava .telo { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }

/* ---------------- pole ---------------- */

.pole {
  width: 100%; min-height: var(--dotyk);
  border: 1px solid var(--linka-2); background: var(--plocha);
  border-radius: var(--r-s); padding: 11px 14px; font-size: 15px;
}
.pole::placeholder { color: var(--text-3); }
textarea.pole { resize: vertical; min-height: 84px; line-height: 1.55; }

/* ---------------- tabulka ---------------- */

.tabulka-obal {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--linka); border-radius: var(--r);
  background: var(--plocha);
}
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; padding: 12px 14px 8px; white-space: nowrap;
}
td { padding: 11px 14px; border-top: 1px solid var(--linka); vertical-align: top; overflow-wrap: anywhere; }
td.cislo { font-family: var(--f-nadpis); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ---------------- dlaždice ---------------- */

.dlazdice { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
.dlazdice > div {
  background: var(--plocha); border: 1px solid var(--linka);
  border-radius: var(--r); padding: 14px; box-shadow: var(--stin); min-width: 0;
}
.dlazdice .cislo {
  font-family: var(--f-nadpis); font-size: 22px; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.dlazdice .popisek { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.35; }

/* ---------------- spodní navigace ---------------- */

.navigace {
  display: grid; background: var(--plocha);
  border-top: 1px solid var(--linka); padding: 6px 4px 10px;
}
.navigace.ctyri { grid-template-columns: repeat(4, 1fr); }
.navigace.pet { grid-template-columns: repeat(5, 1fr); }
.navigace button {
  min-height: var(--dotyk);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-3); border-radius: var(--r-s); padding: 4px 2px;
}
.navigace button .nazev { font-size: 10.5px; font-weight: 600; }
.navigace button[aria-selected="true"] { color: var(--akcent); }

/* ---------------- prázdný stav ---------------- */

.prazdno {
  border: 1px dashed var(--linka-2); border-radius: var(--r);
  padding: 20px; text-align: center; color: var(--text-2); font-size: 13.5px;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }