/*
 * Mișcarea interfeței — senzația de "aplicație scumpă".
 * ---------------------------------------------------------------------------
 * Trei reguli, luate din felul in care se misca iOS-ul:
 *
 * 1. APASAREA E RAPIDA, REVENIREA E LENTA. Degetul apasa -> raspuns in 90ms,
 *    ca sa para instant. Ridici degetul -> revine in ~380ms, lin. Invers ar
 *    parea leneș la apasare si brusc la ridicare.
 *
 * 2. O SINGURA CURBA peste tot: cubic-bezier(0.32, 0.72, 0, 1). Porneste
 *    repede si franeaza lung, ca un obiect cu greutate. Curba asta e ce face
 *    diferenta dintre "se misca" si "se simte bine".
 *
 * 3. NIMIC NU APARE DIN NIMIC. Ferestrele cresc din locul apasat, panourile
 *    aluneca din partea din care vii. Ochiul urmareste continuu, nu se
 *    reorienteaza la fiecare pas.
 *
 * Animam DOAR "transform" si "opacity" -- singurele doua proprietati desenate
 * de placa video. Orice altceva (width, top, margin) obliga browserul sa
 * recalculeze asezarea la fiecare cadru si se simte sacadat pe telefon.
 *
 * Ferestrele, foaia de pe telefon si pastila taburilor merg pe arcuri, din
 * motion.js (vezi acolo de ce). Animatiile CSS de mai jos raman ca rezerva:
 * cand motion.js preia o fereastra, ii pune clasa .mo-arc si le opreste.
 *
 * Ca sa il scoti: sterge linia <link ... motion.css> din index.html si driver.html.
 */

:root {
  --mo-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --mo-apasare: 80ms;
  --mo-revenire: 240ms;
}

/* ---------- 1. Apasarea ---------- */

