/* =========================================================================
   mobile.css - korekty wyłącznie pod urządzenia mobilne
   Wygląd desktop pozostaje bez zmian - wszystkie reguły są w media queries.
   Dołączany na: templates/base.html.twig, Admin/Templates/baseLogin.html.twig,
   Admin/Templates/CustomBaseLogin.html.twig, Admin/Templates/basePublic.html.twig
   ========================================================================= */

@media (max-width: 767.98px) {

    /* --- Scroll i wysokości ---------------------------------------------
       voucher.css ustawia body/html { overflow:hidden } oraz .h-100 { height:100vh },
       przez co na telefonie nie da się przewinąć dłuższej treści. */
    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100%;
    }

    .h-100 {
        height: auto !important;
        min-height: 100vh !important;
    }

    /* --- Ekran logowania / kafelki: wspólne tło -------------------------
       voucher.css nakłada overlaye przez position:fixed + 100vh, więc przy
       dłuższej (przewijalnej) treści zakrywają tylko pierwszy ekran.
       Kotwiczymy je do sekcji (position:relative) i rozciągamy na 100%. */
    #loginAirdrops,
    #homePage {
        position: relative !important;
        background-attachment: scroll !important;
    }

    #loginAirdrops:before,
    #loginAirdrops:after,
    #homePage:before,
    #homePage:after {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* --- Header z logotypem ------------------------------------------------ */
    .main-login .card-header,
    #CustomLogin .card-header {
        padding: 14px 16px !important;
    }

    .main-login .card-header .row {
        --bs-gutter-x: 0;
    }

    .main-login .card-header .col,
    .main-login .card-header .col.text-end {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center !important;
    }

    .main-logo {
        font-size: 22px !important;
        line-height: 1.2;
    }

    .main-login .card-header img {
        height: 32px !important;
        margin-top: 6px;
    }

    /* --- Odstępy kontenera logowania ------------------------------------ */
    .main-login {
        padding: 12px !important;
    }

    /* karta logowania wyśrodkowana w pionie względem wysokości ekranu
       (bez tego karta "przykleja się" do góry, a pod spodem zostaje
       pusty pas tła) */
    .main-login.login-page {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
    }

    /* =====================================================================
       baseLogin.html.twig - karta logowania panelu administracyjnego
       ===================================================================== */

    /* na mobile ukrywamy górną kartę z logo - zostaje sama karta z formularzem
       (klasa .login-page jest tylko na ekranach logowania/resetu hasła,
        strona startowa templates/Default zachowuje swój nagłówek) */
    .main-login.login-page > .card.card-header {
        display: none !important;
    }

    #loginAirdrops .main-login > .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* karta ma inline style height:calc(100vh - 140px) - kasujemy na mobile */
    #loginAirdrops .card-register-drop {
        height: auto !important;
        min-height: 0 !important;
        padding: 24px 18px !important;
    }

    #loginAirdrops .card-register-drop > .row {
        height: auto !important;
    }

    #loginAirdrops .card-register-drop .col-lg-8.m-auto {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* dekoracyjne tło w karcie - nie zabiera miejsca na treść */
    .card-register-drop .bg-img-1 {
        max-height: 120px;
        object-fit: cover;
        object-position: top;
    }

    /* --- Pola i przyciski w karcie (padding 20px 32px jest za duży) ---- */
    .card-register-drop .btn,
    .card-register-drop .form-control {
        padding: 13px 16px !important;
        font-size: 15px !important;
    }

    /* wszystkie przyciski w karcie na pełną szerokość */
    .card-register-drop .btn {
        display: block !important;
        width: 100% !important;
    }

    /* wyśrodkowany nagłówek i podtytuł */
    .card-register-drop h1,
    .card-register-drop .h3 {
        font-size: 1.15rem !important;
        line-height: 1.35;
        text-align: center !important;
    }

    .card-register-drop .vy-subtitle-1 {
        display: block;
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 14px;
        font-size: 13px;
        text-align: center;
    }

    /* =====================================================================
       templates/Default/index.html.twig - siatka modułów startowych
       ===================================================================== */
    #loginAirdrops .home-modules .row > [class*="col-md-6"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    #loginAirdrops .home-modules .card {
        min-height: 0 !important;
        padding: 20px !important;
        margin-bottom: 12px !important;
    }

    #loginAirdrops .home-modules .card .h3 {
        font-size: 1.15rem !important;
    }

    #loginAirdrops .home-modules .card .mx-lg-5 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #loginAirdrops .home-1 .btn,
    #loginAirdrops .home-modules .btn {
        padding: 14px 18px !important;
        margin-top: .75rem !important;
        margin-bottom: .25rem !important;
    }

    #loginAirdrops .col-lg-8.mb-auto {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* =====================================================================
       Strony Nadzór / Pobierz aplikację (basePublic.html.twig)
       ===================================================================== */
    .public-page {
        padding: 14px !important;
    }

    .public-page .card-body {
        padding: 18px 14px !important;
    }

    .public-page .nav-pills .nav-link,
    .public-page .nav-tabs .nav-link {
        padding: 10px 12px;
        font-size: 14px;
    }

    .public-page .nav-pills,
    .public-page .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .public-page .nav-pills .nav-item,
    .public-page .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    .public-page .table-responsive {
        font-size: 13px;
    }

    .public-page .overview-stat {
        margin-bottom: 10px;
    }
}

/* Bardzo wąskie ekrany (telefony < 400px) */
@media (max-width: 399.98px) {
    .main-logo {
        font-size: 19px !important;
    }

    .card-register-drop .btn,
    .card-register-drop .form-control {
        padding: 12px 14px !important;
    }
}