/* ══════════════════════════════════════════════════════════════════════════
   SAJ Vrancea — optimizări pentru telefon și tabletă
   ══════════════════════════════════════════════════════════════════════════

   Se încarcă DUPĂ tailwind.css, site.css și admin.css, deci poate suprascrie
   orice clasă utilitară Tailwind din markup fără `!important` (selectorii de
   aici sunt mai specifici decât utilitarele cu o singură clasă).

   Fișierul este DELIBERAT separat de site.css, ca ajustările ulterioare să
   ceară reurcarea prin FTP a unui singur fișier de ~14 KB. Versiunea din URL
   este generată automat din `filemtime()` în inc/layout/header.php, deci
   browserele preiau imediat orice modificare, fără intervenție manuală.

   Puncte de rupere folosite (aliniate la Tailwind):
     ≤  767px  → telefon
     ≤ 1023px  → telefon + tabletă portret (acolo unde site-ul comută deja
                 pe `lg:`, adică meniul și bara laterală)

   Cuprins:
     0.  Corecturi valabile pe toate ecranele
     1.  Igienă mobil (zoom text, tap highlight)
     2.  Bara de contact de sus
     3.  Header + logo (compactare la derulare)
     4.  Meniul mobil (panou, backdrop, submeniuri)
     5.  Bara fixă „Sună 112"
     6.  Lățimea conținutului (articol full-bleed)
     7.  Dimensiuni de text și ținte de atingere
     8.  Stări de hover pe ecrane tactile
     9.  Liste de documente compacte
    10.  Grupuri de documente pliabile + filtru
    11.  Tabele stivuite
    12.  Galeria PNRR
    13.  Figuri (organigramă)
    14.  Panoul de administrare
   ══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   0. Corecturi valabile pe toate ecranele
   ───────────────────────────────────────────────────────────────────────── */

/* `.prose a { text-decoration: underline }` din site.css se aplica și
   cardurilor și listelor de documente randate în interiorul zonei `.prose`,
   pentru că `.not-prose` resetează doar listele. Rezultatul: titlurile
   documentelor și cardurile de secțiune apărau ca text subliniat, nu ca
   elemente de interfață. Se vedea și pe desktop. */
.prose a.card-link,
.prose a.doc-link,
.prose a.doc-tile-link,
.prose a.shared-doc-card,
.prose a.theme-card,
.prose a.sb-card,
.prose .pnrr-gallery a,
.prose figure > a {
  text-decoration: none;
}
.prose a.card-link:hover,
.prose a.doc-link:hover,
.prose a.doc-tile-link:hover,
.prose a.shared-doc-card:hover {
  text-decoration: none;
}

