/* MIBA Docs: přihlášení a správa. Černobílý vzhled jako web dokumentace (MkDocs Material,
   web/extra.css v ~/MIBA/dokumentace). Režim: volba přepínače webu (schema.js nastaví
   data-schema na <html>), jinak podle systému (prefers-color-scheme). */
:root {
  color-scheme: light;
  --text: #1a1a1a;
  --text-slaby: #5e5e5e;
  --okraj: #e0e0e0;
  --okraj-pole: #767676;
  --pozadi: #fff;
  --pozadi-slabe: #f5f5f5;
  --pole: #fff;
  --hlavicka: #000;
  --hlavicka-text: #fff;
  --hlavicka-linka: transparent;
  --tlacitko: #000;
  --tlacitko-text: #fff;
  --tlacitko-najeti: #333;
  --vedlejsi-najeti: rgba(0, 0, 0, .06);
  --neaktivni: #e6e6e6;
  --neaktivni-text: #595959;
  --neaktivni-okraj: #8c8c8c;
  --fokus: #000;
  --chyba: #b3261e;
  --stitek: #ebebeb;
}
/* tmavý režim: dvakrát stejné hodnoty (podle systému, nebo volbou přepínače) */
@media (prefers-color-scheme: dark) {
  :root:not([data-schema="svetly"]) {
    color-scheme: dark;
    --text: #ebebeb;
    --text-slaby: #a6a6a6;
    --okraj: #333;
    --okraj-pole: #8a8a8a;
    --pozadi: #121212;
    --pozadi-slabe: #1e1e1e;
    --pole: #1a1a1a;
    --hlavicka-linka: rgba(255, 255, 255, .12);
    --tlacitko: #fff;
    --tlacitko-text: #000;
    --tlacitko-najeti: #d4d4d4;
    --vedlejsi-najeti: rgba(255, 255, 255, .08);
    --neaktivni: #2c2c2c;
    --neaktivni-text: #a3a3a3;
    --neaktivni-okraj: #6b6b6b;
    --fokus: #fff;
    --chyba: #ff8a80;
    --stitek: #2c2c2c;
  }
}
:root[data-schema="tmavy"] {
  color-scheme: dark;
  --text: #ebebeb;
  --text-slaby: #a6a6a6;
  --okraj: #333;
  --okraj-pole: #8a8a8a;
  --pozadi: #121212;
  --pozadi-slabe: #1e1e1e;
  --pole: #1a1a1a;
  --hlavicka-linka: rgba(255, 255, 255, .12);
  --tlacitko: #fff;
  --tlacitko-text: #000;
  --tlacitko-najeti: #d4d4d4;
  --vedlejsi-najeti: rgba(255, 255, 255, .08);
  --neaktivni: #2c2c2c;
  --neaktivni-text: #a3a3a3;
  --neaktivni-okraj: #6b6b6b;
  --fokus: #fff;
  --chyba: #ff8a80;
  --stitek: #2c2c2c;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--pozadi);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

.hlavicka {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 16px;
  background: var(--hlavicka); color: var(--hlavicka-text);
  box-shadow: 0 1px 0 var(--hlavicka-linka), 0 0 4px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .2);
}
.hlavicka .titul {
  flex: 1; min-width: 0;
  font-size: 18px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hlavicka a, .hlavicka button {
  color: var(--hlavicka-text); background: none; border: 0; font: inherit; font-size: 15px;
  padding: 6px 4px; cursor: pointer; text-decoration: none; opacity: .9; white-space: nowrap;
}
.hlavicka a:hover, .hlavicka button:hover { opacity: 1; text-decoration: underline; }
.hlavicka :focus-visible, .zalozky :focus-visible { outline-color: var(--hlavicka-text); outline-offset: 0; }

h1 { font-weight: 300; font-size: 32px; line-height: 1.3; margin: 0 0 24px; color: var(--text-slaby); }
h2 { font-weight: 400; font-size: 20px; margin: 0 0 12px; }

label { display: block; font-size: 14px; color: var(--text-slaby); margin: 12px 0 4px; }
input, select, textarea {
  display: block; width: 100%;
  font: inherit; font-size: 16px; color: var(--text);
  padding: 9px 12px; border: 1px solid var(--okraj-pole); border-radius: 4px; background: var(--pole);
}
input::placeholder, textarea::placeholder { color: var(--text-slaby); opacity: 1; }
textarea { min-height: 140px; font-family: "Roboto Mono", SFMono-Regular, Consolas, Menlo, monospace; font-size: 14px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--fokus); outline-offset: -2px; border-color: var(--fokus); }
label.zaskrt { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 16px; }
label.zaskrt input { width: auto; accent-color: var(--tlacitko); }
label.zaskrt input:focus { outline-offset: 2px; }

