/* Sklad materiálu — mapa haly (WarehouseMapPage, podle dema 2ndside-web). Barvy z palety MudBlazoru, takže sedí i v tmavém režimu. */

.whmap-page,
.ss-dnd-ghost {
    --whmap-ok: var(--mud-palette-primary);
    --whmap-low: var(--mud-palette-error);
    --whmap-ordered: var(--mud-palette-warning);
    --whmap-line: var(--mud-palette-lines-default);
    --whmap-floor: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-primary));
}

.whmap-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 12px;
}

.whmap-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.whmap-stats b {
    font-size: 1.35rem;
}

.whmap-stats small {
    color: var(--mud-palette-text-secondary);
}

.whmap-stats .is-warn b { color: var(--mud-palette-warning); }
.whmap-stats .is-error b { color: var(--mud-palette-error); }
.whmap-stats .is-info b { color: var(--mud-palette-info); }

.whmap-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}

@media (max-width: 1150px) {
    .whmap-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.whmap-side {
    position: sticky;
    top: 72px;
}

/* Hala: vlevo vrata a zóna, vpravo regály; podlaha s mřížkou. */
.whmap {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--whmap-line);
    border-radius: var(--ss-radius-sm, 12px);
    background:
        repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--whmap-line) 45%, transparent) 23px 24px),
        repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--whmap-line) 45%, transparent) 23px 24px),
        var(--whmap-floor);
}

@media (max-width: 700px) {
    .whmap {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
    }
}

.whmap__zone {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.whmap__dock {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--ss-radius-xs, 8px);
    font-weight: 600;
    font-size: 0.8rem;
    background: var(--mud-palette-dark);
    color: var(--mud-palette-dark-text);
}

.whmap__area {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 90px;
    padding: 24px 8px 8px;
    border: 2px dashed color-mix(in srgb, var(--mud-palette-warning) 70%, transparent);
    border-radius: var(--ss-radius-sm, 10px);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

.whmap__area.is-qc {
    border-color: color-mix(in srgb, var(--mud-palette-error) 60%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface));
}

/* Mapa haly dílů: regály u kooperanta (zásoba mimo halu) — pozice jako cíle přetažení, modře. */
.whmap__area.is-external {
    border-color: color-mix(in srgb, var(--mud-palette-info) 60%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 7%, var(--mud-palette-surface));
}

.whmap__area.is-external .whmap__bays {
    width: 100%;
}

.whmap__area-title {
    position: absolute;
    top: 5px;
    left: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.whmap__empty {
    align-self: center;
    margin: auto;
    font-size: 0.75rem;
    color: var(--mud-palette-text-disabled);
}

/* Dodávka u vrat (dlaždice, jde přetáhnout). */
.whmap-unit {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 100%;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--whmap-line);
    border-radius: var(--ss-radius-xs, 7px);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.whmap-unit,
.whmap__bay {
    user-select: none;
    -webkit-user-select: none;
}

.whmap-unit[data-dnd] {
    cursor: grab;
    touch-action: none;
}

.whmap-unit:hover {
    transform: translateY(-1px);
    box-shadow: var(--ss-shadow-raised, 0 5px 10px rgba(0, 0, 0, 0.14));
}

.whmap-unit.is-sel {
    box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px var(--mud-palette-primary);
}

.whmap-unit.is-dragging {
    opacity: 0.35;
}

.whmap-unit__ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--ss-radius-xs, 5px);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.whmap-unit.is-qc .whmap-unit__ic {
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}

/* Zablokovaná dodávka (vstupní kontrola): červeně, přeškrtnutá — nejde zaskladnit. */
.whmap-unit.is-blocked {
    border-color: var(--mud-palette-error);
}

