/*
  CryoDoc – globální styly aplikace (layout, stránky).
  Vzhled komponent řeší Syncfusion téma (fluent2), zde jen rozvržení a drobnosti.
  Mobil first: dotykové cíle min. 44 px.
*/

:root {
    --cd-gutter: 16px;
    --cd-ano: #2e7d32;
    --cd-ne: #c62828;
    --cd-muted: #616161;
    --cd-okraj: #e0e0e0;
    --cd-pozadi: #f5f5f5;
}

html, body {
    margin: 0;
    background: var(--cd-pozadi);
    color: #212121;
}

h1 { font-size: 1.5rem; margin: 0 0 12px; font-weight: 600; }

/* ---- Layout ---------------------------------------------------------- */

.cd-app { min-height: 100vh; display: flex; flex-direction: column; }

.cd-appbar { position: sticky; top: 0; z-index: 1000; }

.cd-brand {
    display: inline-flex; align-items: center; gap: 8px;
    color: inherit; text-decoration: none; font-weight: 600; font-size: 1.1rem; margin-left: 4px;
}

.cd-uzivatel { margin-right: 8px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Syncfusion Sidebar nastavuje .cd-main inline margin – centruje se vnitřní .cd-obsah */
.cd-main { flex: 1; padding: var(--cd-gutter); box-sizing: border-box; }
/* Sidebar (režim Over) dává obsahu inline transform – ten by z position:fixed udělal pozici vůči .cd-main
   (spodní lišta formuláře by skončila na konci stránky). Obsah se při režimu Over neposouvá, transform netřeba. */
.cd-app > .cd-main { transform: none !important; }
.cd-obsah { max-width: 1440px; margin: 0 auto; }

.cd-nav { display: flex; flex-direction: column; padding: 8px 0; }

.cd-nav-link {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 20px;
    color: inherit; text-decoration: none;
}

.cd-nav-link:hover, .cd-nav-link.active { background: rgba(0, 0, 0, .06); }
.cd-nav-link.active { font-weight: 600; }
.cd-nav-disabled { opacity: .45; cursor: default; }

.cd-nacitani { color: var(--cd-muted); padding: 24px 0; }

.cd-skryty-nadpis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 600px) {
    .cd-skryt-mobil { display: none; }
    .cd-uzivatel { display: none; }
}

/* ---- Úvod – dlaždice ----------------------------------------------- */

.cd-dlazdice { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 720px; margin: 8px auto; }

@media (min-width: 700px) { .cd-dlazdice { grid-template-columns: 1fr 1fr; } }

.e-btn.cd-dlazdice-btn { min-height: 110px; font-size: 1.15rem; width: 100%; }

/* ---- Detail protokolu ---------------------------------------------- */

