/* ===========================================================================
   Evidence právních dotazů — designový systém
   Klidná, důvěryhodná identita (citlivá právní data). Sdílené pro index + app.
   =========================================================================== */

:root {
  /* NADĚJE — závazné barvy dle VP318 JVS: oranžová, černá, bílá */
  --brand:        #ff4b00;   /* oranžová pro on-line použití (RGB 255/75/0) */
  --brand-strong: #e03f00;   /* tmavší odstín pro hover / aktivní */
  --brand-ink:    #bf3a08;   /* oranžová pro text na bílé (kvůli kontrastu) */
  --brand-soft:   #fff0ea;   /* světlé pozadí s nádechem oranžové */
  --brand-line:   #ffd6c4;

  /* Plochy a neutrály (čistě neutrální, k oranžové) */
  --bg:          #f4f4f3;
  --surface:     #ffffff;
  --surface-2:   #faf9f8;
  --border:      #e7e5e2;
  --border-strong:#d6d3cf;

  --text:  #1a1613;
  --muted: #5d5952;
  --faint: #8b857d;

  /* Sémantické stavy (funkční odlišení stavů případů) */
  --info-bg:#eef1f6;    --info-fg:#3a4d6b;
  --ok-bg:#e8f3ec;      --ok-fg:#1f6b46;
  --warn-bg:#ffefdd;    --warn-fg:#92561a;
  --neutral-bg:#edeae6; --neutral-fg:#5d5952;
  --violet-bg:#efeafa;  --violet-fg:#56399f;
  --danger-bg:#fdece9;  --danger-fg:#9a2417;
  --priv-bg:#fce7e3;    --priv-fg:#a23320;   /* soukromé = citlivé */

  --radius:    14px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(30,20,15,.05), 0 1px 3px rgba(30,20,15,.05);
  --shadow-md: 0 6px 22px -10px rgba(30,20,15,.18), 0 2px 8px -3px rgba(30,20,15,.08);
  --ring: 0 0 0 3px rgba(255,75,0,.22);

  /* Korporátní písmo dle JVS = Arial */
  --font: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", system-ui, sans-serif;
  --font-head: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--brand-soft); }

a { color: var(--brand-strong); }

/* --- Základní prvky ------------------------------------------------------- */
button { font: inherit; cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

input[type=text], input[type=email], input[type=date], input[type=number],
textarea, select {
  width: 100%;
  padding: .62rem .75rem;
  font: inherit;
  font-size: .96rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
textarea { min-height: 130px; resize: vertical; }
select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--muted) 50%),
  linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 53%, calc(100% - 13px) 53%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }

hr { border: 0; border-top: 1px solid var(--border); margin: 1.4rem 0; }

/* --- Značka (logo ✱NADĚJE + název produktu) dle JVS ----------------------- */
.brand { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.brand-logo {
  display: inline-flex; align-items: center; gap: .1em;
  font-weight: 700; font-size: 1.18rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text);
}
.brand-star { height: 1.05em; width: 1.05em; flex: 0 0 auto; }
.brand-app {
  font-size: .92rem; color: var(--muted);
  padding-left: .8rem; border-left: 1px solid var(--border);
}
@media (max-width: 560px) { .brand-app { display: none; } }