.btn, .icon-btn, .main-tab, .status-tab, .cat-chip, .modal-close,
.tab-badge, .mob-actions-toggle, .pwa-ok, .sanction-tag {
  transition: transform var(--mo-revenire) var(--mo-ios),
              background-color .2s ease,
              color .2s ease,
              box-shadow .25s var(--mo-ios);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* .btn:active din style.css (coboara 1px) e mai „tare” decat o singura clasa:
   fara al doilea selector, butoanele nu se strangeau deloc cu mouse-ul. */
.mo-apasat, .btn.mo-apasat:active {
  transform: scale(0.96);
  transition-duration: var(--mo-apasare) !important;
}

/* Cardurile se strang cand le apesi si cresc la loc cu un arc (o umbra de
   saritura), ca in iOS. Mai putin decat butoanele: la un card mare, 4% ar
   parea ca sare. Curba arcului o scrie motion.js in --mo-arc / --mo-arc-t. */
.stat-card, .tour-head, .invoice-card, .cal-day.has-leaves, .overview-alert, .ov-card,
.overview-tile, .az-rand, .ib-rand {
  transition: transform var(--mo-arc-t, var(--mo-revenire)) var(--mo-arc, var(--mo-ios)),
              box-shadow .28s var(--mo-ios), background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mo-apasat-usor {
  transform: scale(0.97);
  transition: transform var(--mo-apasare) cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* ---------- 2. Trecerea de la un tab la altul ---------- */

@keyframes mo-panou-dreapta {
  from { opacity: 0; transform: translate3d(12px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes mo-panou-stanga {
  from { opacity: 0; transform: translate3d(-12px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.tab-panel.active {
  animation: mo-panou-dreapta 260ms var(--mo-ios) both;
}
html[data-mo-dir="stanga"] .tab-panel.active {
  animation-name: mo-panou-stanga;
}

/* Pastila tabului apasat sare putin in fata */
.main-tab.active { transition: transform var(--mo-revenire) var(--mo-ios), background-color .22s ease; }

/* ---------- 2b. Pastila care aluneca intre taburi ----------
   motion.js pune sub butoane o pastila (.mo-pastila) si o muta pe un arc pana
   la tabul ales. Butonul ales devine transparent: culoarea o da pastila. */
.mo-cu-pastila:not(.main-tabs) { position: relative; }
@media (min-width: 761px) {
  /* pe telefon bara mare e „sticky” -- si asa e deja reperul pastilei */
  .main-tabs.mo-cu-pastila { position: relative; }
}
.mo-pastila {
  position: absolute; left: 0; top: 0; z-index: 0;
  pointer-events: none;
  transform-origin: 0 0;          /* se intinde din marginea stanga, vezi muta() */
  will-change: transform;
  transition: opacity .15s ease;
}
.mo-cu-pastila > .status-tab, .mo-cu-pastila > .main-tab { position: relative; z-index: 1; }
.mo-cu-pastila > .status-tab.active,
.mo-cu-pastila > .status-tab.needs-review.has-items.active,
.mo-cu-pastila > .main-tab.active,
.mo-cu-pastila > .main-tab.active:hover { background: transparent; box-shadow: none; }
.mo-cu-pastila > .main-tab.active::after { display: none; }
/* cat timp aluneca pastila: scrisul alb trece deja pe tabul nou */
.mo-cu-pastila > .main-tab.mo-pleaca, .mo-cu-pastila > .status-tab.mo-pleaca { color: var(--ink-soft); }
.mo-cu-pastila > .main-tab.mo-vine, .mo-cu-pastila > .status-tab.mo-vine { color: #fff; }

/* pastila taburilor mici: la fel ca butonul ales de inainte */
.mo-pastila {
  background: var(--swe-blue);
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 82, 147, 0.3);
}
.mo-pastila.mo-portocaliu { background: var(--signal-orange-dark); box-shadow: none; }
/* pastila barei mari: fila de dosar albastra, cu dunga galbena dedesubt */
.mo-pastila.mo-pastila-mare {
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  box-shadow: none;
}
.mo-pastila.mo-pastila-mare::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--swe-yellow);
}
@media (max-width: 760px) {
  .mo-pastila.mo-pastila-mare { border-radius: 999px; }
  .mo-pastila.mo-pastila-mare::after { left: 28%; right: 28%; bottom: 6px; border-radius: 999px; }
}

/* ---------- 3. Ferestre ---------- */

@keyframes mo-fundal-intra { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-fereastra-intra {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.965); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes mo-fundal-iese { from { opacity: 1; } to { opacity: 0; } }
@keyframes mo-fereastra-iese {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.975); }
}

.modal-backdrop { animation: mo-fundal-intra 200ms ease both; }
.modal-backdrop > .modal { animation: mo-fereastra-intra 380ms var(--mo-ios) both; }

.modal-backdrop.mo-iese { animation: mo-fundal-iese 190ms ease both; }
.modal-backdrop.mo-iese > .modal { animation: mo-fereastra-iese 190ms ease both; }

/* Pe telefon fereastra e o foaie care urca de jos, nu o casuta care creste */
@media (max-width: 760px) {
  @keyframes mo-foaie-intra {
    from { transform: translate3d(0, 100%, 0); }
    to   { transform: translate3d(0, 0, 0); }
  }
  @keyframes mo-foaie-iese {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 100%, 0); }
  }
  .modal-backdrop > .modal { animation: mo-foaie-intra 420ms var(--mo-ios) both; }
  .modal-backdrop.mo-iese > .modal { animation: mo-foaie-iese 240ms ease-in both; }
}

/* Fereastra preluata de motion.js: fara animatiile CSS de mai sus. Fundalul
   intunecat trece pe un strat al lui (::before), ca sa se stinga separat de
   fereastra; cat de intunecat e acum vine din --mo-fundal (0..1). */
.modal-backdrop.mo-arc,
.modal-backdrop.mo-arc > .modal { animation: none !important; }
.modal-backdrop.mo-arc { background: transparent; }
.modal-backdrop.mo-arc::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(15, 30, 46, 0.55);
  opacity: var(--mo-fundal, 1);
}
/* Fara will-change pe fereastra deschisa: in Safari, un strat tinut „gata de
   miscare” si marit dintr-o animatie (din buton, de la scara 0,2 la 1) ramanea
   desenat doar pe o parte -- la Soferi, pe Mac, ultimul sfert al ferestrei era
   doar sticla goala (31.10.2026). Cat se misca, translate3d il face oricum strat
   separat; la final stratul se reface de la zero. */
.modal-backdrop.mo-arc > .modal.mo-redesen { outline: 1px solid transparent; outline-offset: -1px; }

/* Fereastra care creste din cutia apasata (motion.js, morf()): cat creste e
   plina, ca o cutie, fara sticla si fara umbra (clip-path oricum ar taia
   umbra), iar ce e in ea apare treptat (--mo-continut). */
.modal-backdrop.mo-morf > .modal {
  background: var(--card) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.modal-backdrop.mo-morf > .modal > * { opacity: var(--mo-continut, 1); }

/* Manerul foii: doar pe telefon. Bara de sus a foii se trage cu degetul. */
.mo-maner { display: none; }
@media (max-width: 760px) {
  .mo-maner {
    display: block; flex: 0 0 auto; height: 18px; position: relative;
    touch-action: none; cursor: grab; background: var(--card);
  }
  .mo-maner::before {
    content: ""; position: absolute; left: 50%; top: 7px; width: 38px; height: 5px;
    margin-left: -19px; border-radius: 999px; background: var(--asphalt-300, #c3cbd3);
  }
  .modal > .modal-header { touch-action: none; }
}

/* ---------- 4. Ziua din calendar ---------- */

@keyframes mo-zi-intra {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes mo-zi-iese {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); }
}

.day-zoom-overlay { animation: mo-fundal-intra 200ms ease both; }
.day-zoom-overlay .day-zoom-card { animation: mo-zi-intra 400ms var(--mo-ios) both; }
.day-zoom-overlay.mo-iese { animation: mo-fundal-iese 180ms ease both; }
.day-zoom-overlay.mo-iese .day-zoom-card { animation: mo-zi-iese 180ms ease both; }

/* Cand stim din ce casuta a pornit fereastra, animatia o conduce motion.js:
   fereastra creste chiar din patratelul apasat, nu din centrul ecranului.
   Cele doua animatii nu pot merge simultan, deci aici o oprim pe cea de sus. */
.day-zoom-overlay.mo-flip,
.day-zoom-overlay.mo-flip .day-zoom-card { animation: none !important; }

.cal-day.has-leaves { transition: opacity .2s ease; }
.cal-day.mo-sursa { opacity: .22; }

/* ---------- 5. Randurile care tocmai au aparut ---------- */

@keyframes mo-rand-intra {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.mo-rand { animation: mo-rand-intra 380ms var(--mo-ios) both; }


/* ---------- 8. Sticla pe dispozitivele Apple (Liquid Glass) ----------
   Pe iPhone, iPad si Mac (clasa .apple, pusa de motion.js) ce pluteste
   deasupra continutului devine sticla, ca in iOS 26 si macOS 26: bara de sus,
   ferestrele, notificarea de jos, pastila tabului ales. Continutul (tabelele,
   cardurile) ramane plin -- asa face si Apple: sticla e pentru stratul de
   navigare, nu pentru ce citesti.
   Bara de sus trece peste pagina la derulare: continutul se vede pe sub ea,
   estompat, in loc sa dispara sub o banda plina. Pastila tabului ales e o
   lentila albastra, cu lumina pe muchia de sus.
   Cine a cerut „Reduce Transparency” primeste culorile pline (mai jos). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.apple .topbar {
    background: linear-gradient(160deg, rgba(0, 82, 147, 0.52) 0%, rgba(0, 56, 104, 0.64) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(190%);
    backdrop-filter: blur(18px) saturate(190%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.10), 0 3px 0 var(--swe-yellow);
  }
  html.apple[data-theme="dark"] .topbar {
    background: linear-gradient(160deg, rgba(16, 36, 58, 0.52) 0%, rgba(10, 23, 37, 0.64) 100%);
  }

  /* Toast-ul: o capsula de sticla inchisa */
  html.apple .toast {
    background: rgba(15, 30, 46, 0.58);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
  }
  html.apple .toast.toast-error { background: rgba(150, 24, 24, 0.78); }

  /* Taburile mici (Facturi de plată / Inbox / PDF noi, lunile...): sina
     adancita si lentila albastra care aluneca in ea. */
  html.apple .status-tabs.mo-cu-pastila,
  html.apple .period-tabs.mo-cu-pastila {
    box-shadow: inset 0 1px 2px rgba(15, 30, 46, 0.10);
  }
  html.apple .mo-pastila:not(.mo-pastila-mare):not(.mo-portocaliu) {
    background: linear-gradient(180deg, #2f86d6 0%, var(--swe-blue) 100%);
    box-shadow:
      inset 0 1px 0.5px rgba(255, 255, 255, 0.50),
      inset 0 -1px 1px rgba(0, 30, 60, 0.22),
      0 2px 6px rgba(0, 82, 147, 0.30);
  }

  /* Lentila de sticla albastra peste tabul mare ales */
  html.apple .mo-pastila.mo-pastila-mare {
    /* sus nu mai deschis de #2f86d6: scrisul alb ramane peste 4,5:1 */
    background: linear-gradient(180deg, rgba(47, 134, 214, 0.97) 0%, rgba(0, 82, 147, 0.97) 100%);
    box-shadow:
      inset 0 1px 0.5px rgba(255, 255, 255, 0.55),   /* lumina pe muchia de sus */
      inset 0 -1px 1px rgba(0, 30, 60, 0.25),
      0 4px 14px rgba(0, 82, 147, 0.28);
  }

  @media (min-width: 761px) {
    /* Ferestrele: sticla alba aproape plina, colturi mari, muchie luminata.
       Ce e in spate se vede estompat -- si putin pe sub fereastra. */
    html.apple .modal-backdrop > .modal,
    html.apple .day-zoom-card {
      background: rgba(255, 255, 255, 0.66);
      -webkit-backdrop-filter: blur(30px) saturate(190%);
      backdrop-filter: blur(30px) saturate(190%);
      border: 1px solid rgba(255, 255, 255, 0.70);
      border-radius: 22px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 24px 70px rgba(15, 30, 46, 0.30),
        0 2px 8px rgba(15, 30, 46, 0.10);
    }
    html.apple[data-theme="dark"] .modal-backdrop > .modal,
    html.apple[data-theme="dark"] .day-zoom-card {
      background: rgba(24, 32, 44, 0.64);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 24px 70px rgba(0, 0, 0, 0.50);
    }
    html.apple .modal-backdrop > .modal > .modal-header,
    html.apple .modal-backdrop > .modal > .modal-footer { border-color: rgba(15, 30, 46, 0.08); }
    html.apple[data-theme="dark"] .modal-backdrop > .modal > .modal-header,
    html.apple[data-theme="dark"] .modal-backdrop > .modal > .modal-footer { border-color: rgba(255, 255, 255, 0.08); }

    /* Fundalul ferestrei: mai putin intunecat, ca sticla sa aiba ce arata.
       Fara estompare pe tot ecranul: costa la fiecare cadru al deschiderii
       (masurat: de 1,7 ori mai greu), iar fereastra trebuie sa porneasca usor. */
    html.apple .modal-backdrop.mo-arc::before { background: rgba(15, 30, 46, 0.42); }
  }

  @media (max-width: 760px) {
    html.apple .main-tabs {
      background: rgba(247, 248, 250, 0.46);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
      box-shadow: inset 0 -0.5px 0 rgba(15, 30, 46, 0.12);
    }
    html.apple[data-theme="dark"] .main-tabs {
      background: rgba(13, 20, 29, 0.46);
      box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.10);
    }

    /* Foaia de jos: sticla alba aproape plina, colturi mari ca in iOS 26 */
    html.apple .modal-backdrop > .modal {
      background: rgba(255, 255, 255, 0.72);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      backdrop-filter: blur(28px) saturate(180%);
      border-radius: 26px 26px 0 0;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 -8px 30px rgba(15, 30, 46, 0.18);
    }
    html.apple[data-theme="dark"] .modal-backdrop > .modal {
      background: rgba(22, 30, 41, 0.72);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 -8px 30px rgba(0, 0, 0, 0.4);
    }
    html.apple .modal-backdrop > .modal > .modal-header,
    html.apple .modal-backdrop > .modal > .modal-footer,
    html.apple .modal-backdrop > .modal > .mo-maner { background: transparent; }
  }
}
@media (prefers-reduced-transparency: reduce) {
  html.apple .topbar { background: linear-gradient(160deg, var(--swe-blue) 0%, var(--swe-blue-dark) 100%);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.apple .main-tabs { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.apple .modal-backdrop > .modal,
  html.apple .day-zoom-card { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.apple .modal-backdrop.mo-arc::before { background: rgba(15, 30, 46, 0.55); }
  html.apple .toast { background: var(--navy-fundal); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- 6. Cine a cerut mai putina miscare nu primeste niciuna ---------- */

@media (prefers-reduced-motion: reduce) {
  .tab-panel.active,
  .modal-backdrop, .modal-backdrop > .modal,
  .day-zoom-overlay, .day-zoom-overlay .day-zoom-card,
  .mo-rand { animation: none !important; }
  .mo-apasat, .mo-apasat-usor { transform: none !important; }
  .mo-maner { touch-action: auto; }
  * { transition-duration: .01ms !important; }
}