.whmap-unit.is-blocked .whmap-unit__ic {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

.whmap-unit.is-blocked .whmap-unit__t b {
    text-decoration: line-through;
}

.whmap-unit__t {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.whmap-unit__t b {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.whmap-unit__t small {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Regály a pozice. */
.whmap__hall {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.whmap__rack {
    padding: 8px 10px 10px;
    border: 1px solid var(--whmap-line);
    border-radius: var(--ss-radius-sm, 10px);
    background: color-mix(in srgb, var(--mud-palette-surface) 80%, transparent);
}

.whmap__rack-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.whmap__rack-head b {
    font-size: 1.1rem;
}

.whmap__rack-head span {
    color: var(--mud-palette-text-secondary);
}

.whmap__rack-head small {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
}

.whmap__level {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.whmap__level + .whmap__level {
    margin-top: 6px;
}

.whmap__level-name {
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    border-right: 2px solid var(--whmap-line);
}

.whmap__bays {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
    min-width: 0;
}

.whmap__cell {
    display: block;
    min-width: 0;
}

.whmap__bay {
    --c: var(--whmap-ok);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    height: 58px;
    padding: 4px 6px;
    border: 1px solid color-mix(in srgb, var(--c) 55%, var(--whmap-line));
    border-radius: var(--ss-radius-xs, 6px);
    background: linear-gradient(to top, color-mix(in srgb, var(--c) 28%, var(--mud-palette-surface)), color-mix(in srgb, var(--c) 10%, var(--mud-palette-surface)));
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    line-height: 1.1;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}

.whmap__bay[data-dnd] {
    cursor: grab;
}

.whmap__bay.s-low {
    --c: var(--whmap-low);
}

.whmap__bay.s-free {
    --c: var(--mud-palette-text-disabled);
    border-style: dashed;
    background: color-mix(in srgb, var(--mud-palette-surface) 70%, transparent);
}

.whmap__bay.s-low {
    animation: whmap-low 1.8s ease-in-out infinite;
}

@keyframes whmap-low {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--whmap-low) 55%, transparent); }
    50% { box-shadow: 0 0 0 6px transparent; }
}

/* Pozice vyhrazená zákazníkovi (rezerva) — tečkovaný rámeček v barvě secondary. */
.whmap__bay.is-reserved::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1.5px dotted var(--mud-palette-secondary);
    border-radius: var(--ss-radius-xs, 8px);
    pointer-events: none;
}

.whmap__bay.is-ordered::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1.5px dashed var(--whmap-ordered);
    border-radius: var(--ss-radius-xs, 8px);
    pointer-events: none;
}

.whmap__code {
    position: absolute;
    top: 3px;
    left: 6px;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
}

.whmap__mat {
    max-width: 100%;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.whmap__qty {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.whmap__more {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 0.65rem;
    font-style: normal;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.whmap__bay:hover {
    transform: translateY(-1px);
}

.whmap__bay.is-sel {
    box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px var(--mud-palette-text-primary);
}

.whmap__bay.is-hi {
    box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px var(--mud-palette-info);
}

/* Vybraná dodávka: vhodné pozice svítí, nejlepší pulzuje se špendlíkem, ostatní ztlumené. */
.whmap.is-placing .whmap__bay:not(.is-target) {
    opacity: 0.4;
    cursor: not-allowed;
}

.whmap__bay.is-target {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
}

.whmap__bay.is-target-best,
.whmap__bay.is-drop-best {
    animation: whmap-target 1.1s ease-in-out infinite;
}

@keyframes whmap-target {
    0%, 100% { box-shadow: 0 0 0 2px var(--mud-palette-primary), 0 0 10px color-mix(in srgb, var(--mud-palette-primary) 50%, transparent); }
    50% { box-shadow: 0 0 0 3px var(--mud-palette-primary), 0 0 22px var(--mud-palette-primary); }
}

.whmap__pin {
    position: absolute;
    left: 50%;
    bottom: 100%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
    padding: 1px 7px 1px 4px;
    border-radius: var(--ss-radius-pill, 999px);
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.65rem;
    font-weight: 700;
    box-shadow: var(--ss-shadow-card, 0 6px 14px rgba(0, 0, 0, 0.25));
    animation: whmap-bob 1.1s ease-in-out infinite;
}

@keyframes whmap-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
}

.whmap__bay.is-flash {
    animation: whmap-flash 1.5s ease both;
}

@keyframes whmap-flash {
    0%, 35% { box-shadow: 0 0 0 3px var(--mud-palette-surface), 0 0 24px 6px var(--mud-palette-primary); transform: scale(1.06); }
    100% { box-shadow: none; transform: none; }
}

/* Tažení (PointerDragDrop z 2ndSide). */
.whmap-page.is-dragging .whmap__bay:not(.is-drop-ok) {
    opacity: 0.35;
}

.whmap__bay.is-drop-ok {
    opacity: 1;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
}

.whmap__bay.is-drop-hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px var(--mud-palette-primary), 0 0 20px var(--mud-palette-primary) !important;
}

.whmap__bay.is-dragging {
    opacity: 0.35;
}

/* Bublina pozice nesmí chytat myš — doznívající bublina by jinak spolkla začátek tažení vedlejší dlaždice. */
.whmap-tip,
.whmap-tip * {
    pointer-events: none !important;
}

/* Legenda. */
.whmap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.whmap-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.whmap-legend i {
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 3px;
}

.whmap-legend .lg-ok { background: var(--whmap-ok); }
.whmap-legend .lg-low { background: var(--whmap-low); }
.whmap-legend .lg-ordered { border: 1.5px dashed var(--whmap-ordered); }
.whmap-legend .lg-free { border: 1px dashed var(--mud-palette-text-disabled); }
.whmap-legend .lg-zone { border: 2px dashed var(--mud-palette-warning); }
.whmap-legend .lg-reserved { border: 1.5px dotted var(--mud-palette-secondary); }

/* Plánování nákupu: materiál, který je třeba objednat hned (nejpozději objednat dnes nebo už pozdě). */
.row-alert td {
    background: color-mix(in srgb, var(--mud-palette-error) 7%, transparent);
}

/* Přehledy skladu (WarehouseAnalyticsPage): dlaždice ukazatelů a matice ABC × XYZ. */

.wha-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.wha-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    min-width: 0;
}

.wha-kpi:first-child {
    grid-column: span 2;
}

.wha-matrix {
    display: grid;
    grid-template-columns: 28px repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.wha-matrix__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.wha-matrix__head small {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.wha-matrix__cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 92px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
    border-radius: var(--ss-radius-xs, 8px);
    background: color-mix(in srgb, var(--c) 10%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms, box-shadow 120ms;
}

.wha-matrix__cell:hover {
    background: color-mix(in srgb, var(--c) 18%, var(--mud-palette-surface));
}

.wha-matrix__cell.is-sel {
    box-shadow: 0 0 0 2px var(--c);
}

.wha-matrix__cell.is-empty {
    opacity: .55;
}

.wha-matrix__cell b {
    font-size: 1.4rem;
    line-height: 1.1;
}

.wha-matrix__cell small {
    color: var(--mud-palette-text-secondary);
}

.wha-matrix__cell em {
    font-size: .75rem;
    font-style: normal;
    line-height: 1.25;
}

@media (max-width: 600px) {
    .wha-matrix__cell {
        min-height: 0;
        padding: 6px;
    }

    .wha-matrix__cell em {
        display: none;
    }
}