/* 📊 style_matrix.css
   Stylowanie Tabela_wyboru (macierz zamówień):
   – wygląd komórek liczbowych (input),
   – sumy sztuk w wierszach i kolumnach,
   – podział kolumn i akcenty (border-right),
   – wyróżnienie wierszy parzystych,
   – animacja płynnego pojawiania się (fadeInSlide).
*/

/* ------------------------------ */
/* 🧩 Tabela_wyboru (matryca)     */
/* ------------------------------ */

/* ✨ Animacja płynnego pojawiania się macierzy zamówień */
@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.matryca {
    table-layout: fixed;
    border: 3px solid #172d54 !important;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 25px -4px rgba(18, 38, 74, 0.28);
}

.matryca.animacja-startowa {
    animation: fadeInSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 🧹 Przycisk czyszczenia samych ilości w banerze macierzy */
.przycisk-wyczysc-ilosci {
    margin-left: 25px; /* 🟢 przesunięcie w prawo o 10px (z 15px na 25px) */
    padding: 3px 10px;
    font-size: 0.82em;
    font-weight: 700;
    background-color: #fff1f2;
    color: #9f1239;
    border: 1px solid #fecdd3;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.18s ease-in-out;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.przycisk-wyczysc-ilosci:hover {
    background-color: #ffe4e6;
    color: #881337;
    border-color: #fda4af;
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.matryca input {
    width: 48px;
    padding: 4px;
    text-align: center;
    border: 1px solid #d4c8b8;
    background: #ffffff;
    border-radius: 6px;
    font-size: 0.95em;
    outline: none;
    transition: all 0.15s ease;
}

.matryca input:focus {
    border-color: var(--kolor-wariantu, #217f90);
    box-shadow: 0 0 0 3px rgba(33, 127, 144, 0.18);
}

.matryca th:first-child,
.matryca td:first-child {
    width: 60px; /* 🟢 o 20% węższa (z 75px na 60px) */
    min-width: 60px;
    max-width: 60px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    font-size: 1.14em; /* 🟢 powiększone kody */
    font-weight: 500 !important; /* 🟢 cała kolumna CODE bez bold */
    border-right: 2px solid #ffffff;
}

/* 🏷️ Rząd etykiet kolumn matrycy (CODE, Item name / nazwa, QTY, nazwy dekoracji) */
.matryca-naglowki-kolumn th {
    font-size: 1.08em; /* 🟢 trochę większy */
    font-weight: 500 !important; /* 🟢 bez bold */
}

/* 🏷️ Nagłówki sekcji tabeli 3 (SHAPES / KSZTAŁTY oraz PATTERNS / DEKORACJE) */
#banerKsztalt,
#banerDekoracja {
    font-size: 1.2em;
    font-weight: 500; /* bez bold, ale większy */
    color: #ffffff;
}

#banerKsztalt {
    width: 403px; /* 🟢 zsynchronizowany z kolumną QTY (60px + 268px + 75px = 403px) */
    min-width: 403px;
    max-width: 403px;
    text-align: left !important; /* 🟢 wyrównanie do lewej */
    padding: 8px 12px 8px 0; /* 🟢 0px z lewej, by ikona 60px pokrywała idealnie kolumnę CODE */
    white-space: nowrap; /* gwarancja jednej linii dla 0-999 */
    border-right: 2px solid #ffffff !important;
}

#banerKsztalt .baner-ikona {
    display: inline-block;
    width: 60px; /* 🟢 idealnie taka sama szerokość jak kolumna CODE (60px) – amfora wypośrodkowana */
    text-align: center;
    vertical-align: middle;
    font-size: 2.1em; /* 🟢 powiększona o 40% (z 1.5em na 2.1em) */
    line-height: 1;
}

#banerDekoracja {
    min-width: 413px; /* 🟢 sekcja 2 dłuższa o 10px (z 403px na 413px) */
    padding: 8px 15px;
}

