/* 🎛️ style_selectors.css
   Stylowanie paneli selekcji (Tabela_ksztaltow oraz Tabela_dekoracji):
   – Tabela_ksztaltow: kolumny, wiersze, obrazki, powiększona belka,
   – Tabela_dekoracji: pola tekstowe i checkboxy,
   – szerokości nazw, wysokości wierszy, akcenty typograficzne.
*/

/* ------------------------------ */
/* 🍶 Tabela_ksztaltow & Tabela_dekoracji */
/* ------------------------------ */

#ksztaltTable,
#dekoracjaTable {
    width: 100%;
    table-layout: fixed;
    background-color: #faf6ee;
}

#ksztaltTable tbody tr:nth-child(odd),
#dekoracjaTable tbody tr:nth-child(odd) {
    background-color: #faf6ee;
}

#ksztaltTable tbody tr:nth-child(even),
#dekoracjaTable tbody tr:nth-child(even) {
    background-color: #f4eee1;
}

#ksztaltTable td,
#dekoracjaTable td {
    border-right: 1px solid #e2d9c8;
    border-bottom: 1px solid #e2d9c8;
}

/* 🔵 Pionowa linia po kolumnie z checkboxami (tabela 1 i 2) */
#ksztaltTable td:first-child,
#ksztaltTable th:first-child,
#dekoracjaTable td:first-child,
#dekoracjaTable th:first-child {
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    border-right: 1px solid #172d54;
    text-align: center;
    padding: 0;
}

#ksztaltTable td {
    font-size: 1.35em; /* 🟢 Napisy w pierwszej tabeli powiększone o kolejne 20%+ */
}

/* 🔵 Kobaltowy kolor zaznaczenia checkboxów (spójny z nagłówkami tabel) */
#ksztaltTable td input[type="checkbox"] {
    transform: scale(2.8); /* powiększone o 40% (względem x2) */
    accent-color: #2b508f;
    cursor: pointer;
    margin: 0;
}

#dekoracjaTable td input[type="checkbox"] {
    transform: scale(2.4); /* powiększone o 20% (względem x2) */
    accent-color: #2b508f;
    cursor: pointer;
    margin: 0;
}

#ksztaltTable td:nth-child(4) {
    cursor: pointer;
}

#ksztaltTable td img {
    display: block;
    margin: 0 auto;
    max-height: 46px;
    border-radius: 6px;
    transition: transform 0.2s ease;
    cursor: pointer;
}

#ksztaltTable tr:hover img {
    transform: scale(1.12);
}

#ksztaltTable td:nth-child(4):hover img {
    transform: scale(1.22);
}

#ksztaltTable tr:hover,
#dekoracjaTable tr:hover {
    background-color: #e6dcbe !important;
}

#ksztaltTable td:nth-child(2),
#ksztaltTable th:nth-child(2) {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}

#ksztaltTable td:nth-child(2) {
    padding: 6px 2px;
    font-weight: normal; /* 🟢 bez pogrubienia */
    font-size: 1.35em;
    color: #1e293b;
    text-align: center;
}

.ksztalt-nazwa {
    font-size: 1.35em;
    font-weight: normal;
    word-wrap: break-word;
    line-height: 1.25;
}

.ksztalt-nazwa-glowna {
    font-size: 0.80em;
    font-weight: bold;
}

.ksztalt-opis {
    font-size: 0.68em; /* 🟢 o kolejne 5% mniejsza (do 0.68em) */
    font-weight: normal;
}

#ksztaltTable td:nth-child(4),
#ksztaltTable th:nth-child(4) {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    text-align: center;
}

#ksztaltTable td,
#ksztaltTable th {
    height: 50px;
    vertical-align: middle;
}

#ksztaltTable tbody tr:not(.wiersz-bufor),
#dekoracjaTable tbody tr:not(.wiersz-bufor) {
    cursor: pointer;
    user-select: none;
}

.tooltip-dekoracja,
.tooltip-ksztalt {
    cursor: pointer;
    transition: color 0.15s ease;
}

.tooltip-dekoracja {
    font-weight: 500;
}

#dekoracjaTable td:nth-child(2),
#dekoracjaTable td.dekoracja-nazwa,
#dekoracjaTable td.tooltip-dekoracja {
    font-size: 1.12em; /* 🟢 nazwy dekoracji powiększone o 20% */
    font-weight: 500;
    vertical-align: middle;
}

.tooltip-dekoracja:hover,
.tooltip-ksztalt:hover,
#ksztaltTable tr:hover .ksztalt-nazwa-glowna,
#dekoracjaTable tr:hover td:nth-child(2) {
    color: var(--kolor-wariantu, #217f90);
}

