/* Vlastní úpravy vzhledu Unfoldu. Unfold používá jednotky rem,
   takže změna základní velikosti písma škáluje písmo i mezery. */
html {
    font-size: 13px; /* výchozí je 16px */
}

/* Logo v postranním menu (Unfold ho výchozně drží na výšce 2rem). */
#nav-sidebar img {
    height: 3rem;
    width: 3rem;
    border-radius: 8px;
}

/* Pole zapsaná ve fieldsets jako n-tice, např. ("jazyk", "stran"), se na širokém
   okně zobrazí vedle sebe (Unfold je jinak skládá pod sebe). Na užším okně
   zůstanou pod sebou. */
@media (min-width: 1024px) {
    .form-rows .field-row:has(> .field-line + .field-line) {
        display: flex;
    }
    .form-rows .field-row > .field-line {
        flex: 1 1 0;
        min-width: 0;
    }
    .form-rows .field-row > .field-line + .field-line {
        border-left: 1px dashed var(--color-base-200);
    }
    .dark .form-rows .field-row > .field-line + .field-line {
        border-left-color: var(--color-base-800);
    }
    /* Při třech a více polích v řádku je popisek nad polem, aby se pole vešla. */
    .form-rows .field-row:has(> .field-line + .field-line + .field-line) > .field-line {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }
}

/* Sbalitelné sekce (fieldsets s "collapse"): Unfold má šipku úplně vpravo a hlavička
   se nijak neliší od běžné sekce. Tady dostane šipku u názvu, přerušovaný rámeček,
   zvýraznění při najetí myší a nápis "rozbalit" / "sbalit". */
fieldset.module > details > summary::after {
    display: none;
}
fieldset.module > details > summary > h2 {
    border: 1px dashed var(--color-base-300);
    transition: background-color 0.15s;
}
fieldset.module > details > summary > h2:hover {
    background-color: var(--color-base-200);
}
fieldset.module > details > summary > h2::before {
    content: "\25B8"; /* ▸ */
    color: var(--color-primary-600);
    font-size: 1.3em;
    margin-right: 0.25rem;
}
fieldset.module > details[open] > summary > h2::before {
    content: "\25BE"; /* ▾ */
}
fieldset.module > details > summary > h2::after {
    content: "rozbalit";
    margin-left: auto;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color-primary-600);
}
fieldset.module > details[open] > summary > h2::after {
    content: "sbalit";
}

/* Titul: inlajn s autory v levé polovině, vedle něj pole z fieldsetu "vedle-autoru".
   Na užším okně jsou pod sebou. */
@media (min-width: 1024px) {
    .vedle-autoru-radek {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        align-items: start;
    }
    .vedle-autoru-radek > div {
        min-width: 0;
    }
}

/* Řádek s rokem v kalendáři data (viz admin.js). */
.calendarbox .rok-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0;
}
.calendarbox .rok-nav-tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.75rem;
    border: 1px solid rgb(0 0 0 / 0.12);
    border-radius: 0.375rem;
    color: inherit;
    text-decoration: none;
}
.calendarbox .rok-nav-tlacitko:hover {
    background: rgb(0 0 0 / 0.05);
}
.calendarbox .rok-nav-pole {
    width: 5rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    border: 1px solid rgb(0 0 0 / 0.12);
    border-radius: 0.375rem;
    text-align: center;
    font-weight: 600;
    background: transparent;
    color: inherit;
}

/* Pole s datem v tabulkových inlajnech (dodávky): užší, jen na datum dd.mm.rrrr. */
td.field-tabular .vDateField {
    min-width: 0;
    width: 8rem;
}
td.field-tabular div:has(> .vDateField) {
    min-width: 0;
    width: auto;
}

/* Obsah administrace vyplní šířku okna (Unfold ho jinak omezuje na skokové šířky podle okna). */
#content.container {
    max-width: none;
}

/* Inlajn dodávek v titulu: sloupec s dodavatelem se nezalamuje do úzkého pruhu. */
th.column-dodavatel_odkaz,
td.field-dodavatel_odkaz {
    min-width: 11rem;
}

/* Přehled výroby (tituly × kroky). */
.vyroba-tabulka { border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; table-layout: fixed; }
.vyroba-tabulka th,
.vyroba-tabulka td { padding: 0.25rem 0.5rem; border-bottom: 1px solid rgb(0 0 0 / 0.08); white-space: nowrap;
    border-right: 1px solid rgb(0 0 0 / 0.12); overflow: hidden; text-overflow: ellipsis; }
