/* ==========================================================================
   BMX TABLES — BiuroMax Design System
   Plik: Content/Tables/style.css

   Wzorzec wizualny: modal-video-products-table
     — jasny nagłówek (#f8fafc), uppercase, border-bottom 2px
     — delikatne poziome linie między wierszami (#f3f4f6)
     — hover: #f8fafc
     — wrapper: border 1px solid #e5e7eb, border-radius 8px
     — DataTables: niezależne przyciski paginacji (nie "joined group")

   Sekcje:
     1. Tokeny CSS
     2. Wrapper tabeli
     3. Nagłówek thead
     4. Wiersze tbody
     5. Kolumny specjalne
     6. Odznaki statusu
     7. Warianty
     8. DataTables — toolbar (szukaj, długość)
     9. DataTables — paginacja (fix podwójnej ramki)
    10. DataTables — info + processing
    11. Responsywność mobilna
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENY CSS
   -------------------------------------------------------------------------- */

:root {
    /* Paleta brandowa — dziedziczona z Navbar/style.css, tu jako fallback */
    --bmx-primary:       #009FE3;
    --bmx-primary-dark:  #005ea1;
    --bmx-secondary:     #113770;
    --bmx-dark:          #282C6B;
    --bmx-primary-light: #e6f6fd;

    /* Tokeny tabeli — wzorzec modal-video-products-table */
    --tbl-bg:              #ffffff;
    --tbl-border:          #e5e7eb;
    --tbl-radius:          8px;
    --tbl-shadow:          0 1px 4px rgba(0, 0, 0, 0.06);

    --tbl-head-bg:         #f8fafc;
    --tbl-head-color:      #374151;
    --tbl-head-border:     #e5e7eb;
    --tbl-head-font-size:  0.8125rem;   /* 13 px */
    --tbl-head-weight:     600;

    --tbl-row-border:      #f3f4f6;
    --tbl-row-hover:       #f8fafc;

    --tbl-text:            #1f2937;
    --tbl-text-muted:      #475569;
    --tbl-link:            #113770;
    --tbl-link-hover:      #005ea1;

    --tbl-cell-pad:        12px 16px;
    --tbl-font-size:       0.875rem;    /* 14 px */
    --tbl-font-size-sm:    0.8125rem;   /* 13 px */
}


/* --------------------------------------------------------------------------
   2. WRAPPER TABELI
   -------------------------------------------------------------------------- */

.bmx-table-wrapper {
    background: var(--tbl-bg);
    border: 1px solid var(--tbl-border);
    border-radius: var(--tbl-radius);
    overflow: hidden;
    box-shadow: var(--tbl-shadow);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/*
 * Kompatybilność z istniejącymi widokami:
 * <div class="table-responsive"> zawierające <table class="table rounded-table ...">
 * Traktujemy table-responsive jako nasz wrapper.
 */
div.table-responsive {
    border: 1px solid var(--tbl-border);
    border-radius: var(--tbl-radius);
    overflow: hidden;
    box-shadow: var(--tbl-shadow);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* rounded-table wewnątrz naszego wrappera — div.table-responsive obsługuje już
   border-radius i overflow:hidden. overflow:hidden na <table> tworzy nowy BFC
   i powoduje wizualne zwężenie tabeli względem kontenera. */
div.table-responsive table.rounded-table {
    border-radius: 0;
    overflow: visible;
}

/* DataTables wstawia własny wrapper wewnątrz table-responsive — bez podwójnej ramki */
div.table-responsive .dataTables_wrapper {
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    overflow: visible;
}


/* --------------------------------------------------------------------------
   3. NAGŁÓWEK THEAD
   -------------------------------------------------------------------------- */

.bmx-table-wrapper table thead,
div.table-responsive table thead,
.bmx-table thead {
    background: var(--tbl-head-bg) !important;
    color: var(--tbl-head-color) !important;
}

.bmx-table-wrapper table thead th,
div.table-responsive table thead th,
.bmx-table thead th {
    padding: var(--tbl-cell-pad);
    font-size: var(--tbl-head-font-size);
    font-weight: var(--tbl-head-weight);
    color: var(--tbl-head-color) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--tbl-head-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    white-space: nowrap;
    vertical-align: middle;
}

/* Linki w nagłówku (DataTables sortowanie) */
.bmx-table-wrapper table thead th a,
div.table-responsive table thead th a,
.bmx-table thead th a {
    color: var(--tbl-head-color) !important;
    text-decoration: none;
}
.bmx-table-wrapper table thead th a:hover,
div.table-responsive table thead th a:hover {
    color: var(--bmx-primary) !important;
    text-decoration: none;
}

/* Strzałki sortowania DT — ciemniejsze (na jasnym tle) */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    opacity: 0.5;
    filter: brightness(0);   /* czarne strzałki na jasnym tle */
}
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    opacity: 0.9;
}


/* --------------------------------------------------------------------------
   4. WIERSZE TBODY
   -------------------------------------------------------------------------- */

.bmx-table-wrapper table tbody td,
div.table-responsive table tbody td,
.bmx-table tbody td {
    padding: var(--tbl-cell-pad);
    font-size: var(--tbl-font-size);
    color: var(--tbl-text);
    vertical-align: middle;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--tbl-row-border) !important;
    background: var(--tbl-bg);
}

/* Ostatni wiersz — bez ramki dolnej */
.bmx-table-wrapper table tbody tr:last-child td,
div.table-responsive table tbody tr:last-child td,
.bmx-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Hover wiersza */
.bmx-table-wrapper table tbody tr:hover td,
div.table-responsive table tbody tr:hover td,
.bmx-table tbody tr:hover td {
    background: var(--tbl-row-hover) !important;
    transition: background 0.15s ease;
}