#banerDekoracja .baner-ikona {
    font-size: 1.8em !important; /* 🟢 powiększona o 20% (z 1.5em do 1.8em) */
    line-height: 1;
    vertical-align: middle;
}

#banerDekoracja .baner-tytul {
    display: inline-block;
    position: relative;
    top: 1px; /* 🟢 przesunięcie o 1px w dół */
    margin-left: 10px; /* 🟢 przesunięcie o 10px w prawo */
    color: #ffffff !important;
    font-weight: 500;
}

/* Układ zawartości banera dekoracji */
.baner-dekoracja-kontener {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* B2B: stała lewa krawędź także po dodaniu wielu dekoracji. */
body:not(.tryb-order) .baner-dekoracja-kontener {
    justify-content: flex-start;
}

.baner-dekoracja-tresc {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.zegar-order {
    display: none;
}

#banerKsztalt .baner-tytul {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 1px; /* 🟢 obniżenie o 2px względem poprzedniego stanu (do top: 1px) */
    color: #ffffff !important;
    font-weight: 500;
}

#banerKsztalt .baner-liczba {
    display: inline-block;
    margin-left: 10px; /* 🟢 oddalenie o 10px od tekstu nagłówka */
    color: #ff5252 !important; /* liczba na czerwono jak w tabelach 1 i 2 */
    font-weight: 700;
    font-size: 1.24em; /* 🟢 zwiększona o 10% (z 1.12em do 1.24em) */
    line-height: 1;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

#banerKsztalt .baner-spakowane {
    color: #fef08a !important; /* żółty dla spakowanych */
    vertical-align: baseline;
}

#banerKsztalt .baner-slash-order {
    color: cyan !important;
    vertical-align: baseline;
}

#banerKsztalt .baner-suma-order {
    color: rgb(255, 40, 40) !important; /* czerwień rgb(255, 40, 40) */
    font-size: calc(1 / 1.24 * 1em); /* 🟢 dokładna wielkość taka sama jak (68.9%) / .baner-total */
    vertical-align: baseline;
}

#banerKsztalt .baner-total {
    display: inline-block;
    position: relative;
    top: 1px; /* 🟢 przesunięcie o 1px w dół */
    color: #9ec5f7 !important; /* 🟢 subtelny błękit ton w ton z kobaltowym tłem belki */
    font-weight: 400;
    margin-left: 5px; /* 🟢 odstęp 5px od liczby */
    vertical-align: middle;
}

/* 🔲 Nagłówek kolumny QTY - zmniejszony o 15px (z 90px do 75px) */
.matryca th.qty-border,
.matryca th:nth-child(3) {
    width: 75px; /* 🟢 zmniejszona o 15px (90px -> 75px) */
    min-width: 75px;
    max-width: 75px;
    padding: 2px 2px;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #ffffff !important;
    text-align: center;
    vertical-align: middle;
}

.qty-naglowek-glowny {
    display: block;
    line-height: 1.05;
}

.qty-naglowek-podpis {
    display: block;
    font-size: 0.94em;
    font-weight: 500;
    line-height: 1;
    color: #ffd1d6 !important;
    margin-top: 5px;
    white-space: nowrap;
}

.qty-podpis-slash {
    font-size: 1.44em; /* 🟢 powiększony o 20% (z 1.2em na 1.44em) */
    color: #ffffff !important; /* ⚪ biały */
    font-weight: normal !important; /* 🟢 bez bold */
    line-height: 1;
    display: inline-block;
    vertical-align: -1px;
}


/* 🔵 Komórki ilości pod QTY – ciemne (kobaltowe) ograniczenia z obu stron w dół */
.matryca td:nth-child(3),
.suma-ksztaltu {
    position: relative; /* 🟢 punkt odniesienia dla miotełki w prawym górnym rogu */
    width: 75px; /* 🟢 zmniejszona o 15px (90px -> 75px) */
    min-width: 75px;
    max-width: 75px;
    padding-left: 2px;
    padding-right: 25px !important; /* 🟢 zawsze 25px od prawej ścianki komórki */
    font-size: 1.18em; /* 🟢 wartości sumy powiększone o 20% */
    font-variant-numeric: tabular-nums;
    background-color: #f3e8d7;
    color: #224278;
    font-weight: 700;
    text-align: right !important; /* 🟢 wyrównanie do prawej */
    border-left: 2px solid #2b508f !important;
    border-right: 2px solid #2b508f !important;
    white-space: nowrap;
}

