/* ==========================================================================
   Responsive.css - warstwa responsywna portalu

   Ładowany JAKO OSTATNI w _Layout.cshtml, żeby wygrywał przy równej
   specyficzności z pozostałymi arkuszami. Nie modyfikuje istniejących plików -
   tylko nadpisuje to, co psuje się na mniejszych ekranach.

   Progi:
     ekran    : od 1025 px
     tablet   : 768 - 1024 px
     telefon  : do 767 px
     wąski telefon : do 400 px

   Świadomie bez zmiennych CSS (var(--...)) - pozostałe arkusze projektu ich
   nie używają, a nie chcemy podnosić wymagań wobec przeglądarki tylko przez
   ten plik. Wysokość nagłówka jest więc wpisana wprost w każdym progu.

   UWAGA co do !important: szerokości przycisków i kontenerów są ustawiane
   w kodzie C# (Unit.Pixel) albo w atrybucie style w widokach. Z poziomu
   arkusza nie da się ich nadpisać inaczej.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Wspólne dla wszystkich rozmiarów
   -------------------------------------------------------------------------- */

/* obraz nigdy nie rozpycha układu w poziomie */
img {
    max-width: 100%;
}

table {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   2. GRIDY Z WŁASNYM SZABLONEM WIERSZA (SetDataRowTemplateContent)

   Piętnaście widoków nie korzysta z trybu adaptacyjnego DevExpress, tylko
   renderuje własną tabelkę par etykieta/wartość:

       <div class="gridCommonStyle"><table>
         <tr><td colspan=5 class="dataColCaption" style="background-color:...">NAGŁÓWEK</td></tr>
         <tr><td class="dataColCaption">Etykieta:</td><td class="dataCol1">wartość</td>
             <td class="dataColCaption">Etykieta:</td><td class="dataCol1">wartość</td></tr>
         ...
         <tr>... <td class="dataColButtons">przyciski</td></tr>
       </table></div>

   Wspólny dla wszystkich rozmiarów układ "kartowy": etykieta NAD wartością.
   Wiersz tabeli staje się siatką o dwóch rzędach (grid-template-rows: auto auto)
   wypełnianą kolumnami (grid-auto-flow: column), więc komórki idą po kolei:
   etykieta -> rząd 1 kolumny 1, wartość -> rząd 2 tej samej kolumny,
   następna etykieta -> rząd 1 kolumny 2 itd.

       +-------------------+-------------------+
       | NUMER CAS         | NUMER MDL         |   <- rząd 1 (etykiety)
       | 7732-18-5         | MFCD00011332      |   <- rząd 2 (wartości)
       +-------------------+-------------------+

   grid-template-columns daje dwa tory na pary (wiersz z jedną parą zajmuje
   lewą połowę i trzyma wspólną oś z wierszami powyżej) plus trzeci, ostatni
   tor na przyciski. Tor akcji jest zarezerwowany w KAŻDYM wierszu, nie tylko
   w tym z przyciskiem - inaczej wiersz z przyciskiem miałby węższe pary niż
   sąsiedzi i kolumny by się rozjechały. Szerokość jest stała (210 px, z zapasem
   na najdłuższą etykietę "Szczegóły produktu"), bo tor "auto" rósłby wyłącznie
   w wierszach z przyciskiem i pary znów przestałyby trzymać wspólną oś.

   Progi modyfikują tę bazę:
     do 767 px   - jedna kolumna (sekcja 4),
     od 1025 px  - dwa wiersze obok siebie, czyli 4 kolumny (sekcja 3).
   -------------------------------------------------------------------------- */

.gridCommonStyle > table,
.gridCommonStyle > table > tbody {
    display: block;
    width: 100% !important;
}

.gridCommonStyle tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 210px;
    grid-template-rows: auto auto;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    width: 100% !important;
    height: auto !important;   /* szablony mają wpisane inline height: 45px */
    /* separator na wierszu, nie na komórce - inaczej w wierszu z jedną parą
       kreska kończyłaby się w połowie szerokości */
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    /* Odstęp między wierszami. Margines, nie gap, bo ta sama deklaracja musi
       zadziałać w trzech układach: wiersz jako blok (telefon), wiersz jako
       siatka w blokowym tbody (tablet) i wiersz jako element siatki tbody
       (ekran). Jedno miejsce do zmiany, jeśli 3 px okaże się za dużo. */
    margin-bottom: 3px;
    /* align-items celowo domyślne (stretch) - dzięki temu dolne krawędzie
       wartości w sąsiednich kolumnach są na jednej linii nawet wtedy, gdy
       jedna z nich zawinie się na dwie linie */
}