/* Safari/iOS măresc singure corpul de literă în peisaj dacă lipsește. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* `scroll-behavior: smooth` din site.css ignoră preferința de mișcare redusă. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ─────────────────────────────────────────────────────────────────────────
   1. Igienă mobil
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  body {
    -webkit-tap-highlight-color: rgba(25, 113, 204, 0.12);
  }

  /* Titlurile lungi („Concursuri și Promovări", „Redirecționare") nu trebuie
     să iasă din carduri pe ecranele de 320–360px. */
  h1, h2, h3, .doc-title, .doc-tile-title, .sb-title, .theme-card-title {
    overflow-wrap: break-word;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   2. Bara de contact de sus  ── 76px → ~44px
   ───────────────────────────────────────────────────────────────────────── */

/* Pragul e 1023px, nu 767px: un telefon în peisaj are 844px de lățime și
   rămânea cu ținte de atingere de 20px și 32px, deși e tot un ecran tactil.
   La 768–1023px textul încape oricum, deci trunchierea nu se activează —
   se schimbă doar înălțimea zonelor active. */
@media (max-width: 1023px) {
  /* Un singur rând: adresa de e-mail trunchiată la stânga, pastila 112 la
     dreapta. Înainte, cele două elemente se rupeau pe rânduri separate și
     mâncau 76px din 844px de ecran, înainte de orice conținut. */
  body > div.bg-brand-900 > div {
    flex-wrap: nowrap;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    gap: 0.5rem;
  }
  body > div.bg-brand-900 > div > div {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
  }

  /* Trunchiere cu „…": ancora devine bloc, ca `text-overflow` să se aplice
     nodului de text (într-un container flex nu ar funcționa). */
  body > div.bg-brand-900 a[href^="mailto:"] {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* Paddingul, nu `min-height`: pe un element bloc cu o singură linie de
       text, el e singurul care mărește şi zona activă a link-ului la 40px. */
    padding: 0.625rem 0;
    line-height: 1.25rem;
  }
  body > div.bg-brand-900 a[href^="mailto:"] > svg {
    display: inline-block;
    vertical-align: -0.1875rem;
    margin-right: 0.25rem;
  }

  /* Numărul de urgență merită o țintă de atingere completă, nu 32px. */
  body > div.bg-brand-900 a[href="tel:112"] {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0.375rem 0.625rem;
    letter-spacing: -0.01em;
  }
}

/* Corpul de literă se reduce doar pe telefon în portret, unde cele două
   elemente chiar concurează pentru lățime. Pe tabletă rămâne cel din site.css. */
@media (max-width: 767px) {
  body > div.bg-brand-900 a[href^="mailto:"] { font-size: 0.8125rem; }
  body > div.bg-brand-900 a[href="tel:112"]  { font-size: 0.75rem; }
}

/* Sub 360px („APEL DE URGENȚĂ: 112" nu mai încape lângă e-mail) păstrăm doar
   numărul, ca să nu se rupă bara pe două rânduri. */
@media (max-width: 359px) {
  body > div.bg-brand-900 a[href="tel:112"] {
    font-size: 0.6875rem;
    padding: 0.375rem 0.5rem;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   3. Header + logo  ── 81px → 56px la derulare
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* Rândul cu logo + hamburger. */
  header > div > div:first-child {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Dimensiuni explicite: logo.png e 500×200, deci raportul e 5/2. Fără el,
     browserul rezervă 0px până se descarcă imaginea și pagina „sare". */
  header img[src$="logo.png"] {
    height: 3rem;
    width: 7.5rem;
    aspect-ratio: 5 / 2;
    transition: height 0.18s ease, width 0.18s ease;
  }

  /* Clasa se pune din mobile.js după ce pagina a fost derulată >64px.
     Recuperăm 25px de ecran pe toată durata citirii. */
  html.hdr-compact header > div > div:first-child {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  html.hdr-compact header img[src$="logo.png"] {
    height: 2.25rem;
    width: 5.625rem;
  }

  /* Hamburgerul rămâne 44×44 și primește contur vizibil când meniul e deschis. */
  #nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  #nav-toggle .nav-icon-close { display: none; }
  #nav-toggle[aria-expanded="true"] .nav-icon-open { display: none; }
  #nav-toggle[aria-expanded="true"] .nav-icon-close { display: block; }
  #nav-toggle[aria-expanded="true"] {
    background: #eff6ff;
    color: #0f3d72;
  }
}

@media (prefers-reduced-motion: reduce) {
  header img[src$="logo.png"] { transition: none; }
}


/* ─────────────────────────────────────────────────────────────────────────
   4. Meniul mobil
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* Panou fixat sub header, cu scroll propriu, în loc de o listă care
     împinge pagina în jos. `--nav-top` e setat din JS la deschidere, pe baza
     poziției reale a headerului (care e sticky și se compactează).
     `bottom: 0` în loc de `100vh` face ca panoul să respecte automat bara de
     adrese a browserelor mobile.

     Regula e condiționată de clasa `js-nav`, pusă de mobile.js: dacă
     fișierul nu se încarcă, meniul rămâne lista în flux din site.css, care
     funcționează în continuare — deschiderea lui stă în footer.php. */
  html.js-nav #main-nav {
    position: fixed;
    top: var(--nav-top, 8rem);
    left: 0;
    right: 0;
    /* Panoul se opreşte după ultima intrare, nu la baza ecranului: meniul are
       8 intrări de nivel 1 şi ar rămâne cu ~500px de alb gol, iar voalul de
       dedesubt — singura zonă unde se poate atinge „în afară" pentru a închide
       — ar fi complet acoperit. Când submeniurile îl fac mai înalt decât
       ecranul, derulează în interior.
       `dvh` ţine cont de bara de adrese a browserelor mobile; linia cu `vh`
       de deasupra rămâne ca rezervă pentru browserele mai vechi. */
    bottom: auto;
    max-height: calc(100vh - var(--nav-top, 8rem));
    max-height: calc(100dvh - var(--nav-top, 8rem));
    z-index: 45;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #cbd5e1;
    box-shadow: 0 12px 32px -8px rgba(10, 42, 82, 0.22);
    padding: 0.25rem 0.5rem calc(0.75rem + env(safe-area-inset-bottom));
  }

  /* Ținte de atingere de minim 48px pentru fiecare intrare de meniu. */
  #main-nav a {
    min-height: 48px;
    align-items: center;
  }
  #main-nav > ul > li > a {
    font-size: 0.9375rem;
  }

  /* Ierarhia se citește prin indentare + linie verticală, nu prin fundal. */
  #main-nav ul ul {
    background: transparent;
    border-left: 2px solid #dbeafe;
    margin-left: 0.75rem;
    padding-left: 0.5rem;
  }
  #main-nav ul ul a {
    font-size: 0.875rem;
    color: #475569;
  }

  /* Separator discret între intrările de nivel 1. */
  #main-nav > ul > li + li {
    border-top: 1px solid #f1f5f9;
  }

  /* Titlul grupului de documente ocupă tot rândul, ca butonul de pliere din
     interiorul lui să aibă lățime completă; data trece dedesubt. */
  .doc-group-header {
    align-items: center;
    row-gap: 0.125rem;
  }
  .doc-group-title { flex: 1 1 100%; }
  .doc-group-date { order: 2; }
}