/* Resetuj stare klasy paskowania — w nowym designie nie używamy gradientu w wierszach */
.table-odd,
.table-even,
table.dataTable tbody tr:nth-child(even) td,
table.dataTable.table-striped > tbody > tr:nth-child(even) > td,
table.dataTable.table-striped > tbody > tr:nth-child(odd) > td {
    background: var(--tbl-bg) !important;
}

/* Linki w komórkach */
.bmx-table-wrapper table tbody a,
div.table-responsive table tbody a,
.bmx-table tbody a {
    color: var(--tbl-link);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}
.bmx-table-wrapper table tbody a:hover,
div.table-responsive table tbody a:hover,
.bmx-table tbody a:hover {
    color: var(--tbl-link-hover);
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   5. KOLUMNY SPECJALNE
   -------------------------------------------------------------------------- */

/* Liczby — wyrównanie do prawej */
td.zzcenanetto,
td.zznetto,
td.zzbrutto,
.bmx-table td.col-number,
.bmx-table td.text-end {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Lp / numer porządkowy */
td.lp,
td.zzlp,
.bmx-table td.col-lp {
    text-align: right;
    width: 2.5rem;
    color: var(--tbl-text-muted);
}

/* Kod produktu — inline badge, wzorzec z modal-video */
code.product-code,
.bmx-table td code {
    font-size: var(--tbl-font-size-sm);
    font-weight: 600;
    color: var(--bmx-secondary);
    background: #e7e6fd;
    padding: 3px 7px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
}

td.zzkod,
.bmx-table td.col-code {
    font-family: 'Courier New', monospace;
    font-size: var(--tbl-font-size-sm);
    white-space: nowrap;
}

/* Ilość */
td.zzilosc,
.bmx-table td.col-qty {
    text-align: center;
    width: 5rem;
}

/* Akcje */
.bmx-table td.col-actions {
    text-align: center;
    white-space: nowrap;
    width: 1%;
    padding: 6px 10px;
}

/* Miniatura */
.bmx-table td img.cell-thumb {
    max-height: 44px;
    max-width: 60px;
    object-fit: contain;
    border-radius: 4px;
}

/* Przeterminowane */
.overdue {
    color: #c60000;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   6. ODZNAKI STATUSU
   -------------------------------------------------------------------------- */

.bmx-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-family: 'Poppins', sans-serif;
}

.bmx-badge--primary  { background: var(--bmx-primary-light); color: var(--bmx-primary-dark); }
.bmx-badge--success  { background: #dcfce7; color: #166534; }
.bmx-badge--warning  { background: #fef9c3; color: #854d0e; }
.bmx-badge--danger   { background: #fee2e2; color: #991b1b; }
.bmx-badge--neutral  { background: #f1f5f9; color: #475569; }
.bmx-badge--code     { background: #e7e6fd; color: #113770; font-family: 'Courier New', monospace; }


/* --------------------------------------------------------------------------
   7. WARIANTY
   -------------------------------------------------------------------------- */

/* Kompaktowa */
.bmx-table--compact table tbody td,
.bmx-table--compact table thead th,
table.bmx-table--compact tbody td,
table.bmx-table--compact thead th {
    padding: 7px 10px;
    font-size: var(--tbl-font-size-sm);
}

/* Tabela danych kontrahenta (lewy th + prawy td) */
.bmx-table-wrapper table.table--info tbody th {
    width: 40%;
    font-weight: 600;
    color: var(--tbl-text-muted);
    background: #f8fafc;
}

/* Bez wrappera — standalone tabela z własną ramką */
table.bmx-table-standalone {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--tbl-border);
    border-radius: var(--tbl-radius);
    overflow: hidden;
    box-shadow: var(--tbl-shadow);
}


/* --------------------------------------------------------------------------
   8. DATATABLES — TOOLBAR (wyszukiwarka + długość)
   -------------------------------------------------------------------------- */

.dataTables_wrapper {
    font-family: 'Poppins', sans-serif;
    font-size: var(--tbl-font-size);
    color: var(--tbl-text);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 0;   /* spacing zapewnia padding na .row:first-child */
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    font-size: var(--tbl-font-size);
    font-weight: 500;
    color: var(--tbl-text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Pole wyszukiwania */
.dataTables_wrapper .dataTables_filter input[type="search"] {
    height: 34px;
    padding: 0.3rem 0.7rem;
    font-size: var(--tbl-font-size);
    font-family: 'Poppins', sans-serif;
    border: 1px solid var(--tbl-border);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 200px;
    background: #ffffff;
    color: var(--tbl-text);
}
.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
    border-color: var(--bmx-primary);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.12);
}

/* Select liczby rekordów */
.dataTables_wrapper .dataTables_length select {
    height: 34px;
    padding: 0.3rem 2.2rem 0.3rem 0.7rem;
    font-size: var(--tbl-font-size);
    font-family: 'Poppins', sans-serif;
    border: 1px solid var(--tbl-border);
    border-radius: 6px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    color: var(--tbl-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--bmx-primary);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.12);
}


/* --------------------------------------------------------------------------
   9. DATATABLES — PAGINACJA
      Fix podwójnej ramki: rozbijamy Bootstrap "joined group" na niezależne przyciski.
      DT Bootstrap 5 generuje: ul.pagination > li.page-item.paginate_button > a.page-link
   -------------------------------------------------------------------------- */

.dataTables_paginate .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;           /* odstęp między przyciskami */
    margin: 0;
}

/* Usuń mechanizm "joined group" Bootstrap — każdy przycisk samodzielny */
.dataTables_paginate .page-item:not(:first-child) .page-link {
    margin-left: 0 !important;
}

/* Bazowy styl przycisku paginacji */
.dataTables_paginate .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.55rem;
    font-size: var(--tbl-font-size);
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    color: var(--tbl-link) !important;
    background: #ffffff;
    border: 1px solid var(--tbl-border) !important;
    border-radius: 6px !important;          /* każdy przycisk zaokrąglony */
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

/* Bootstrap dodaje radius tylko first/last — resetujemy to */
.dataTables_paginate .page-item:first-child .page-link,
.dataTables_paginate .page-item:last-child .page-link {
    border-radius: 6px !important;
}

/* Hover */
.dataTables_paginate .page-item:not(.disabled) .page-link:hover {
    background: var(--bmx-primary-light);
    border-color: var(--bmx-primary) !important;
    color: var(--bmx-primary-dark) !important;
}

/* Aktywny (bieżąca strona) */
.dataTables_paginate .page-item.active .page-link,
.dataTables_paginate .page-link.active {
    background: #009FE3 !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Disabled */
.dataTables_paginate .page-item.disabled .page-link {
    opacity: 0.45;
    pointer-events: none;
    background: #f8fafc;
    color: var(--tbl-text-muted) !important;
}

/* Focus — usuń domyślny BS outline, dodaj własny */
.dataTables_paginate .page-link:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15) !important;
}


/* --------------------------------------------------------------------------
   10. DATATABLES — INFO + PROCESSING
   -------------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_info {
    font-size: var(--tbl-font-size-sm);
    color: var(--tbl-text-muted);
    padding-top: 0.4rem;
}

.dataTables_wrapper .dataTables_processing {
    font-size: var(--tbl-font-size);
    color: var(--tbl-text-muted);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--tbl-border);
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    box-shadow: var(--tbl-shadow);
}


/* --------------------------------------------------------------------------
   11. RESPONSYWNOŚĆ MOBILNA (≤ 799 px)
       Stacked layout — komórki pokazują etykietę z atrybutu data-label
   -------------------------------------------------------------------------- */

@media (max-width: 799px) {

    div.table-responsive,
    .bmx-table-wrapper {
        border-radius: 6px;
        overflow-x: auto;
    }

    /* Ukryj nagłówki — etykiety z data-label zastępują */
    .bmx-table-wrapper table thead,
    div.table-responsive table thead {
        display: none;
    }

    /* Stacked: tbody, tr, td jako bloki */
    .bmx-table-wrapper table tbody,
    .bmx-table-wrapper table tbody tr,
    .bmx-table-wrapper table tbody td,
    div.table-responsive table tbody,
    div.table-responsive table tbody tr,
    div.table-responsive table tbody td {
        display: block;
        width: 100%;
    }

    /* Wiersz — separator + reset gradientu z style.css (tr:nth-child(even)) */
    .bmx-table-wrapper table tbody tr,
    div.table-responsive table tbody tr {
        border-bottom: 2px solid var(--tbl-border) !important;
        padding: 4px 0;
        background: #ffffff !important;
    }
    .bmx-table-wrapper table tbody tr:last-child,
    div.table-responsive table tbody tr:last-child {
        border-bottom: none !important;
    }

    /* Komórka z etykietą */
    .bmx-table-wrapper table tbody td[data-label],
    div.table-responsive table tbody td[data-label] {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 6px 12px;
        border-bottom: 1px solid #f3f4f6 !important;
        font-size: var(--tbl-font-size-sm);
        background: none !important;
    }
    .bmx-table-wrapper table tbody tr:last-child td,
    div.table-responsive table tbody tr:last-child td {
        border-bottom: none !important;
    }

    .bmx-table-wrapper table tbody td[data-label]::before,
    div.table-responsive table tbody td[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 120px;
        font-weight: 600;
        font-size: var(--tbl-font-size-sm);
        color: var(--tbl-text-muted);
        flex-shrink: 0;
    }

    /* DataTables toolbar — pełna szerokość na mobile */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
        text-align: left;
    }
    .dataTables_wrapper .dataTables_filter input[type="search"] {
        width: 100%;
        min-width: unset;
    }
    .dataTables_paginate .pagination {
        justify-content: center;
    }
    .dataTables_paginate .page-link {
        min-width: 30px;
        height: 30px;
        font-size: var(--tbl-font-size-sm);
    }
}


/* ==========================================================================
   12. NAV PILLS — strony z tabelami
       Nieaktywna: jasnoniebieski (#eff6ff), spójna z bmx-doc-btn--info.
       Aktywna: pełny niebieski #009FE3.
   ========================================================================== */

.nav-pills {
    gap: 6px;
    flex-wrap: wrap;
}

.nav-pills .nav-link {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    color: #1e40af;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    font-family: 'Poppins', sans-serif;
    padding: 8px 18px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-pills .nav-link:hover {
    background: #009FE3;
    border-color: #007db5;
    color: #ffffff;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: #009FE3;
    border-color: #007db5;
    color: #ffffff;
}

/* ==========================================================================
   13. ALERT JAKO KONTENER TABELI — .alert.home-alert
       Bootstrap .alert dodaje padding, border i background.
       Resetujemy to, żeby nie tworzyło podwójnego odstępu wokół tabeli.
   ========================================================================== */

.alert.home-alert {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

/* table-responsive bezpośrednio w home-alert — bez górnego marginesu (alert już go nie ma) */
.alert.home-alert div.table-responsive {
    margin-top: 0;
}


/* ==========================================================================
   14. DT TOOLBAR — FILTR NIESTANDARDOWY (#filterContainer)
       Selekty filtrów (status, adres) + pasek DT (długość, szukaj).
       Cel: jeden spójny pasek nad tabelą.
   ========================================================================== */

/* Kontener niestandardowych filtrów */
#filterContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;  /* grupy wyrównane do dolnej linii — selecty na jednym poziomie */
    gap: 12px;
    margin-bottom: 0;       /* spacing obsługuje .row.mb-2 w widoku */
}

/* Pojedyncza para: etykieta nad selektem */
.bmx-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Etykieta filtru */
.bmx-filter-label {
    font-size: 0.6875rem;   /* 11 px */
    font-weight: 600;
    color: var(--tbl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

/* Select filtru */
.bmx-filter-select {
    height: 34px;
    padding: 0.3rem 2.2rem 0.3rem 0.7rem;
    font-size: var(--tbl-font-size-sm);
    font-family: 'Poppins', sans-serif;
    color: var(--tbl-text);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    border: 1px solid var(--tbl-border);
    border-radius: 6px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    min-width: 150px;
    max-width: 280px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bmx-filter-select:focus {
    border-color: var(--bmx-primary);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.12);
}

/* DataTables górny pasek — wyrównaj flex + padding od krawędzi
   Mechanizm: Bootstrap .row ma margin:-12px, .col ma padding:12px → net=0 od krawędzi.
   Dodajemy padding do .row → content odsunięty od krawędzi o (row-margin + col-padding + row-padding) */
.dataTables_wrapper > .row:first-child {
    align-items: flex-end;
    row-gap: 6px;
    padding: 12px 16px 10px 16px;
}

/* Wyrównaj prawą kolumnę (search) do dołu */
.dataTables_wrapper > .row:first-child > div[class*="col"]:last-child {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

/* Dolny pasek (info + paginate) — wyrównaj + padding od krawędzi */
.dataTables_wrapper > .row:last-child {
    align-items: center;
    padding: 10px 16px 14px 16px;
    border-top: 1px solid var(--tbl-row-border);
    margin-top: 0;
}

/* Wyrównaj paginację do prawej */
.dataTables_wrapper > .row:last-child > div[class*="col"]:last-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


/* ==========================================================================
   15. DT CHILD ROWS — rozwinięte wiersze szczegółów
   ========================================================================== */

/* Tło wiersza child row generowanego przez DT */
table.dataTable tr.child,
table.dataTable tr.dt-hasChild + tr {
    background: #f8fafc !important;
}

/* ---- Nowy wzorzec: .child-row-* ---------------------------------------- */

/* Wrapper — padding wewnątrz <td> child row */
.child-row-wrapper {
    padding: 10px 16px 14px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Opcjonalny tytuł sekcji nad kartami */
.child-row-section-title {
    width: 100%;
    font-size: var(--tbl-font-size-sm);
    font-weight: 600;
    color: var(--tbl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 4px;
}

/* Karta pojedynczego dokumentu */
.child-row-card {
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 480px;
    background: #ffffff;
    border: 1px solid var(--tbl-border);
    border-radius: 6px;
    overflow: hidden;
}

/* Nagłówek karty (np. nr WZ, link do zamówienia) */
.child-row-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--tbl-border);
    font-size: var(--tbl-font-size-sm);
    font-weight: 600;
}

.child-row-header-label {
    color: var(--tbl-text-muted);
    flex-shrink: 0;
}

.child-row-header-value,
.child-row-header-value a {
    color: var(--bmx-secondary);
    font-weight: 600;
    text-decoration: none;
}

.child-row-header-value a:hover {
    color: var(--bmx-primary-dark);
    text-decoration: underline;
}

/* Wiersz klucz–wartość */
.child-row-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid #f3f4f6;
    font-size: var(--tbl-font-size-sm);
}

.child-row-item:last-child {
    border-bottom: none;
}

.child-row-label {
    font-weight: 600;
    color: var(--tbl-text-muted);
    min-width: 130px;
    flex-shrink: 0;
}

.child-row-value,
.child-row-value a {
    color: var(--bmx-secondary);
    font-weight: 600;
    text-decoration: none;
}

.child-row-value a:hover {
    color: var(--bmx-primary-dark);
    text-decoration: underline;
}

/* Ikona expand/collapse — Font Awesome 6 Free Solid */
table.dataTable tbody td.details-control {
    cursor: pointer;
    text-align: center;
    width: 36px;
    padding: 0 8px !important;
    user-select: none;
}

table.dataTable tbody td.details-control::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: '\f055';               /* fa-circle-plus */
    font-size: 1.125rem;
    color: var(--bmx-primary);
    display: block;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Wiersz rozwinięty — minus */
table.dataTable tbody tr.shown td.details-control::before {
    content: '\f056';               /* fa-circle-minus */
}

/* Hover — subtelne powiększenie */
table.dataTable tbody td.details-control:hover::before {
    transform: scale(1.15);
}

/* Komórka bez details-control (brak child rows) — puste miejsce bez kursora */
table.dataTable tbody td:not(.details-control):first-child {
    cursor: default;
}



/* ==========================================================================
   17. BREADCRUMB I CONTENT MAIN — spacing
   ========================================================================== */

#breadcrumb_menu {
    color: #94a3b8;
    margin-top: 16px;
    margin-left: 0;
    font-size: 0.8125rem;
    font-weight: 400;
}

#breadcrumb_menu a {
    color: #64748b;
}

#breadcrumb_menu a:hover {
    color: var(--bmx-primary-dark);
}

/* Separator między elementami breadcrumb */
#breadcrumb_menu a + a::before,
#breadcrumb_menu a + span::before,
#breadcrumb_menu span + a::before,
#breadcrumb_menu span + span::before {
    content: ' › ';
    color: #cbd5e1;
    margin: 0 2px;
}

#content_main {
    margin-top: 12px;
    margin-bottom: 48px;
}

