/* Wczytaj po panel.css/Tailwind oraz po panel-poprawki.css w panelu admina.
   Wycięcie ekranu wymaga także viewport-fit=cover w meta viewport. */
@media screen {
    .strona {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .strona .pasek__wnetrze {
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
    }

    .strona :is(.pasek__wnetrze, .tresc, .stopka, .komunikaty) {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .strona .stopka {
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    }

    .strona .pomijacz:focus {
        top: max(8px, env(safe-area-inset-top, 0px));
        left: max(8px, env(safe-area-inset-left, 0px));
    }

    /* Szeroka tabela pozostaje przewijana we własnej ramce, nie na body. */
    .strona .tresc .grid > *,
    .strona .tresc > *,
    #content > * {
        min-inline-size: 0;
    }

    :is(.strona, #content) .overflow-x-auto {
        min-inline-size: 0;
        max-inline-size: 100%;
        overscroll-behavior-x: contain;
    }

    /* Natywny selektor daty Safari nie może poszerzać kolumny formularza. */
    :is(.strona, #content) :is(input, select, textarea) {
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    /* Unfold: wysokość otwartego menu uwzględnia zmienne paski Safari.
       Przewijamy sam popup; overflow na pasku bocznym uciąłby to menu. */
    #nav-sidebar {
        max-height: 100vh;
        max-height: 100dvh;
    }

    #nav-sidebar-inner {
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
    }

    /* Rodzic nagłówka Unfold ma h-16/py-4; powiększamy również jego ramkę,
       aby sam padding nie przesunął przycisków poza stałą wysokość 64 px. */
    .h-16:has(> #header-inner) {
        height: calc(4rem + env(safe-area-inset-top, 0px));
        padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    }

    #header-inner {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    [x-data*="openUserLinks"] > nav {
        max-height: calc(100vh - 7rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 7rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    .wybor-wygladu__etykieta {
        white-space: normal;
    }
}

@media screen and (max-width: 600px) {
    .strona :is(.pasek__wnetrze, .tresc) {
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }
}

/* Dotyczy także iPada w poziomie i używanego z myszą/klawiaturą.
   Zachowujemy powiększanie gestem; 16 px zapobiega skokowi przy fokusie. */
@media screen and (any-pointer: coarse) {
    body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    body select,
    body textarea {
        font-size: max(16px, 1em);
    }

    .strona input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    .strona select,
    .strona form button {
        min-height: 44px;
    }
}