.vyroba-tabulka thead th { text-align: center; font-weight: 600; }
.vyroba-tabulka td.vy { text-align: center; min-width: 4.5rem; padding: 0; }
.vyroba-tabulka td.vy .vy-btn { display: block; width: 100%; padding: 0.375rem 0.5rem; min-height: 1.75rem; color: inherit; font: inherit; background: none; border: 0; cursor: pointer; }
.vyroba-tabulka td.vy:hover { outline: 2px solid rgb(37 99 235 / 0.6); outline-offset: -2px; }
/* Barvy stavů jsou CSS proměnné --vy-<stav>-bg / -fg, které přehledu dodává nabídka „Barvy přehledu výroby“. */
.vy-rozprac { background: var(--vy-rozprac-bg); color: var(--vy-rozprac-fg); }
.vy-hotovo { background: var(--vy-hotovo-bg); color: var(--vy-hotovo-fg); }
.vy-ukol { background: var(--vy-ukol-bg); color: var(--vy-ukol-fg); font-weight: 600; }
.vy-nema { background: var(--vy-nema-bg); color: var(--vy-nema-fg); font-style: italic; }
.vy-dotisk { color: var(--vy-dotisk-fg); }
.vy-dotisk.vy-schvaleno { color: var(--vy-dotisk-fg); }   /* dotisk: fialově, schválený název tučně */
.vy-schvaleno { color: var(--vy-schvaleno-fg); font-weight: 600; }
.vyroba-legenda .vy-termin-blizi { background: var(--vy-termin-blizi-bg); color: var(--vy-termin-blizi-fg); font-weight: 700; }
.vyroba-legenda .vy-termin-po { background: var(--vy-termin-po-bg); color: var(--vy-termin-po-fg); font-weight: 700; }
.vyroba-legenda span { display: inline-block; padding: 0.125rem 0.5rem; margin-right: 0.5rem; border-radius: 0.25rem; }
.dark .vyroba-tabulka th, .dark .vyroba-tabulka td { border-bottom-color: rgb(255 255 255 / 0.1); border-right-color: rgb(255 255 255 / 0.15); }

/* Popup nabídka u buňky přehledu výroby. */
#vy-popup { position: absolute; z-index: 60; width: 19rem; padding: 0.5rem; border-radius: 0.5rem;
    background: #fff; color: #111827; border: 1px solid rgb(0 0 0 / 0.15); box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); font-size: 0.8125rem; }
.dark #vy-popup { background: #1f2937; color: #f3f4f6; border-color: rgb(255 255 255 / 0.15); }
#vy-popup[hidden], #vy-popup [hidden] { display: none; }
#vy-popup .vy-popup-nadpis { font-weight: 600; padding: 0.125rem 0.5rem 0.375rem; }
#vy-popup .vy-menu { max-height: 15rem; overflow-y: auto; display: flex; flex-direction: column; margin-bottom: 0.5rem; }
#vy-popup .vy-polozka { display: flex; align-items: center; gap: 0.5rem; text-align: left; padding: 0.3125rem 0.5rem; border: 0; border-radius: 0.25rem; background: transparent; color: inherit; cursor: pointer; }
#vy-popup .vy-polozka:hover { background: rgb(0 0 0 / 0.07); }
.dark #vy-popup .vy-polozka:hover { background: rgb(255 255 255 / 0.1); }
#vy-popup .vy-polozka.aktivni { background: rgb(37 99 235 / 0.15); font-weight: 600; }
#vy-popup .vy-vzorek { flex: none; width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; border: 1px solid rgb(0 0 0 / 0.15); }
#vy-popup .vy-pole { padding: 0 0.5rem; }
#vy-popup .vy-popup-radek { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 0.5rem; }
#vy-popup .vy-popup-radek-cb { flex-direction: row; align-items: center; gap: 0.5rem; }
#vy-popup .vy-dvojice { display: flex; flex-direction: column; }