/* Nagłówek sekcji (@section Header) i w panelu Konto */
#content_main h2:first-child,
#content_main > h2,
.content > h2,
.content > h2:first-child {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--tbl-text);
    font-family: 'Poppins', sans-serif;
}


/* ==========================================================================
   RESPONSIVE — sekcje 12-17
   ========================================================================== */

@media (max-width: 799px) {

    /* Filter container — grupy obok siebie ale zawijające się */
    #filterContainer {
        gap: 8px;
    }
    .bmx-filter-select {
        min-width: unset;
        max-width: 100%;
        width: 100%;
    }

    /* DT dolny pasek — wycentruj info */
    .dataTables_wrapper > .row:last-child > div[class*="col"]:first-child {
        text-align: center;
    }
}


/* ==========================================================================
   18. SYSTEM PRZYCISKÓW (.bmx-doc-btn)
       Pill style spójny z .rk-btn (Reklamacje).
       Warianty semantyczne:
         default (szary)   | --info / --confirm (niebieski)
         --success (zielony) | --warning (żółty) | --danger / --cancel (czerwony)
   ========================================================================== */

.bmx-doc-btn,
.rk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: 'Poppins', sans-serif;
    color: #282C6B !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    cursor: pointer;
}

.bmx-doc-btn:hover,
.bmx-doc-btn:focus,
.rk-btn:hover,
.rk-btn:focus {
    background: #e6f6fd;
    border-color: #009FE3 !important;
    color: #009FE3 !important;
    text-decoration: none !important;
}

