/* ============================================================
   main-desktop.css — širi ekrani (tablet/desktop, ≥900px)
   ============================================================

   ŠTA JE OVDE BIO PROBLEM (workflow.md #111)
   ------------------------------------------
   Prva verzija ovog fajla je "razvukla mobilni" umesto da napravi desktop
   raspored. Tri konkretna uzroka, svaki vidljiv na prvi pogled:

   1. `main.css` na ≥560px pravi TELEFONSKI OKVIR — `border: 8px solid #1a1c29`,
      `border-radius: 40px`, `box-shadow: 0 40px 100px`. To pravilo je i dalje
      važilo na 1920px, pa je desktop dobijao DIV TELEFON: crna ivica, jako
      zaobljeni uglovi i senka oko kartice širine 1180px koja pluta na sredini.
   2. Sadržaj je bio ograničen na ~760px (`padding: max(24px, calc(50% - 380px))`)
      — mobilna kolona centrirana u širokom ekranu, sa ogromnim praznim marginama
      levo i desno.
   3. Bočni meni je bio DONJI meni okrenut vertikalno: ikonice centrirane,
      natpisi 9.5px (veličina za palac na telefonu, ne za čitanje sa 60cm), a
      `.nav-fab` je zadržao `margin-top: -28px` i prsten senke — trik koji
      postoji da bi dugme "visilo" iznad donjeg bara kojeg ovde nema.

   PRISTUP
   -------
   Nema NOVE palete ni novih fontova — projekat već ima zaokružen sistem
   (`--bg`/`--surface`/`--border`/`--blue`/`--pink`/`--good`/`--warn`/`--bad`,
   Space Grotesk + Manrope). Menja se ISKLJUČIVO raspored i gustina informacija,
   jer je tu i bio bag. Sve nove vrednosti su izvedene iz postojećih tokena.

   I dalje važi: čist CSS preko POSTOJEĆEG DOM-a, bez ijedne HTML/JS izmene.
   ============================================================ */