button.hlavni, button.vedlejsi {
  font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .02em;
  border-radius: 4px; padding: 10px 18px; cursor: pointer; border: 1px solid var(--tlacitko);
}
button.hlavni { background: var(--tlacitko); color: var(--tlacitko-text); }
button.hlavni:hover { background: var(--tlacitko-najeti); border-color: var(--tlacitko-najeti); }
button.vedlejsi { background: transparent; color: var(--text); border-color: var(--text); }
button.vedlejsi:hover { background: var(--vedlejsi-najeti); }
/* neaktivní tlačítko: šedé, text i hranice čitelné v obou režimech (ne průhlednost) */
button.hlavni:disabled, button.vedlejsi:disabled {
  background: var(--neaktivni); color: var(--neaktivni-text); border-color: var(--neaktivni-okraj); cursor: default;
}
button.odkaz { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
button.odkaz:disabled { color: var(--neaktivni-text); text-decoration: none; cursor: default; }

.zprava { min-height: 1.5em; margin: 12px 0 0; }
.zprava.chyba { color: var(--chyba); }
.zprava.ok { color: var(--text); }

/* přihlášení */
.prihlaseni { max-width: 400px; margin: 40px auto; padding: 0 16px; }
.prihlaseni button.hlavni { width: 100%; margin-top: 20px; }
.prihlaseni .odkazy { display: flex; justify-content: space-between; margin-top: 16px; font-size: 15px; }
.prihlaseni .info { color: var(--text-slaby); font-size: 15px; margin: 0 0 4px; }
#kod { letter-spacing: .3em; font-size: 22px; text-align: center; }

/* správa */
.zalozky { display: flex; gap: 4px; padding: 0 8px; background: var(--hlavicka); overflow-x: auto; }
.zalozky button {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--hlavicka-text); opacity: .75;
  font: inherit; font-size: 15px; padding: 10px 12px; cursor: pointer; white-space: nowrap;
}
.zalozky button.aktivni { opacity: 1; border-bottom-color: var(--hlavicka-text); }
.obsah { max-width: 1100px; margin: 0 auto; padding: 16px; }
.dva-sloupce { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .dva-sloupce { grid-template-columns: minmax(0, 1fr); } }
.formular { background: var(--pozadi-slabe); border-radius: 4px; padding: 16px; }
.tlacitka { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.seznam { display: flex; flex-direction: column; gap: 8px; }
.polozka { border: 1px solid var(--okraj); border-radius: 4px; padding: 10px 12px; }
.polozka.neaktivni { border-style: dashed; color: var(--text-slaby); }
.polozka .radek1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.polozka .jmeno { font-weight: 700; overflow-wrap: anywhere; }
.polozka .meta { color: var(--text-slaby); font-size: 14px; overflow-wrap: anywhere; }
.polozka pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.stitek { display: inline-block; font-size: 12px; padding: 1px 6px; border-radius: 10px; background: var(--stitek); color: var(--text); }
.nahled { color: var(--text-slaby); font-size: 14px; margin-top: 6px; }
.denik .polozka { padding: 6px 10px; font-size: 14px; }
.tlacitka.nahore { margin: 0 0 12px; }