.bmx-doc-btn:focus-visible,
.rk-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.2);
}

/* Stan nieaktywny */
.bmx-doc-btn:disabled,
.bmx-doc-btn[disabled],
.rk-btn:disabled,
.rk-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- info / confirm — niebieski (potwierdzenie, dalej, zamów) --- */
.bmx-doc-btn--info,
.bmx-doc-btn--confirm {
    background: #eff6ff;
    border-color: #93c5fd !important;
    color: #1e40af !important;
}

.bmx-doc-btn--info:hover,
.bmx-doc-btn--info:focus,
.bmx-doc-btn--confirm:hover,
.bmx-doc-btn--confirm:focus {
    background: #009FE3;
    border-color: #007db5 !important;
    color: #ffffff !important;
}

/* --- success — zielony (zapis, wysyłka, opublikuj) --- */
.bmx-doc-btn--success {
    background: #f0fdf4;
    border-color: #86efac !important;
    color: #166534 !important;
}

.bmx-doc-btn--success:hover,
.bmx-doc-btn--success:focus {
    background: #16a34a;
    border-color: #15803d !important;
    color: #ffffff !important;
}

/* --- warning — żółty (uwaga, zmiana z konsekwencjami) --- */
.bmx-doc-btn--warning {
    background: #fffbeb;
    border-color: #fcd34d !important;
    color: #92400e !important;
}