/* Backdrop injectat din mobile.js. `touch-action: none` împiedică derularea
   paginii din spate la tragere cu degetul. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgba(10, 42, 82, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease;
  touch-action: none;
}
.nav-backdrop.is-visible { opacity: 1; }
@media (min-width: 1024px) {
  .nav-backdrop { display: none; }
}

/* Panoul de meniu e copil al lui `<header>`, care are `z-40` din Tailwind și
   creează astfel un context de stivuire propriu: `z-index: 45` de pe panou se
   compară doar cu frații lui din interiorul headerului, nu cu backdrop-ul (44),
   care e copil direct al lui `<body>`. Rezultatul era un meniu acoperit de
   voalul întunecat. Ridicăm tot headerul peste backdrop cât timp e deschis —
   corect și pentru butonul „X", care trebuie să rămână apăsabil. */
html.nav-open header {
  z-index: 46;
}

/* Blocarea derulării în fundal cât timp meniul e deschis.
   Numai pe `<body>`, NU pe `<html>`: `overflow: hidden` pe elementul rădăcină
   schimbă containerul de derulare, iar headerul `position: sticky` încetează
   să adere — sărea la poziția lui statică din document, adică în afara
   ecranului, lăsând meniul fără header deasupra. */
html.nav-open body {
  overflow: hidden;
}


/* ─────────────────────────────────────────────────────────────────────────
   5. Bara fixă „Sună 112"
   ───────────────────────────────────────────────────────────────────────── */