/* 🟢 Blok wartości "suma /limit" */
.suma-blok-wartosci {
    display: inline-block;
}

.suma-wartosc {
    color: #224278; /* 🔵 kobaltowy (kolor nagłówków tabeli), gdy w wierszu nie ma problemów z limitem */
    transition: color 0.15s ease;
}

.suma-wartosc.problem-limitu {
    color: #881337; /* 🔴 bordowy, gdy w wierszu występuje problem z limitem */
}

.suma-slash {
    color: #000000 !important;
    font-weight: 500;
}

.suma-limit {
    color: #dc2626 !important;
    font-weight: 700;
    font-size: 0.7em; /* 🟢 zmniejszone o 30% (70% wielkości bazowej) */
    vertical-align: baseline; /* 🟢 justowanie w dół do linii bazowej */
}

/* 🧹 Przycisk miotełki do zerowania wiersza w prawym górnym rogu komórki QTY */
.btn-zeruj-wiersz {
    position: absolute;
    top: 3px;
    right: 0px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.82em;
    cursor: pointer;
    line-height: 1;
    display: inline-block;
    transition: transform 0.15s ease, opacity 0.15s ease;
    opacity: 0.68;
}

.btn-zeruj-wiersz:hover {
    opacity: 1;
    transform: scale(1.3);
}

.btn-zeruj-wiersz:active {
    transform: scale(1.1);
}


/* 🔵 Ciemne pionowe linie (1px) oddzielające kolumny dekoracji poniżej podstawy QTY */
.matryca td[data-dekoracja] {
    border-right: 1px solid #2b508f;
}

.matryca td[data-dekoracja]:last-child {
    border-right: none;
}