.bmx-doc-btn--warning:hover,
.bmx-doc-btn--warning:focus {
    background: #d97706;
    border-color: #b45309 !important;
    color: #ffffff !important;
}

/* --- danger / cancel — czerwony (odrzucenie, usunięcie, anuluj) --- */
.bmx-doc-btn--danger,
.bmx-doc-btn--cancel {
    background: #fef2f2;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

.bmx-doc-btn--danger:hover,
.bmx-doc-btn--danger:focus,
.bmx-doc-btn--cancel:hover,
.bmx-doc-btn--cancel:focus {
    background: #dc2626;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

/* Kontener przycisków w nagłówku dokumentu (obok tytułu h2) */
.bmx-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

/* Panel akcji — wyodrębniony pasek z przyciskami dostępnych akcji dokumentu */
.bmx-action-bar .rk-btn,
.bmx-action-bar .bmx-doc-btn {
    font-weight: 600;
}

.bmx-action-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #009FE3;
    border-radius: var(--tbl-radius);
    box-shadow: var(--tbl-shadow);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Wiersz podsumowania w tabeli towarów — zachowaj białe tło, blokuj hover */
div.table-responsive table tbody tr.bmx-summary-row td,
div.table-responsive table tbody tr.bmx-summary-row:hover td {
    background: #ffffff !important;
}

/* Zezwól na zawijanie nagłówków — dla tabel z wieloma kolumnami */
div.table-responsive.bmx-wrap-headers table thead th {
    white-space: normal;
    min-width: 48px;
}


/* ==========================================================================
   19. SEKCJA DOKUMENTÓW ZAMÓWIENIA (.mz-docs)
       Wzorzec: nagłówek jak thead (jasny, uppercase), treść z child-row-card.
   ========================================================================== */

.mz-docs {
    border: 1px solid var(--tbl-border);
    border-radius: var(--tbl-radius);
    overflow: hidden;
    box-shadow: var(--tbl-shadow);
    margin-top: 1rem;
}

.mz-docs__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    background: var(--tbl-head-bg);
    border: none;
    border-bottom: 2px solid var(--tbl-head-border);
    font-size: var(--tbl-head-font-size);
    font-weight: var(--tbl-head-weight);
    color: var(--tbl-head-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    transition: background 0.15s ease;
}

.mz-docs__toggle:hover {
    background: #f1f5f9;
}

.mz-docs__chevron {
    color: var(--tbl-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.mz-docs__toggle[aria-expanded="true"] .mz-docs__chevron {
    transform: rotate(180deg);
}

.mz-docs__body {
    background: var(--tbl-bg);
}

/* Padding wewnątrz body — child-row-wrapper ma własny padding, tu dodajemy mały offset */
.mz-docs__body > .child-row-wrapper {
    padding: 12px 16px 16px;
}


/* ==========================================================================
   20. TIMER BAR (.bmx-timer-bar)
       Pasek z timerem / data waznosci dla ekranow potwierdzenia zamowienia.
       Wzorzec: [ikona] | [tresc: etykieta + info] | [licznik/data]
       Wspolny z .bmx-action-bar (to samo tlo, ramka, cien).
   ========================================================================== */

.bmx-timer-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #009FE3;
    border-radius: var(--tbl-radius);
    box-shadow: var(--tbl-shadow);
    margin-bottom: 1.25rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.bmx-timer-bar--flush {
    margin-bottom: 0;
}

.bmx-timer-bar__icon {
    font-size: 1.25rem;
    color: #009FE3;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

.bmx-timer-bar__body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
}

.bmx-timer-bar__label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #113770;
    line-height: 1.4;
    margin: 0 0 2px;
}

.bmx-timer-bar__label--sub {
    font-weight: 500;
    color: #475569;
    font-size: 0.8125rem;
    margin-top: 4px;
    margin-bottom: 0;
}

.bmx-timer-bar__info {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 6px;
    line-height: 1.5;
}

.bmx-timer-bar__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.bmx-timer-bar__header .bmx-timer-bar__label {
    margin-bottom: 0;
}

/* Licznik odliczajacy lub wyswietlana data */
.bmx-timer-bar__countdown {
    font-family: 'Poppins', 'Courier New', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    color: #113770;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    padding: 2px 10px;
    letter-spacing: 1px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center;
    line-height: 1.4;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

/* Kompaktowe linki akcji wewnatrz timer-bar (monitor dokumentow).
   Styl inline-link: maly tekst + ikonka, bez tla, bez ramki.
   Warianty: domyslny (niebieski info), --danger (czerwony). */
.bmx-timer-bar__action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: #1e40af !important;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 100px;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bmx-timer-bar__action:hover,
.bmx-timer-bar__action:focus {
    background: #009FE3;
    border-color: #007db5;
    color: #ffffff !important;
}

.bmx-timer-bar__action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 159, 227, 0.25);
}

/* Wariant nawigacyjny -- ikonka strzalki */
.bmx-timer-bar__action--go::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f2f6';  /* fa-right-to-bracket */
    font-size: 0.625rem;
}

.bmx-timer-bar__action--danger {
    color: #991b1b !important;
    background: #fef2f2;
    border-color: #fecaca;
}

/* Wariant danger -- ikonka xmark */
.bmx-timer-bar__action--danger::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f00d';  /* fa-xmark */
    font-size: 0.625rem;
}