#vy-popup input[type=text], #vy-popup input[type=date] { padding: 0.25rem 0.5rem; border: 1px solid rgb(0 0 0 / 0.2); border-radius: 0.25rem; background: transparent; color: inherit; }
#vy-popup .vy-popup-akce { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; }
#vy-popup .vy-popup-akce button { padding: 0.25rem 0.75rem; border-radius: 0.25rem; border: 1px solid rgb(0 0 0 / 0.2); background: transparent; color: inherit; cursor: pointer; }
#vy-popup #vy-ulozit { background: #2563eb; border-color: #2563eb; color: #fff; }
#vy-popup #vy-uprava { margin-left: auto; font-size: 0.75rem; color: #2563eb; }
#vy-popup .vy-popup-chyba { color: #dc2626; margin: 0.25rem 0.5rem 0; }
.vyroba-tabulka th.vy-skupina { border-bottom: 1px solid rgb(0 0 0 / 0.12); }
.vyroba-tabulka td.vy-faze .vy-btn { text-align: left; }
.vyroba-tabulka td.vy-faze[data-pole=od] .vy-btn, .vyroba-tabulka td.vy-faze[data-pole=do] .vy-btn { text-align: right; }

/* Úchyt pro změnu šířky sloupce přehledu výroby. */
.vyroba-tabulka thead th { position: relative; }
.vy-uchyt { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
.vy-uchyt:hover, .vy-uchyt.tahne { background: rgb(37 99 235 / 0.5); }

.vyroba-tabulka td.plan { text-align: center; color: #6b7280; }
.dark .vyroba-tabulka td.plan { color: #9ca3af; }

#vy-popup .vy-hledej { width: 100%; margin: 0 0 0.375rem; padding: 0.25rem 0.5rem; border: 1px solid rgb(0 0 0 / 0.2); border-radius: 0.25rem; background: transparent; color: inherit; }
#vy-popup .vy-polozka[hidden] { display: none; }
#vy-popup .vy-vzorek.vy-neaktivni { background: repeating-linear-gradient(45deg, #d1d5db, #d1d5db 2px, transparent 2px, transparent 4px); }
.vyroba-tabulka td.vy-titul .vy-btn { text-align: left; }
.vyroba-tabulka td.vy-titul.plan .vy-btn { text-align: center; }
.vyroba-tabulka td a.vy-dotisk { color: var(--vy-dotisk-fg); }
.vyroba-tabulka td a.vy-dotisk.vy-schvaleno { color: var(--vy-dotisk-fg); font-weight: 600; }
.vyroba-tabulka td a.vy-schvaleno { color: var(--vy-schvaleno-fg); font-weight: 600; }

/* Lemování tabulky přehledu výroby i nahoře a vlevo (vpravo a dole ho dělají buňky). */
.vyroba-tabulka thead tr:first-child th { border-top: 1px solid rgb(0 0 0 / 0.12); }
.vyroba-tabulka thead tr:first-child th:first-child,
.vyroba-tabulka tbody td:first-child { border-left: 1px solid rgb(0 0 0 / 0.12); }
.dark .vyroba-tabulka thead tr:first-child th { border-top-color: rgb(255 255 255 / 0.15); }
.dark .vyroba-tabulka thead tr:first-child th:first-child,
.dark .vyroba-tabulka tbody td:first-child { border-left-color: rgb(255 255 255 / 0.15); }
/* Tlačítko Dnes vedle pole s datem. */
#vy-popup .vy-datum { display: flex; gap: 0.25rem; }
#vy-popup .vy-datum input { flex: 1; min-width: 0; }
#vy-popup .vy-dnes { padding: 0.125rem 0.5rem; border-radius: 0.25rem; border: 1px solid rgb(0 0 0 / 0.2); background: transparent; color: inherit; cursor: pointer; font-size: 0.75rem; }
#vy-popup .vy-dnes:hover { background: rgb(0 0 0 / 0.07); }
.vyroba-tabulka td.vy-naklad .vy-btn { text-align: right; }
.vyroba-tabulka td.vy-naklad[data-pole$="_prac"] .vy-btn { text-align: left; }
#vy-popup .vy-napoveda { margin: 0 0 0.5rem; font-size: 0.75rem; color: #6b7280; }
#vy-popup .vy-napoveda[hidden] { display: none; }

/* Termín „do“ u fáze práce: zbývá méně než týden = zelená, po termínu = červená; v obou případech tučně. */
.vyroba-tabulka td.vy-termin-blizi { background: var(--vy-termin-blizi-bg); color: var(--vy-termin-blizi-fg); font-weight: 700; }
.vyroba-tabulka td.vy-termin-po { background: var(--vy-termin-po-bg); color: var(--vy-termin-po-fg); font-weight: 700; }
.vyroba-tabulka td.vy-termin-blizi .vy-btn, .vyroba-tabulka td.vy-termin-po .vy-btn { font-weight: 700; }

/* Viditelný kurzor při pohybu po buňkách klávesnicí. */
.vyroba-tabulka td .vy-btn:focus-visible,
.vyroba-tabulka td a:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; border-radius: 2px; }
#vy-popup .vy-polozka:focus-visible { background: rgb(37 99 235 / 0.2); outline: 2px solid #2563eb; outline-offset: -2px; }

/* Zastřešující buňky záhlaví přehledu výroby (plán, obálka, výroba, náklad, DPC Kč): světle šedé pozadí. */
.vyroba-tabulka th.vy-skupina { background: #f3f4f6; }
.dark .vyroba-tabulka th.vy-skupina { background: rgb(255 255 255 / 0.08); }

/* Označené buňky (Shift + šipky nebo Shift + klik): modrý překryv a rámeček, barvy buněk zůstanou vidět. */
.vyroba-tabulka td.vy-vybrano { box-shadow: inset 0 0 0 9999px rgb(37 99 235 / 0.18), inset 0 0 0 1px #2563eb; }

/* Krátká zpráva (vrácení zpět apod.). */
#vy-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 70; padding: 0.5rem 1rem;
    border-radius: 0.5rem; background: #1f2937; color: #fff; font-size: 0.875rem; box-shadow: 0 6px 20px rgb(0 0 0 / 0.25); }
#vy-toast.chyba { background: #b91c1c; }
#vy-toast[hidden] { display: none; }
/* Pruh při výpadku spojení: změny se v té době neukládají. */
#vy-offline { position: fixed; left: 0; right: 0; top: 0; z-index: 80; padding: 0.5rem 1rem; text-align: center;
    background: #b91c1c; color: #fff; font-size: 0.875rem; font-weight: 600; }
#vy-offline[hidden] { display: none; }

/* Řádek s kurzorem: jemný světle modrý překryv (barvy buněk zůstávají vidět). */
.vyroba-tabulka tbody td { position: relative; }
.vyroba-tabulka tbody tr.vy-radek td::after {
    content: ""; position: absolute; inset: 0; background: rgb(59 130 246 / 0.10); pointer-events: none;
}
.dark .vyroba-tabulka tbody tr.vy-radek td::after { background: rgb(96 165 250 / 0.14); }

/* Pole s datem: textové pole, Dnes a kalendář (skrytý nativní výběr data jen nese vybraný den). */
#vy-popup .vy-kal { display: inline-flex; align-items: center; padding: 0 0.25rem; border-radius: 0.25rem; border: 1px solid rgb(0 0 0 / 0.2); background: transparent; color: inherit; cursor: pointer; }
#vy-popup .vy-kal .material-symbols-outlined { font-size: 1.1rem; }
#vy-popup .vy-kal:hover { background: rgb(0 0 0 / 0.07); }
#vy-popup .vy-datum { position: relative; }
#vy-popup .vy-kalendar { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* Oddělovač za posledním titulem s plánovanou expedicí v letošním roce. */
.vyroba-tabulka tr.vy-konec-roku td { border-bottom: 2px solid #64748b; }
.dark .vyroba-tabulka tr.vy-konec-roku td { border-bottom-color: #94a3b8; }

/* Sousední skupinové nadpisy záhlaví mají střídavé pozadí. */
.vyroba-tabulka th.vy-skupina-b { background: #e5e7eb; }
.dark .vyroba-tabulka th.vy-skupina-b { background: rgb(255 255 255 / 0.16); }

/* Vodorovný posuvník přehledu výroby je vždy vidět (i na macOS), nahoře i dole. */
.vy-posuvnik { overflow-x: auto; }
#vyroba-posuvnik-horni { overflow-y: hidden; }
#vyroba-posuvnik-horni[hidden] { display: none; }
#vyroba-posuvnik-horni > div { height: 1px; }
.vy-posuvnik::-webkit-scrollbar { height: 12px; }
.vy-posuvnik::-webkit-scrollbar-track { background: rgb(0 0 0 / 0.06); }
.vy-posuvnik::-webkit-scrollbar-thumb { background: rgb(0 0 0 / 0.3); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.dark .vy-posuvnik::-webkit-scrollbar-track { background: rgb(255 255 255 / 0.08); }
.dark .vy-posuvnik::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.35); background-clip: content-box; }