/* =============================================================================
   MOBILNI PRIKAZ - ekrani do 640px

   Prelomna tačka je namerno ista kao u MainLayout.razor.css (linija 49/59) i
   NavMenu.razor.css (linija 162): ispod 641px sidebar prelazi u padajući meni.
   Ako se ona ikad promeni, promeni je i ovde - inače će se meni i sadržaj
   prelamati na različitim širinama.

   Sve u ovom fajlu važi SAMO na tim širinama. Desktop izgled se odavde ne dira,
   pa je ovo bezbedno mesto za sve mobilne popravke - ne diraj css/modals.css
   zbog telefona.

   Fajl se učitava POSLE css/modals.css (vidi App.razor), pa uglavnom pobeđuje
   samim redosledom. "!important" stoji samo tamo gde se nadjačava inline style
   sa <col> elemenata ili <style> blok unutar same strane - oni se u dokumentu
   pojavljuju kasnije i inače bi bili jači.
   ============================================================================= */

@media (max-width: 640.98px) {

    /* ---------- Srazmerno smanjenje celog izgleda ---------------------------
       Skoro sve mere u aplikaciji su u rem-ovima (font, visina polja, razmaci,
       dugmad), a rem se računa od korena. Zato se smanjenjem korena SVE smanji
       srazmerno, jednim potezom - umesto da se svaka komponenta gađa posebno.

       clamp: nikad ispod 11.5px (donja granica čitljivosti), nikad iznad 15px,
       a između raste sa širinom ekrana. Na telefonu od 390px ispadne oko 12.5px,
       na 360px oko 11.5px. OVO JE JEDINO MESTO gde se menja veličina celog
       izgleda - povećaj ili smanji ova tri broja i sve prati srazmerno.

       Napomena za iOS: Safari sam zumira stranu kad se klikne u polje čiji je
       font manji od 16px. Ako to počne da smeta, polja (.search-input,
       .form-field input, select, textarea) treba vratiti na 16px - ali onda
       prestaju da se smanjuju sa ostatkom. */

    html {
        font-size: clamp(11.5px, 3.2vw, 15px);
    }

    /* Bootstrap-ov "px-4" ostavlja 1.5rem sa svake strane - na telefonu je to
       skoro 10% širine potrošeno na prazno. Specifičnost je namerno podignuta
       (.content.px-4) da nadjača "!important" iz Bootstrap-a. */
    .content.px-4,
    .top-row.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* ---------- Liste -------------------------------------------------------
       Cilj: cela tabela da stane u širinu ekrana, pa da korisnik zumira po
       potrebi - umesto da cela strana ide levo-desno. Zato se ukidaju fiksne
       širine kolona (<col style="width:...">), fiksni raspored tabele i zabrana
       preloma teksta. Ako i posle toga nešto ne stane, skroluje sama kartica
       sa tabelom, a ne cela strana zajedno sa zaglavljem. */

    .list-card {
        overflow-x: auto;
    }

    .list-table {
        table-layout: auto !important;
    }

    .list-table col {
        width: auto !important;
    }

        .list-table th,
        .list-table td {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            padding: 0.55rem 0.5rem;
        }

        /* Koren je već smanjen (vidi clamp gore), pa ovde ostaje samo blago
           doterivanje odnosa zaglavlje/sadržaj - bez ovoga bi zaglavlje bilo
           sitnije nego što treba. */
        .list-table th {
            font-size: 0.75rem;
            letter-spacing: 0;
        }

        .list-table td {
            font-size: 0.85rem;
        }

        /* Poslednja kolona (dugmad) inače drži 200px i kad je prazna - na
           telefonu je to trećina ekrana. */
        .list-table th:last-child,
        .list-table td:last-child {
            width: auto !important;
        }

    /* Kad se tekst u ćelijama prelama, redovi se stapaju - zato naizmenična
       podloga i jača linija između redova, da se vidi gde jedan red prestaje.
       Sadržaj se vezuje za vrh ćelije, pa su prvi redovi svih kolona u ravni. */
    .list-table tbody tr:nth-child(even) {
        background-color: var(--bg-surface-alt);
    }

    .list-table tbody td {
        vertical-align: top;
        border-bottom: 1px solid var(--border);
    }

    .actions-cell {
        flex-wrap: wrap;
    }

    /* ---------- Pretraga i filteri ------------------------------------------
       Jedna kontrola po redu, preko cele širine - u redu su inače različitih
       širina pa deluju razbacano. */

    .filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .search-input {
        width: 100% !important;
    }

    .filters-row select {
        width: 100%;
        min-width: 0;
    }

    /* ---------- Navigacija po datumu ---------------------------------------- */

    .date-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .date-nav-label {
        min-width: 0;
        flex: 1 1 auto;
        font-size: 0.95rem;
    }

    /* Dugmad "Nazad / Napred / Danas" i samo polje za datum - uža i sitnija, da
       ceo red stane bez prelamanja. Polje za datum je na desktopu fiksnih 150px;
       ovde se skuplja na sopstvenu širinu. */
    .date-nav button {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }

    .date-picker-input {
        width: auto;
        max-width: 100%;
        padding: 0.35rem 0.4rem;
        font-size: 0.8rem;
    }

    /* ---------- Zaglavlje strane -------------------------------------------- */

    .page-header {
        gap: 0.6rem;
    }

    .page-title {
        font-size: 1.15rem;
    }

    /* ---------- Kartice i profil -------------------------------------------- */

    .profile-card {
        padding: 1rem;
    }

    /* Labela iznad vrednosti - jedno pored drugog se na uskom ekranu prelama
       nasred reda i teško se čita. */
    .profile-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

        .profile-item span,
        .profile-item h4 {
            text-align: left;
        }

    /* ---------- Forme -------------------------------------------------------
       Dve kolone jedna pored druge (Novi radni nalog, Nova analiza) uspravljaju
       se u jednu. */

    .field-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* ---------- Modali ------------------------------------------------------ */

    .modal-box {
        width: 94%;
        padding: 1.25rem 1rem;
        max-height: 88vh;
    }

    .modal-title {
        font-size: 1.15rem;
        margin-bottom: 1rem;
    }

    .modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .modal-actions .btn-primary,
        .modal-actions .btn-secondary,
        .modal-actions .btn-danger {
            width: 100%;
            text-align: center;
        }
}