@media (min-width: 900px) {
  /* ===== 1. Aplikacija popunjava ekran (kraj "džinovskog telefona") ===== */
  body {
    /* main.css centrira shell kao karticu; na desktopu app JESTE stranica. */
    align-items: stretch;
    justify-content: stretch;
    background: var(--bg);
  }
  .app-shell {
    max-width: none;
    height: 100dvh;
    min-height: 100dvh;
    /* Poništava telefonski okvir iz main.css-ovog @media (min-width:560px). */
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* `#mainApp` ima INLINE stil koji postavlja JS: `display: none` na početku
     (index.html), pa `display: contents` posle prijave (auth.js's
     completeLogin()). Inline stil pobeđuje spoljni CSS bez `!important`, pa je
     `!important` ovde neophodan da bi grid uopšte važio.

     BAG (workflow.md #112): raniji `#mainApp { display: grid !important }`
     je pregazio i ono POČETNO `display: none` — pa se pre prijave, ispod
     login ekrana, video ceo app (bočni meni sa "Dodaj trošak", topbar sa
     logom i ikonicama). Selektor zato mora da pogađa SAMO stanje posle
     prijave: `[style*="contents"]` je tačno ono što `completeLogin()` upiše,
     dok `display: none` ostaje nedirnuto i login ekran je sam na ekranu. */
  #mainApp[style*="contents"] {
    display: grid !important;
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "nav topbar"
      "nav alerts"
      "nav screens";
  }

  /* Mount div-ovi za modale ne učestvuju u mreži — njihova deca
     (.modal-overlay) su position:absolute u odnosu na .app-shell, nezavisno
     od grida, isto kao na mobilnom. */
  #monthlyPopupMount,
  #groupModalMount,
  #settingsModalMount {
    display: contents;
  }

  /* ===== 2. Bočni meni — lista, ne red thumb-dugmića ===== */
  .bottom-nav {
    grid-area: nav;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 20px 14px;
    border-top: none;
    border-right: 1px solid var(--border);
    /* Bez blur-a: on postoji da bi se sadržaj video KROZ plutajući donji bar.
       Bočni meni ništa ne prekriva, pa je blur samo trošak. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.014);
    overflow-y: auto;
  }
  .nav-btn {
    /* Ikonica i natpis JEDAN PORED DRUGOG (na mobilnom su jedno ispod drugog,
       jer je tamo cilj uska thumb-meta). */
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    width: auto;
    min-width: 0;
    /* 9.5px je veličina za palac na 15cm; sa radne udaljenosti treba 13px. */
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    text-align: left;
    position: relative;
    transition:
      color 0.18s var(--ease),
      background 0.18s var(--ease);
  }
  .nav-btn span {
    /* Duga imena ("Šoping lista") ne smeju da lome red u uskom rail-u. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }
  .nav-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
  }
  /* Aktivna stavka: popunjena pilula + tanka gradijentna traka na levoj ivici.
     Gradijent je ISTI --blue → --pink koji već nosi `.nav-fab` — vezuje meni
     za potpis aplikacije umesto da uvodi novu boju. */
  .nav-btn.active {
    color: var(--text);
    background: rgba(76, 126, 255, 0.12);
  }
  .nav-btn.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--blue), var(--pink));
  }

  /* FAB → puno dugme sa natpisom. Na mobilnom je okrugao i "visi" iznad
     donjeg bara (negativna margina + prsten senke u boji pozadine); ovde nema
     šta da nadvisuje, pa se ta dva trika poništavaju. Natpis dolazi iz CSS-a
     jer JS u dugme upisuje samo ikonicu (app.js's wireNavAndTop) — a ovaj
     fajl po dogovoru ne dira JS. */
  .nav-fab {
    width: auto;
    height: 44px;
    margin: 6px 0 14px;
    border-radius: var(--r-sm);
    justify-content: flex-start;
    gap: 12px;
    padding: 0 14px;
    box-shadow: 0 8px 20px rgba(245, 86, 140, 0.28);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .nav-fab::after {
    content: "Dodaj trošak";
  }
  .nav-fab svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }
  .nav-fab:hover {
    filter: brightness(1.08);
  }

  /* ===== 3. Zaglavlje ===== */
  .topbar {
    grid-area: topbar;
    padding: 22px 32px 14px;
    border-bottom: 1px solid var(--border);
  }
  #topAlerts {
    grid-area: alerts;
  }
  #topAlerts:not(:empty) {
    padding: 14px 32px 0;
  }
  .screens-wrap {
    grid-area: screens;
    min-height: 0;
  }

  /* ===== 4. Širina sadržaja =====
     Bilo `calc(50% - 380px)` → sadržaj zaključan na 760px, tj. mobilna kolona
     nasred ekrana. Sad 1120px: dovoljno da kartice/tabele stvarno koriste
     radnu površinu, a i dalje pod granicom čitljivosti za duži tekst. */
  .screen {
    padding: 20px max(28px, calc(50% - 560px)) 32px;
    scrollbar-gutter: stable;
  }

  /* ===== 5. Početna — mreža ===== */
  #screen-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 16px;
  }
  /* Sažetak pre detalja: naslov, budžet i prazno stanje idu preko cele
     širine, pojedinačne kartice teku u kolonama ispod. */
  #screen-dashboard > .screen-head,
  #screen-dashboard > #budgetCard,
  #screen-dashboard > #emptyDashNotice {
    grid-column: 1 / -1;
  }
  /* `loansOnDashboardCardHtml()` (dashboard.js) vraća "labav" .card-title
     ISPRED N odvojenih .card-ova — nije umotan u zajednički kontejner kao
     ostale dashboard kartice. Na mobilnom (block-flow) to izgleda kao normalan
     naslov iznad liste; u mreži bi postao SOPSTVENA ćelija i plutao odvojeno
     od kartica koje najavljuje. `> .card-title` pogađa SAMO naslove koji su
     DIREKTNA deca (ovaj slučaj), ne i .card-title unutar drugih kartica. */
  #screen-dashboard > .card-title {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  /* Kartice u mreži su različite visine; bez ovoga se rastežu na visinu
     najviše u redu i unutrašnji sadržaj "pliva". */
  #screen-dashboard > .card {
    align-self: start;
    margin-bottom: 0;
  }

  /* ===== 6. Modali — centriran dijalog, ne donja fioka =====
     `.sheet` na mobilnom klizi odozdo i ima zaobljen SAMO gornji par uglova.
     Preko cele širine desktopa to postaje traka od ivice do ivice — pa se
     ovde ponaša kao klasičan dijalog. */
  .modal-overlay {
    align-items: center;
    padding: 32px;
  }
  .sheet {
    width: min(560px, 100%);
    border-radius: var(--r-lg);
    padding: 18px 26px 26px;
    max-height: min(84vh, 760px);
    /* Mobilna animacija je "kliži odozdo"; ovde je suzdržanije podizanje. */
    transform: translateY(16px) scale(0.985);
  }
  .modal-overlay.open .sheet {
    transform: translateY(0) scale(1);
  }
  /* Ručka za prevlačenje ima smisla samo kod fioke koja se povlači prstom. */
  .sheet-handle {
    display: none;
  }

  /* ===== 7. Dve porodice komponenti, a ne jedan raspored za sve =====

     Prvi pokušaj (#112) je SVE liste gurnuo u istu mrežu pločica. Rezultat na
     screenshot-u: jedan račun kao pločica od 360px u kartici od 1120px, sa
     700px praznine desno — korisnikova primedba "razvučen ceo račun koji može
     da stane na 25% ekrana, ništa nije centrirano, slika gore sa delovima
     dole". Poslednje se odnosi na sam red: na telefonu je `.bill-row`
     namerno u DVA sprata (ikonica+naziv gore, iznos+dugmad dole), jer je tamo
     širina ~400px. Na desktopu za to nema razloga.

     Podela koja se ovde primenjuje ide po TIPU sadržaja, ne po ekranu:

     (a) STAVKE — račun, obaveza, šoping lista. Nose jednu identitetsku
         vrednost i par radnji. Na desktopu su JEDAN VODORAVAN RED preko cele
         širine: identitet levo, iznos desno poravnat, radnje skroz desno.
         To je standardna desktop lista i širina joj STVARNO treba.

     (b) KARTICE — cilj štednje, kredit, izazov. Nose napredak (traka,
         procenat, dva iznosa) i ne mogu u jedan red bez gubitka. Ostaju
         pločice u mreži, gde ih više stane jedna pored druge. */

  /* --- (b) kartice sa napretkom --- */
  #loansListContainer,
  #savingsListContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
    align-items: start;
  }
  #loansListContainer > *,
  #savingsListContainer > * {
    margin-bottom: 0;
  }
  #loansListContainer > .empty-state,
  #savingsListContainer > .empty-state {
    grid-column: 1 / -1;
  }

  /* --- (a) stavke: `.bill-row` iz dva sprata u jedan red --- */
  /* `:not(.dashboard-bill-row)` — kartice na Početnoj koriste ISTU klasu, ali
     žive u ćeliji mreže od ~360px, gde jedan red (ikonica 48px + naziv + iznos)
     ne staje. Tamo dvospratni raspored ostaje ispravan izbor. */
  .bill-row:not(.dashboard-bill-row) {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    transition: background 0.15s var(--ease);
  }
  /* Vlas-linija između stavki — bez nje se u jednom redu ne vidi gde se
     jedna stavka završava a druga počinje (na mobilnom su ih razdvajali
     spratovi i veći vertikalni razmak). */
  .bill-row:not(.dashboard-bill-row) + .bill-row:not(.dashboard-bill-row) {
    border-top: 1px solid var(--border);
    border-radius: 0;
  }
  .bill-row:not(.dashboard-bill-row):hover {
    background: rgba(255, 255, 255, 0.026);
  }
  /* Identitet (ikonica + naziv + rok) guta slobodan prostor i time gura
     iznos i dugmad na desnu ivicu. */
  .bill-row:not(.dashboard-bill-row) > .bill-row-top {
    flex: 1 1 auto;
    min-width: 0;
  }
  .bill-row:not(.dashboard-bill-row) > .bill-row-bottom {
    flex: 0 0 auto;
    gap: 10px;
    /* Poravnanje ispod ikonice ima smisla samo u dvospratnom rasporedu. */
    padding-left: 0;
  }
  /* Na telefonu `flex: 1 1 auto` gura dugmad udesno unutar donjeg sprata;
     ovde je iznos samo jedna kolona pred dugmadima, desno poravnata da se
     cifre iz više redova slažu jedna ispod druge. */
  .bill-row:not(.dashboard-bill-row) .bill-amount {
    flex: 0 0 auto;
    min-width: 116px;
    text-align: right;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
  }
  /* U redu dugmad idu na svoju prirodnu širinu; `flex: 1 1 0` (jednake
     širine) postoji zbog uskog telefona, ovde bi ih razvuklo. */
  .bill-row:not(.dashboard-bill-row) .row-action-btn {
    flex: 0 0 auto;
  }

  /* Šoping liste su harmonike (`.tx-card`), ne pločice — ostaju pune širine,
     samo dobijaju razmak između sebe. */
  #shoppingListsContainer > .tx-card {
    margin-bottom: 10px;
  }

  /* ===== 8. Modali — širina po sadržaju, ne jedna mera za sve =====
     `.sheet` je gore (sekcija 6) postavljen na 560px, što je tačno za kratke
     dijaloge (potvrda, izmena jednog reda). Podešavanja i izbor paketa imaju
     BITNO više sadržaja i na 560px ispadaju kao mobilna kolona nasred
     desktopa — dobijaju svoju širinu. */
  #settingsModalOverlay .sheet,
  #groupModalOverlay .sheet {
    width: min(880px, 100%);
  }
  #tierPickerOverlay .sheet {
    width: min(1040px, 100%);
  }
  /* Podešavanja: CELE SEKCIJE idu jedna pored druge (dve kolone na 880px).
     Namerno se NE dira raspored UNUTAR sekcije — tamo su forme (polje, pa
     dugmad ispod, pa razdelnik), i grid bi im razbacao redosled. Sekcija je
     najmanja celina koja sme da se pomera. */
  #settingsModalOverlay .sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
    align-content: start;
  }
  /* Difolt: sve što je direktno dete sheet-a ide preko cele širine (naslov,
     dugme "Izbriši profil", pravni linkovi...). Samo `.settings-section`
     dobija sopstvenu kolonu — pravilo ispod ga vraća na `auto`. */
  #settingsModalOverlay .sheet > * {
    grid-column: 1 / -1;
  }
  #settingsModalOverlay .sheet > .settings-section {
    grid-column: auto;
    margin-bottom: 0;
    align-self: start;
  }
  /* Paketi (Free / Pro / Premium) — sva tri jedan pored drugog, što i jeste
     poenta poređenja; na telefonu ostaju jedan ispod drugog (`.flex-col`). */
  #tierPickerOverlay #planCardsList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
    align-items: start;
  }
  #tierPickerOverlay .plan-card {
    margin-bottom: 0;
    height: 100%;
  }

  /* ===== 9. Login / registracija ===== */
  #authMount {
    /* Bez ovoga se hero, kartica sa prednostima i dugmad razvuku preko CELE
       širine ekrana (1900px+) — prijavljeno kao "login stranica je
       katastrofa". Mera je uža od app mere (1120px) jer je ovo stranica sa
       tekstom koji se čita, ne tabla sa podacima. */
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 28px;
  }

  /* ===== 9b. Welcome ekran (workflow.md #151) =====
     Forma prijave je uska namerno (720px, gore). Welcome ekran je stranica
     koja se ČITA i pregleda, pa dobija svoju, širu meru — klasu `welcome-mode`
     pali/gasi sam auth.js, umesto `:has()` selektora, da ponašanje ne zavisi
     od podrške za noviji CSS. */
  /* Meru drži SADRŽAJ, a ne sam #authMount (workflow.md #151). Kad je
     `max-width` bio na kontejneru koji skroluje, traka za skrol se crtala uz
     desnu ivicu te kolone od 1080px — dakle usred širokog ekrana, kao da
     nešto pluta. Ovako skrol ostaje uz ivicu prozora, kao na svakom sajtu. */
  #authMount.welcome-mode {
    max-width: none;
    padding: 56px 0 64px;
  }
  #authMount.welcome-mode .welcome-screen {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
  }
  .welcome-hero {
    padding-top: 0;
  }
  .welcome-title {
    font-size: 46px;
  }
  .welcome-tagline {
    font-size: 18.5px;
    max-width: 58ch;
  }
  .welcome-promo {
    width: fit-content;
    font-size: 15px;
    padding: 16px 20px;
  }
  .welcome-section {
    padding: 44px 0 0;
  }
  .welcome-section-title {
    font-size: 15px;
    margin-bottom: 22px;
  }
  /* Tri kolone na desktopu — osam funkcija u jednoj koloni traži četiri
     ekrana skrola, a ovde ima širine za pregled odjednom. */
  .welcome-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
  }
  .welcome-feature {
    padding: 20px;
  }
  .welcome-feature-body h3 {
    font-size: 16.5px;
  }
  .welcome-qa-row {
    padding: 20px;
  }
  .welcome-qa-row h3 {
    font-size: 16px;
  }
  .welcome-section-lead {
    font-size: 15px;
  }
  .welcome-steps {
    flex-direction: row;
    gap: 22px;
  }
  .welcome-steps li {
    flex: 1 1 0;
    align-items: flex-start;
  }
  .welcome-security {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
  }
  /* Kartice iz aplikacije: CSS kolone, ne grid (workflow.md #154).
     Grid poravnava po REDOVIMA, pa kraća kartica ostavlja rupu do dna reda —
     četiri kartice bitno različite visine su tako izgledale razbacano.
     Kolone pakuju jednu ispod druge dok ima mesta, kao zid od cigala: nema
     praznog prostora, i sasvim je u redu što je jedna kartica najviša.
     `break-inside: avoid` sprečava da se kartica preseče na dve kolone. */
  .welcome-shots {
    display: block;
    columns: 2;
    column-gap: 14px;
  }
  .welcome-shot {
    break-inside: avoid;
    margin-bottom: 14px;
  }
  /* Pitanja/odgovori su međusobno slične visine, pa im grid odgovara. */
  .welcome-qa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;
  }
  .welcome-more {
    font-size: 16px;
  }
  .welcome-security li,
  .welcome-feature-body p,
  .welcome-steps p,
  .welcome-qa-row p {
    font-size: 15px;
  }
  .welcome-steps h3 {
    font-size: 16.5px;
  }
  /* Dugmad na dnu ne moraju preko cele širine od 1080px — ista logika kao
     `.screen > .btn-block` niže. */
  .welcome-bottom {
    align-items: center;
    padding-top: 34px;
  }
  .welcome-bottom .btn-block {
    width: fit-content;
    min-width: 280px;
  }

  /* ===== 10. Sitno ===== */
  /* Dugme preko CELE širine je na telefonu ispravno (jedna kolona, palac).
     Na desktopu je 420px traka usamljena levo (vidljivo na screenshot-u
     "Dodaj račun") — sad se skuplja na sopstveni sadržaj, kao svako obično
     dugme za primarnu radnju na sajtu. `fit-content` je neophodan jer je
     `.btn` flex kontejner: sa `width: auto` bi kao blok element i dalje
     zauzeo punu širinu. */
  .screen > .btn-block,
  .screen > .btn-primary.btn-block {
    width: fit-content;
    min-width: 220px;
    max-width: 100%;
  }
  /* Prečice u obliku pilule ("Optimizuj kupovinu", dugmad na Pregledu) su
     lista opcija, ne primarna radnja — ostaju šire i međusobno jednake, ali
     ne preko cele širine. */
  .screen > .pregled-pill-btn,
  .pregled-buttons-wrap {
    max-width: 460px;
  }
  /* Duži tekst se ne čita preko 1120px. */
  .screen-head p {
    max-width: 68ch;
  }
  /* Prazna stanja su na telefonu centrirana u uskoj koloni; preko cele
     širine desktopa poruka odleti na sredinu praznine — ograničena je i
     poravnata uz sadržaj. */
  .screen .empty-state {
    max-width: 520px;
  }
}

/* Šire od 1320px: treća kolona na Početnoj. */
@media (min-width: 1320px) {
  #screen-dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Vrlo široki ekrani: četvrta kolona. Sadržaj i dalje ostaje u meri od
   1120px (vidi `.screen` iznad) — cilj je gušća mreža, ne beskonačno
   razvlačenje redova. */
@media (min-width: 1680px) {
  #screen-dashboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .screen {
    padding-left: max(28px, calc(50% - 660px));
    padding-right: max(28px, calc(50% - 660px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-btn,
  .nav-fab,
  .sheet {
    transition: none;
  }
}