/* ------------------------------------------------------------- */
/* 🏁 Puste wiersze buforowe na dole tabeli 1 i 2 ("koniec imprezy") */
/* ------------------------------------------------------------- */

tr.wiersz-bufor,
tr.wiersz-bufor td {
    background-color: #d8d8d8 !important; /* czysty szary z przekątnej RGB: R=216, G=216, B=216 */
    cursor: default !important;
    pointer-events: none !important; /* brak reakcji na kursor i brak hovera */
    user-select: none;
    height: 48px;
    min-height: 48px;
}

tr.wiersz-bufor:nth-child(even),
tr.wiersz-bufor:nth-child(even) td {
    background-color: #cccccc !important; /* czysty szary z przekątnej RGB: R=204, G=204, B=204 */
}

tr.wiersz-bufor td {
    border-right: 1px solid #aaaaaa !important; /* czysty szary siatki: R=170, G=170, B=170 */
    border-bottom: 1px solid #aaaaaa !important;
}

tr.wiersz-bufor td:first-child {
    border-right: 1px solid #172d54 !important; /* zachowanie kobaltowej linii pionowej po pierwszej kolumnie */
}
/* Komponenty wyłącznie paneli wyboru. */
.tabela-panel {
    max-height: 1700px; /* 🟢 2x dłuższe w dół (z 850px na 1700px) */
    display: flex;
    flex-direction: column;
    border: 3px solid #172d54;
    border-radius: 10px;
    background-color: #faf6ee;
    overflow: hidden;
    box-shadow: 0 10px 25px -4px rgba(18, 38, 74, 0.28);
}

.tabela-naglowek-wrapper {
    position: relative;
    z-index: 100;
    flex-shrink: 0;
    background: linear-gradient(180deg, #355c9d 0%, #224278 100%);
    color: #ffffff;
    padding: 2px 14px 2px 14px; /* 🟢 dopasowany padding dla wysokości 55px */
    font-weight: 700;
    border-bottom: 2px solid #1a325e;
    box-sizing: border-box;
}

#panelKsztaltow .tabela-naglowek-wrapper,
#panelDekoracji .tabela-naglowek-wrapper {
    min-height: 105px; /* 🟢 zwiększona wysokość o kolejne 10px (z 95px na 105px) */
    height: 105px;
}

#panelKsztaltow .tabela-naglowek-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#panelDekoracji .tabela-naglowek-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.naglowek-tytul {
    font-size: 0.95em;
    font-weight: 700;
    color: #ffffff;
}

#panelKsztaltow {
    width: 540px;
    min-width: 540px;
    max-width: 540px;
    flex-shrink: 0;
}

#panelDekoracji {
    width: 273px; /* 🟢 rozszerzenie o 10px (z 263px na 273px) */
    min-width: 273px;
    max-width: 273px;
    flex-shrink: 0;
}

#ksztaltNaglowek {
    font-size: 1.15em;
    font-weight: 500; /* 🟢 bez bold */
    position: relative;
}

#ksztaltNaglowek .amfora-ikona {
    position: absolute;
    left: -18px; /* 🟢 przesunięta o 2px w prawo (z -20px na -18px) */
    top: 16px;  /* 🟢 przesunięta o 2px w dół (z 14px na 16px) */
    font-size: 3.37em;
    line-height: 1;
    pointer-events: none;
    z-index: 10;
}

#ksztaltNaglowek .ksztalt-tekst {
    display: inline-block;
    margin-left: 65px; /* 🟢 w prawo o 5px (z 60px na 65px) */
    font-size: 1.2em; /* 🟢 sekcja tekstu powiększona o 20% */
    font-weight: 500; /* 🟢 bez bold */
    color: #ffffff !important;
    vertical-align: middle;
    transform: translateY(12px); /* 🟢 w dół o 10px (z 2px na 12px) */
}

#dekoracjaNaglowek {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#dekoracjaNaglowek .naglowek-lewa {
    display: flex;
    align-items: center;
    gap: 8px;
}

#dekoracjaNaglowek .naglowek-ikona {
    font-size: 2.38em; /* 🟢 powiększona o 10% (z 2.16em na 2.38em) */
    line-height: 1;
    margin-left: -10px; /* 🟢 w lewo o 5px (z -5px na -10px) */
    transform: translateY(8px); /* 🟢 w górę o 5px (z 13px na 8px) */
}

#dekoracjaNaglowek .naglowek-tekst-linie {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    transform: translateY(8px); /* 🟢 w dół o 3px (z 5px na 8px) */
}

#dekoracjaNaglowek .naglowek-tekst-linie span {
    color: #ffffff !important;
}