/* margin: auto z Layout.css w siatce CSS zwija komórkę do szerokości treści
   i centruje ją w torze - etykiety przestałyby trzymać wspólną lewą krawędź.
   Stąd wyzerowanie marginesu i border-box (padding ma się mieścić w torze). */
.gridCommonStyle td {
    display: block;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
}

/* Etykieta: mniejsza, stonowana, bez dolnego odstępu - ma się kleić do wartości.
   Nagłówek wiersza ma wpisany inline kolor tła, więc wykluczamy go z tej reguły.

   text-align jest tu KLUCZOWE. Layout.css nadaje "text-align: left" tylko
   klasie .dataCol1, natomiast .dataColCaption nie ma własnego wyrównania
   i dziedziczy je z komórki gridu DevExpressa (wyrównanie do prawej).
   W tabeli wyglądało to poprawnie - etykieta do prawej, tuż przy wartości -
   ale w układzie kartowym etykieta uciekała na prawy skraj toru, a wartość
   zostawała przy lewej krawędzi. */
.gridCommonStyle td.dataColCaption:not([style*="background-color"]) {
    text-align: left !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.7;
    padding: 10px 12px 0 12px;
}

/* nagłówek pozycji (pasek z nazwą produktu) - zawsze przez całą szerokość
   i przez oba rzędy siatki, bo jest jedyną komórką w swoim wierszu */
/* Nagłówek pozycji (pasek z nazwą produktu) - przez całą szerokość i przez oba
   rzędy siatki, bo jest jedyną komórką w swoim wierszu.
   text-align CELOWO bez !important: dwa szablony ustawiają wyrównanie inline
   (SearchGuestListPartial: left, ProductsToImportPartial: center) i te mają
   wygrać. Reguła obsługuje tylko pozostałe, które nie ustawiają nic i przez to
   dziedziczyły wyrównanie do prawej z komórki gridu. */
.gridCommonStyle td.dataColCaption[style*="background-color"] {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    text-align: left;
    font-size: 16px;
    padding: 12px 12px;
}

/* .dataCol2 też nie ma własnego wyrównania w Layout.css - ta sama pułapka
   co przy etykiecie */
.gridCommonStyle td.dataCol1,
.gridCommonStyle td.dataCol2 {
    text-align: left !important;
    font-size: 15px;
    padding: 2px 12px 10px 12px;
    word-break: break-word;
}

/* przyciski w ostatnim torze wiersza, na wysokość obu rzędów (etykieta+wartość),
   a nie w osobnym wierszu pod spodem */
.gridCommonStyle td.dataColButtons {
    grid-column: -2 / -1;
    grid-row: 1 / -1;
    align-self: center;
    padding: 8px 12px;
}

/* zabezpieczenie na wypadek dłuższej etykiety - przycisk zwęża się do toru
   zamiast wylewać się poza tabelę */
.gridCommonStyle td.dataColButtons [class*="dxbButton"],
.gridCommonStyle td.dataColButtons button,
.gridCommonStyle td.dataColButtons input[type="button"],
.gridCommonStyle td.dataColButtons input[type="submit"] {
    max-width: 100%;
}

/* Komórka spoza schematu etykieta/wartość - w ProductsToImportPartial wiersz
   zaczyna się od checkboxa bez klasy. Bez tej reguły zająłby rząd 1 pierwszej
   kolumny i przesunął całe parowanie o jedno pole. Dostaje własny tor na pełną
   wysokość, a pary układają się dalej od kolejnej kolumny. */
.gridCommonStyle td:not(.dataColCaption):not(.dataCol1):not(.dataCol2):not(.dataColButtons) {
    grid-row: 1 / -1;
    align-self: center;
    padding: 10px 12px;
}