/* --- Tlačítka ------------------------------------------------------------- */
.primarni {
  padding: .58rem 1.05rem; font-size: .9rem; font-weight: 600; white-space: nowrap;
  color: #fff; background: var(--brand); border: 1px solid var(--brand);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.primarni:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.primarni:active { transform: translateY(1px); }
.primarni:disabled { background: #a9c5b9; border-color: #a9c5b9; box-shadow: none; cursor: not-allowed; }

.sekundarni {
  padding: .52rem .95rem; font-size: .88rem; font-weight: 600;
  color: var(--brand-strong); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: background .15s ease, border-color .15s ease;
}
.sekundarni:hover { background: var(--brand-soft); border-color: var(--brand-line); }

.sirka-plna { width: 100%; margin-top: 1.1rem; padding: .8rem; font-size: 1rem; }

.odhlasit {
  padding: .42rem .8rem; font-size: .82rem; font-weight: 600;
  color: var(--muted); background: transparent;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
}
.odhlasit:hover { background: var(--surface-2); color: var(--text); }

/* --- Hlavička aplikace ---------------------------------------------------- */
header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.5rem; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
  box-shadow: 0 1px 0 rgba(20,40,30,.02);
}
header .uziv { display: flex; align-items: center; gap: .9rem; font-size: .86rem; color: var(--muted); }
#uziv-text { display: inline-flex; align-items: center; }

/* --- Layout --------------------------------------------------------------- */
main { max-width: 880px; margin: 2rem auto; padding: 0 1.5rem; }

.nacitam { color: var(--muted); padding: .5rem 0; }
.prazdno { color: var(--faint); padding: 2.5rem 1rem; text-align: center; }

/* --- Karty ---------------------------------------------------------------- */
.karta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.blok { padding: 1.3rem 1.45rem; }

/* --- Hlášky --------------------------------------------------------------- */
.chyba { background: var(--danger-bg); color: var(--danger-fg); padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .9rem; }
.ok    { background: var(--ok-bg); color: var(--ok-fg); padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .9rem; }
.pozn  { margin-top: 1.25rem; color: var(--faint); font-size: .82rem; line-height: 1.55; }
.napoveda { color: var(--muted); font-size: .83rem; margin-top: .35rem; line-height: 1.5; }

/* --- Hlavní navigace (správce) -------------------------------------------- */
.hlavni-nav { display: flex; gap: .25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.hlavni-nav button {
  padding: .6rem .95rem; border: 0; background: none; font-size: .92rem; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.hlavni-nav button:hover { color: var(--text); }
.hlavni-nav button.akt { color: var(--brand-strong); border-bottom-color: var(--brand); }

/* --- Filtry (pilulky) ----------------------------------------------------- */
.radek-akci { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; gap: 1rem; flex-wrap: wrap; }
.filtry { display: flex; gap: .45rem; flex-wrap: wrap; }
.filtry button {
  padding: .42rem .9rem; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--muted); border-radius: var(--radius-pill);
  transition: all .15s ease;
}
.filtry button:hover { border-color: var(--brand-line); color: var(--text); }
.filtry button.akt { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Seznam případů ------------------------------------------------------- */
.seznam { display: grid; }
.pripad {
  padding: 1.05rem 1.35rem; cursor: pointer;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: background .12s ease, border-left-color .12s ease;
}
.pripad:last-child { border-bottom: 0; }
.pripad:hover { background: var(--surface-2); border-left-color: var(--brand); }
.pripad .radek1 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pripad .predmet { font-weight: 600; font-size: 1rem; color: var(--text); }
.pripad .meta { color: var(--muted); font-size: .82rem; margin-top: .4rem; display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }

/* --- Odznaky -------------------------------------------------------------- */
.odznak {
  font-size: .71rem; font-weight: 700; letter-spacing: .01em;
  padding: .18rem .56rem; border-radius: var(--radius-pill); white-space: nowrap;
  display: inline-flex; align-items: center;
}
.o-stav-novy       { background: var(--brand-soft); color: var(--brand-ink); }
.o-stav-odpovezeno { background: var(--ok-bg);      color: var(--ok-fg); }
.o-stav-uzavreno   { background: var(--neutral-bg); color: var(--neutral-fg); }
.o-soukrome { background: var(--priv-bg);   color: var(--priv-fg); }
.o-sdilene  { background: var(--violet-bg); color: var(--violet-fg); }

/* --- Detail případu ------------------------------------------------------- */
.detail h2 { font-size: 1.28rem; font-weight: 600; margin: 0 0 .35rem; letter-spacing: .005em; }
.detail .meta { color: var(--muted); font-size: .84rem; margin-bottom: 1.2rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.label { font-weight: 700; color: var(--brand-strong); font-size: .73rem; text-transform: uppercase; letter-spacing: .07em; }
.text { white-space: pre-wrap; margin: .4rem 0 0; color: var(--text); }
.zpet { background: none; border: 0; color: var(--brand-strong); font-weight: 600; padding: 0; margin-bottom: 1.1rem; font-size: .9rem; }
.zpet:hover { color: var(--brand); }
.odpoved { border-left: 3px solid var(--brand-line); padding: .15rem 0 .15rem 1rem; margin-top: 1rem; }
.odpoved .meta { font-size: .78rem; color: var(--faint); }

/* --- Formuláře ------------------------------------------------------------ */
label.pole { display: block; font-weight: 600; font-size: .87rem; margin: 1.1rem 0 .4rem; color: var(--text); }
.checkbox { display: flex; align-items: center; gap: .55rem; margin-top: 1.1rem; font-size: .92rem; }
.checkbox input { width: auto; accent-color: var(--brand); }
.akce-radek { display: flex; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.hodiny-radek { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.zaznam { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.zaznam:last-child { border-bottom: 0; }
.stav-volba { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* --- Přílohy --------------------------------------------------------------- */
input[type=file] { width: 100%; font-size: .9rem; padding: .5rem .6rem; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface-2); }
.priloha { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .9rem; }
.priloha a { color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.priloha a:hover { text-decoration: underline; }
.priloha-vel { color: var(--faint); font-size: .8rem; }
.priloha-del { border: 0; background: none; color: var(--faint); font-size: .78rem; cursor: pointer; text-decoration: underline; padding: 0; }
.priloha-del:hover { color: var(--danger-fg); }

/* --- Tabulky -------------------------------------------------------------- */
table.tab { width: 100%; border-collapse: collapse; }
table.tab th, table.tab td { text-align: left; padding: .65rem .55rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
table.tab thead th { color: var(--faint); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
table.tab tbody tr:last-child td { border-bottom: 0; }
table.tab tbody tr:hover td { background: var(--surface-2); }
table.tab td.cislo, table.tab th.cislo { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Uživatelé ------------------------------------------------------------ */
.uzivatel { padding: 1.15rem 1.45rem; border-bottom: 1px solid var(--border); }
.uzivatel:last-child { border-bottom: 0; }
.uziv-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr .7fr auto; gap: .65rem; align-items: end; }
.uziv-grid .mini-label { font-size: .7rem; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: .25rem; }
.uziv-email { font-weight: 600; font-size: .92rem; color: var(--text); margin-bottom: .6rem; }
@media (max-width: 780px) { .uziv-grid { grid-template-columns: 1fr 1fr; } }

/* ===========================================================================
   Přihlašovací stránka (index.html)
   =========================================================================== */
.prihlaseni {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--brand-soft), rgba(255,255,255,0) 62%),
    var(--bg);
}
.prihlaseni-karta {
  width: 100%; max-width: 430px; padding: 2.25rem 2.1rem;
  box-shadow: var(--shadow-md); overflow: visible;
}
.prihlaseni-karta .brand { margin-bottom: 1.6rem; }
.prihlaseni-karta h1 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; margin: 0 0 .4rem; letter-spacing: .005em; }
.prihlaseni-karta .podtitul { margin: 0 0 1.6rem; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.prihlaseni-karta label { display: block; font-weight: 600; font-size: .87rem; margin-bottom: .45rem; }
.prihlaseni-karta .pozn { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }

.stav { margin-top: 1.1rem; padding: .75rem .9rem; border-radius: var(--radius-sm); font-size: .9rem; display: none; line-height: 1.5; }
.stav.zobraz { display: block; }