/*
 * Styly plánovacího boardu — komponenta mes::filament.pages.production-board.
 * Admin běží na výchozím prekompilovaném Filament theme bez Tailwind buildu, proto vlastní
 * třídy dodává tento asset (registrace v MesServiceProvider, publikace přes filament:assets).
 * Mřížka drží obě osy sticky (dny nahoře, pracoviště vlevo), víkendy jsou jen
 * podbarvené a orientaci v 90denním okně dává minimapa s tažitelným výřezem.
 */

/* ── Karta boardu ────────────────────────────────────────────────────── */

/* Lehčí náhrada section karty: stejný vizuál, zlomek paddingu — mřížka
   má využít maximum okna. Výškové měření v JS padding pojme samo. */
.board__shell {
    background-color: var(--color-white, #fff);
    border: 1px solid rgb(0 0 0 / 0.08);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    padding: 0.75rem;
}

.dark .board__shell {
    background-color: var(--gray-900, rgb(24 24 27));
    border-color: rgb(255 255 255 / 0.1);
}

/* ── Toolbar s minimapou ─────────────────────────────────────────────── */

.board__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.board__toolbar button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Button a icon-button renderují ikonu různě velkou — chevrony v liště
   musí být opticky stejné, liší se jen jednoduchá × dvojitá. */
.board__toolbar .fi-btn svg,
.board__pager svg {
    width: 1rem;
    height: 1rem;
}

/* Horizont jako text vlevo od navigace okna. */
.board__horizon {
    margin-inline-start: auto;
    font-size: 0.75rem;
    opacity: 0.7;
    white-space: nowrap;
}

/* Pilulka navigace okna: šipky těsně u rozsahu. */
.board__pager {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    border: 1px solid rgb(0 0 0 / 0.12);
    border-radius: 0.5rem;
    padding: 0.125rem 0.25rem;
}

.dark .board__pager {
    border-color: rgb(255 255 255 / 0.14);
}

.board__window {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    padding-inline: 0.375rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.board__window-range {
    font-weight: 600;
}

.board__minimap {
    position: relative;
    display: flex;
    gap: 1px;
    flex: 1;
    height: 1.625rem;
    padding: 3px;
    border: 1px solid rgb(0 0 0 / 0.12);
    border-radius: 0.5rem;
    cursor: pointer;
    user-select: none;
    width: 100%;
    margin-bottom: 0.625rem;
}

.dark .board__minimap {
    border-color: rgb(255 255 255 / 0.14);
}

.board__minimap-slot {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    background-color: rgb(0 0 0 / 0.07);
}

.dark .board__minimap-slot {
    background-color: rgb(255 255 255 / 0.09);
}

.board__minimap-slot--weekend {
    opacity: 0.35;
}

.board__minimap-fill {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    background-color: var(--info-500, rgb(37 99 235));
    opacity: 0.55;
    border-radius: 2px 2px 0 0;
}

.board__minimap-slot--today .board__minimap-fill {
    opacity: 1;
}

.board__minimap-view {
    position: absolute;
    top: -3px;
    bottom: -3px;
    border: 2px solid var(--info-500, rgb(37 99 235));
    border-radius: 0.5rem;
    background-color: color-mix(
        in srgb,
        var(--info-500, rgb(37 99 235)) 6%,
        transparent
    );
    cursor: grab;
}

.board__minimap-view--dragging {
    cursor: grabbing;
}

/* ── Scroll kontejner ────────────────────────────────────────────────── */

/* Bez vnitřního odsazení: sticky osy lícují s hranou kontejneru — gutter
   by nechal mřížku prosvítat vedle fixního sloupce a nad hlavičkou dnů.
   Výšku do zbytku okna dopočítává JS; max-height je fallback bez něj.
   Rámeček nese scroll kontejner — board stojí mimo section kartu. */
.board__scroll {
    overflow: auto;
    max-height: 80vh;
    min-height: 43.75rem;
    overscroll-behavior-x: contain;
    cursor: grab;
    border: 1px solid rgb(0 0 0 / 0.08);
    border-radius: 0.5rem;
}

.dark .board__scroll {
    border-color: rgb(255 255 255 / 0.1);
}

.board__scroll--dragging {
    cursor: grabbing;
    user-select: none;
}

.board {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 0.8125rem;
}

/* ── Hlavička dnů — sticky nahoře ────────────────────────────────────── */

.board thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--color-white, #fff);
    border-bottom: 1px solid var(--gray-200, rgb(0 0 0 / 0.12));
}

.dark .board thead th {
    background-color: var(--gray-900, rgb(24 24 27));
    border-bottom-color: var(--gray-700, rgb(255 255 255 / 0.12));
}

/* Roh leží nad hlavičkou dnů i sloupcem pracovišť — specificita musí
   přebít řádkové pravidlo výše, jinak datumy přejíždí přes Pracoviště. */
.board thead th.board__corner {
    z-index: 5;
}

.board__corner,
.board__workplace {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background-color: var(--color-white, #fff);
    text-align: start;
    vertical-align: top;
    min-width: 10rem;
    max-width: 12rem;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    border-inline-end: 1px solid var(--gray-200, rgb(0 0 0 / 0.12));
}

.dark .board__corner,
.dark .board__workplace {
    background-color: var(--gray-900, rgb(24 24 27));
    border-inline-end-color: var(--gray-700, rgb(255 255 255 / 0.12));
}

.board__corner {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500, rgb(113 113 122));
    vertical-align: bottom;
}

.board__day {
    min-width: 7.5rem;
    padding: 0.25rem 0.25rem 0.3125rem;
    text-align: center;
    font-weight: 600;
    position: relative;
    border-inline-end: 1px solid rgb(236 236 238);
}

.dark .board__day {
    border-inline-end-color: rgb(47 47 51);
}

.board__day-name,
.board__day-date {
    display: block;
}

.board__day-name {
    font-size: 0.65625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.board__day-date {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.78125rem;
}

.board__day--today .board__day-date,
.board__day--today .board__day-name {
    color: var(--info-600, rgb(37 99 235));
    opacity: 1;
}

.dark .board__day--today .board__day-date,
.dark .board__day--today .board__day-name {
    color: var(--info-300, rgb(147 197 253));
}

.board__day--weekend .board__day-date {
    color: var(--gray-400, rgb(161 161 170));
}

.dark .board__day--weekend .board__day-date {
    color: var(--gray-500, rgb(113 113 122));
}

/* Hlavička nese stejný tint jako buňky pod ní — sticky vrstva ale musí
   zůstat neprůhledná (obsah pod ní podjíždí), proto color-mix s podkladem. */
.board thead th.board__day--today {
    background-color: color-mix(
        in srgb,
        var(--info-500, rgb(59 130 246)) 6%,
        var(--color-white, #fff)
    );
}

.dark .board thead th.board__day--today {
    background-color: color-mix(
        in srgb,
        var(--info-500, rgb(59 130 246)) 10%,
        var(--gray-900, rgb(24 24 27))
    );
}

.board thead th.board__day--weekend {
    background-color: color-mix(
        in srgb,
        rgb(0 0 0) 2.5%,
        var(--color-white, #fff)
    );
}

.dark .board thead th.board__day--weekend {
    background-color: color-mix(
        in srgb,
        rgb(255 255 255) 2.5%,
        var(--gray-900, rgb(24 24 27))
    );
}

/* ── Buňky ───────────────────────────────────────────────────────────── */

.board__cell {
    min-width: 7.5rem;
    max-width: 11.5rem;
    vertical-align: top;
    padding: 0.1875rem;
    border-bottom: 1px solid rgb(236 236 238);
    border-inline-end: 1px solid rgb(236 236 238);
}

.board__workplace {
    border-bottom: 1px solid rgb(236 236 238);
}

.dark .board__cell,
.dark .board__workplace {
    border-color: rgb(47 47 51);
}

.dark .board__workplace {
    border-inline-end-color: var(--gray-700, rgb(255 255 255 / 0.12));
}

.board__cell--today {
    background-color: rgb(59 130 246 / 0.06);
}

.dark .board__cell--today {
    background-color: rgb(96 165 250 / 0.09);
}

.board__cell--weekend {
    background-color: rgb(0 0 0 / 0.025);
}

.dark .board__cell--weekend {
    background-color: rgb(255 255 255 / 0.025);
}

/* Zamčený den mrazí plán. Zamykání je běžná operace, takže signál nese
   červený zámek; podklad jen velmi lehce šrafuje, aby nekřičel. */
/* SVG dlaždice místo gradientu: šikmý repeating-linear-gradient v prohlížeči
   „ujíždí" anti-aliasingem uvnitř velkých ploch; dlaždice 10×10 je pixelově
   přesná a bezešvá. */
.board__cell--locked,
.board__day--locked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M-2 2 2 -2 M0 10 10 0 M8 12 12 8' stroke='%23d97706' stroke-opacity='0.16' stroke-width='2'/%3E%3C/svg%3E");
}

.dark .board__cell--locked,
.dark .board__day--locked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M-2 2 2 -2 M0 10 10 0 M8 12 12 8' stroke='%23fbbf24' stroke-opacity='0.16' stroke-width='2'/%3E%3C/svg%3E");
}

.board__day--locked .board__day-lock {
    color: var(--danger-600, rgb(220 38 38));
    opacity: 1;
}

.dark .board__day--locked .board__day-lock {
    color: var(--danger-400, rgb(248 113 113));
}

/* ── Vytížení úzkého místa (diagnostika běhu) ────────────────────────── */

.board__util {
    height: 3px;
    border-radius: 2px;
    background-color: rgb(0 0 0 / 0.06);
    margin: 1px 2px 3px;
    overflow: hidden;
}

.dark .board__util {
    background-color: rgb(255 255 255 / 0.08);
}

.board__util i {
    display: block;
    height: 100%;
    border-radius: 2px;
}

.board__util--ok i {
    background-color: var(--success-500, rgb(22 163 74));
}

.board__util--warn i {
    background-color: var(--warning-500, rgb(217 119 6));
}

.board__util--crit i {
    background-color: var(--danger-500, rgb(220 38 38));
}

/* ── Chip běhu ───────────────────────────────────────────────────────── */

/* Chip je tlačítko (klávesnice, čtečka) — nesmí ale vypadat jako tlačítko. */
.board__chip {
    appearance: none;
    border: 0;
    width: 100%;
    text-align: start;
    font: inherit;
    cursor: pointer;
    display: block;
    padding: 0.1875rem 0.3125rem;
    margin-bottom: 2px;
    border-radius: 0.3125rem;
    border-inline-start: 3px solid transparent;
    line-height: 1.3;
    font-size: 0.71875rem;
}

.board__chip:last-child {
    margin-bottom: 0;
}

.board__chip-head {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 0;
}

/* První řádek chipu: kód + množství; název pod ním s ellipsis. */
.board__chip-code {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board__chip-qty {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
    white-space: nowrap;
}

.board__chip-item {
    display: block;
    font-weight: 400;
    font-size: 0.6875rem;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board__chip-flag {
    flex: none;
    font-size: 0.625rem;
    line-height: 1;
}

.board__chip-flag--manual {
    color: var(--warning-600, rgb(180 83 9));
}

.dark .board__chip-flag--manual {
    color: var(--warning-400, rgb(250 204 21));
}

/* Krok stlačený na den výroby — předstih pracoviště se nevešel. */
.board__chip-flag--late {
    color: var(--danger-600, rgb(220 38 38));
}

.dark .board__chip-flag--late {
    color: var(--danger-400, rgb(248 113 113));
}

/* Hlavní výrobní krok nese plnou váhu, podpůrné kroky ustupují. */
.board__chip--main {
    background-color: color-mix(
        in srgb,
        var(--info-500, rgb(37 99 235)) 10%,
        transparent
    );
    border-inline-start-color: var(--info-500, rgb(37 99 235));
    color: var(--info-800, rgb(30 64 175));
}

.dark .board__chip--main {
    background-color: color-mix(
        in srgb,
        var(--info-500, rgb(37 99 235)) 22%,
        transparent
    );
    color: var(--info-200, rgb(191 219 254));
}

.board__chip--prep {
    background-color: rgb(0 0 0 / 0.035);
    border-inline-start-color: var(--gray-400, rgb(161 161 170));
}

.dark .board__chip--prep {
    background-color: rgb(255 255 255 / 0.05);
}

.board__chip--semifinished {
    background-color: color-mix(
        in srgb,
        var(--success-500, rgb(13 148 136)) 10%,
        transparent
    );
    border-inline-start-color: var(--success-600, rgb(13 148 136));
    color: var(--success-800, rgb(6 95 70));
}

.dark .board__chip--semifinished {
    background-color: color-mix(
        in srgb,
        var(--success-500, rgb(13 148 136)) 18%,
        transparent
    );
    color: var(--success-200, rgb(167 243 208));
}

/* Ruční zásah musí být poznat na první pohled — replan ho nepřepíše. */
.board__chip--manual {
    box-shadow: inset 0 0 0 1.5px var(--warning-500, rgb(217 119 6));
}

/* ── Čištění ─────────────────────────────────────────────────────────── */

.board__cleaning {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.0625rem 0.3125rem;
    margin-bottom: 2px;
    border-radius: 0.25rem;
}

.board__cleaning::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: currentcolor;
    flex: none;
}

.board__cleaning--sanitation {
    background-color: color-mix(
        in srgb,
        var(--danger-500, rgb(190 18 60)) 12%,
        transparent
    );
    color: var(--danger-700, rgb(159 18 57));
}

.board__cleaning--coarse {
    background-color: color-mix(
        in srgb,
        var(--warning-500, rgb(180 83 9)) 12%,
        transparent
    );
    color: var(--warning-700, rgb(146 64 14));
}

.dark .board__cleaning--sanitation {
    color: var(--danger-300, rgb(253 164 175));
}

.dark .board__cleaning--coarse {
    color: var(--warning-300, rgb(253 211 141));
}

/* ── Legenda a zámky ─────────────────────────────────────────────────── */

.board__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    list-style: none;
    margin: 0.625rem 0 0;
    padding: 0;
    font-size: 0.75rem;
}

.board__legend li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.board__legend-swatch {
    display: inline-block;
    width: 1.5rem;
    height: 1rem;
    margin: 0;
    padding: 0;
}

.board__util.board__legend-swatch {
    height: 0.375rem;
    border-radius: 2px;
}

/* Statická značka zamčeného dne (bez práva přepnout) není klikatelná. */
.board__day-lock--static {
    cursor: default;
}

.board__day-lock {
    display: block;
    margin: 0.125rem auto 0;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0.45;
}

.board__day-lock svg {
    width: 0.8125rem;
    height: 0.8125rem;
}

.board__day-lock:hover,
.board__day--locked .board__day-lock {
    opacity: 1;
}

.board__issues {
    list-style: none;
    margin: 0;
    padding: 0;
}

.board__issue {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgb(236 236 238);
}

.dark .board__issue {
    border-bottom-color: rgb(47 47 51);
}

.board__issue:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.board__issue:first-child {
    padding-top: 0;
}

.board__issue-ident {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.board__issue-title {
    font-weight: 600;
}

.board__issue-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    opacity: 0.7;
}

.board__issue-detail {
    font-size: 0.8125rem;
    opacity: 0.75;
    text-align: end;
}

.board__section-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Dlouhé věty upozornění: titulek nad textem, vše zarovnané vlevo. */
.board__issue--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
}

.board__issue--stacked .board__issue-detail {
    text-align: start;
}

/* Úzké místo — trychtýř s tooltippem místo textu pod názvem linky. */
.board__bottleneck {
    display: inline-block;
    vertical-align: -2px;
    opacity: 0.55;
}

.board__bottleneck svg {
    width: 0.8125rem;
    height: 0.8125rem;
}

.board__muted {
    opacity: 0.65;
    font-weight: 400;
}