.bmx-timer-bar__action--danger:hover,
.bmx-timer-bar__action--danger:focus {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff !important;
}

.bmx-timer-bar__action--danger:focus-visible {
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25);
}

@media (max-width: 576px) {
    .bmx-timer-bar {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 12px;
    }

    .bmx-timer-bar__countdown {
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
        font-size: 1rem;
    }
}


/* ==========================================================================
   21. GENERIC MODAL (.bmx-modal-*)
       Identyczny jezyk designu co .modal-video-* (Home/style-swiper.css),
       ale dostepny globalnie. Uzyj na kazdym modalu akcji dokumentu.
       Warianty naglowka: domyslny (niebieski) i --danger (czerwony).
   ========================================================================== */

.bmx-modal-content {
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    border: none;
}

.bmx-modal-header {
    background: -webkit-linear-gradient(315deg, #e6f6fd 0%, #ffffff 100%);
    background: linear-gradient(135deg, #e6f6fd 0%, #ffffff 100%);
    border-bottom: 2px solid #bae6fd;
    padding: 20px 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px;
}

.bmx-modal-header--danger {
    background: -webkit-linear-gradient(315deg, #fef2f2 0%, #ffffff 100%);
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
    border-bottom-color: #fca5a5;
}

.bmx-modal-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: -webkit-linear-gradient(315deg, #009FE3 0%, #005ea1 100%);
    background: linear-gradient(135deg, #009FE3 0%, #005ea1 100%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-shadow: 0 4px 12px rgba(0, 159, 227, 0.3);
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.3);
}

.bmx-modal-header--danger .bmx-modal-header-icon {
    background: -webkit-linear-gradient(315deg, #ef4444 0%, #dc2626 100%);
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.bmx-modal-header-icon i {
    font-size: 20px;
    color: #ffffff;
}

.bmx-modal-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.bmx-modal-close {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    padding: 0;
    cursor: pointer;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.bmx-modal-close:hover {
    background: #dc2626;
    border-color: #dc2626;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.bmx-modal-close i {
    font-size: 18px;
    color: #6b7280;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.bmx-modal-close:hover i {
    color: #ffffff;
}

.bmx-modal-body {
    padding: 24px 28px;
}

.bmx-modal-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    /*font-weight: 600;*/
    color: #374151;
    margin-bottom: 8px;
    display: block;
}

.bmx-modal-counter {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    color: #9ca3af;
    text-align: right;
    margin-top: 6px;
    margin-bottom: 0;
}

/* --- Decision card (modal radio columns) --- */

.bmx-decision-card {
    display: block;
    cursor: pointer;
    height: 100%;
    position: relative;
}

.bmx-decision-card__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bmx-decision-card__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 24px 16px;
    border: 2px solid #e2e8f0;
    border-radius: var(--tbl-radius, 10px);
    background: #fff;
    -webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    height: 100%;
}

.bmx-decision-card__inner:hover {
    border-color: #93c5fd;
    -webkit-box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.15);
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.15);
}

.bmx-decision-card__radio:focus-visible ~ .bmx-decision-card__inner {
    border-color: #93c5fd;
    -webkit-box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.35);
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.35);
    outline: none;
}

.bmx-decision-card--active .bmx-decision-card__inner {
    border-color: #009FE3;
    background: #eff6ff;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}

.bmx-decision-card__check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.bmx-decision-card__check i {
    font-size: 10px;
    color: #fff;
    opacity: 0;
    -webkit-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
}

.bmx-decision-card--active .bmx-decision-card__check {
    border-color: #009FE3;
    background: #009FE3;
}

.bmx-decision-card--active .bmx-decision-card__check i {
    opacity: 1;
}

.bmx-decision-card__img {
    width: 80px;
    height: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.bmx-decision-card__text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    line-height: 1.5;
}

.bmx-decision-card--active .bmx-decision-card__text {
    color: #113770;
    font-weight: 600;
}

.bmx-modal-hint {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
}

/* --- Decision card: compact (no image, vertical stack) --- */

.bmx-decision-card--compact {
    height: auto;
    margin-bottom: 8px;
}

.bmx-decision-card--compact:last-child {
    margin-bottom: 0;
}

.bmx-decision-card--compact .bmx-decision-card__inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 16px;
    gap: 10px;
}