.m-call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 43;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -2px 14px rgba(10, 42, 82, 0.12);
}
.m-call-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  background: #dc2626;
  color: #fff;
  box-shadow: 0 1px 3px rgba(153, 27, 27, 0.3);
}
.m-call-bar a:active { background: #b91c1c; }
.m-call-bar svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Spațiu ca bara să nu acopere ultimul rând al footerului. Paddingul stă pe
   footer, nu pe body: altfel ar apărea o dungă gri (bg-slate-50 al lui body)
   sub footerul bleumarin. Clasa se pune din JS, deci fără JS nu apare spațiu
   gol nejustificat. */
body.has-call-bar > footer {
  padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
}

/* Bara dispare pe desktop și cât timp meniul e deschis. */
@media (min-width: 1024px) {
  .m-call-bar { display: none; }
  body.has-call-bar > footer { padding-bottom: 0; }
}
html.nav-open .m-call-bar { display: none; }


/* ─────────────────────────────────────────────────────────────────────────
   6. Lățimea conținutului
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Cardul alb al articolului pe toată lățimea ecranului: recuperăm 2×16px
     de margine exterioară + reducem paddingul intern de la 24px la 16px.
     Total: +32px de lățime utilă pentru text (294px → 326px, adică +11%). */
  .page-main > article {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .page-main > article > header {
    padding: 1.25rem 1rem 0.75rem;
  }
  .page-main > article > div {
    padding: 1rem;
  }

  /* Titlul paginii: 24px e prea mare pentru titluri de 4 rânduri. */
  .page-main > article > header h1 {
    font-size: 1.375rem;
    line-height: 1.25;
  }

  /* Ritm vertical mai strâns în text — pe mobil marginile mari fragmentează
     citirea în loc să o ajute. */
  .prose h2 { font-size: 1.1875rem; margin: 1.25rem 0 0.5rem; }
  .prose h3 { font-size: 1.0625rem; margin: 1rem 0 0.375rem; }

  /* Fundalul hero: hero.jpg are 1600×908 şi 179 KB, livrat identic pe un
     ecran de 390px. Varianta de 900px (66 KB) acoperă şi ecranele dpr 2, la
     aceeaşi calitate percepută. Gradientul rămâne neschimbat. */
  .hero {
    background: linear-gradient(135deg, rgba(10,42,82,0.92) 0%, rgba(21,87,158,0.85) 50%, rgba(25,113,204,0.75) 100%),
                center/cover no-repeat url('/assets/img/hero-mobile.jpg');
  }

  /* Hero: 14×4px de padding vertical înseamnă un ecran întreg doar de titlu. */
  .hero > div {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
  .hero h1 {
    font-size: 1.75rem;
    line-height: 1.2;
  }
  .hero p {
    font-size: 1rem;
    line-height: 1.55;
  }
  /* Cele două butoane din hero, pe toată lățimea și una sub alta. */
  .hero .flex.flex-wrap > a {
    flex: 1 1 100%;
    justify-content: center;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  /* Banda roșie de urgență: butonul pe toată lățimea. */
  section.bg-emergency-600 a[href="tel:112"] {
    width: 100%;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   7. Dimensiuni de text și ținte de atingere
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* 11px și 12,8px sunt sub limita rezonabilă de lizibilitate pe telefon. */
  .sb-tagline { font-size: 0.75rem; }
  .doc-info { font-size: 0.8125rem; }
  .doc-group-date { font-size: 0.75rem; }
  .doc-tile-download { font-size: 0.75rem; }

  /* Footer: link-urile erau la 24px una de alta, la 13px corp de literă. */
  footer ul a,
  footer nav[aria-label="Link-uri legale"] a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 0.875rem;
  }
  footer .text-sm { font-size: 0.875rem; }

  /* Breadcrumb: „Acasă" avea 17px de înălțime activă. */
  nav[aria-label="Breadcrumb"] ol { gap: 0.25rem; }
  nav[aria-label="Breadcrumb"] a,
  nav[aria-label="Breadcrumb"] li > span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Link-urile din corpul textului: mai ușor de nimerit cu degetul, fără să
     strice ritmul paragrafului. */
  .prose p a,
  .prose li a {
    padding: 0.125rem 0;
    text-underline-offset: 3px;
  }
  .prose li { margin: 0.375rem 0; }

  /* Cardurile din bara laterală: 5 widget-uri pe 2 coloane lasă ultimul
     singur. Îl întindem pe toată lățimea, ca grila să nu pară ruptă. */
  .sidebar-widgets > .sb-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .sb-card { min-height: 56px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   8. Stări de hover pe ecrane tactile
   ───────────────────────────────────────────────────────────────────────── */

/* Pe telefon nu există „hover", dar browserele aplică `:hover` după atingere
   și starea rămâne lipită până la următorul tap în altă parte: cardul rămâne
   ridicat cu umbră, ca și cum ar fi selectat. Le anulăm și punem feedback
   real pe `:active`. */
@media (hover: none) {
  .doc-link:hover,
  .doc-tile-link:hover,
  .card-link:hover,
  .theme-card:hover,
  .sb-card:hover,
  .shared-doc-card:hover,
  .pnrr-gallery a:hover,
  .group-card:hover {
    transform: none;
    box-shadow: none;
  }
  .doc-link:hover,
  .doc-tile-link:hover,
  .card-link:hover {
    border-color: #e2e8f0;
    background: #fff;
  }
  .theme-card:hover .theme-card-img img { transform: none; }
  .sb-card:hover::before { opacity: 0; }
  .doc-link:hover .doc-arrow { background: #eff6ff; color: #1971cc; }

  .doc-link:active,
  .doc-tile-link:active,
  .card-link:active,
  .shared-doc-card:active,
  .theme-card:active {
    background: #eff6ff;
    border-color: #1971cc;
  }
  .sb-card:active { background: #f8fafc; }
  .sb-card:active::before { opacity: 1; }
}


/* ─────────────────────────────────────────────────────────────────────────
   9. Liste de documente compacte
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* `.doc-tile-link` era `flex-direction: column`, deci badge-ul „PDF" stătea
     DEASUPRA titlului: ~145px pe document. Pe pagina declarațiilor de avere,
     cu ~200 de fișiere, ieșeau 24.607px de pagină — 29 de ecrane.
     Pe rând, fiecare document ocupă ~60px. */
  .doc-group-grid {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
  .doc-tile-link {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    min-height: 56px;
  }
  .doc-tile-icon {
    width: 2.125rem;
    height: 2.125rem;
    flex-shrink: 0;
    font-size: 0.625rem;
  }
  .doc-tile-title {
    font-size: 0.875rem;
    line-height: 1.35;
  }

  /* Card în card în card: articolul alb → `.doc-group` cu bordură → fiecare
     `.doc-tile` cu bordură. Trei rânduri de contur consumau 6px de lățime
     pe fiecare parte fără să adauge informație. Grupul devine o secțiune
     delimitată doar de o linie sus. */
  .doc-group {
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 0.625rem;
  }
  .doc-group + .doc-group {
    border-top: 1px solid #e2e8f0;
    padding-top: 0.625rem;
  }
  /* Linia de sub header e redundantă: grupurile sunt deja despărțite de
     `.doc-group + .doc-group`, iar două linii una lângă alta arătau ca o
     eroare de randare când grupul era pliat. */
  .doc-group-header {
    margin-bottom: 0.375rem;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* Titlul grupului e un `<h3>` aflat în interiorul zonei `.prose`, deci
     `.prose h3` (0,1,1) îi impunea marginea de titlu de secțiune — 16px
     deasupra fiecărui grup, degeaba. `.doc-group-title` singur (0,1,0) nu era
     suficient de specific ca să o anuleze; nici în site.css nu era.
     Același lucru pentru „Alte documente". */
  .doc-group-header .doc-group-title,
  .not-prose .doc-section-title {
    margin: 0;
    font-size: 1rem;
  }
  .not-prose .doc-section-title { margin: 1rem 0 0.5rem; }

  /* Lista simplă de documente (pagina principală, pagini fără grupuri). */
  .doc-link {
    padding: 0.5625rem 0.6875rem;
    gap: 0.625rem;
  }
  .doc-icon {
    width: 2.125rem;
    height: 2.125rem;
    font-size: 0.625rem;
  }
  .doc-title { font-size: 0.9375rem; line-height: 1.35; }
  .doc-arrow { width: 1.75rem; height: 1.75rem; }
  .doc-list { gap: 0.375rem; }

  .shared-doc-card { padding: 0.75rem 0.875rem; }
  .doc-empty { padding: 1rem; font-size: 0.875rem; }
}


/* ─────────────────────────────────────────────────────────────────────────
   10. Grupuri pliabile + filtru
   ───────────────────────────────────────────────────────────────────────── */

/* Butonul de pliere înlocuiește textul din `.doc-group-title` (h3), construit
   din mobile.js. Structura `<h3><button>…</button></h3>` păstrează atât
   ierarhia titlurilor pentru cititoarele de ecran, cât și semantica de buton. */
.doc-group-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  padding: 0.25rem 0;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.doc-group-toggle .dgt-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}
/* Data grupului, mutată aici din `<header>` de mobile.js. */
.doc-group-toggle .doc-group-date {
  align-self: flex-start;
  background: transparent;
  padding: 0;
  font-weight: 400;
  font-size: 0.75rem;
  color: #64748b;
}
.doc-group-toggle .dgt-count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1971cc;
  background: #dbeafe;
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
}
.doc-group-toggle .dgt-chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: #64748b;
  transition: transform 0.18s ease;
}
.doc-group-toggle[aria-expanded="false"] .dgt-chevron { transform: rotate(-90deg); }
.doc-group-toggle:active .dgt-count { background: #bfdbfe; }

/* `.doc-group-grid` are `display: grid` din site.css, care are prioritate față
   de `display: none` din foaia de stil implicită a browserului pentru
   `[hidden]`. Fără regula asta, plierea grupurilor nu ar ascunde nimic. */
.doc-group-grid[hidden] { display: none; }

/* Filtrul de documente, injectat doar când pagina are peste 15 fișiere. */
.doc-filter { margin: 0.75rem 0 1rem; }
.doc-filter-field { position: relative; }
.doc-filter input[type="search"] {
  width: 100%;
  /* 16px exact: sub această valoare, iOS Safari face zoom la focus și
     utilizatorul rămâne cu pagina mărită și derulată lateral. */
  font-size: 16px;
  min-height: 48px;
  padding: 0.625rem 0.75rem 0.625rem 2.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #fff;
  color: #0f172a;
  -webkit-appearance: none;
  appearance: none;
}
.doc-filter input[type="search"]:focus {
  outline: none;
  border-color: #1971cc;
  box-shadow: 0 0 0 3px rgba(25, 113, 204, 0.15);
}
.doc-filter-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  color: #94a3b8;
  pointer-events: none;
}
/* Selector cu două clase: `.prose p { margin: 0.5rem 0 }` din site.css e
   (0,1,1) și ar învinge `.doc-filter-status` singur. Fără `:empty` s-ar
   rezerva permanent un rând gol sub câmpul de căutare. */
.doc-filter .doc-filter-status {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: #64748b;
}
.doc-filter .doc-filter-status:empty {
  display: none;
}
.doc-hidden-by-filter { display: none !important; }

@media (min-width: 1024px) {
  /* Pe desktop rămâne aspectul actual: fără filtru și fără grupuri pliate. */
  .doc-filter { display: none; }
  .doc-group-toggle { min-height: 0; cursor: default; }
  .doc-group-toggle .dgt-chevron { display: none; }
}


/* ─────────────────────────────────────────────────────────────────────────
   11. Tabele stivuite
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Tabelul „Fișa proiectului" de pe /pnrr/ are `w-56` (224px) pe coloana de
     etichete, din 294px disponibili: valorile rămâneau pe ~70px și se rupeau
     câte un cuvânt pe rând. Pe mobil, fiecare rând devine o pereche
     etichetă-deasupra / valoare-dedesubt. Regula acoperă și tabelele
     introduse ulterior din editorul de text al panoului de administrare. */
  .page-main .prose table,
  .page-main .prose tbody,
  .page-main .prose thead,
  .page-main .prose tr,
  .page-main .prose th,
  .page-main .prose td {
    display: block;
    width: auto;
    max-width: 100%;
  }
  .page-main .prose table {
    border: 0;
    border-radius: 0;
  }
  .page-main .prose tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
  }
  .page-main .prose tr:last-child { border-bottom: 0; }
  .page-main .prose th {
    padding: 0 0 0.125rem;
    background: transparent;
    border: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
  }
  .page-main .prose td {
    padding: 0;
    border: 0;
    font-size: 0.9375rem;
    color: #0f172a;
  }
  /* Containerul cu `overflow-x-auto` nu mai are ce derula. */
  .page-main .prose .overflow-x-auto { overflow-x: visible; }
}


/* ─────────────────────────────────────────────────────────────────────────
   12. Galeria PNRR
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* `minmax(160px, 1fr)` producea o singură coloană de pătrate de 294px:
     11.017px de pagină. Trecem pe 2 coloane și scoatem legenda de peste
     imagine — pe scanuri de comunicate acoperea exact textul. */
  .pnrr-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem 0.5rem;
  }
  .pnrr-gallery a {
    aspect-ratio: auto;
    background: transparent;
    border-radius: 0;
  }
  .pnrr-gallery img {
    aspect-ratio: 1;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    /* Scanurile de documente au titlul sus; `center` îl tăia. */
    object-position: top center;
  }
  .pnrr-gallery .pnrr-caption {
    position: static;
    padding: 0.375rem 0.125rem 0;
    background: none;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   13. Figuri (organigramă)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Organigrama e o imagine de 1650×1275 afișată pe 326px: nelizibilă.
     Indicația „Click pe imagine pentru vizualizare la dimensiune completă"
     era text italic de 13px, gri deschis — nu arăta ca o acțiune. O
     transformăm în buton evident (mobile.js îi atașează și clic-ul). */
  .page-main .prose figure > a { display: block; }
  .page-main .prose figure figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-top: 0.625rem;
    padding: 0 0.75rem;
    font-style: normal;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    color: #15579e;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
  }
  .page-main .prose figure figcaption.is-clickable { cursor: pointer; }
  .page-main .prose figure figcaption:active { background: #dbeafe; }
  .page-main .prose figure figcaption svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   14. Panoul de administrare
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* Sub 16px, iOS Safari face zoom automat la focus în orice câmp și lasă
     pagina mărită. Se aplica la autentificare (15,2px) și la toate
     formularele din panou. */
  .form-input,
  .form-select,
  .doc-filter input,
  input[type="text"],
  input[type="password"],
  input[type="search"],
  input[type="email"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px;
  }
  .form-input,
  .form-select {
    min-height: 44px;
  }
  .btn { min-height: 44px; }

  /* Lista de 45 de categorii se randa la înălțime completă (~1800px)
     deasupra panoului de documente: trebuia derulată integral ca să ajungi
     la fișiere. O limităm și îi dăm scroll propriu. */
  .admin-sidebar-nav {
    max-height: 45vh;
    overscroll-behavior: contain;
  }
  .cat-item { min-height: 40px; }

  .admin-main-header,
  .admin-main-body {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  /* `.file-row` era o grilă de 5 coloane (`auto 2.25rem 1fr auto auto`) cu
     metadate de până la 18rem: pe 390px totul se strivea. Trecem pe două
     rânduri — sus bifa, iconița și titlul; jos metadatele și acțiunile. */
  .file-row {
    grid-template-columns: auto 2.25rem 1fr;
    grid-template-areas:
      "check icon title"
      "meta  meta actions";
    row-gap: 0.25rem;
    padding: 0.5rem;
  }
  .file-check  { grid-area: check; width: 1.25rem; height: 1.25rem; }
  .file-icon   { grid-area: icon; }
  .file-title  { grid-area: title; white-space: normal; overflow: visible; font-size: 0.9375rem; }
  .file-meta   { grid-area: meta; max-width: none; align-self: center; }
  .file-actions {
    grid-area: actions;
    justify-self: end;
    /* Erau la `opacity: 0.4`, dezvăluite la `:hover` — pe ecran tactil nu
       există hover, deci butoanele rămâneau permanent pe jumătate șterse. */
    opacity: 1;
    gap: 0.25rem;
  }
  .file-actions button,
  .file-actions a {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .group-card-header { padding: 0.75rem; min-height: 56px; }
  .group-card-actions { gap: 0.25rem; }
  .group-card-actions button,
  .group-card-actions a {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .group-card-body { padding: 0.5rem 0.625rem 0.875rem; }

  /* Headerul panoului: acțiunile trec sub titlu, pe toată lățimea. */
  .admin-main-header { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .admin-main-header > div:last-child > .btn { flex: 1 1 auto; justify-content: center; }

  .dropzone { padding: 1rem 0.75rem; }
}