.matryca th.item-name,
.matryca td.item-name {
    width: 268px; /* 🟢 skorygowana o -12px na rzecz QTY (280px -> 268px) */
    min-width: 268px;
    max-width: 268px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matryca td.item-name {
    position: relative; /* 🟢 punkt odniesienia dla przycisku usuwania w prawym górnym rogu */
    padding-right: 24px;
}

/* ❌ Przycisk usunięcia kształtu (wiersza) i dekoracji (kolumny) z macierzy */
.btn-usun-wiersz-ksztalt,
.btn-usun-kolumne-dekoracja {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 17px;
    height: 17px;
    line-height: 15px;
    background-color: #ffffff;
    border: 1.5px solid #000000;
    border-radius: 3px;
    color: #dc2626;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

.btn-usun-wiersz-ksztalt:hover,
.btn-usun-kolumne-dekoracja:hover {
    background-color: #fee2e2;
    border-color: #000000;
    color: #b91c1c;
    transform: scale(1.15);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.btn-usun-wiersz-ksztalt:active,
.btn-usun-kolumne-dekoracja:active {
    transform: scale(0.95);
}

.matryca th.item-name {
    font-size: 1.18em; /* 🟢 trochę większy nagłówek Item name / nazwa */
}

/* 🟢 Obniżenie napisu "Item name / Nazwa" o 5px oraz odsunięcie od ikony o 15px */
.matryca th.item-name .item-name-tekst {
    display: inline-block;
    transform: translateY(5px);
    vertical-align: middle;
    margin-left: 15px;
    color: #ffffff !important;
}

.matryca td.item-name .item-nazwa,
.matryca td.item-name .item-opis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

.matryca td.item-name .item-nazwa {
    font-weight: bold; /* 🟢 górna linia pogrubiona */
}

/* 👁️ Podświetlenie i wskaźnik dla podglądu dekoracji i kształtów w matrycy */
.matryca th.tooltip-dekoracja {
    position: relative; /* 🟢 punkt odniesienia dla przycisku usuwania w prawym górnym rogu */
    padding-right: 22px; /* 🟢 miejsce na kwadracik z prawej */
    padding-left: 6px;
    cursor: pointer;
    transition: color 0.15s ease;
}

/* 🟢 Obniżenie nazw dekoracji w nagłówkach kolumn o 5px oraz biały kolor tekstu */
.matryca th.tooltip-dekoracja .dekoracja-tekst {
    display: inline-block;
    transform: translateY(5px);
    color: #ffffff !important;
}

.matryca th.tooltip-dekoracja:hover .dekoracja-tekst {
    color: #fef08a !important;
}

.matryca tbody th.tooltip-ksztalt,
.matryca td.item-name.tooltip-ksztalt {
    cursor: pointer;
    transition: color 0.15s ease;
}

.matryca tbody th.tooltip-ksztalt:hover {
    color: #fef08a !important; /* złoty akcent na ciemnym tle */
}

.matryca td.item-name.tooltip-ksztalt:hover {
    color: var(--kolor-wariantu, #217f90);
}

/* wyróżnienie co drugiego wiersza i efekt hover */
.matryca tr.parzysty td[data-dekoracja] {
    background-color: #f2ebd9;
}

.matryca tr:hover td {
    background-color: #e6dcbe;
}

.matryca tr {
    transition: background-color 0.2s ease;
}

/* 🟦 Pusty nagłówek pod PATTERNS / DEKORACJE, gdy brak zaznaczonych dekoracji */
.matryca th.pusty-naglowek-dekoracji {
    background: linear-gradient(180deg, #355c9d 0%, #224278 100%) !important;
    border-bottom: 2px solid #1a325e !important;
    min-width: 413px; /* 🟢 zsynchronizowane z sekcją 2 (#banerDekoracja: 413px) */
}

/* 🖼️ Obrazek początkowy pod pustym szkieletem tabeli 3 */
.matryca-empty-hero {
    margin-top: 10px;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.matryca-empty-hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* 📝 Pole uwag do zamówienia pod tabelą macierzy */
.order-notes-wrapper {
    max-width: 1200px; /* Szerokość tabeli z limitem dla notatek w B2B i ORDER. */
    margin-top: -8px; /* 🟢 podniesione dodatkowo o 10px w górę */
    margin-bottom: 24px;
    box-sizing: border-box;
    display: block;
    transition: width 0.2s ease;
}

.order-notes-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.06rem; /* 🟢 25% większy (było 0.85rem) */
    font-weight: 700;
    color: #172d54; /* 🔵 kobaltowy odcień spójny z tabelą */
    margin-bottom: 3px; /* 🟢 zmniejszone o 5px (było 8px), co zbliża etykietę do pola notki */
    letter-spacing: 0.01em;
}

.order-notes-icon {
    font-size: 2em; /* 🟢 2x większa ikonka */
    line-height: 1;
    display: inline-block;
}

.order-notes-textarea {
    width: 100%;
    height: 400px; /* Wspólne pole notatek B2B i ORDER: dwukrotna wysokość. */
    min-height: 100px;
    max-height: 450px;
    resize: vertical;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1.23rem; /* 🟢 40% większa czcionka (było 0.88rem) */
    line-height: 1.45;
    color: #1e293b;
    background-color: #ffffff;
    border: 2px solid #172d54; /* 🔵 kobaltowe obramowanie ramki notki */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(23, 45, 84, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.order-notes-textarea:focus {
    outline: none;
    border-color: #172d54;
    box-shadow: 0 0 0 3.5px rgba(23, 45, 84, 0.22);
}

.order-notes-textarea::placeholder {
    color: #94a3b8;
    font-size: 1.05rem;
    font-style: italic;
}

/* ======================================================= */
/* 📦 Pancerny Kiosk dla profilu ORDER (Poka-Yoke)        */
/* ======================================================= */

/* ❌ Ukrycie narzędzi niszczących zamówienie oraz przycisku Clear ALL entries */
body.tryb-order .przycisk-reset,
body.tryb-order .btn-usun-kolumne-dekoracja,
body.tryb-order .btn-usun-wiersz-ksztalt,
body.tryb-order .btn-zeruj-wiersz,
body.tryb-order .przycisk-wyczysc-ilosci {
    display: none !important;
}

/* 🕒 ORDER: zegar przy tytule, niezależnie od liczby kolumn dekoracji. */
body.tryb-order #banerDekoracja,
body.tryb-order th.pusty-naglowek-dekoracji {
    min-width: 403px;
}

body.tryb-order .baner-dekoracja-kontener {
    justify-content: flex-start;
    padding: 0 1px 0 10px;
    gap: 40px;
}

body.tryb-order .zegar-order {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    white-space: nowrap;
    user-select: none;
    line-height: 1.15;
    margin-left: 0;
    flex-shrink: 0;
}

body.tryb-order .zegar-order-czas {
    color: #ffffff;
    font-size: 1.42em;
    font-weight: 800;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    line-height: 1;
}

body.tryb-order .zegar-order-sekundnik {
    color: #ffffff;
    transition: color 0.15s ease;
}

body.tryb-order .zegar-order-sekundnik.puls-polling {
    color: #ef4444 !important;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

body.tryb-order .zegar-order-data {
    color: #60a5fa;
    font-size: 0.88em;
    font-weight: 600;
    margin-top: 3px;
    line-height: 1;
    letter-spacing: 0.2px;
}

/* 📦 Tryb ORDER: Geometria i układ dwustrefowy komórki macierzy [ 0 / ] [ val ] */
body.tryb-order .matryca th.tooltip-dekoracja,
body.tryb-order .matryca td[data-dekoracja] {
    width: 95px !important;
    min-width: 95px !important;
    max-width: 95px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

body.tryb-order .matryca th.tooltip-dekoracja {
    text-align: center !important;
}

body.tryb-order .matryca th.tooltip-dekoracja .dekoracja-tekst {
    text-align: center !important;
    display: inline-block;
    margin: 0 auto;
}

body.tryb-order .order-cell-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding-left: 5px; /* 🟢 przesunięcie w prawo o 5px */
    box-sizing: border-box;
}

body.tryb-order .order-cell-packed {
    font-size: 1.08em;
    font-weight: 700;
    color: #000000;
    min-width: 30px;
    text-align: right;
    user-select: none;
    letter-spacing: -0.3px;
    font-family: inherit;
    transition: color 0.15s ease;
}

body.tryb-order .matryca td[data-dekoracja] input {
    width: 44px !important;
    min-width: 44px !important;
    padding: 3px 2px !important;
    font-size: 1.02em !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-align: center !important;
    box-sizing: border-box;
}

/* ⚡ Tryb CITO oraz SKLEP: zwężenie kolumn do 70px (-25px), wycentrowanie pigułek i ukrycie wskaźnika '0 /' */
body.tryb-order.tryb-cito .matryca th.tooltip-dekoracja,
body.tryb-order.tryb-sklep .matryca th.tooltip-dekoracja,
body.tryb-order.tryb-cito .matryca td[data-dekoracja],
body.tryb-order.tryb-sklep .matryca td[data-dekoracja] {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

body.tryb-order.tryb-cito .order-cell-box,
body.tryb-order.tryb-sklep .order-cell-box {
    padding-left: 0 !important;
    justify-content: center !important;
}

body.tryb-order.tryb-cito .order-cell-packed,
body.tryb-order.tryb-sklep .order-cell-packed {
    display: none !important;
}

body.tryb-order.tryb-cito .matryca td[data-dekoracja] input,
body.tryb-order.tryb-sklep .matryca td[data-dekoracja] input {
    pointer-events: none !important;
    user-select: none !important;
    cursor: default !important;
}

body.tryb-cito #matrycaEmptyHero,
body.tryb-sklep #matrycaEmptyHero,
body.tryb-order.tryb-cito #matrycaEmptyHero,
body.tryb-order.tryb-sklep #matrycaEmptyHero,
body.tryb-cito .matryca-empty-hero,
body.tryb-sklep .matryca-empty-hero,
body.tryb-order.tryb-cito .matryca-empty-hero,
body.tryb-order.tryb-sklep .matryca-empty-hero {
    display: none !important;
}

/* 🟡 Żółte wyróżnienie dla pozycji ręcznie skorygowanych na pakowni (zawsze wygrywa z limitami) */
body.tryb-order .matryca td[data-dekoracja] input.pill-recznie-zmienione {
    background-color: #fef08a !important;
    color: #854d0e !important;
    border-color: #d97706 !important;
    border-width: 2px !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.28) !important;
}

body.tryb-order .matryca td[data-dekoracja] input.pill-recznie-zmienione:focus {
    outline: none !important;
    border-color: #b45309 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.45) !important;
}

/* 🎨 4 STANY KOLORYSTYCZNE WSKAŹNIKA SPAKOWANIA [ X / ] (Lewa strona komórki w trybie ORDER) */

/* 1. ⚪ Stan zerowy - czeka na rozpoczęcie */
body.tryb-order .order-cell-packed.packed-zero {
    color: #000000 !important;
}

/* 2. 🟡 Stan w trakcie kompletacji - czysty złocisty żółty (bez pomarańczu) */
body.tryb-order .order-cell-packed.packed-progress {
    color: #ca8a04 !important; /* czysty, wyrazisty żółty */
    font-weight: 800 !important;
}

/* 3. 🔵 Komplet 100% - szlachetny błękit / kobalt */
body.tryb-order .order-cell-packed.packed-complete {
    color: #1d4ed8 !important;
    font-weight: 800 !important;
}

/* 4. 🔴 Nadmiar / anomalia - ostrzegawczy czerwony */
body.tryb-order .order-cell-packed.packed-over {
    color: #dc2626 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 1px rgba(220, 38, 38, 0.35);
}

/* 🌿 EFEKT ŚWIEŻEGO TUSZU - Wyróżnienie komórek zmienionych w ostatnim cyklu bufora */
body.tryb-order .matryca td.komorka-ostatnio-zmieniona {
    background-color: #d1fae5 !important; /* subtelna świeża mięta */
    transition: background-color 0.35s ease;
}

/* 🔴 OZNACZENIE NAGŁÓWKÓW DLA POZYCJI NADPROGRAMOWYCH (EXTRA) W TRYBIE ORDER */
/* Kod kształtu / dekoracji zachowuje standardowy kolor nagłówka (#ffffff / #fef08a na hover), a WYŁĄCZNIE napis EXTRA świeci czystą czerwienią rgb(255,0,0) */
body.tryb-order .matryca th.th-ksztalt-extra {
    color: #ffffff !important;
}

body.tryb-order .matryca th.th-ksztalt-extra:hover {
    color: #fef08a !important;
}

body.tryb-order .matryca th.th-ksztalt-extra .badge-extra {
    display: block;
    font-size: 0.65em;
    font-weight: 800;
    color: rgb(255, 0, 0) !important;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

body.tryb-order .matryca th.th-dekoracja-extra .dekoracja-tekst {
    color: #ffffff !important;
    transform: translateY(0px) !important;
}

body.tryb-order .matryca th.th-dekoracja-extra:hover .dekoracja-tekst {
    color: #fef08a !important;
}

body.tryb-order .matryca th.th-dekoracja-extra .badge-extra {
    display: block;
    font-size: 0.68em;
    font-weight: 800;
    color: rgb(255, 0, 0) !important;
    letter-spacing: 0.5px;
    margin-top: 2px;
}