.cd-detail-hlavicka { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.cd-podtitul { color: var(--cd-muted); }
.cd-akce { display: flex; gap: 8px; }
.cd-akce .e-btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

.cd-tab { background: #fff; border-radius: 4px; }
.cd-tab .e-content { padding: 12px var(--cd-gutter); }

.cd-pole { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0; }
.cd-pole dt { color: var(--cd-muted); font-size: .85rem; margin-top: 8px; }
.cd-pole dd { margin: 0; min-height: 1.2em; }

@media (min-width: 700px) {
    .cd-pole { grid-template-columns: 240px 1fr; }
    .cd-pole dt { margin-top: 0; padding: 6px 0; }
    .cd-pole dd { padding: 6px 0; border-bottom: 1px solid var(--cd-okraj); }
}

.cd-viceradek { white-space: pre-wrap; }

.cd-body { display: flex; flex-direction: column; gap: 8px; }
.cd-bod { border: 1px solid var(--cd-okraj); border-radius: 4px; padding: 10px 12px; background: #fff; }
.cd-bod-cislo { color: var(--cd-muted); font-weight: 600; }
.cd-bod-odpovedi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cd-bod-poznamka { margin-top: 6px; font-style: italic; color: #424242; }

.cd-odpoved { font-weight: 700; }
.cd-ano { color: var(--cd-ano); }
.cd-ne { color: var(--cd-ne); }
.cd-nevyplneno { color: var(--cd-muted); }

.cd-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cd-foto { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; font-size: .8rem; }
.cd-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--cd-okraj); }
.cd-foto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-dokumenty { padding-left: 0; list-style: none; }
.cd-dokumenty li { min-height: 36px; display: flex; align-items: center; gap: 8px; }

/* ---- Přihlášení (statické SSR – jen Syncfusion CSS třídy) ------------ */

.cd-login-stranka { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--cd-gutter); box-sizing: border-box; }
.cd-login { width: 100%; max-width: 380px; background: #fff; border-radius: 8px; padding: 28px 24px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.cd-login h1 { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; margin-bottom: 20px; }
.cd-login .e-input-group { margin-bottom: 16px; }
.cd-login label { display: block; font-size: .85rem; color: var(--cd-muted); margin-bottom: 4px; }
.cd-login .e-btn { width: 100%; min-height: 44px; font-size: 1rem; }
.cd-login-chyba { color: var(--cd-ne); margin-bottom: 12px; }
.cd-login-pamatovat { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }

/* ---- Chybová lišta Blazoru ----------------------------------------- */

#blazor-error-ui {
    background: #fff3cd; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 2000; box-sizing: border-box;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---- Formulář protokolu --------------------------------------------- */

.cd-formular { padding-bottom: 72px; } /* místo pro fixní lištu akcí */

.cd-form-grid { display: grid; grid-template-columns: 1fr; gap: 4px 20px; }
@media (min-width: 800px) { .cd-form-grid { grid-template-columns: 1fr 1fr; } }
.cd-pole-cele { grid-column: 1 / -1; }

.cd-zarizeni { border: 1px solid var(--cd-okraj); border-radius: 4px; padding: 8px 12px 12px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.cd-zarizeni legend { color: var(--cd-muted); font-size: .85rem; padding: 0 4px; }
.cd-zarizeni .e-radio-wrapper { min-height: 36px; display: inline-flex; align-items: center; }

.cd-pocitadlo { text-align: right; font-size: .75rem; color: var(--cd-muted); }
.cd-pocitadlo-prekroceno { color: var(--cd-ne); font-weight: 600; }
.cd-validace { color: var(--cd-ne); }
.cd-formular .validation-message { color: var(--cd-ne); font-size: .8rem; }

.cd-akce-lista {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; gap: 8px; justify-content: center;
    padding: 10px var(--cd-gutter); background: #fff; box-shadow: 0 -2px 8px rgba(0, 0, 0, .12);
}
.cd-akce-lista .e-btn { min-height: 44px; min-width: 140px; }

.cd-prubeh { margin-bottom: 8px; }

/* Editor kontrolního bodu – velké dotykové přepínače ANO/NE */
.cd-bod-edit.cd-bod-hotovo { border-left: 4px solid var(--cd-ano); }
.cd-bod-stav { margin-right: 4px; color: var(--cd-muted); }
.cd-bod-hotovo .cd-bod-stav { color: var(--cd-ano); }
.cd-bod-volby { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: stretch; margin-top: 8px; }

/* Příjem / výdej – dva oddělené barevné rámečky */
.cd-volba { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 8px; border-radius: 6px; border: 1px solid; border-left-width: 4px; }
.cd-volba-prijem { background: var(--cd-prijem-bg); border-color: var(--cd-prijem); }
.cd-volba-vydej { background: var(--cd-vydej-bg); border-color: var(--cd-vydej); }
.cd-volba-popis { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cd-volba-prijem .cd-volba-popis { color: var(--cd-prijem); }
.cd-volba-vydej .cd-volba-popis { color: var(--cd-vydej); }
.cd-volba-tlacitka { display: flex; gap: 6px; }
.e-btn.cd-volba-btn { min-width: 64px; min-height: 44px; font-weight: 600; }
.e-btn.cd-volba-btn.e-outline { background: #fff; }
/* Zvolená odpověď: „stisknutý“ styl e-danger/e-success ve fluent2 je tmavý s černým textem (nečitelné) a má !important – proto !important i zde */
.e-btn.cd-volba-btn.e-success.e-active, .e-btn.cd-bpb-btn.e-success.e-active { background: var(--cd-ano) !important; border-color: var(--cd-ano) !important; color: #fff !important; }
.e-btn.cd-volba-btn.e-danger.e-active, .e-btn.cd-bpb-btn.e-danger.e-active { background: var(--cd-ne) !important; border-color: var(--cd-ne) !important; color: #fff !important; }
@media (max-width: 420px) {
    .cd-volba { flex: 1 1 100%; }
    .cd-volba-tlacitka .e-btn { flex: 1; }
}

/* Detail – stejné rozlišení příjem / výdej */
.cd-odpoved-box { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 6px; border: 1px solid; border-left-width: 4px; }
.cd-poznamka-btn { margin-left: auto; }
.cd-bod-poznamka-input { margin-top: 8px; }

.cd-dialog-text { margin: 0; }
.cd-akce { flex-wrap: wrap; }

/* ---- Přílohy: focení, fronta, galerie, prohlížeč ---------------------- */

.cd-prilohy-akce { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.e-btn.cd-prilohy-btn { min-height: 48px; min-width: 150px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
@media (max-width: 600px) { .e-btn.cd-prilohy-btn { flex: 1 1 45%; } }

/* vizuálně skrytý input – nesmí být display:none (iOS pak neotevře výběr přes <label>) */
.cd-skryty-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

.cd-fronta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cd-fronta-polozka { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--cd-okraj); border-radius: 4px; background: #fff; }
.cd-fronta-chyba { border-color: var(--cd-ne); background: #fff5f5; }
.cd-fronta-nahled { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; flex: none; }
.cd-fronta-ikona { font-size: 28px; width: 56px; text-align: center; flex: none; color: var(--cd-muted); }
.cd-fronta-info { flex: 1; min-width: 0; }
.cd-fronta-nazev { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-fronta-detail { font-size: .8rem; color: var(--cd-muted); }
.cd-fronta-hlaska { font-size: .8rem; color: var(--cd-ne); }

.cd-prazdne { color: var(--cd-muted); }
.cd-foto-tlacitko { border: 0; padding: 0; background: none; cursor: zoom-in; display: block; width: 100%; }
.cd-foto-tlacitko img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--cd-okraj); display: block; }
.cd-foto-popis { display: flex; align-items: center; gap: 4px; min-height: 32px; }
.cd-foto-popis span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }

.cd-prohlizec .e-dlg-content { padding: 8px; }
.cd-prohlizec-obsah { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; }
.cd-prohlizec-obsah img { max-width: calc(100% - 100px); max-height: 100%; object-fit: contain; }
.cd-prohlizec-poradi { color: var(--cd-muted); font-weight: normal; margin-left: 8px; font-size: .9rem; }

/* SfTextArea má výchozí e-auto-width (šířka dle obsahu) – ve formuláři přes celou šířku */
.cd-formular .e-multi-line-input.e-auto-width,
.cd-bod-edit .e-multi-line-input.e-auto-width { width: 100%; }
.cd-formular textarea.e-textarea,
.cd-bod-edit textarea.e-textarea { width: 100%; box-sizing: border-box; }

/* Šipky prohlížeče fotek – velké dotykové cíle */
.e-btn.cd-prohlizec-sipka { width: 48px; height: 48px; min-width: 48px; flex: none; }
.e-btn.cd-prohlizec-sipka .e-btn-icon { font-size: 20px; }

/* ---- Editor výřezu fotky (celá obrazovka) ---- */
.cd-prilohy-volba { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-left: 4px; font-size: .9rem; }
.e-dialog.cd-foto-editor { max-height: 100% !important; top: 0 !important; left: 0 !important; border-radius: 0; }
.cd-foto-editor .e-dlg-content { padding: 0; display: flex; flex-direction: column; }
.cd-foto-editor-hlavicka { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cd-foto-editor-info { font-size: .85rem; color: var(--cd-muted); font-weight: normal; text-transform: none; }
.cd-foto-editor-plocha { flex: 1; min-height: 300px; }
.cd-foto-editor-napoveda { margin: 4px 12px; font-size: .8rem; color: var(--cd-muted); }
.cd-foto-editor .e-footer-content .e-btn { min-height: 44px; min-width: 110px; }

/* ---- Audit ---- */
.cd-audit { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cd-audit-zaznam { border: 1px solid var(--cd-okraj); border-radius: 4px; padding: 10px 12px; background: #fff; }
.cd-audit-hlavicka { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.cd-audit-hlavicka span { color: var(--cd-muted); font-size: .9rem; }
.cd-audit-kde { cursor: help; }
.cd-audit-popis { margin-top: 4px; }
.cd-audit-zmeny { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: .9rem; table-layout: fixed; }
.cd-audit-zmeny th { text-align: left; color: var(--cd-muted); font-weight: 600; border-bottom: 1px solid var(--cd-okraj); padding: 4px 6px; }
.cd-audit-zmeny td { vertical-align: top; padding: 4px 6px; border-bottom: 1px solid var(--cd-okraj); overflow-wrap: anywhere; white-space: pre-wrap; }
.cd-audit-zmeny th:first-child { width: 34%; }
.cd-audit-puvodni { color: var(--cd-muted); text-decoration: line-through; }
.cd-audit-nova { font-weight: 600; }
.cd-audit-detail { padding: 4px 8px 8px; }

/* ---- Protokoly stejného zařízení ---- */
.cd-zarizeni-historie { margin-top: 20px; }
.cd-zarizeni-historie h2 { font-size: 1rem; margin: 0 0 8px; }
.cd-zarizeni-historie ul { list-style: none; margin: 0; padding: 0; }
.cd-zarizeni-historie li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--cd-okraj); }
.cd-zarizeni-historie li span { color: var(--cd-muted); }
.cd-stitek { font-size: .75rem; padding: 1px 6px; border-radius: 8px; background: var(--cd-okraj); color: #424242 !important; }
.cd-zarizeni-upozorneni { margin: 0; }

/* ---- Stav protokolu (přehled) ---- */
.cd-filtr-stav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cd-stav { font-size: .8rem; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.cd-stav-0 { background: #fff3e0; color: #8a4b00; }
.cd-stav-1 { background: #e3f2fd; color: #0d47a1; }
.cd-stav-2 { background: #e8f5e9; color: #1b5e20; }
.cd-audit-filtr { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 10px; }
.cd-audit-filtr .cd-filtr-stav { margin-bottom: 0; }

/* ---- Podpisy ---- */
.cd-podpisy { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .cd-podpisy { grid-template-columns: 1fr 1fr; } }
.cd-podpis { border: 1px solid var(--cd-okraj); border-radius: 4px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.cd-podpis-hotovo { border-color: #a5d6a7; }
.cd-podpis-popis { font-weight: 600; }
.cd-podpis-obrazek { height: 70px; max-width: 100%; object-fit: contain; object-position: left; }
.cd-podpis-kdo span, .cd-podpis-prazdny, .cd-podpis-napoveda { color: var(--cd-muted); font-size: .9rem; }
.cd-podpis-akce { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-podpis-platno { margin-top: 10px; border: 1px dashed #9e9e9e; border-radius: 4px; touch-action: none; }

/* ---- Karta zařízení ---- */
.cd-karta-akce { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

/* ---- Přehled skladu (úvod) ---- */
.cd-sklad-nadpis { font-size: 1.1rem; margin: 24px 0 8px; }
.cd-sklad { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .cd-sklad { grid-template-columns: repeat(4, 1fr); } }
.cd-sklad-dlazdice { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 6px;
    text-decoration: none; color: inherit; border: 1px solid transparent; }
a.cd-sklad-dlazdice:hover { border-color: currentColor; }
.cd-sklad-cislo { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.cd-sklad-dlazdice:not([class*="cd-stav-"]) { background: #fff; border-color: var(--cd-okraj); }
.cd-sklad-varovani { background: #ffebee !important; color: var(--cd-ne); }
.cd-sklad-nejdele { margin-top: 16px; }

/* ---- Režim „bod po bodu“ ---- */
.cd-bpb-rezim { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cd-bpb { display: flex; flex-direction: column; gap: 10px; }
.cd-bpb-postup { display: flex; justify-content: space-between; color: var(--cd-muted); font-size: .9rem; }
.cd-bpb-lista { height: 8px; background: var(--cd-okraj); border-radius: 4px; overflow: hidden; }
.cd-bpb-lista > div { height: 100%; background: var(--cd-ano); transition: width .2s; }
.cd-bpb-karta { background: #fff; border: 1px solid var(--cd-okraj); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.cd-bpb-cislo { color: var(--cd-muted); font-weight: 700; font-size: 1.1rem; }
.cd-bpb-text { font-size: 1.25rem; line-height: 1.35; min-height: 3.4em; }
.cd-bpb-volby { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.e-btn.cd-bpb-btn { min-height: 72px; font-size: 1.4rem; font-weight: 700; }
.e-btn.cd-bpb-btn.e-outline { background: #fff; }
.cd-bpb-druha { color: var(--cd-muted); }
.cd-bpb-karta textarea.e-textarea { width: 100%; box-sizing: border-box; }
.cd-bpb-karta .e-multi-line-input.e-auto-width { width: 100%; }
.cd-bpb-navigace { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ---- Fotky u kontrolního bodu ---- */
.cd-bod-fotky { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.cd-bod-fotky img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--cd-okraj); display: block; }
.cd-bod-foto-fronta { opacity: .55; }
.cd-bod-foto-fronta.cd-fronta-chyba { opacity: 1; outline: 2px solid var(--cd-ne); border-radius: 4px; }

/* ---- Diktování ---- */
.cd-diktovani { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.cd-diktovani-prubeh { color: var(--cd-muted); font-style: italic; }

/* ---- Uživatelský manuál ---- */
.cd-manual { background: #fff; border-radius: 4px; padding: 8px var(--cd-gutter) 24px; line-height: 1.55; max-width: 1100px; }
.cd-manual h1 { display: none; } /* nadpis dokumentu = nadpis stránky */
.cd-manual h2 { margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--cd-okraj); scroll-margin-top: 64px; }
.cd-manual h3 { margin-top: 22px; scroll-margin-top: 64px; }
.cd-manual img { max-width: 100%; height: auto; border: 1px solid var(--cd-okraj); border-radius: 4px; margin: 8px 0; display: block; }
.cd-manual table { border-collapse: collapse; margin: 8px 0 16px; width: 100%; display: block; overflow-x: auto; }
.cd-manual th, .cd-manual td { border: 1px solid var(--cd-okraj); padding: 6px 10px; text-align: left; vertical-align: top; }
.cd-manual th { background: var(--cd-pozadi); }
.cd-manual blockquote { margin: 12px 0; padding: 8px 14px; background: #fff8e1; border-left: 4px solid #f9a825; border-radius: 0 4px 4px 0; }
.cd-manual blockquote p { margin: 4px 0; }
.cd-manual code { background: var(--cd-pozadi); padding: 1px 5px; border-radius: 3px; }
.cd-manual hr { display: none; }