#dekoracjaNaglowek .naglowek-licznik {
    font-size: 1.45em;
    font-weight: 500; /* bez bold */
    color: #fef08a !important;
    margin-left: auto;
    padding-left: 8px;
    transform: translate(5px, 8px); /* 🟢 w dół o 3px (z 5px na 8px) */
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.naglowek-filtry-dekoracji {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: -7px; /* 🟢 wyrównanie z lewej idealnie do kolumny checkboxów poniżej */
    margin-top: 2px;
    margin-bottom: 0px;
    transform: translateY(-12px); /* 🟢 w dół o 3px (z -15px na -12px) */
}

.btn-filtr-dek {
    margin: 0 !important;
    margin-top: 0 !important;
    height: 33px; /* 🟢 powiększone o kolejne 10% (z 30px na 33px) */
    min-width: 33px; /* 🟢 powiększone o kolejne 10% (z 30px na 33px) */
    padding: 0 4px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.16em; /* 🟢 powiększone o kolejne 10% */
    font-weight: 700;
    line-height: 1;
    color: #172d54; /* ciemny kobalt */
    background: #ffffff; /* stylizowany na biały checkbox */
    border: 2px solid #5a7396; /* ramka jak w checkboxie */
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    cursor: pointer; /* 🟢 aktywne przyciski */
    user-select: none;
    box-sizing: border-box;
    white-space: nowrap !important;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.btn-filtr-dek:hover {
    background: #eef4fc;
    border-color: #2b508f;
}

/* 🔵 Stan aktywny (wklęsły/wybrany filtr jak zaznaczony checkbox) */
.btn-filtr-dek.aktywny {
    background: #172d54 !important; /* głęboki kobalt */
    color: #ffffff !important; /* biały napis */
    border-color: #fef08a !important; /* złocisto-żółta ramka */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn-filtr-dek.aktywny:hover {
    background: #102140 !important;
}

/* Przycisk ALL nad kolumną checkboxów */
.btn-filtr-dek[data-filtr="ALL"],
.btn-filtr-all {
    min-width: 48px;
    width: auto;
    padding: 0 7px !important;
    font-size: 1.05em;
    letter-spacing: 0.02em;
}

/* Przesunięcie grupy przycisków od 'P' w prawo o 8px względem ALL */
.btn-filtr-dek[data-filtr="P"] {
    margin-left: 8px !important;
}

/* Dopasowanie szerokości dla napisu 'MIX & S' (długość 85px) */
.btn-filtr-dek[data-filtr="S"] {
    min-width: 85px;
    width: auto;
    padding: 0 8px !important;
    font-size: 1.16em; /* 🟢 Dokładnie ta sama wielkość znaków co w 'P', 'U', 'A' */
    white-space: nowrap !important;
    letter-spacing: 0;
}

/* 🟢 Litera 'S' w napisie 'the reSt': 10% większa, wyważony bold (700), 1px w górę */
.btn-filtr-dek .litera-duza-s {
    font-size: 1.39em; /* 🟢 10% większa */
    font-weight: 700;  /* 🟢 dodany bold (700 zamiast 500) */
    line-height: 1;
    display: inline-block;
    vertical-align: baseline;
    transform: translateY(-1px); /* 🟢 1px w górę */
}

#ksztaltNaglowek .ksztalt-licznik {
    display: inline-block;
    margin-left: 15px; /* 🟢 przesunięcie w prawo o 15px */
    font-size: calc(0.95 / 1.15 * 1.45em); /* 🟢 Dokładnie taki sam fizyczny rozmiar jak w tabeli 2 (identyczna wielkość co do ułamka px) */
    color: #fef08a !important;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    transform: translateY(12px); /* 🟢 w dół o 10px (z 2px na 12px) */
}

#ksztaltNaglowek .licznik-zaznaczone,
#dekoracjaNaglowek .naglowek-licznik .licznik-zaznaczone {
    font-size: 1.1em; /* 🟢 o 10% większa liczba przed "/", identyczna wielkość w obu tabelach */
    color: #ff5252 !important; /* liczba przed "/" na czerwono */
    display: inline-block;
    min-width: 2ch; /* rezerwacja miejsca na 2 cyfry (0-99) */
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.naglowek-tytul span {
    color: #fef08a !important;
}

/* 🏷️ Filtry kategorii kształtów (Lista rozwijana w Tabeli 1) */
.naglowek-filtry-ksztaltow {
    display: flex;
    align-items: center;
    margin-left: 65px; /* 🟢 w lewo o 5px (z 70px na 65px) */
    margin-top: 4px;
    margin-bottom: 2px;
    transform: translateY(-16px); /* 🟢 w dół o 5px (z -21px na -16px) */
}

/* 🏷️ Autorski komponent rozwijanej listy kategorii */
.custom-select-wrapper {
    position: relative;
    width: 435px; /* 🟢 dłuższe o kolejne 10px (z 425px na 435px) */
    user-select: none;
}