.bmx-decision-card--compact .bmx-decision-card__check {
    position: static;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.bmx-decision-card--compact .bmx-decision-card__text {
    font-size: 0.8125rem;
}

@media (max-width: 767.98px) {
    .bmx-decision-card__img {
        width: 60px;
    }

    .bmx-decision-card__inner {
        padding: 16px 12px;
        gap: 8px;
    }

    .bmx-decision-card__text {
        font-size: 0.75rem;
    }
}

/* ==========================================
   22. KOSZYK — PRODUKT I SEKCJE
   ========================================== */

/* --- Koszyk: pola formularza (.bmx-koszyk-field__*) --- */

.bmx-koszyk-field__label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 6px;
}

.bmx-koszyk-field__input {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    color: #113770;
    width: 100%;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    -webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.bmx-koszyk-field__input:focus {
    background: #fff;
    border-color: #009FE3;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
    outline: none;
}

.bmx-koszyk-field__input::-webkit-input-placeholder { color: #94a3b8; }
.bmx-koszyk-field__input::-moz-placeholder          { color: #94a3b8; }
.bmx-koszyk-field__input:-ms-input-placeholder       { color: #94a3b8; }
.bmx-koszyk-field__input::placeholder                { color: #94a3b8; }

/* --- Koszyk: Select2 theme override (.bmx-koszyk-field__select) --- */

.bmx-koszyk-field__select + .select2-container--bootstrap-5 .select2-selection--single {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    color: #113770;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 10px 14px;
    min-height: auto;
    height: auto;
    -webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.bmx-koszyk-field__select + .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    color: #113770;
    padding: 0;
    line-height: 1.5;
}

.bmx-koszyk-field__select + .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 10px;
}

.bmx-koszyk-field__select + .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
    border-color: #1e40af transparent transparent transparent;
}

.bmx-koszyk-field__select + .select2-container--bootstrap-5.select2-container--open .select2-selection--single {
    background: #fff;
    border-color: #009FE3;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}

.bmx-koszyk-field__select + .select2-container--bootstrap-5.select2-container--focus .select2-selection--single {
    background: #fff;
    border-color: #009FE3;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}

.bmx-koszyk-section {
    font-family: 'Poppins', sans-serif;
    font-size: var(--tbl-font-size);
    color: var(--tbl-text);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--tbl-radius);
    -webkit-box-shadow: var(--tbl-shadow);
    box-shadow: var(--tbl-shadow);
    padding: 16px 20px;
    margin-bottom: 1rem;
}

.bmx-koszyk-section .dropdown-menu {
    font-family: 'Poppins', sans-serif;
    font-size: var(--tbl-font-size-sm);
}

/* --- Koszyk: suma --- */

.bmx-koszyk-total {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #113770;
}

.bmx-koszyk-total span {
    font-weight: 400;
}

/* --- Przechowalnia --- */

.bmx-przechowalnia-header {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #113770;
    margin-bottom: 12px;
}

.bmx-product-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: var(--tbl-radius);
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: var(--tbl-font-size);
    color: var(--tbl-text);
    -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bmx-product-item:hover {
    border-color: #93c5fd;
    -webkit-box-shadow: 0 2px 8px rgba(0, 159, 227, 0.1);
    box-shadow: 0 2px 8px rgba(0, 159, 227, 0.1);
}

.bmx-product-image {
    width: 64px;
    height: 64px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background-color: transparent;
}

.bmx-product-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 6px;
}

.bmx-product-info {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
}

.bmx-product-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: 4px 0 8px;
    gap: 8px;
}

.bmx-product-label {
    color: #64748b;
    font-size: var(--tbl-font-size-sm);
    line-height: 1.4;
    margin-bottom: 4px;
}

.bmx-product-name {
    word-break: break-word;
    font-weight: 500;
    font-size: var(--tbl-font-size);
    line-height: 1.4;
    color: #dc3545;
}

.bmx-product-name a {
    color: #113770 !important;
    font-weight: 500;
    font-size: var(--tbl-font-size);
    text-decoration: none;
    line-height: 1.4;
}

.bmx-product-name a:hover {
    color: #009FE3 !important;
    text-decoration: underline;
}

.bmx-etykieta {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
    line-height: 1.4;
}

.bmx-product-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    font-size: var(--tbl-font-size-sm);
    color: var(--tbl-text-muted);
}

.bmx-product-item .form-control {
    width: 75px !important;
    font-family: 'Poppins', sans-serif;
    font-size: var(--tbl-font-size-sm);
    color: var(--tbl-text);
    border-radius: 6px;
}

.bmx-product-price {
    color: #113770;
    text-align: right;
    margin-left: auto;
}

.bmx-product-price p {
    margin-bottom: 2px;
    font-size: var(--tbl-font-size);
}

.btn-usun-z-koszyka {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #94a3b8;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    padding: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.btn-usun-z-koszyka:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

.btn-usun-z-koszyka i {
    font-size: 14px;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
    color: inherit;
}

/* Select2 — responsywna szerokosc */
.select2-container--bootstrap-5 {
    width: 100% !important;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Select2 kolor tekstu */
.select2-container--bootstrap-5 .select2-results__option {
    color: #113770;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #113770;
}


/* ==========================================================================
   23. SEKCJA OGÓLNA (.bmx-section)
       Biały kontener z obramówką i cieniem — stosuj do sekcji treści
       (np. Dane firmy, Moje dane, Zmiana hasła, tab-pane content).
       Wzorzec spójny z .bmx-koszyk-section.
   ========================================================================== */

.bmx-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--tbl-radius);
    -webkit-box-shadow: var(--tbl-shadow);
    box-shadow: var(--tbl-shadow);
    padding: 20px 24px;
    margin-bottom: 1rem;
}

.bmx-section + .bmx-section {
    margin-top: 0;
}

/* Nagłówek sekcji wewnątrz .bmx-section */
.bmx-section__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tbl-text);
    font-family: 'Poppins', sans-serif;
}