/* Checkbox nie potrzebuje całego toru - pierwszy tor na szerokość treści,
   dalej dwa tory na pary i tor akcji. Przeglądarka bez :has() pomija regułę
   i checkbox dostaje zwykły tor 1fr. */
.gridCommonStyle tr:has(> td:not(.dataColCaption):not(.dataCol1):not(.dataCol2):not(.dataColButtons)) {
    grid-template-columns: auto repeat(2, minmax(0, 1fr)) 210px;
}

/* Pusty wiersz dystansowy nie jest potrzebny w tym układzie.
   Szablony piszą go jako "<tr style='width:100%; height:15px;' />" - selektor
   po atrybucie style łapie go także wtedy, gdy parser wstawi do środka węzeł
   z białym znakiem i :empty przestanie pasować. */
.gridCommonStyle tr:empty,
.gridCommonStyle tr[style*="height:15px"] {
    display: none;
}

/* --------------------------------------------------------------------------
   3. EKRAN  (od 1025 px) - cztery kolumny

   Na monitorze dwie kolumny zostawiają połowę szerokości pustą. Zamiast
   rozciągać pary, układamy DWA WIERSZE obok siebie: tbody staje się siatką
   o dwóch torach, a każdy wiersz nadal ma własne dwie kolumny par - razem
   cztery kolumny danych.

       +----------+----------+   +----------+----------+
       | NUMER CAS| NUMER MDL|   | NR PUBCH | INCHLKEY |
       | 7732-18-5| MFCD00011|   | 962      | XLYOFN.. |
       +----------+----------+   +----------+----------+
       |<------- wiersz 1 ------>|<------- wiersz 2 ------->|

   Nagłówek pozycji i wiersz z przyciskami muszą iść przez całą szerokość -
   wykrywamy je przez :has(). Gdyby przeglądarka nie znała :has(), cała reguła
   zwężająca jest pomijana, każdy wiersz zostaje na pełnej szerokości i widok
   wygląda jak na tablecie. To bezpieczny stan zapasowy, nie rozsypany układ.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 1025px) {

    .gridCommonStyle > table > tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    /* domyślnie wiersz zajmuje oba tory */
    .gridCommonStyle > table > tbody > tr {
        grid-column: 1 / -1;
    }

    /* Zwykły wiersz z parami (bez nagłówka i bez przycisków) - pół szerokości
       i dwa tory, czyli po 1/4 szerokości tabeli na parę. Tor akcji z sekcji 2
       jest tu zbędny: przycisków w takim wierszu nie ma. */
    .gridCommonStyle > table > tbody > tr:not(:has(> td.dataColButtons)):not(:has(> td[style*="background-color"])) {
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Wiersz z przyciskami zostaje na pełnej szerokości i dostaje cztery równe
       tory - te same 1/4 szerokości co wyżej. Pary trafiają w tory 1-2,
       przycisk (grid-column: -2 / -1) w tor 4, czyli w ostatnią kolumnę. */
    .gridCommonStyle > table > tbody > tr:has(> td.dataColButtons) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* wiersz z checkboxem: wąski pierwszy tor + trzy tory na pary i akcje */
    .gridCommonStyle > table > tbody > tr:has(> td:not(.dataColCaption):not(.dataCol1):not(.dataCol2):not(.dataColButtons)) {
        grid-template-columns: auto repeat(3, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   4. TABLET  (768 - 1024 px)

   Nagłówek 80 px. Layout.css wymusza 100 px na .header-wrapper, logo i na
   odsunięciu treści (#headerPanel top, #pageContent margin-top) - wszystkie
   cztery wartości muszą się zmieniać razem, inaczej treść wejdzie pod
   przyklejony nagłówek albo zostanie pod nim luka.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {

    .header-wrapper,
    .header-wrapper .header-logo,
    .header-wrapper img {
        height: 80px;
    }

    .header-wrapper .header-logo,
    .header-wrapper img {
        width: 160px;
        object-fit: contain;
    }

    #headerPanel {
        top: 80px;
    }

    #pageContent {
        margin-top: 80px;
    }

    .header-wrapper {
        justify-content: space-between;
        padding: 0 16px;
    }

    /* na tablecie 75% szerokości zostawia zbyt szerokie puste marginesy */
    .centerContentDiv {
        width: 94%;
    }

    .centerDiv {
        width: 100%;
    }

    .container.info-card,
    .container.card {
        max-width: 96% !important;
    }

    /* grid: jeżeli kolumny nie mieszczą się mimo trybu adaptacyjnego
       DevExpress, pozwalamy przewinąć w poziomie zamiast rozpychać stronę */
    .grid-view {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- gridy rysowane szablonem wiersza: zwolnienie szerokości kolumn ---

       Szerokości kolumn ustawione w kodzie (w SearchGuestListPartial jest ich
       16, suma 1510 px) DevExpress renderuje jako <colgroup><col width>.
       Colgroup wiąże CAŁĄ tabelę, niezależnie od tego, czy nagłówek jest
       widoczny, więc karta szeroka na ekran i tak siedziała w tabeli szerszej
       niż telefon - grid przewijał się w poziomie.

       Wiersz z szablonem to pojedyncza komórka z colspan, więc te szerokości
       nie opisują już niczego i można je zwolnić. :has() ogranicza regułę do
       gridów kartowych - zwykłe gridy kolumnowe swoich szerokości potrzebują.

       To jest druga linia obrony. Właściwa poprawka siedzi w widokach:
       ShowColumnHeaders = false sprawia, że nagłówek w ogóle się nie renderuje,
       i działa niezależnie od obsługi :has() w przeglądarce. */

    .grid-view:has(.gridCommonStyle) table,
    [class*="dxgvControl"]:has(.gridCommonStyle) table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }

    .grid-view:has(.gridCommonStyle) col,
    [class*="dxgvControl"]:has(.gridCommonStyle) col {
        width: auto !important;
    }

    /* komórka danych (colspan na wszystkie kolumny) i kontenery przewijania */
    .grid-view:has(.gridCommonStyle) td[class*="dxgv"],
    [class*="dxgvControl"]:has(.gridCommonStyle) td[class*="dxgv"],
    .grid-view:has(.gridCommonStyle) [class*="dxgvCSD"],
    [class*="dxgvControl"]:has(.gridCommonStyle) [class*="dxgvCSD"] {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Nagłówek kolumn nie ma sensu nad kartami: grid z szablonem wiersza nie
       renderuje kolumn, tylko pary etykieta/wartość, a każda wartość ma własny
       podpis w karcie. Widoki ustawiają już ShowColumnHeaders = false - ta
       reguła zostaje na wypadek szablonu, który to pominie. */
    .grid-view:has(.gridCommonStyle) tr:has(> [class*="dxgvHeader"]),
    [class*="dxgvControl"]:has(.gridCommonStyle) tr:has(> [class*="dxgvHeader"]) {
        display: none !important;
    }

    .grid-view:has(.gridCommonStyle) [class*="dxgvHeader"],
    [class*="dxgvControl"]:has(.gridCommonStyle) [class*="dxgvHeader"] {
        display: none !important;
    }

    /* ikony nagłówka odrobinę większe - palec, nie kursor */
    .header-right i,
    .hamburger {
        font-size: 22px;
    }

    /* lista załączników - miniatura nie może dyktować szerokości */
    .file-list .col-image img {
        max-width: 100%;
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   5. TELEFON  (do 767 px) - nagłówek 64 px
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    /* --- nagłówek --- */

    .header-wrapper,
    .header-wrapper .header-logo,
    .header-wrapper img {
        height: 64px;
    }

    .header-wrapper .header-logo,
    .header-wrapper img {
        width: 128px;
        object-fit: contain;
    }

    #headerPanel {
        top: 64px;
    }

    #pageContent {
        margin-top: 64px;
    }

    .header-wrapper {
        justify-content: space-between;
        padding: 0 10px;
    }

    .app-header .left-block,
    .app-header .right-block,
    .app-header .menu-container > div {
        float: none;
    }

    /* --- treść --- */

    .centerContentDiv,
    .centerDiv {
        width: 100%;
    }

    /* kontenery mają w widokach wpisane style inline (max-width: 98%, 1200px,
       600px, 800px) - stąd !important */
    .container,
    .container.info-card,
    .container.card {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* pionowe centrowanie przez table-cell nie ma sensu na wąskim ekranie -
       treść ma płynąć od góry */
    .formLayout-verticalAlign {
        display: block;
        padding-top: 16px !important;
    }

    /* --- przyciski DevExpress --- */

    /* szerokość jest ustawiana w kodzie (bs.Width = Unit.Pixel(180)) i trafia
       do atrybutu style; na telefonie przyciski układają się w kolumnę */
    [class*="dxbButton"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* --- strona główna: przyciski Kup / Sprzedaj / Zaloguj się ---

       .button-container jest kontenerem flex z zawijaniem, a trzy opakowania
       .log-in-button nie mają zadanej szerokości, więc dostają rozmiar od
       zawartości. Reguła wyżej rozciąga sam przycisk do 100% szerokości
       opakowania - szerokość opakowania zależy wtedy od szerokości przycisku
       i odwrotnie, przez co "Kup" i "Sprzedaj" wychodziły różnej szerokości.
       Do tego pierwszy ma w widoku padding-top: 20px, a pozostałe 10px, i przy
       ustawieniu obok siebie stały na różnej wysokości.

       Na telefonie układamy je jedna pod drugą, z jednakową szerokością
       i jednakowym odstępem. Zakres ograniczony do .button-container, bo
       .log-in-button wystepuje tez samodzielnie w OffersGuest. */

    .button-container {
        flex-direction: column;
        align-items: stretch;
    }

    .button-container .log-in-button,
    .button-container .log-in-button.full-width {
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 10px !important;
    }

    /* Sam przycisk na pełną szerokość opakowania.

       Szerokość 300 px pochodzi z set.Width = 300 w widoku i trafia do
       atrybutu style, stąd !important. DevExpress potrafi owinąć przycisk
       dodatkowym elementem (div albo tabelka), więc rozciągamy każde
       bezpośrednie dziecko opakowania, a nie tylko element z klasą
       dxbButton - inaczej wystarczyłaby jedna warstwa opakowania, żeby
       przyciski znów wyszły różnej szerokości. */
    /* Blokowość wymuszamy TYLKO na opakowaniach liniowych.

       Gdy DevExpress owinie przycisk elementem liniowym (span, a), szerokość
       100% jest ignorowana i przycisk wystaje poza ekran - stąd ta reguła.
       Nie wolno jej jednak rozciągnąć na wszystkie dzieci: jeżeli przycisk
       renderuje się jako <table>, "display: block" rozbija układ komórek -
       etykieta traci wyśrodkowanie i ucieka w lewy górny róg. */
    .button-container .log-in-button > span,
    .button-container .log-in-button > a,
    .button-container .log-in-button > label {
        display: block !important;
    }

    .button-container .log-in-button > *,
    .button-container .log-in-button [class*="dxbButton"],
    .button-container .log-in-button table,
    .button-container .log-in-button input[type="button"],
    .button-container .log-in-button input[type="submit"],
    .button-container .log-in-button button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* pasek akcji: z wyrównania do prawej na blok na całą szerokość */
    .centerContentDiv > div[style*="text-align: right"],
    .container > div[style*="text-align: right"] {
        text-align: center !important;
        padding-right: 0 !important;
    }

    /* --- gridy --- */

    .grid-view {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    .grid-view .pager,
    .grid-view .dxgvPagerBottomPanel {
        white-space: normal !important;
    }

    /* ikony w kolumnie poleceń (kosz, edycja) - powiększone do dotyku */
    .grid-view .column-image {
        width: 16px;
        height: 16px;
    }

    .grid-view .dxgvCommandColumn img,
    .grid-view td.dxgv img {
        min-width: 24px;
        min-height: 24px;
    }

    /* --- gridy z własnym szablonem wiersza (SetDataRowTemplateContent) --- */

    /* Te gridy nie korzystają z trybu adaptacyjnego DevExpress, bo zamiast kolumn
       renderują własną tabelkę par etykieta/wartość:

           <div class="gridCommonStyle"><table>
             <tr><td colspan=5 class="dataColCaption">NAGŁÓWEK</td></tr>
             <tr><td class="dataColCaption">Etykieta:</td><td class="dataCol1">wartość</td>
                 <td class="dataColCaption">Etykieta:</td><td class="dataCol1">wartość</td></tr>
             ...
             <tr>... <td class="dataColButtons">przyciski</td></tr>
           </table></div>

       Przy .dataColCaption { min-width: 150px } i dwóch parach w wierszu minimalna
       szerokość tabeli to ~700 px - na telefonie wychodzi poza ekran. Rozkładamy
       komórki na bloki, dzięki czemu etykieta ląduje nad wartością. */

    .gridCommonStyle > table {
        width: 100% !important;
    }

    .gridCommonStyle tr {
        display: block;
        width: 100% !important;
        height: auto !important;   /* szablony mają wpisane inline height: 45px */
        border-bottom: none;       /* na telefonie separator jest pod każdą wartością */
    }

    .gridCommonStyle td {
        display: block;
        box-sizing: border-box;   /* padding ma się mieścić w 100%, nie doklejać do niego */
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;     /* Layout.css ustawia margin: auto */
    }

    /* etykieta: mniejsza, stonowana, bez dolnego odstępu - ma się kleić do wartości.
       Nagłówek wiersza ma wpisany inline kolor tła, więc wykluczamy go z tej reguły. */
    .gridCommonStyle td.dataColCaption:not([style*="background-color"]) {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        opacity: 0.7;
        padding: 10px 10px 0 10px;
    }

    /* nagłówek pozycji (pasek z nazwą produktu) */
    .gridCommonStyle td.dataColCaption[style*="background-color"] {
        font-size: 16px;
        padding: 12px 10px;
    }

    .gridCommonStyle td.dataCol1,
    .gridCommonStyle td.dataCol2 {
        font-size: 15px;
        padding: 2px 10px 10px 10px;
        word-break: break-word;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }

    .gridCommonStyle td.dataColButtons {
        padding: 12px 10px;
        border-bottom: none;
    }

    /* pusty wiersz dystansowy (height:15px) nie jest potrzebny w układzie blokowym */
    .gridCommonStyle tr:empty {
        display: none;
    }

    /* --- lista załączników: szablon z miniaturą i rowspan --- */

    /* rowspan przestaje działać, gdy komórki stają się blokami - miniatura
       ląduje nad opisem, co na telefonie jest pożądane */
    .file-list table,
    .file-list tbody,
    .file-list tr,
    .file-list td {
        display: block;
        width: 100% !important;
    }

    .file-list .col-image {
        text-align: center;
        min-width: 0 !important;
    }

    .file-list .col-image img {
        max-width: 100%;
        height: auto;
    }

    .file-list .row1 {
        text-align: center;
        word-break: break-word;
    }

    .file-list .row2 {
        text-align: center;
        min-width: 0 !important;
    }

    /* --- menu boczne i ikony --- */

    .menu {
        padding-top: 48px;
    }

    .menu a {
        font-size: 18px;
        padding: 14px 15px 14px 24px;   /* pozycja ~46 px wysokości = cel dotykowy */
    }

    .menu .closebtn {
        font-size: 32px;
        right: 18px;
    }

    .hamburger,
    .header-right i {
        font-size: 22px;
        padding: 11px;   /* powiększony obszar klikalny bez zmiany wielkości ikony */
        margin: 0;
    }

    /* --- okna DevExpress (potwierdzenia, formularz edycji w gridzie) --- */

    .dxpc-mainDiv,
    .dxpc-content {
        max-width: 96vw !important;
    }

    /* --- lista załączników (własny szablon wiersza, nie zwykły grid) --- */

    .file-list table {
        width: 100%;
        table-layout: fixed;
    }

    .file-list td {
        word-break: break-word;
    }

    /* --- stopka --- */

    .site-footer .footer-links {
        padding-left: 0;
        list-style: none;
        text-align: center;
    }

    .site-footer .image-row {
        justify-content: center;
    }

    .site-footer img {
        max-width: 140px;
        height: auto;
    }

    /* --- panel komunikatów --- */

    [id^="messagePanel"] {
        font-size: 15px;
    }

    /* --- strony konta: kontener nie może rosnąć do szerokości treści ---

       SignInRegister.css ustawia .content { display: table } wraz z
       .formLayout-verticalAlign { display: table-cell }, żeby wyśrodkować
       formularz w pionie. Box typu table jest jednak "shrink-to-fit": rośnie
       do szerokości swojej treści zamiast trzymać się okna. Skutek: cokolwiek
       szerszego w środku (na rejestracji przyciski mają set.Width = 300)
       rozpycha cały łańcuch kontenerów, a max-width: 100% na elementach
       wewnątrz odnosi się wtedy do tej rozdmuchanej szerokości i nic nie daje.
       Logowanie problemu nie ujawniało, bo jego treść mieści się w oknie.

       Na telefonie przełączamy na zwykły blok - wyśrodkowanie w pionie i tak
       nie ma tu sensu, bo formularz jest wyższy od ekranu. */

    .content {
        display: block !important;
        height: auto !important;
    }

    .formLayout-verticalAlign {
        display: block !important;
    }

    /* --- rejestracja: widok szerszy od ekranu ---

       .registration-form ma padding: 50px, czyli 100 px z lewej i prawej.
       Na ekranie 375 px zostaje 275 px na kartę z formularzem, w którym
       przyciski mają w widoku set.Width = 300. Logowanie tego problemu nie ma,
       bo korzysta z .formLayout-container (max-width: 362px) bez takiego
       paddingu. Schodzimy do 16 px - odzyskane 68 px z nawiązką pokrywa
       kilkanaście pikseli nadmiaru.

       Druga linia: ograniczenie szerokości tego, co DevExpress renderuje
       wewnątrz formularza. Celowo bez "overflow: hidden" na kontenerze -
       przyciąłby wysuwane kalendarze i dymki walidacji. */

    .registration-form {
        padding: 16px !important;
    }

    .registration-form table,
    .registration-form img,
    .registration-form input,
    .registration-form select,
    .registration-form textarea,
    .registration-form [class*="dxeEditArea"],
    .registration-form [class*="dxeButtonEdit"],
    .registration-form [class*="dxeMemo"],
    .registration-form [class*="dxflFormLayout"],
    .registration-form [class*="dxflGroup"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --------------------------------------------------------------------------
   6. Wąski telefon (do 400 px) - nagłówek 56 px
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 400px) {

    .header-wrapper,
    .header-wrapper .header-logo,
    .header-wrapper img {
        height: 56px;
    }

    .header-wrapper .header-logo,
    .header-wrapper img {
        width: 104px;
    }

    #headerPanel {
        top: 56px;
    }

    #pageContent {
        margin-top: 56px;
    }

    .menu a {
        font-size: 16px;
    }

    .grid-view .column-image {
        width: 14px;
        height: 14px;
    }
}

/* --------------------------------------------------------------------------
   7. Telefon w poziomie - niski ekran, nagłówek 52 px
   -------------------------------------------------------------------------- */

@media only screen and (max-height: 450px) and (orientation: landscape) {

    .header-wrapper,
    .header-wrapper .header-logo,
    .header-wrapper img {
        height: 52px;
    }

    .header-wrapper .header-logo,
    .header-wrapper img {
        width: 104px;
    }

    #headerPanel {
        top: 52px;
    }

    #pageContent {
        margin-top: 52px;
    }

    .menu {
        padding-top: 16px;
        overflow-y: auto;
    }

    .menu a {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   8. Wydruk - zamówienia i reklamacje bywają drukowane
   -------------------------------------------------------------------------- */

@media print {

    .header-wrapper,
    .app-header,
    .menu,
    .hamburger,
    .site-footer,
    .share-banner,
    [class*="dxbButton"],
    [id^="messagePanel"],
    [id^="loaderPanel"] {
        display: none !important;
    }

    #pageContent,
    .content-wrapper {
        margin-top: 0 !important;
        min-height: auto !important;
    }

    .container,
    .container.info-card,
    .centerContentDiv {
        max-width: 100% !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    .grid-view {
        overflow: visible !important;
    }
}