.custom-select-trigger {
    width: 100%;
    height: 33px;
    box-sizing: border-box;
    background-color: #faf6ee; /* 🟢 kość słoniowa jak tło wierszy tabeli */
    color: #172d54; /* 🟢 głęboki kobalt */
    border: 2px solid #172d54; /* 🟢 kobaltowa ramka jak obramowanie tabeli */
    border-radius: 5px;
    font-size: 0.95em;
    font-weight: 600;
    padding: 0 10px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-select-trigger:hover,
.custom-select-trigger:focus,
.custom-select-wrapper.otwarty .custom-select-trigger {
    border-color: #fef08a; /* złocista ramka */
    box-shadow: 0 0 0 2px rgba(254, 240, 138, 0.5);
}

.custom-select-tekst {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
    text-align: left;
}

.custom-select-strzalka {
    width: 11px;
    height: 7px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23172d54' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.2s ease;
}

.custom-select-wrapper.otwarty .custom-select-strzalka {
    transform: rotate(180deg);
}

/* 🟢 Rozwinięte okno z wyraźną kobaltową ramką i cieniem odcinającym od tła */
.custom-select-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 737px; /* 🟢 wysunięcie o 10% dłuższe (z 670px na 737px) */
    overflow-y: auto;
    background-color: #f7f2e8; /* 🟢 idealny odcień pośredni między jaśniejszym (#faf6ee) a ciemniejszym (#f4eee1) */
    border: 4px solid #172d54; /* 🟢 2x grubsza kobaltowa ramka dookoła (4px) */
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(23, 45, 84, 0.2); /* 🟢 odcięcie od tła */
    z-index: 1000;
    display: none;
    box-sizing: border-box;
}

.custom-select-wrapper.otwarty .custom-select-options {
    display: block;
}

/* 🟢 Pojedyncze pozycje z wyraźną kobaltową linią oddzielającą */
.custom-select-option {
    padding: 10px 14px; /* 🟢 o 20% większy wiersz */
    font-size: 1.14em; /* 🟢 czcionka o 20% większa (z 0.95em na 1.14em) */
    font-weight: 500;
    color: #172d54;
    background-color: #f7f2e8; /* 🟢 odcień pośredni */
    cursor: pointer;
    text-align: left;
    border-bottom: 1.5px solid #172d54; /* 🟢 kobaltowa linia jak obramowanie */
    transition: background-color 0.15s, color 0.15s;
}

.custom-select-option:last-child {
    border-bottom: none; /* ostatnia pozycja bez dolnej kreski */
}

.custom-select-option:hover {
    background-color: #ece4ce; /* 🟢 eleganckie podświetlenie hover */
    color: #0f1f3d;
    font-weight: 600;
}

.custom-select-option.wybrana {
    background-color: #172d54; /* kobaltowe tło dla wybranej opcji */
    color: #ffffff; /* biały tekst */
    font-weight: 700;
}

/* 🟢 Pierwsza pozycja "ALL ..." bez pogrubienia (regular/500) */
.custom-select-option[data-value="ALL"],
.custom-select-option.wybrana[data-value="ALL"],
.custom-select-trigger {
    font-weight: 500 !important;
}

.custom-select-option.wybrana:hover {
    background-color: #122443;
}

/* 🔴 Akcent dla słowa "ALL" w liście kategorii (BOLD + rgb(192, 0, 0)) */
.kategoria-all-akcent {
    font-weight: 800 !important;
    color: rgb(192, 0, 0) !important;
    letter-spacing: 0.02em;
}

/* Stylowy pasek przewijania listy kategorii */
.custom-select-options::-webkit-scrollbar {
    width: 8px;
}
.custom-select-options::-webkit-scrollbar-track {
    background: #eee5d3;
    border-radius: 4px;
}
.custom-select-options::-webkit-scrollbar-thumb {
    background: #b0a388;
    border-radius: 4px;
}
.custom-select-options::-webkit-scrollbar-thumb:hover {
    background: #91856b;
}

.tabela-body-scroll {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    flex-grow: 1;
    max-height: 1600px; /* 🟢 2x dłuższe w dół (z 800px na 1600px) */
    background-color: #faf6ee;
}

.tabela-body-scroll table {
    border: none;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
}

/* 🔖 style_components.css */
/* Bo to mały, niezależny element UI – tytuł sekcji/podtabeli */

input[type="checkbox"] {
  transform: scale(1.35);
  margin: 6px;
  accent-color: var(--kolor-wariantu, #217f90);
  cursor: pointer;
}
body.macierz-pelny-ekran #panelKsztaltow,
body.macierz-pelny-ekran #panelDekoracji,
body.tryb-order #panelKsztaltow,
body.tryb-order #panelDekoracji { display: none !important; }