/* ==========================================================================
   24. GLOBALNE DROPDOWN MENU (.dropdown-menu)
       Spójny język designu z resztą systemu — ramka, cień, zaokrąglenia.
   ========================================================================== */

.dropdown-menu {
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--tbl-radius) !important;
    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    padding: 6px !important;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
}

.dropdown-item {
    border-radius: 6px;
    padding: 7px 12px;
    color: #374151;
    font-size: 0.875rem;
    font-family: 'Poppins', sans-serif;
    transition: background 0.12s ease, color 0.12s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--bmx-primary-light, #e6f6fd);
    color: var(--bmx-primary, #009FE3);
}

.dropdown-item.active,
.dropdown-item:active {
    background: #009FE3;
    color: #ffffff;
}

.dropdown-divider {
    border-color: #f1f5f9;
    margin: 4px 0;
}

/* input[type=submit] jako dropdown-item (koszyk, formularze) */
input.dropdown-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    display: block;
}

/* Wariant destrukcyjny — czerwony hover */
.dropdown-item--danger {
    color: #991b1b !important;
}

.dropdown-item--danger:hover,
.dropdown-item--danger:focus {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}


/* ==========================================================================
   25. KONTO — SIDEBAR + POLA DANYCH
       Panel konta: sidebar nawigacyjny + wzorzec etykieta/wartość w sekcjach.
   ========================================================================== */

/* Sidebar container */
.sidebar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--tbl-radius);
    -webkit-box-shadow: var(--tbl-shadow);
    box-shadow: var(--tbl-shadow);
    padding: 8px;
    margin-bottom: 1rem;
}

/* Sekcja grup linków */
.sidebar .section {
    margin-bottom: 4px;
}

/* Nagłówek grupy */
.sidebar .section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 12px 6px;
    margin-bottom: 2px;
}

.sidebar .section-title.section-title-border {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}

/* Linki i submit-jako-link */
.sidebar a,
.sidebar input[type="submit"],
.sidebar input[type="button"] {
    display: block;
    padding: 8px 12px;
    margin: 2px 0;
    color: #374151;
    text-decoration: none !important;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    -webkit-transition: background 0.15s ease, color 0.15s ease;
    transition: background 0.15s ease, color 0.15s ease;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.sidebar a:hover,
.sidebar a:focus,
.sidebar input[type="submit"]:hover,
.sidebar input[type="submit"]:focus,
.sidebar input[type="button"]:hover,
.sidebar input[type="button"]:focus {
    background: #eff6ff;
    color: #1e40af;
    outline: none;
}

.sidebar a.active,
.sidebar input[type="submit"].active,
.sidebar input[type="button"].active {
    background: #009FE3;
    color: #ffffff !important;
    font-weight: 600;
}

/* Content area obok siebie z sidebarem */
.content {
    padding-top: 0;
}

/* Etykieta pola (sub-section-header) */
.sub-section-header {
    font-family: 'Poppins', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    line-height: 1.3;
}

/* Wartość pola (bmx-text-style) */
.bmx-text-style {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9375rem;
    color: #113770;
    line-height: 1.4;
}

/* Przeterminowane zobowiązania — czerwone */
.bmx-text-style.overdue {
    color: #c60000;
}


/* ==========================================================================
   26. LEGENDA (.bmx-legend)
       Kompaktowy blok informacyjny z legendą statusów / ikon.
       Lewy akcent niebieski (#93c5fd), tło #f8fafc.
   ========================================================================== */

.bmx-legend {
    background: white;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #93c5fd;
    border-radius: var(--tbl-radius);
    padding: 14px 20px;
    margin-top: 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    color: #374151;
}

.bmx-legend + .bmx-legend {
    margin-top: 8px;
}

.bmx-legend__title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
}

.bmx-legend__title i {
    color: #93c5fd;
    font-size: 0.875rem;
}

.bmx-legend__list {
    margin: 0;
    padding-left: 1.25rem;
    color: #374151;
    font-size: 0.875rem;
}

.bmx-legend__list.list-unstyled {
    padding-left: 0;
}

.bmx-legend__list li {
    margin-bottom: 4px;
    line-height: 1.5;
}

.bmx-legend__note {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 1.5;
}

/* -- Mini Koszyk: Font Awesome icons -------------------------------------- */
.minikoszyk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.minikoszyk-btn--dodaj {
    color: #009FE3;
    background: #e6f6fd;
}

.minikoszyk-btn--dodaj:hover {
    color: #fff;
    background: #009FE3;
}

.minikoszyk-btn--usun {
    color: #059669;
    background: #ecfdf5;
}

.minikoszyk-btn--usun:hover {
    color: #fff;
    background: #dc2626;
}

.minikoszyk-saved {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 14px;
    color: #059669;
    background: #ecfdf5;
}

.minikoszyk-row {
    /*display: flex;*/
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
}

.minikoszyk-row form {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
}

.minikoszyk-input {
    width: 60px !important;
    display: inline-block !important;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    border-radius: 6px;
    padding: 4px 8px;
    text-align: center;
    margin: 0 6px;
}