/* ============================================================
   dn-mobile.css — adaptări mobile pentru v2.app
   Inclus după app.min.css în paginile cu tabele-listă.
   Sub 768px, rândurile tabelelor #example2 / #btn-editable
   devin carduri stivuite (fără modificări de markup PHP).

   Selectorii folosesc combinatorul de copil direct: în celule
   există tabele imbricate (liste de ingrediente, modale de
   atribute) care trebuie lăsate neatinse.

   Culorile vin din variabilele temei (--ct-*), deci merge și
   în dark mode (data-bs-theme="dark").
   ============================================================ */

@media (max-width: 767.98px) {

  /* ---- 1. Tabel-listă → carduri stivuite ---- */

  /* display:block, nu doar width:100% — un tabel în layout auto se lățește
     oricum peste 100% când o celulă are conținut lung (vezi lista_subretete) */
  #example2,
  #btn-editable {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    border: 0;
  }

  #example2 > thead,
  #btn-editable > thead {
    display: none;
  }

  /* linia de deasupra primului card vine din `.table.table-bordered tbody`
     (border-top). Padding-ul, nu margin-ul, lasă aer între ea și primul
     card — cu margin, linia ar coborî odată cu tbody-ul. */
  #example2 > tbody,
  #btn-editable > tbody {
    display: block;
    width: 100%;
    padding-top: 16px;
  }

  /* fără !important pe display: rândurile ascunse de filtre
     (style="display:none" inline) trebuie să rămână ascunse */
  #example2 > tbody > tr,
  #btn-editable > tbody > tr {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 14px;
    border: 1px solid var(--ct-border-color, #dee2e6);
    border-radius: 8px;
    background-color: var(--ct-card-bg, #fff);
    overflow: hidden;
  }

  /* display:block, nu flex: conținutul celulelor este text liber amestecat cu
     <b>/<br> — ca elemente flex ar fi strâns fiecare la o literă pe rând */
  #example2 > tbody > tr > td,
  #btn-editable > tbody > tr > td {
    display: block;
    /* DataTables resetează box-sizing pe celule: fără asta, width:100%
       plus padding-ul ar ieși în afara cardului */
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    /* conținutul care nu încape (tabele de ingrediente) capătă scroll
       propriu, în loc să fie tăiat de overflow:hidden de pe rând */
    overflow-x: auto;
    border: 0 !important;
    border-bottom: 1px solid var(--ct-border-color, #dee2e6) !important;
    padding: 10px 12px;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
  }

  #example2 > tbody > tr > td:last-child,
  #btn-editable > tbody > tr > td:last-child {
    border-bottom: 0 !important;
  }

  /* _setari.php dă fiecărei celule umbră proprie (plus una mai apăsată pe
     hover) și un chenar punctat la stânga ultimei — pe desktop ele desenează
     rândul-card și despart coloana de opțiuni. Pe mobil cardul e rândul
     întreg, iar decorațiile per-celulă îl taie în panouri suprapuse, cu
     fundalul neuniform. */
  #example2 > tbody > tr > td,
  #example2 > tbody > tr:hover > td,
  #btn-editable > tbody > tr > td,
  #btn-editable > tbody > tr:hover > td {
    box-shadow: none !important;
  }

  #example2 > tbody > tr > td:last-child,
  #btn-editable > tbody > tr > td:last-child {
    border-left: 0 !important;
  }

  /* eticheta coloanei, pusă de dn-mobile.js din <thead> */
  #example2 > tbody > tr > td[data-label]:not([data-label=""])::before,
  #btn-editable > tbody > tr > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ct-secondary-color, #98a6ad);
  }

  /* celulele cu imagini/butoane arată mai bine centrate */
  #example2 > tbody > tr > td.dn-rich,
  #btn-editable > tbody > tr > td.dn-rich {
    text-align: center;
  }

  /* celulele goale nu ocupă spațiu */
  #example2 > tbody > tr > td:empty,
  #btn-editable > tbody > tr > td:empty,
  #example2 > tbody > tr > td.dn-empty,
  #btn-editable > tbody > tr > td.dn-empty {
    display: none;
  }

  /* conținutul celulelor nu depășește cardul */
  #example2 > tbody > tr > td img,
  #btn-editable > tbody > tr > td img {
    max-width: 100%;
    height: auto;
  }

  #example2 > tbody > tr > td > .btn,
  #btn-editable > tbody > tr > td > .btn {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }

  #example2 > tbody > tr > td .btn-group,
  #btn-editable > tbody > tr > td .btn-group {
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* tabelele imbricate (ingrediente, atribute) rămân tabele,
     dar primesc scroll propriu dacă nu încap */
  #example2 > tbody > tr > td table {
    width: 100%;
    max-width: 100%;
  }

  /* paginile de setări pun un .card-body în interiorul celulei, doar ca
     ambalaj — padding-ul lui de 1.5rem strâmtorează inutil comutatoarele */
  #example2 > tbody > tr > td > .card-body {
    padding: 0;
  }

  /* ---- 2. Recuperare lățime: padding-ul cardului lua ~48px din 375 ---- */

  .card-body.table-responsive {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* ---- 3. Controalele DataTables (Show entries / Search / paginare) ---- */

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: center !important;
  }

  /* Selectul „Afișează 10 înregistrări pe pagină" rămânea fără săgeată:
     _setari.php declară `background: var(--cn-surface) !important` pe
     `.dataTables_wrapper .dataTables_length select`, iar shorthand-ul cu
     !important șterge orice background-image — inclusiv chevronul propriu
     al lui .form-select. Îl redesenăm, cu același chevron ca .cn-select din
     filtrele paginii.
     !important și un `.card` în plus în selector: fără ele, regula din
     _setari.php (aceeași specificitate, !important) rămâne câștigătoare. */
  .card .dataTables_wrapper .dataTables_length select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 7.5L10 12.5L15 7.5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px 14px !important;
    padding-right: 30px;
  }

  .dataTables_wrapper .dataTables_filter {
    margin-top: 8px;
  }

  .dataTables_wrapper .dataTables_filter label {
    display: block;
    width: 100%;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0 !important;
    box-sizing: border-box;
  }

  .dataTables_wrapper .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ============================================================
     4. Formulare (adăugare/modificare ingrediente și rețete)
     ============================================================
     Problema e aceeași ca la tabele, dar din altă cauză: paginile
     de formular au carduri imbricate (.card > .col-md-12 > .card),
     iar lanțul .content(15) + .container-fluid(12) + .col-12(12) +
     .card-body(24) + .col-*(12) mânca ~130px din 390 — inputurile
     rămâneau la 193px, adică jumătate de ecran, restul gol. */

  /* ---- 4a. Recuperare lățime din padding-urile imbricate ---- */

  /* tema declară `.content-page .content{padding:0 15px …}` — selectorul
     trebuie să fie la fel de specific, altfel regula nu prinde */
  .content-page .content {
    padding-left: 6px;
    padding-right: 6px;
  }

  .container-fluid {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* fără .table-responsive: acolo regula de la secțiunea 2 (10px)
     e mai specifică și rămâne câștigătoare */
  .card-body {
    padding: 14px 12px;
  }

  /* cardul-ambalaj din jurul cardului real nu mai desenează un al
     doilea chenar peste primul */
  .card .card {
    box-shadow: none;
    margin-bottom: 0;
    border: 0;
  }

  /* gutter-ul implicit de 24px între coloane e prea mult când
     coloanele oricum se stivuiesc */
  .card-body .row {
    margin-left: -6px;
    margin-right: -6px;
  }

  .card-body .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* ---- 4b. Inputurile ocupă toată coloana ---- */

  /* markup-ul are style="width:80%" / "70%" hardcodat pe inputuri;
     pe desktop rămâne cum era, pe mobil e spațiu irosit.
     Ținta e copilul direct al .form-group — inputurile din pachete
     compuse (.gramaj-pack din lista_retete_edit) au lățimi proprii
     intenționate și nu trebuie atinse. */
  .form-group > .form-control,
  .form-group > input.form-control,
  .form-group > textarea,
  .form-group > select.form-control {
    width: 100% !important;
    max-width: 100%;
  }

  /* ---- 4c. Câmpurile numerice: două pe rând, nu unul ---- */

  /* .col-sm-2 stivuit dă un formular de ~1650px înălțime pentru
     valori de 3-4 caractere; la 50% scade la ~1300px.
     Între 576px și 767px regula de mai jos (33%) o suprascrie pe
     aceasta — e declarată după ea, la specificitate egală. */
  form .row > .col-sm-2 {
    flex: 0 0 auto;
    width: 50%;
  }

  /* ---- 4d. Gramajele din lista_retete_edit ---- */

  /* .gramaj-pack e un inline-flex de 318px (86+86+76 plus separatoarele
     „gr.") înghesuit într-un buton cu 244px utili: al treilea câmp,
     scăzământul, era tăiat de marginea cardului. Se împachetează pe două
     rânduri și câmpurile se strâmtează cât să rămână lizibile.
     Fără reguli pe .btn-group — acolo ar strica grupurile de butoane
     din paginile-listă. */
  #example2 .gramaj-pack {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 6px;
    max-width: 100%;
  }

  /* padding-ul implicit de 14.4px lăsa doar 45px pentru text, iar
     „100,00" cere 40px — valorile apăreau tăiate în câmp */
  #example2 .gramaj-pack .form-control {
    width: 74px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
  }

  #example2 .gramaj-pack .gramaj-scz {
    width: 66px;
  }

  /* ---- 4e. Butoanele de acțiune ---- */

  .card-body > .form-group > .btn,
  .card-body > .form-group > a.btn {
    margin-bottom: 6px;
  }

  /* ---- 4f. Bara de acțiuni a paginii, unul sub altul ---- */

  /* Butoanele din capul listei (Încarcă poze, Mod editare, Publică meniu…)
     veneau fiecare cu lățimea textului său, deci marginile ieșeau zimțate.
     Au fost întâi două pe rând; din 6 august 2026 stau unul sub altul, pe
     toată lățimea cardului, cu textul centrat — cerut explicit, și e oricum
     tiparul obișnuit pe telefon.
     Unele sunt <button> direct, altele înfășurate în <a> — de aceea ambele
     variante sunt aduse la aceeași formă. */
  .dn-actiuni {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dn-actiuni > a {
    display: flex;
  }

  /* Când bara are un număr impar de butoane, ultimul rămâne singur în stânga,
     cu jumătate de rând gol lângă el. Butonul marcat cu .dn-actiune-lata
     coboară la urmă și ține tot rândul, iar restul se împerechează normal.
     `order`, nu o mutare în markup: acolo ordinea rămâne cea logică a
     acțiunilor, la fel ca pe desktop. */
  .dn-actiuni > .dn-actiune-lata {
    order: 2;
    grid-column: 1 / -1;
  }

  /* Ținând tot rândul, butonul are mult mai multă lățime decât conținutul lui;
     aliniat la stânga ca vecinii de sus, ar fi arătat dezechilibrat. */
  .dn-actiuni > .dn-actiune-lata > .btn,
  .dn-actiuni > .btn.dn-actiune-lata {
    justify-content: center;
  }

  /* margin:10px inline pe unele butoane ar strica alinierea grilei.
     Conținutul e centrat: pe un rând întreg, iconița și textul lipite de
     marginea stângă lăsau butonul să pară gol pe dreapta. */
  .dn-actiuni > a > .btn,
  .dn-actiuni > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 !important;
    padding-left: 10px;
    padding-right: 10px;
    white-space: normal;
    text-align: center;
  }

  /* lățime fixă pe iconițe: altfel fa-camera și fa-forward, care nu sunt la
     fel de late, ar porni textele de la poziții diferite */
  .dn-actiuni .btn > i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    /* aceeași înălțime de rând ca textul (1.5 din Bootstrap): iconița devine
       element de flex, iar cu line-height:1 (implicit în Font Awesome) ar sta
       lipită de marginea de sus a butonului, nu pe mijlocul primului rând */
    line-height: 1.5;
  }

  /* ---- 4g. Butoanele de adăugare, stivuite și egale ---- */

  /* Barele de adăugare din capul listelor de rețete și de produse (ambele
     poartă .dn-adauga pe wrapper). Butoanele se așezau după lățimea textului,
     două pe un rând și unul pe al doilea; aici stau unul sub altul, la aceeași
     lățime, centrate. Regula de talie pentru desktop e în secțiunea min-width. */
  .dn-adauga {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .dn-adauga > a {
    display: flex;
    width: 100%;
    max-width: 260px;
  }

  .dn-adauga > a > .btn,
  .dn-adauga > .btn {
    width: 100%;
    max-width: 260px;
    margin: 0 !important;
  }

  /* fără iconițele de „+" pe mobil */
  .dn-adauga .btn > i {
    display: none;
  }

  /* ============================================================
     5. Carduri de rețetă (lista_retete.php)
     ============================================================
     Card-view-ul de la secțiunea 1 stivuiește celulele în ordinea
     din tabel, ceea ce pe lista de rețete dădea ~1825px de rând.
     Aici rândul se reordonează într-un card propriu-zis:

        ┌──────────────────────────┐
        │ [poză]  Nume rețetă      │
        │         gramaje · preț   │
        ├──────────────────────────┤
        │ ▾ INGREDIENTE (11)       │   colapsat
        ├──────────────────────────┤
        │ [opțiuni, două pe rând]  │
        ├──────────────────────────┤
        │ cod · arhivare · export  │
        └──────────────────────────┘

     Clasele dn-c-* și mutarea pozei vin din dn-mobile.js. Totul e
     ancorat pe tr[data-nr-reteta], deci celelalte tabele #example2
     păstrează card-view-ul simplu de la secțiunea 1. */

  /* Separarea dintre rețete: pe desktop rândurile tabelului se despart clar,
     pe mobil cardurile albe stăteau pe un container tot alb, despărțite doar
     de o bordură de 1px — practic curgeau unul în altul.
     Containerul primește fundalul paginii, iar cardurile rămân albe și capătă
     umbră, deci se desprind vizibil. Unde :has() lipsește (browsere mai
     vechi), fundalul rămâne alb, dar umbra singură separă suficient. */
  .card-body.table-responsive:has(#example2 > tbody > tr[data-nr-reteta]),
  .card-body.table-responsive:has(#example2 > tbody > tr[data-arhiva-nr]),
  .card-body.table-responsive:has(#example2 > tbody > tr[data-produs-nr]) {
    background-color: var(--ct-body-bg, #f5f6f8);
  }

  /* aceeași desprindere și pe lista de produse; acolo rândul rămâne block,
     n-are nevoie de reordonarea celulelor din cardul de rețetă */
  #example2 > tbody > tr[data-nr-reteta],
  #example2 > tbody > tr[data-arhiva-nr],
  #example2 > tbody > tr[data-produs-nr] {
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 14px rgba(0, 0, 0, .06);
  }

  /* data-arhiva-nr = rândul din Arhiva Rețete: aceleași patru celule, deci
     același card. Atribut separat, ca regulile de desktop de la secțiunea 6
     (scrise pentru lista de rețete) să nu-l prindă. */
  #example2 > tbody > tr[data-nr-reteta],
  #example2 > tbody > tr[data-arhiva-nr] {
    display: flex;
    flex-direction: column;
  }

  #example2 > tbody > tr[data-nr-reteta] > td.dn-c-cap,
  #example2 > tbody > tr[data-arhiva-nr] > td.dn-c-cap { order: 1; }
  #example2 > tbody > tr[data-nr-reteta] > td.dn-c-ing,
  #example2 > tbody > tr[data-arhiva-nr] > td.dn-c-ing { order: 2; }
  #example2 > tbody > tr[data-nr-reteta] > td.dn-c-opt,
  #example2 > tbody > tr[data-arhiva-nr] > td.dn-c-opt { order: 3; }

  #example2 > tbody > tr[data-nr-reteta] > td.dn-c-sub,
  #example2 > tbody > tr[data-arhiva-nr] > td.dn-c-sub {
    order: 4;
    border-bottom: 0 !important;
  }

  /* în capul cardului eticheta de coloană („NUME") nu mai spune nimic, iar
     ingredientele își au propriul titlu în butonul de colapsare */
  #example2 > tbody > tr[data-nr-reteta] > td::before,
  #example2 > tbody > tr[data-arhiva-nr] > td::before {
    display: none !important;
  }

  /* „OPTIUNI" rămâne: e titlul secțiunii de dedesubt, ca „PERSONALIZARE" pe
     cardul de produs. Vine tot din <thead>, prin data-label.

     `:not(.dn-colapsat)` e condiția, nu un ornament. Regula de dedesubt stinge
     eticheta când celula a primit buton de colapsare, dar de la redenumirea
     clasei în `.dn-colapsat` (înainte `.dn-opt-colapsat`, care cerea și
     `.dn-c-opt`) a rămas cu o clasă mai puțin decât regula asta. La `!important`
     pe amândouă decide specificitatea, nu ordinea — deci câștiga afișarea, și
     pe cardul de rețetă se vedeau două titluri unul sub altul: „OPTIUNI" scris
     de `::before` și „OPTIUNI (5)" scris pe buton.

     Condiția pusă aici scoate cursa cu totul: regula spune singură când se
     aplică, în loc să se bazeze pe cine e mai specific. */
  #example2 > tbody > tr[data-nr-reteta] > td.dn-c-opt:not(.dn-colapsat)::before,
  #example2 > tbody > tr[data-arhiva-nr] > td.dn-c-opt:not(.dn-colapsat)::before {
    display: block !important;
    margin-bottom: 8px;
  }

  /* …dar nu și când celula a primit buton de colapsare: butonul poartă deja
     eticheta, iar două titluri unul sub altul n-ar spune nimic în plus.
     Padding-ul trece pe wrapper, ca butonul să țină toată lățimea celulei —
     exact ca la ingrediente.

     Clasa se numea `.dn-opt-colapsat` și selectorul cerea și `.dn-c-opt`, deci
     prindea doar opțiunile rețetei. O pune acum `colapseaza()` pe ORICE celulă
     colapsată — inclusiv descrierea și opțiunile de pe cardul de produs și
     ingredientele de pe cel de șablon — fiindcă motivul e același oriunde:
     eticheta e deja în buton. */
  #example2 > tbody > tr > td.dn-colapsat::before {
    display: none !important;
  }

  #example2 td.dn-colapsat {
    padding: 0 !important;
  }

  /* ---- 5a. Capul cardului: poză stânga, nume și gramaje dreapta ---- */

  /* row-gap 0 intenționat: celula conține ~12 <form> ascunse, fiecare
     ocupă un rând de grid, iar un row-gap de 10px adăuga 120px de gol */
  #example2 td.dn-c-cap {
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: 10px;
    row-gap: 0;
    align-items: start;
    text-align: left !important;
  }

  /* tot ce nu e blocul cu poza stă în coloana din dreapta. Fără regula asta,
     plasarea automată ar strecura un element în golul de sub poză. */
  #example2 td.dn-c-cap > * {
    grid-column: 2;
  }

  /* Blocul din stânga: poza, iar sub ea codul rețetei și butonul Export/QR.
     span 6: blocul e mai înalt decât numele + gramajele, iar diferența se
     împarte între rândurile acoperite — pe mai multe rânduri (restul sunt
     form-urile ascunse, de înălțime 0) se pierde, pe 2-3 ar depărta vizibil
     numele de gramaje. */
  #example2 td.dn-c-cap > .dn-poza-bloc {
    grid-column: 1;
    grid-row: 1 / span 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    text-align: center !important;
  }

  #example2 td.dn-c-cap > .dn-poza-bloc > .dn-poza {
    order: -1;
  }

  /* butonul Export/QR vine învelit într-un div cu padding-top inline */
  #example2 td.dn-c-cap > .dn-poza-bloc > div:not(.modal) {
    padding-top: 0 !important;
  }

  /* coloana are 84px: etichetele lungi se rup pe rânduri, nu ies din card.
     margin 0: regula generală a butoanelor din cap le împinge 4px la dreapta,
     ceea ce le-ar descentra sub poză. */
  #example2 td.dn-c-cap > .dn-poza-bloc .btn,
  #example2 td.dn-c-cap > .dn-poza-bloc .btn-group {
    max-width: 100%;
    margin: 0;
    white-space: normal;
  }

  /* Switch-ul „În meniul QR și exporturi", mutat de dn-mobile.js din blocul cu
     poza: ține toată lățimea capului, deci eticheta încape pe un rând.
     Font mai mic, ca rândul să rămână întreg și pe ecrane de 360px. */
  #example2 td.dn-c-cap > .dn-qr-switch {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: 100%;
    /* margin/padding stânga la zero: .form-switch vine cu padding-left 2.5em,
       iar inputul lui cu margin-left -2.5em — cu ele switch-ul n-ar porni din
       dreptul pozei, ci decalat față de coloana ei */
    margin: 8px 0 0;
    padding-left: 0;
    font-size: 13px;
  }

  #example2 td.dn-c-cap > .dn-qr-switch .form-check-input {
    margin-left: 0;
  }

  #example2 td.dn-c-cap > .dn-qr-switch .form-check-label {
    font-size: 13px;
    white-space: nowrap;
  }

  /* !important pe padding: regula butoanelor mici din capul cardului
     (.dn-c-cap .btn) are aceeași specificitate și, fiind declarată mai jos,
     ar câștiga — poza ar rămâne strâmtată de padding-ul ei */
  #example2 td.dn-c-cap .dn-poza {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* fallback: dacă poza a fost mutată singură (fără <center>), ea ține
     locul blocului în coloana din stânga */
  #example2 td.dn-c-cap > .dn-poza {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  /* al doilea selector e pentru Arhiva Rețete, unde poza nu stă într-un buton:
     acolo .dn-poza cade chiar pe <img>, deci regula trebuie să-l prindă și
     direct. `!important` pe width a rămas de pe vremea când imaginea din arhivă
     avea `width:100px` inline; acum mărimea vine din foaia de stil a paginii
     (`.dn-poza-arhiva`), deci semnul e doar o centură în plus. */
  #example2 td.dn-c-cap .dn-poza img,
  #example2 td.dn-c-cap img.dn-poza {
    width: 84px !important;
    /* fără asta, max-width:100% de la secțiunea 1 comprimă imaginea la
       lățimea butonului și caseta iese dreptunghiulară, nu pătrată */
    max-width: none;
    height: 84px;
    object-fit: cover;
    border-radius: 8px;
  }

  #example2 td.dn-c-cap > form {
    margin: 0 !important;
  }

  #example2 td.dn-c-cap > br,
  #example2 td.dn-c-cap center > br {
    display: none;
  }

  /* `button.btn`, nu doar `button`: regula pastilelor de mai jos
     (`.dn-c-cap .btn`, 11px) are o clasă în plus și câștiga, așa că titlul
     rămânea la mărimea lor — bold, dar fără diferență de talie */
  #example2 td.dn-c-cap > button.btn {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    white-space: normal;
  }

  /* :not(.dn-poza-bloc) — blocul cu poza e tot un <center>, dar el rămâne
     centrat și fără margine proprie.
     margin-top 8px = spațiul de sub titlu de pe cardul de produs; grila
     capului are row-gap 0 (celula conține ~12 form-uri ascunse, fiecare pe un
     rând), deci distanța se dă din margine, nu din gap. */
  #example2 td.dn-c-cap > center:not(.dn-poza-bloc) {
    margin-top: 8px;
    text-align: left !important;
  }

  #example2 td.dn-c-cap center > .btn-group {
    display: inline-flex;
    vertical-align: top;
  }

  #example2 td.dn-c-cap .btn-group,
  #example2 td.dn-c-cap center > button {
    margin: 2px 4px 2px 0;
  }

  #example2 td.dn-c-cap .btn {
    font-size: 11px;
    padding: 3px 7px;
  }

  /* ---- 5b. Ingredientele, colapsate ---- */

  #example2 td.dn-c-ing {
    padding: 0 !important;
  }

  #example2 .dn-ing-sum {
    display: block;
    width: 100%;
    cursor: pointer;
    padding: 11px 12px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ct-secondary-color, #98a6ad);
  }

  #example2 .dn-ing-sum::after {
    content: "▾";
    float: right;
    font-size: 14px;
  }

  #example2 td.dn-ing-open > .dn-ing-sum::after {
    content: "▴";
  }

  /* ascunderea e o regulă CSS obișnuită, nu mecanismul <details>:
     peste 768px (secțiunea de la finalul fișierului) conținutul
     reapare singur, fără să depindă de vreun eveniment JS */
  #example2 .dn-ing-wrap {
    display: none;
    padding: 0 12px 10px;
  }

  #example2 td.dn-ing-open > .dn-ing-wrap {
    display: block;
  }

  /* ---- 5c. Opțiuni: una sub alta, centrate ---- */

  /* Două pe rând însemna etichete rupte pe trei-patru rânduri și carduri de
     înălțimi diferite, cu spații de umplutură între ele. Stivuite și centrate
     — ca în coloana de acțiuni a produsului — fiecare opțiune își ia lățimea
     întreagă și se citește dintr-o privire. */
  #example2 td.dn-c-opt > center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  /* width cu !important: butoanele au `width:80%` scris inline în markup */
  #example2 td.dn-c-opt > center > .btn,
  #example2 td.dn-c-opt > center > .dn-selectie-multipla {
    width: 100% !important;
    max-width: 220px;
    margin: 0 !important;
  }

  #example2 td.dn-c-opt center > br {
    display: none;
  }

  /* Iconița și textul, două coloane: iconița fixă în stânga, textul într-o
     casetă proprie lângă ea. Ca text inline, rândurile care se rup („(nou,
     picant," de sub „Etichete") ar porni de sub iconiță, nu din dreptul
     primului rând de text. */
  #example2 td.dn-c-opt .btn {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    white-space: normal;
    font-size: 12px;
    text-align: left;
  }

  /* primul buton își ține iconița și textul într-un <a>, nu direct în buton */
  #example2 td.dn-c-opt .btn > a {
    display: flex;
    align-items: flex-start;
    gap: 5px;
  }

  /* line-height 18px = exact rândul textului (12px × 1.5). Font Awesome pune
     line-height:1 pe iconițe, iar ca element de flex caseta lor iese mai
     scundă decât un rând de text — glifa rămâne lipită de marginea de sus. */
  #example2 td.dn-c-opt .btn > i,
  #example2 td.dn-c-opt .btn > a > i {
    flex: 0 0 auto;
    margin: 0;
    line-height: 18px;
  }

  /* Fără bifă, cardul e ca celelalte opțiuni: iconița în stânga, textul
     alături. !important pe display: regula globală .dn-selectie-multipla
     (fără media query, la finalul fișierului) impune `inline-flex !important`,
     iar aici cardul trebuie să ocupe toată celula, ca vecinii lui. */
  #example2 td.dn-c-opt .dn-selectie-multipla {
    display: flex !important;
    align-items: flex-start;
    /* regula globală .dn-selectie-multipla centrează conținutul; vecinii lui
       pornesc de la stânga, deci iconița lui ieșea împinsă spre interior */
    justify-content: flex-start;
    gap: 5px;
    text-align: left;
  }

  #example2 td.dn-c-opt .dn-selectie-multipla > .form-check-label {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 0;
    line-height: 18px;
    text-align: left;
  }

  #example2 td.dn-c-opt .dn-selectie-multipla .form-check-label > i {
    flex: 0 0 auto;
    margin: 0;
    line-height: 18px;
  }

  /* ---- 5d. Subsol: cod rețetă, arhivare multiplă, export QR ---- */

  #example2 td.dn-c-sub > center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  #example2 td.dn-c-sub > center > br {
    display: none;
  }

  #example2 td.dn-c-sub .btn {
    font-size: 11px;
    padding: 3px 8px;
  }

  #example2 td.dn-c-sub .form-check {
    margin: 0;
  }

  /* ============================================================
     5e. Cardul de produs (lista_produse.php)
     ============================================================
     Aceeași formă ca la rețete: poza mică în stânga, cu codul dedesubt, iar
     numele și prețurile alături. Spre deosebire de rețete, aici nu e nevoie
     de JS pentru așezare — datele stau deja în celule separate, deci rândul
     devine direct o grilă de două coloane. Din JS se mută doar switch-ul „În
     meniul QR", care în coloana de 84px n-ar avea loc.
     Ancorat pe tr[data-produs-nr], ca celelalte tabele #example2 din
     aplicație să rămână la card-view-ul simplu din secțiunea 1. */

  /* 96px = poza de 84 + cei 12px de padding-stânga ai celulei. Cu 84px fix,
     conținutul depășea celula cu exact padding-ul ei, iar `overflow-x: auto`
     (secțiunea 1) desena o bară de derulare — o dungă gri sub cod, vizibilă
     pe telefoanele care afișează scrollbar-ul permanent. */
  #example2 > tbody > tr[data-produs-nr] {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 10px;
    align-items: start;
  }

  /* implicit fiecare celulă ține tot rândul; primele două fac excepție */
  #example2 > tbody > tr[data-produs-nr] > td {
    grid-column: 1 / -1;
  }

  #example2 > tbody > tr[data-produs-nr] > td:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-right: 0;
    /* bordura ar tăia doar sub poză, nu pe toată lățimea cardului */
    border-bottom: 0 !important;
  }

  /* display: contents — celula dispare ca element, iar conținutul ei (titlul,
     prețurile și switch-ul mutat de JS) devine direct element de grilă. Fără
     asta, switch-ul ar rămâne închis în coloana din dreapta și n-ar putea fi
     aliniat cu marginea cardului. */
  #example2 > tbody > tr[data-produs-nr] > td.dn-produs-date {
    display: contents;
  }

  /* margin-top cât padding-ul de sus al celulei cu poza: `display: contents`
     a scos cutia celulei cu datele, deci și padding-ul ei — fără asta titlul
     pornea cu 10px mai sus decât poza de alături. */
  /* margin-bottom, nu row-gap pe grilă: poza ține ambele rânduri, iar un
     row-gap i-ar mări și ei caseta. La titlurile scurte spațiul de sub titlu
     apărea oricum, din surplusul de înălțime al pozei; la cele de două-trei
     rânduri surplusul dispare și prețul se lipea de titlu. */
  #example2 > tbody > tr[data-produs-nr] .dn-produs-titlu {
    grid-column: 2;
    grid-row: 1;
    margin-top: 10px;
    margin-bottom: 8px;
  }

  #example2 > tbody > tr[data-produs-nr] .dn-produs-preturi {
    grid-column: 2;
    grid-row: 2;
  }

  /* Aceleași talii ca pe cardul de rețetă: denumirea se detașează, datele stau
     în pastile mici. Fără ele, .dn-produs-card ia mărimea implicită a lui
     .btn-sm din temă (12.25px) și numele arată la fel ca prețurile. */
  #example2 > tbody > tr[data-produs-nr] .dn-produs-titlu .dn-produs-card {
    font-size: 14px;
    font-weight: 600;
    padding: 4px 8px;
  }

  #example2 > tbody > tr[data-produs-nr] .dn-produs-preturi .dn-produs-card {
    font-size: 11px;
    padding: 3px 7px;
  }

  /* Despărțirea capului de restul cardului o face prima celulă de dedesubt,
     care ține toată lățimea. !important: secțiunea 1 pune `border: 0` tot cu
     !important pe toate celulele.

     display + min-height: descrierea rămâne o secțiune și la produsele care
     n-au una. Altfel celula goală e ascunsă (`.dn-empty`, pus din JS) și
     cardul sare direct la „Personalizare" — în listă, unele carduri au
     secțiunea și altele nu, iar înălțimile sar de la unul la altul. Spațiul
     rezervat e cât eticheta plus un rând de text; cardurile cu descrieri mai
     lungi rămân firește mai înalte. */
  #example2 > tbody > tr[data-produs-nr] > td:nth-child(3),
  #example2 > tbody > tr[data-produs-nr] > td:nth-child(3):empty {
    display: block !important;
    min-height: 60px;
    border-top: 1px solid var(--ct-border-color, #dee2e6) !important;
  }

  /* în capul cardului etichetele de coloană („NUME") nu mai spun nimic */
  #example2 > tbody > tr[data-produs-nr] > td:first-child::before,
  #example2 > tbody > tr[data-produs-nr] > td.dn-produs-date::before {
    display: none !important;
  }

  /* poza sus, codul dedesubt — în markup codul e primul */
  #example2 > tbody > tr[data-produs-nr] > td:first-child > center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  #example2 > tbody > tr[data-produs-nr] .dn-cod-produs {
    order: 1;
    font-size: 11px;
    padding: 3px 7px;
  }

  /* !important pe fundal și chenar: _setari.php impune pe .btn-light un fundal
     gri și o bordură, tot cu !important — fără asta poza stă într-o casetă
     gri-deschis, lipită ca un panou separat peste cardul alb */
  #example2 > tbody > tr[data-produs-nr] .open-poza-modal {
    order: -1;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  #example2 > tbody > tr[data-produs-nr] .open-poza-modal img {
    width: 84px !important;
    /* fără asta, max-width:100% din secțiunea 1 turtește imaginea */
    max-width: none;
    height: 84px;
    object-fit: cover;
    border-radius: 8px;
  }

  /* Placeholder-ul „fără poză" e un pătrat de 512px în care cercul atinge
     marginile pânzei, deci la 84px arată lipit de muchii și retezat de
     colțurile rotunjite. Padding-ul îi lasă aer; `contain` ca desenul să
     rămână întreg în ce mai rămâne din casetă. Pozele reale rămân decupate
     pătrat, altfel ar apărea cu dungi albe pe laturi. */
  #example2 > tbody > tr[data-produs-nr] .open-poza-modal img[src$="fara_poza.png"],
  #example2 td.dn-c-cap .dn-poza img[src$="fara_poza.png"] {
    box-sizing: border-box;
    padding: 7px;
    object-fit: contain;
  }

  /* switch-ul ține tot rândul, sub poză și sub prețuri, aliniat cu marginea
     din stânga a cardului */
  /* padding-left cât al celulelor: ținând tot rândul, switch-ul pornește din
     marginea cardului, nu din dreptul pozei — tot pentru că `display: contents`
     a scos padding-ul celulei care îl găzduiește */
  #example2 > tbody > tr[data-produs-nr] .dn-qr-switch {
    display: flex !important;
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-start;
    max-width: 100%;
    margin: 10px 0;
    padding-left: 12px;
    font-size: 13px;
  }

  #example2 > tbody > tr[data-produs-nr] .dn-qr-switch .form-check-input {
    margin-left: 0;
  }

  #example2 > tbody > tr[data-produs-nr] .dn-qr-switch .form-check-label {
    font-size: 13px;
    white-space: nowrap;
  }

  /* Sub „PERSONALIZARE" rămânea un gol cât un rând de text: în markup, înaintea
     lui <center> stă un <br> care pe cardul de rețetă e ascuns (secțiunea 5c),
     dar aici nu era. Ascuns, nu scos din PHP: pe desktop el ține butoanele
     desprinse de marginea de sus a celulei. */
  #example2 > tbody > tr[data-produs-nr] > td.dn-actiuni-produs br {
    display: none;
  }

  /* aceeași distanță sub etichetă ca sub „OPTIUNI" pe cardul de rețetă */
  #example2 > tbody > tr[data-produs-nr] > td.dn-actiuni-produs::before {
    margin-bottom: 8px;
  }
}

@media (min-width: 768px) {
  /* Butoanele de adăugare sunt .btn-sm în markup, deci pe desktop apăreau
     vizibil mai mici decât cele din bara de acțiuni de deasupra („Încarcă
     poze", „Modificare multiplă"…), care sunt .btn normale. Aici primesc
     aceeași talie. Valorile sunt cele calculate ale unui .btn din temă;
     variabilele --bs-btn-* nu funcționează, fiindcă tema pune padding-ul
     direct pe .btn-sm. */
  .dn-adauga .btn {
    padding: .45rem .9rem;
    font-size: .875rem;
    line-height: 1.5;
  }

  /* ---- Spațiu între iconiță și etichetă ----
     Pe mobil butoanele astea sunt flex și distanța o dă `gap`; pe desktop
     rămâne doar spațiul de text dintre </i> și etichetă, prea strâns.
     Marginea stă pe iconițele butoanelor despre care știm că au și etichetă —
     pe cele pur iconice (salvare, săgeata înapoi, fulgul de congelat) ar
     descentra glifa, iar CSS-ul nu poate distinge un buton cu text de unul
     fără. Butoanele din coloanele de acțiuni ale rândurilor nu sunt aici:
     acolo așezarea e deja flex, cu gap propriu (secțiunile 6c și .dn-actiuni-produs). */
  .dn-actiuni > .btn > i,
  .dn-actiuni > a > .btn > i,
  .dn-adauga .btn > i,
  .dn-adauga .btn > a > i,
  .dn-adauga-ingredient .btn i.fa-plus,
  .dn-btn-adauga > i,
  .dn-activeaza-reteta > i,
  .dn-sterge-reteta > i,
  .dn-sterge-ingredient > i {
    margin-right: 5px;
  }

  /* ============================================================
     6. Rândul de rețetă pe desktop (lista_retete.php)
     ============================================================ */

  /* ---- 6a. Coloana cu poza: poză mai mare, codul dedesubt ----
     Valabil pentru ambele liste. Rândul de rețetă poartă data-nr-reteta, cel de
     produs data-produs-nr; ambele tabele au id="example2", deci selectorul se
     agață de atributul rândului, nu de tabel. */

  #example2 > tbody > tr[data-nr-reteta] > td:first-child > center,
  #example2 > tbody > tr[data-produs-nr] > td:first-child > center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  #example2 > tbody > tr[data-nr-reteta] > td:first-child > center > br,
  #example2 > tbody > tr[data-produs-nr] > td:first-child > center > br {
    display: none;
  }

  /* Poza urcă prima și crește; butonul care o poartă își pierde aspectul. */
  #example2 > tbody > tr[data-nr-reteta] .open-poza-modal,
  #example2 > tbody > tr[data-produs-nr] .open-poza-modal {
    order: -1;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  #example2 > tbody > tr[data-nr-reteta] .open-poza-modal img,
  #example2 > tbody > tr[data-produs-nr] .open-poza-modal img {
    width: 190px !important;
    max-width: 100%;
  }

  /* Codul coboară la urmă, sub switch, pe ambele liste. În markup el e primul
     din <center>, înaintea pozei — de aceea reordonarea, nu o mutare. */
  #example2 > tbody > tr[data-nr-reteta] .dn-cod-reteta,
  #example2 > tbody > tr[data-produs-nr] .dn-cod-produs {
    order: 1;
  }

  /* ---- 6b. Coloana cu numele: gramajele și prețul, unul sub altul ---- */

  /* erau două pe un rând și prețul dedesubt, toate centrate; acum stau
     stivuite și aliniate la stânga, sub titlul rețetei */
  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(2) > center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
  }

  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(2) > center > br {
    display: none;
  }

  /* „Gramaj Ingrediente" primul, apoi „Gramaj Rețetă", apoi prețul */
  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(2) > center > .btn-group:nth-of-type(2) {
    order: -1;
  }

  /* Etichetele rețetei nu mai stau în coloana Nume: au trecut în coloana pozei,
     sub codul rețetei (`.cn-etichete-poza`, stilată în `lista_retete.php`).
     Regulile de aici, care le țineau pe un rând sub preț, au fost scoase odată
     cu markup-ul lor. */

  /* ---- 6c. Coloana „Opțiuni": iconițe și texte la stânga, mai strânse ---- */

  /* între butoane erau <br><br>; pe coloană cu gap mic stau mai aproape.

     `gap: 8px`, nu 10: exact distanța dintre cardurile de ingrediente din
     celula vecină, ca cele două coloane să se citească pe aceeași grilă.

     `center`, NU `> center` — aceeași corecție și din același motiv ca la
     `.dn-actiuni-arhiva center` (vezi nota de acolo): la o coborâre sub 768px
     `cardificaRand` mută tot conținutul celulei într-un `.dn-ing-wrap`, iar
     întoarcerea peste 768px nu desface împachetarea, deci `<center>` rămâne
     NEPOT al lui `<td>`. Scrise cu `>`, cele două reguli mureau după o simplă
     micșorare-și-mărire a ferestrei: `<center>` redevenea `block`, `<br>`-urile
     reapăreau, iar butoanele săreau de la 39px la 69px distanță între ele. */
  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(4) center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(4) center > br {
    display: none;
  }

  /* butoanele au width:80% inline; marginile auto le țin centrate ca bloc,
     în timp ce conținutul lor se aliniază la stânga */
  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(4) .btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  /* lățime fixă pe iconițe, ca textele să pornească din același punct.
     La arhivarea multiplă iconița stă în <label>, nu direct în buton — fără
     al doilea selector, textul ei ar porni cu doi pixeli mai la stânga */
  /* „Etichetă și Valori" își ține iconița și textul într-un <a>, deci gap-ul de
     pe buton cade între marginile lui <a>, nu între iconiță și text — de aceea
     textul lui pornea lipit de iconiță, mai la stânga decât la vecini */
  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(4) .btn > a {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(4) .btn > i,
  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(4) .btn > a > i,
  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(4) .form-check-label > i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
  }

  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(4) .dn-selectie-multipla {
    justify-content: flex-start;
  }

  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(4) .dn-selectie-multipla .form-check-label {
    text-align: left;
  }


  /* butonul „Adaugă ingredient" se aliniază la stânga, sub lista de
     ingrediente; cele două <br> dinaintea lui rămân, deci distanța de
     deasupra e neatinsă */
  #example2 > tbody > tr[data-nr-reteta] .dn-adauga-ingredient {
    text-align: left;
  }

  /* ---- 6d. Lățimile coloanelor ---- */

  /* ATENȚIE: astea sunt lățimile care contează cu adevărat pentru primele două
     coloane, nu cele scrise în `<th>` din lista_retete.php. DataTables golește
     atributul `style` al capetelor de coloană la inițializare, iar `!important`
     de aici bate orice altceva — deci o schimbare făcută doar în PHP nu se vede
     nicăieri. Se schimbă în ambele locuri, ca să spună același lucru.

     6 aug. 2026: 20% → 15% și 18% → 15%. Poza n-are lățime proprie
     (`max-width: 100%`), deci se micșorează odată cu coloana; în coloana Nume
     cea mai lată pastilă e „Gramaj Ingrediente: … gr." (185px), care încape în
     231px. Cele 8% eliberate merg la ingrediente — singura coloană fără lățime
     scrisă, deci cea care ia tot ce rămâne. */
  #example2 > thead > tr > th:first-child,
  #example2 > tbody > tr[data-nr-reteta] > td:first-child {
    width: 15% !important;
  }

  #example2 > thead > tr > th:nth-child(2),
  #example2 > tbody > tr[data-nr-reteta] > td:nth-child(2) {
    width: 15% !important;
  }

}

/* ---- Cardul de subrețetă pe mobil ----
   Ținta e clasa tabelului, nu #example2 simplu: celelalte 14 liste care folosesc
   același id nu trebuie atinse. */
@media (max-width: 767.98px) {

  /* Cardul devine flex-column ca să pot reordona celulele. Interiorul celulelor
     rămâne display:block, deci textul liber cu <b>/<br> nu e afectat — doar
     celulele devin elemente flex, nu conținutul lor.
     Etichetele („NUME", „VALORI NUTRITIONALE") vin din data-label, pus de
     dn-mobile.js pe fiecare <td>, deci călătoresc cu celula la reordonare. */
  #example2.dn-tabel-subretete > tbody > tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 26px;
  }

  /* Marginea singură nu separa nimic: chenarul cardului și liniile dintre
     secțiuni erau amândouă `1px solid` în aceeași culoare, deci fiecare celulă
     arăta ca un card de sine stătător și ochiul vedea un șir uniform de casete.
     Aici cardul capătă contur propriu plus umbră (obiect ridicat de pe fundal),
     iar liniile dinăuntru devin discrete — ierarhie, nu doar spațiu. */
  #example2.dn-tabel-subretete > tbody > tr {
    border: 0 !important;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(15,23,42,.12), 0 6px 18px rgba(15,23,42,.09);
  }

  #example2.dn-tabel-subretete > tbody > tr > td {
    border-bottom-color: rgba(15,23,42,.06) !important;
  }

  /* Dark mode: umbra nu se vede pe fundal închis, conturul trebuie deschis. */
  html[data-bs-theme="dark"] #example2.dn-tabel-subretete > tbody > tr,
  body[data-bs-theme="dark"] #example2.dn-tabel-subretete > tbody > tr {
    box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.45);
  }

  html[data-bs-theme="dark"] #example2.dn-tabel-subretete > tbody > tr > td,
  body[data-bs-theme="dark"] #example2.dn-tabel-subretete > tbody > tr > td {
    border-bottom-color: rgba(255,255,255,.08) !important;
  }

  /* Codul trece sub denumire: pe un ecran îngust, primul lucru de citit e
     numele subrețetei, nu numărul ei.
     „Folosită în" urcă imediat după cod: e o pastilă scurtă și e motivul
     pentru care se deschide pagina. Dacă ar rămâne în ordinea din tabel, ar
     ajunge sub paragraful lung al etichetei, adică sub linia de plutire. */
  #example2.dn-tabel-subretete > tbody > tr > td:nth-child(2) { order: 1; }  /* nume */
  #example2.dn-tabel-subretete > tbody > tr > td:nth-child(1) { order: 2; }  /* cod */
  #example2.dn-tabel-subretete > tbody > tr > td:nth-child(5) { order: 3; }  /* folosită în */
  #example2.dn-tabel-subretete > tbody > tr > td:nth-child(3) { order: 4; }  /* valori */
  #example2.dn-tabel-subretete > tbody > tr > td:nth-child(4) { order: 5; }  /* etichetă */
  #example2.dn-tabel-subretete > tbody > tr > td:nth-child(6) { order: 6; }  /* acțiuni */

  /* ---- Codul și „Folosită în", pe același rând ----
     Două pastile scurte, fiecare pe rândul ei, luau împreună cât secțiunile
     lungi de dedesubt, fără să spună mai mult decât spun una lângă alta. Se
     citesc oricum ca o pereche — „care e" și „unde se duce" — iar acum, pe
     cardul închis, numele, codul și numărul de rețete încap în trei rânduri.

     Rândul trece pe `row` + `wrap`, nu rămâne `column`: într-un container flex
     pe coloană, `wrap` deschide coloane noi, nu rânduri. Restul celulelor își
     păstrează `width: 100%` din secțiunea 1, deci fiecare rămâne singură pe
     linia ei; doar astea două primesc jumătate. `order` lucrează la fel în
     ambele direcții, așa că așezarea de mai sus nu se schimbă.

     `min-width: 0` e condiția, nu ornamentul: elementele flex nu scad sub
     lățimea lor minimă de conținut, deci o pastilă mai lată decât jumătatea ei
     (un contor de trei cifre, o traducere mai lungă) ar rupe perechea înapoi pe
     două rânduri — exact ce s-a strâns aici. */
  #example2.dn-tabel-subretete > tbody > tr {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #example2.dn-tabel-subretete > tbody > tr > td:nth-child(1),
  #example2.dn-tabel-subretete > tbody > tr > td.dn-folosita {
    width: 50% !important;
    min-width: 0;
  }

  /* Centrarea o pune azi `.dn-rich` (secțiunea 1), dar numai celulelor cu
     butoane — iar subrețeta nefolosită afișează un text simplu, nu buton. Ar fi
     stat la stânga, lângă un cod centrat: scrisă aici, perechea arată la fel
     în ambele cazuri. */
  #example2.dn-tabel-subretete > tbody > tr > td.dn-folosita {
    text-align: center;
  }

  /* Codul n-are etichetă de coloană: antetul lui e „#", pe care dn-mobile.js îl
     traduce în etichetă goală — și bine face. Efectul secundar e că pastila lui
     pornește din marginea de sus a celulei, adică din dreptul cuvântului
     „FOLOSITĂ ÎN", nu din dreptul pastilei de lângă ea. Lipită de baza celulei
     ajunge exact pe linia vecinei: amândouă sunt ultimul lucru din celula lor,
     iar celulele au același padding de jos.

     `justify-content`, nu `text-align`: celula devine container flex, iar
     centrarea moștenită nu mai mișcă un element flex. */
  #example2.dn-tabel-subretete > tbody > tr > td:nth-child(1) {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  /* Butonul de acțiune ocupă tot cardul, ca la celelalte liste: pe touch,
     o țintă de lățime întreagă e mai ușor de nimerit decât una centrată. */
  #example2.dn-tabel-subretete > tbody > tr > td.dn-actiuni { text-align: left !important; }
  #example2.dn-tabel-subretete > tbody > tr > td.dn-actiuni > a { width: 100%; }

  /* ---- Valorile și eticheta, colapsate ----
     Butonul, săgeata și învelișul vin de-a gata din secțiunea 5b (`.dn-ing-sum`
     / `.dn-ing-wrap`, scrise pe `#example2`, deci generice). Aici se corectează
     un singur efect secundar: butonul de deschidere e un `<button>`, iar
     `dn-mobile.js` marchează cu `.dn-rich` orice celulă care are controale —
     clasă care centrează textul (secțiunea 1). Până acum cele două celule
     n-aveau butoane, deci stăteau la stânga; cu colapsarea ar fi trecut pe
     centru, iar cifrele și paragraful etichetei s-ar fi citit altfel decât
     restul cardului.

     Ținta e `.dn-colapsat`, nu poziția coloanei: dacă eticheta e goală rămâne
     necolapsată (vezi `cardificaSubreteta`) și atunci n-are ce corecta. */
  #example2.dn-tabel-subretete > tbody > tr > td.dn-colapsat,
  #example2.dn-tabel-subretete > tbody > tr > td.dn-colapsat .dn-ing-wrap {
    text-align: left !important;
  }

}

/* ---- Arhiva Rețete: coloana cu numele ----
   Titlul mai mare decât gramajele, totul aliniat la stânga și stivuit, ca pe
   lista de rețete. Coloana conține acum și gramajele (fosta coloană separată). */
#example2 > tbody > tr > td .dn-titlu-arhiva {
  font-size: 1rem;
  font-weight: 700;
  padding: .5rem .9rem;
}

/* .btn-group aliniază orizontal; aici gramajele trebuie unul sub altul. */
#example2 .dn-gramaje {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

#example2 .dn-gramaje > .btn {
  width: auto;
  text-align: left;
  border-radius: 12px !important;
}

/* Coloana cu numele: conținutul la stânga, nu centrat. Ținta e clasa de pe
   <td>, nu :has() — fișierul îl evită, ca să meargă și în browsere fără suport.
   <center> impune text-align:center, deci trebuie bătut explicit. */
.dn-celula-nume-arhiva,
.dn-celula-nume-arhiva > center {
  text-align: left !important;
}

/* ---- Arhiva Rețete: cardul aliniat cu cel din lista de rețete ----
   Codul sub poză, iar acțiunile într-o coloană proprie la final, stivuite.
   Ținta e clasa de pe <td>; tabelul are tot id="example2", ca alte 14 pagini. */

/* `center`, nu `> center`: pe mobil, colapsarea coloanei de opțiuni
   (`cardificaRand` din dn-mobile.js) mută tot conținutul celulei într-un
   `.dn-ing-wrap`, deci <center> ajunge NEPOT al lui <td>, nu copil. Scrisă cu
   `>`, regula era vie pe desktop și moartă pe telefon — exact acolo unde
   contează — iar cele patru acțiuni cădeau pe două așezări diferite: grupurile
   de butoane pe o cale, cardurile de selecție pe alta, deci nealiniate între
   ele. Celula are un singur <center>, deci descendentul nu poate nimeri altul.
   Aceeași corecție mai jos, la regulile din blocul de mobil. */
.dn-actiuni-arhiva center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Un <br> ramas intre grupul de actiuni si cardurile de selectie adauga inca un
   rand peste gap, deci distanta acolo era dubla fata de restul. Ascuns din CSS,
   nu scos din markup: sta intr-un echo PHP impreuna cu butoanele. */
.dn-actiuni-arhiva center > br {
  display: none;
}

.dn-actiuni-arhiva .btn-group {
  width: 100%;
  max-width: 190px;
}

.dn-actiuni-arhiva .btn {
  width: 100%;
  max-width: 190px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  margin: 0 !important;
}

.dn-actiuni-arhiva .btn > i {
  flex: 0 0 16px;
  width: 16px;
  text-align: center;
}

/* Pe cardul mobil cele patru opțiuni trebuie să pară o singură coloană:
   „Activează" și „Șterge" veneau la 190px (lățimea grupului de butoane), iar
   cardurile de selecție la 220px (regula de la secțiunea 5c) — două lățimi
   înseamnă două margini stângi, deci nimic nu se alinia. Aici primesc aceeași
   lățime, iar `margin: auto` le centrează și dacă <center> n-ar fi container
   flex. Ținta include .dn-c-opt, clasa pusă de dn-mobile.js doar sub 768px. */
@media (max-width: 767.98px) {

  #example2 td.dn-c-opt.dn-actiuni-arhiva center {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  #example2 td.dn-c-opt.dn-actiuni-arhiva center > .btn-group,
  #example2 td.dn-c-opt.dn-actiuni-arhiva center > .btn,
  #example2 td.dn-c-opt.dn-actiuni-arhiva center > .dn-selectie-multipla {
    width: 100% !important;
    max-width: 220px !important;
    margin: 0 auto !important;
  }

  /* butonul umple grupul, altfel rămâne la cei 190px ai regulii de mai sus */
  #example2 td.dn-c-opt.dn-actiuni-arhiva center > .btn-group > .btn {
    max-width: none !important;
  }

}

/* Fundal neutru, etichetă neagră, culoarea o poartă chenarul și iconița —
   aceeași convenție ca pe cardul de produs. Verde = readuce în listă,
   roșu = șterge definitiv. */
.dn-activeaza-reteta,
.dn-activeaza-reteta:hover,
.dn-activeaza-reteta:focus {
  --bs-btn-border-color: var(--cn-success, #2f7d4f);
  --bs-btn-hover-border-color: var(--cn-success, #2f7d4f);
  border-color: var(--cn-success, #2f7d4f) !important;
  color: #000 !important;
}

.dn-activeaza-reteta > i { color: var(--cn-success, #2f7d4f) !important; }

.dn-sterge-reteta,
.dn-sterge-reteta:hover,
.dn-sterge-reteta:focus {
  --bs-btn-border-color: var(--cn-danger, #dc2626);
  --bs-btn-hover-border-color: var(--cn-danger, #dc2626);
  border-color: var(--cn-danger, #dc2626) !important;
  color: #000 !important;
}

.dn-sterge-reteta > i { color: var(--cn-danger, #dc2626) !important; }

/* În dark mode fundalul lui .btn-light e închis, deci negrul ar fi ilizibil. */
html[data-bs-theme="dark"] .dn-activeaza-reteta,
body[data-bs-theme="dark"] .dn-activeaza-reteta,
html[data-bs-theme="dark"] .dn-sterge-reteta,
body[data-bs-theme="dark"] .dn-sterge-reteta {
  color: var(--cn-text) !important;
}

/* ---- Lista Prețuri ----
   Patru corecții pe pagina de administrare a prețurilor. Fără media query:
   aceleași pe desktop și pe mobil. */

/* Chenarul și culoarea iconiței butonului „Publică Prețuri" NU mai stau aici:
   s-au mutat lângă „Publică Meniu", ca cele două să fie definite o dată, în
   același loc. Mutarea a fost obligatorie, nu de ordine: regula generală a
   barei de acțiuni e mai jos în fișier și, la specificitate egală, câștiga. */

.dn-publica > i {
  margin-right: .5rem;
}

/* Notă pentru cine se uită la `margin-right` de mai sus: pe butonul „Publică
   Prețuri" el NU se aplică, nici pe desktop, nici pe telefon — iconița e
   singurul copil ELEMENT al butonului (eticheta e text gol), deci câștigă
   `.btn > i:only-child { margin-right: 0 }`, care e mai specific. Distanța
   iconiță-etichetă vine, pe telefon, din `gap`-ul lui `.dn-actiuni`. */
@media (max-width: 767.98px) {
  /* Butonul „Publică Prețuri" e singur în cardul lui, deasupra cardului de
     filtre. `.card-header` vine cu 24px de padding lateral, `.cn-filters` cu
     14px, deci butonul ieșea cu 20px mai îngust decât listele derulante de sub
     el — la aceeași lățime de card, se vedea. Aceeași valoare pe amândouă le
     aliniază pe aceeași margine.

     Regula e legată de clasa paginii, nu de `.dn-actiuni` în general: pe
     Preparate și Băuturi bara are mai multe butoane și o altă vecinătate, iar
     lățimea lor nu e ceva ce se cere schimbat aici. */
  .dn-actiuni-preturi {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Codul sub poză, ca pe listele de rețete și produse: primul lucru pe care îl
   cauți e preparatul, nu numărul lui. Poza urcă prin order, codul rămâne firesc
   dedesubt — <br>-urile dintre ele se ascund, altfel ar lăsa un gol dublu. */
.dn-celula-cod-poza > center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.dn-celula-cod-poza > center > br {
  display: none;
}

.dn-celula-cod-poza > center > center,
.dn-celula-cod-poza > center > img {
  order: -1;
}

/* Aer între prețul curent și câmpul de editare: .btn-group le lipește cap la
   cap, ceea ce sugerează un singur control, deși sunt două lucruri diferite —
   valoarea de acum și valoarea nouă. */
.dn-pret-grup {
  gap: 12px;
}

.dn-pret-grup > span,
.dn-pret-grup > form {
  float: none;
}

/* .btn-group aplatizează colțurile interioare ca butoanele lipite să pară un
   singur control. Odată despărțite de gap, marginile drepte arată rupt — le
   redăm raza. !important: regula temei o pune tot așa. */
.dn-pret-grup > span > .btn,
.dn-pret-grup .btn,
.dn-pret-grup .form-control {
  border-radius: 12px !important;
}

/* ---- Lățimile coloanelor pe Lista Subrețete ----
   Tabelul are tot id="example2" (ca alte 14 pagini), deci regula de la secțiunea
   6d — scrisă pentru lista de rețete — îi forța prima coloană la 20%. Partea ei
   de <th> n-are gardă [data-nr-reteta], așa că se aplică oriunde. Aici o batem
   cu specificitate mai mare (id + clasă), fără să atingem celelalte pagini.

   Codul subrețetei e scurt și fix; eticheta e un paragraf lung care avea nevoie
   de spațiul acela. Doar desktop: pe mobil rândul devine card stivuit, unde
   lățimile de coloană nu mai contează. */
@media (min-width: 768px) {

  /* Șase coloane de la reconstrucția paginii (s-au adăugat „Folosită în" și
     „Acțiuni"); procentele însumează 100. Eticheta rămâne cea mai lată — e
     singura coloană cu text curgător. */
  #example2.dn-tabel-subretete > thead > tr > th:nth-child(1) {
    width: 7% !important;
  }

  #example2.dn-tabel-subretete > thead > tr > th:nth-child(2) {
    width: 16% !important;
  }

  #example2.dn-tabel-subretete > thead > tr > th:nth-child(3) {
    width: 24% !important;
  }

  #example2.dn-tabel-subretete > thead > tr > th:nth-child(4) {
    width: 33% !important;
  }

  #example2.dn-tabel-subretete > thead > tr > th:nth-child(5) {
    width: 10% !important;
  }

  #example2.dn-tabel-subretete > thead > tr > th:nth-child(6) {
    width: 10% !important;
  }

  /* Valorile nutriționale pe două coloane: nouă rânduri deveneau cinci, deci
     rândul tabelului se scurtează aproape la jumătate și încap mai multe
     subrețete pe ecran. Doar pe desktop — într-un card de mobil, două coloane
     de cifre ar fi prea înghesuite. */
  .dn-valori-nutritionale {
    column-count: 2;
    column-gap: 22px;
  }

}

/* Blocuri, nu text inline: altfel ruptura de coloană ar putea cădea între
   etichetă și cifră. break-inside o ține pe fiecare valoare întreagă. */
.dn-vn {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* ---- Butonul de ștergere a unui ingredient ----
   Fundal ca al butoanelor din jur, cu chenarul și coșul în roșu, iar eticheta
   neutră — aceeași convenție ca la restul butoanelor cu chenar colorat. Fără
   media query: la fel pe desktop și pe mobil. */
/* !important plus variabilele Bootstrap: tema își impune culoarea de chenar
   a lui .btn-light și un border-color simplu nu o bate */
.dn-sterge-ingredient,
.dn-sterge-ingredient:hover,
.dn-sterge-ingredient:focus {
  --bs-btn-border-color: var(--cn-danger, #dc2626);
  --bs-btn-hover-border-color: var(--cn-danger, #dc2626);
  border-color: var(--cn-danger, #dc2626) !important;
  color: #000;
}

/* ---- Butonul „Anulează" din formulare ----
   Perechea butonului de adăugare: acolo chenarul verde spune „se creează ceva
   nou", aici cel roșu spune „se renunță". Aceeași convenție ca la ștergere —
   fundal ca al butoanelor din jur, chenarul poartă culoarea, eticheta rămâne
   neutră. Fără media query: la fel pe desktop și pe mobil. !important plus
   variabilele Bootstrap, fiindcă tema își impune chenarul lui .btn-light. */
.dn-btn-anuleaza,
.dn-btn-anuleaza:hover,
.dn-btn-anuleaza:focus {
  --bs-btn-border-color: var(--cn-danger, #dc2626);
  --bs-btn-hover-border-color: var(--cn-danger, #dc2626);
  border-color: var(--cn-danger, #dc2626) !important;
  color: #000;
}

/* În dark mode fundalul lui .btn-light e închis, deci negrul ar fi ilizibil. */
html[data-bs-theme="dark"] .dn-btn-anuleaza,
body[data-bs-theme="dark"] .dn-btn-anuleaza {
  color: var(--cn-text) !important;
}

/* Butoanele care conțin DOAR iconița n-au de ce separa nimic: marginea din
   secțiunea de desktop (menită să distanțeze glifa de eticheta care urmează) le
   împinge iconița spre stânga și lasă spațiu mort în dreapta. Regula stă aici,
   după media query-uri, ca să câștige prin ordinea sursei la specificitate egală. */
.btn > i:only-child {
  margin-right: 0 !important;
}

/* Coșul rămâne negru; roșul îl poartă doar chenarul. Într-o coloană cu zeci de
   ingrediente, un coș roșu pe fiecare rând transformă lista într-un perete de
   roșu — chenarul singur semnalează suficient. */
.dn-sterge-ingredient > i {
  color: #000 !important;
}

/* În dark mode fundalul lui .btn-light e închis, deci negrul ar fi ilizibil. */
html[data-bs-theme="dark"] .dn-sterge-ingredient,
body[data-bs-theme="dark"] .dn-sterge-ingredient,
html[data-bs-theme="dark"] .dn-sterge-ingredient > i,
body[data-bs-theme="dark"] .dn-sterge-ingredient > i {
  color: var(--cn-text) !important;
}

/* ---- Blocul de selecție pentru acțiuni în masă ----
   Folosit de ambele liste: pe rețete e „Arhivare Multiplă", pe produse
   „Ștergere Multiplă" — de aceea clasa e neutră, .dn-selectie-multipla.
   Fără media query: markup-ul e același pe ambele ecrane, iar .form-check
   ar arunca checkboxul în stânga (float) și ar lăsa eticheta dezaliniată,
   cu padding-ul lui de 1.5em. Aici stă ca butoanele din jur. */
.dn-selectie-multipla {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-left: .8rem;
  vertical-align: bottom;
  cursor: pointer;
  /* ancoră pentru bifa ascunsă, care e position:absolute */
  position: relative;
}

/* Bifa nu se mai desenează: starea „selectat" o arată cardul colorat. Rămâne
   în DOM, fiindcă ea e câmpul trimis de formular, iar <label for> o comută la
   clic pe card. Ascunsă cu opacity, nu cu display:none, ca să rămână
   focalizabilă de la tastatură. */
.dn-selectie-multipla .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  float: none;
  margin: 0;
}

.dn-selectie-multipla .form-check-label {
  margin: 0;
  cursor: pointer;
}

/* Selectat = cardul în albastrul de brand. Clasa vine din JS (lista_retete.php),
   nu din :has(:checked): cu bifa ascunsă, un browser fără :has() ar lăsa
   selecția complet invizibilă.
   !important și două clase în selector: peste .btn-light din _setari.php (care
   impune fundalul cu !important) și peste chenarul roșu de mai jos. */
.dn-selectie-multipla.is-selected,
.dn-selectie-multipla.is-selected:hover,
.dn-selectie-multipla.is-selected:focus {
  background-color: var(--cn-primary, #2563eb) !important;
  border-color: var(--cn-primary, #2563eb) !important;
  color: #fff !important;
}

/* iconița are .text-warning în markup, iar textul culoarea temei */
.dn-selectie-multipla.is-selected .form-check-label,
.dn-selectie-multipla.is-selected .form-check-label > i {
  color: #fff !important;
}

/* ---- Coloana de acțiuni de pe lista de produse ----
   „Modifică", „Șterge" și blocul de selecție stau unul sub altul, la aceeași
   lățime, ca stiva din coloana de acțiuni a listei de rețete. Fără media query:
   la fel pe desktop și pe mobil. Ținta e clasa de pe <td>, nu nth-child, ca
   adăugarea unei coloane să nu strice regula.

   `center`, NU `> center` — aceeași corecție și din același motiv ca la
   `.dn-actiuni-arhiva center` (vezi nota de acolo). Pe telefon `cardificaProdus`
   colapsează coloana de opțiuni (`colapseaza` din dn-mobile.js) și mută tot
   conținutul celulei într-un `.dn-ing-wrap`, deci <center> ajunge NEPOT al lui
   <td>. Scrise cu `>`, regulile astea erau vii pe desktop și moarte pe telefon
   — exact acolo unde contează: „Modifică" și „Șterge" cădeau una lângă alta, cu
   „Ștergere multiplă" singură pe rândul de sub ele. Celula are un singur
   <center>, deci descendentul nu poate nimeri altul. */
.dn-actiuni-produs center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dn-actiuni-produs center > .btn,
.dn-actiuni-produs center > .dn-selectie-multipla {
  width: 100%;
  max-width: 220px;
  margin: 0 !important;
}

/* Iconițele și textele la stânga, ca în coloana „Opțiuni" a listei de rețete
   (secțiunea 6c). Butonul rămâne bloc centrat, doar conținutul lui se aliniază. */
.dn-actiuni-produs center > .btn,
.dn-actiuni-produs center > .dn-selectie-multipla {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
}

/* Lățime fixă pe iconițe, ca textele să pornească din același punct. La blocul
   de selecție iconița stă în <label>, nu direct în buton — de aici al doilea
   selector, altfel textul ei ar porni cu câțiva pixeli mai la stânga. */
.dn-actiuni-produs center > .btn > i,
.dn-actiuni-produs .form-check-label > i {
  flex: 0 0 16px;
  width: 16px;
  text-align: center;
}

/* Fundal neutru cu text negru pentru toate trei; culoarea chenarului e singurul
   semnal — albastru pentru modificare, roșu pentru ștergere. Aceeași tehnică
   folosită peste tot în fișier: .btn-light din _setari.php impune `border` cu
   !important, iar variabilele --bs-btn-* trebuie setate pentru ca tema să nu-și
   reimpună chenarul pe hover. */
.dn-modifica-produs,
.dn-modifica-produs:hover,
.dn-modifica-produs:focus,
.dn-modifica-produs:active {
  --bs-btn-border-color: var(--cn-primary-ink, #2563eb);
  --bs-btn-hover-border-color: var(--cn-primary-ink, #2563eb);
  border-color: var(--cn-primary-ink, #2563eb) !important;
  color: #000 !important;
}

.dn-sterge-produs,
.dn-sterge-produs:hover,
.dn-sterge-produs:focus,
.dn-sterge-produs:active {
  --bs-btn-border-color: var(--cn-danger, #dc2626);
  --bs-btn-hover-border-color: var(--cn-danger, #dc2626);
  border-color: var(--cn-danger, #dc2626) !important;
  color: #000 !important;
}

/* ---- Ingredientele care nu există în baza de date ----
   Erau butoane pline roșii cu text alb, iar o rețetă cu multe ingrediente
   negăsite ieșea un bloc compact de roșu. Semnalul rămâne, dar mutat pe
   chenar: fundal neutru, text negru, chenarul în roșul temei — aceeași
   convenție ca la „Șterge" de pe produse. Fără media query. */
.dn-ing-lipsa,
.dn-ing-lipsa:hover,
.dn-ing-lipsa:focus,
.dn-ing-lipsa:active {
  --bs-btn-border-color: var(--cn-danger, #dc2626);
  --bs-btn-hover-border-color: var(--cn-danger, #dc2626);
  border-color: var(--cn-danger, #dc2626) !important;
  color: #000 !important;
}

html[data-bs-theme="dark"] .dn-ing-lipsa,
body[data-bs-theme="dark"] .dn-ing-lipsa {
  color: var(--cn-text) !important;
}

/* ---- Acțiunile din arhiva de rețete ----
   „Activează" și „Șterge" erau butoane pline, verde și roșu, cu text alb —
   singurele de felul ăsta din liste. Aici primesc aceeași formă ca perechea de
   pe produse: fundal neutru, text negru, culoarea acțiunii doar pe chenar și pe
   iconiță. Fără media query, ca restul regulilor de aici. */
.dn-activeaza-reteta,
.dn-activeaza-reteta:hover,
.dn-activeaza-reteta:focus,
.dn-activeaza-reteta:active {
  --bs-btn-border-color: var(--cn-success, #2f7d4f);
  --bs-btn-hover-border-color: var(--cn-success, #2f7d4f);
  border-color: var(--cn-success, #2f7d4f) !important;
  color: #000 !important;
}

.dn-sterge-reteta,
.dn-sterge-reteta:hover,
.dn-sterge-reteta:focus,
.dn-sterge-reteta:active {
  --bs-btn-border-color: var(--cn-danger, #dc2626);
  --bs-btn-hover-border-color: var(--cn-danger, #dc2626);
  border-color: var(--cn-danger, #dc2626) !important;
  color: #000 !important;
}

.dn-activeaza-reteta > i {
  color: var(--cn-success, #2f7d4f) !important;
}

.dn-sterge-reteta > i {
  color: var(--cn-danger, #dc2626) !important;
}

/* În dark mode fundalul lui .btn-light e închis, deci negrul ar fi ilizibil. */
html[data-bs-theme="dark"] .dn-modifica-produs,
body[data-bs-theme="dark"] .dn-modifica-produs,
html[data-bs-theme="dark"] .dn-sterge-produs,
body[data-bs-theme="dark"] .dn-sterge-produs,
html[data-bs-theme="dark"] .dn-activeaza-reteta,
body[data-bs-theme="dark"] .dn-activeaza-reteta,
html[data-bs-theme="dark"] .dn-sterge-reteta,
body[data-bs-theme="dark"] .dn-sterge-reteta {
  color: var(--cn-text) !important;
}

/* ---- Chenar albastru pe bara de acțiuni din capul listei ----
   „Încarcă poze", „Modificare Multiplă", „Procesează Valori", „Publică Meniu" —
   operațiuni la nivel de listă, nu de rând. Albastrul le leagă de accentul
   aplicației și le desparte de butoanele de adăugare (verzi) de dedesubt.
   Ambele liste poartă .dn-actiuni pe card-header. Fără media query. */
.dn-actiuni > .btn,
.dn-actiuni > .btn:hover,
.dn-actiuni > .btn:focus,
.dn-actiuni > a > .btn,
.dn-actiuni > a > .btn:hover,
.dn-actiuni > a > .btn:focus {
  --bs-btn-border-color: var(--cn-primary-ink, #2563eb);
  --bs-btn-hover-border-color: var(--cn-primary-ink, #2563eb);
  border-color: var(--cn-primary-ink, #2563eb) !important;
}

/* Două excepții de la albastrul barei: „Încarcă poze" în verde, ca celelalte
   acțiuni care aduc conținut nou, iar „Publică Meniu" în negru, fiind pasul
   final care scoate meniul la client.
   Selectorii repetă `.dn-actiuni`, altfel regula de mai sus (aceeași
   specificitate, dar declarată înainte) ar rămâne câștigătoare; variantele
   scurte prind aceleași butoane pe paginile unde bara n-are clasa. */
.dn-actiuni > .dn-incarca-poze,
.dn-actiuni > .dn-incarca-poze:hover,
.dn-actiuni > .dn-incarca-poze:focus,
.dn-actiuni > a > .dn-incarca-poze,
.dn-actiuni > a > .dn-incarca-poze:hover,
.dn-actiuni > a > .dn-incarca-poze:focus,
.dn-incarca-poze,
.dn-incarca-poze:hover,
.dn-incarca-poze:focus,
.dn-incarca-poze:active {
  --bs-btn-border-color: var(--cn-success, #2f7d4f);
  --bs-btn-hover-border-color: var(--cn-success, #2f7d4f);
  border-color: var(--cn-success, #2f7d4f) !important;
}

.dn-actiuni > .dn-publica-meniu,
.dn-actiuni > .dn-publica-meniu:hover,
.dn-actiuni > .dn-publica-meniu:focus,
.dn-actiuni > a > .dn-publica-meniu,
.dn-actiuni > a > .dn-publica-meniu:hover,
.dn-actiuni > a > .dn-publica-meniu:focus,
.dn-publica-meniu,
.dn-publica-meniu:hover,
.dn-publica-meniu:focus,
.dn-publica-meniu:active,
/* „Publică Prețuri" poartă exact același chenar ca „Publică Meniu": e aceeași
   treaptă a fluxului, doar pe alt set de date. Trebuie enumerat aici, cu
   `.dn-actiuni` în față, fiindcă regula generală a barei de mai sus
   (`.dn-actiuni > a > .btn`, chenar albastru) are aceeași specificitate și e
   tot `!important` — dacă excepția stă mai sus în fișier sau cu o singură
   clasă, pierde, iar butonul iese albastru. */
.dn-actiuni > .dn-publica,
.dn-actiuni > .dn-publica:hover,
.dn-actiuni > .dn-publica:focus,
.dn-actiuni > a > .dn-publica,
.dn-actiuni > a > .dn-publica:hover,
.dn-actiuni > a > .dn-publica:focus,
.dn-publica,
.dn-publica:hover,
.dn-publica:focus,
.dn-publica:active {
  /* Culoarea textului temei, nu `#000`: în modul întunecat negrul dispare pe
     fundal închis, iar tokenul o rezolvă singur, fără o a doua regulă care să
     repare pe urmă. Pe lumină diferența față de negru pur e imperceptibilă
     (#1c1917), dar dispare o culoare scrisă direct în foaie. */
  --bs-btn-border-color: var(--cn-text);
  --bs-btn-hover-border-color: var(--cn-text);
  border-color: var(--cn-text) !important;
}

/* Iconițele barei poartă culoarea chenarului, ca peste tot în aplicație:
   eticheta rămâne neutră, culoarea o duce iconița. Excepțiile repetă
   `.dn-actiuni` din același motiv ca la chenare — specificitate egală, deci
   contează ordinea. */
.dn-actiuni > .btn > i,
.dn-actiuni > a > .btn > i {
  color: var(--cn-primary-ink, #2563eb) !important;
}

.dn-actiuni > .dn-incarca-poze > i,
.dn-actiuni > a > .dn-incarca-poze > i,
.dn-incarca-poze > i {
  color: var(--cn-success, #2f7d4f) !important;
}

.dn-actiuni > .dn-publica-meniu > i,
.dn-actiuni > a > .dn-publica-meniu > i,
.dn-publica-meniu > i,
.dn-actiuni > .dn-publica > i,
.dn-actiuni > a > .dn-publica > i,
.dn-publica > i {
  color: var(--cn-text) !important;
}

/* ---- Chenar verde pe butoanele de adăugare ----
   „Aici se creează ceva nou" — semnal consecvent pe rețete, subrețete, produse
   (toate poartă .dn-adauga) și pe adăugarea de ingredient în cardul de rețetă.
   Fără media query: la fel pe desktop și pe mobil. Aceeași tehnică folosită
   peste tot în fișier — .btn-light din _setari.php impune `border` cu
   !important, iar variabilele --bs-btn-* trebuie setate ca tema să nu-și
   reimpună chenarul pe hover. */
.dn-adauga .btn,
.dn-adauga .btn:hover,
.dn-adauga .btn:focus,
.dn-adauga-ingredient .btn,
.dn-adauga-ingredient .btn:hover,
.dn-adauga-ingredient .btn:focus,
.dn-btn-adauga,
.dn-btn-adauga:hover,
.dn-btn-adauga:focus,
/* „Importa in cont" de pe lista de sabloane: face exact ce fac celelalte —
   adauga o reteta noua in cont — deci poarta acelasi semnal. Iconita avea deja
   `.text-success`; acum si chenarul spune acelasi lucru. */
.cn-importa .btn,
.cn-importa .btn:hover,
.cn-importa .btn:focus {
  --bs-btn-border-color: var(--cn-success, #2f7d4f);
  --bs-btn-hover-border-color: var(--cn-success, #2f7d4f);
  border-color: var(--cn-success, #2f7d4f) !important;
}

/* Butonul de ingredient avea <font color="green"> în markup — verdele pur HTML
   (#008000). Tag-urile au fost scoase din lista_retete.php. Textul stă într-un
   <a>, deci fără regula asta ar lua culoarea de link; îl ținem negru, iar
   verdele rămâne doar pe iconiță și pe chenar — ca la restul butoanelor, unde
   eticheta e mereu neutră și culoarea o poartă iconița. */
.dn-adauga-ingredient .btn > a,
.dn-adauga-ingredient .btn > a:hover,
.dn-adauga-ingredient .btn > a:focus {
  color: var(--cn-text) !important;
  text-decoration: none;
}

.dn-adauga .btn > i,
.dn-adauga .btn > a > i,
.dn-adauga-ingredient .btn i.fa-plus,
.dn-btn-adauga > i {
  color: var(--cn-success, #2f7d4f) !important;
}

/* .dn-btn-adauga se pune direct pe buton, nu pe container — pentru barele mixte
   unde butoanele de adăugare stau lângă acțiuni de listă (ex. „Ingredientele Mele”,
   unde un .dn-adauga pe card-header ar fi prins și „Aplică scăzământ” și
   „Actualizare kcal/kJ”, care nu creează nimic nou). Pe acea bară clasa stă pe
   două butoane: „Adauga Ingredient” și „Adauga din Excel” (fostul „Bulk Excel”,
   era singurul btn-info plin din bară) — unul singur, celălalt în masă, dar
   amândouă adaugă ingrediente noi în cont, deci poartă același semnal verde. */

/* ---- Coloana cu denumirea și prețurile produsului ----
   Erau șase butoane în trei perechi (etichetă | valoare); acum sunt trei carduri
   întregi, ca pe lista de rețete. Fără media query: aceeași așezare pe ambele
   ecrane. Ținta e clasa de pe <td>, nu nth-child, ca adăugarea unei coloane să
   nu strice regula. */
.dn-produs-date {
  text-align: left;
}

.dn-produs-titlu,
.dn-produs-preturi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Spațiul care desparte titlul de blocul de prețuri. */
.dn-produs-titlu {
  margin-bottom: 18px;
}

/* Cardurile: conținut la stânga, iconița cu lățime fixă ca textele să pornească
   din același punct, iar denumirile lungi se rup în loc să lățească coloana. */
.dn-produs-card {
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  white-space: normal;
  max-width: 100%;
}

.dn-produs-card > i {
  flex: 0 0 16px;
  width: 16px;
  text-align: center;
  line-height: 1.5;
  color: var(--cn-primary-ink, #2563eb);
}

.dn-produs-card > span {
  min-width: 0;
}

/* Aceeași convenție pe lista de rețete: creionul marchează ce e editabil, deci
   poartă albastrul de brand. Ținta e modalul pe care îl deschide butonul, nu
   poziția în markup — la fel ca restul regulilor din fișier. Cele trei modale
   acoperă titlul, prețul (același modal ca titlul) și gramajul rețetei. */
#example2 [data-bs-target*="modificanumereteta_"] > i.fa-pen,
#example2 [data-bs-target*="gramajreteta_"] > i.fa-pen,
#example2 [data-bs-target*="modal_gramaj_reteta_"] > i.fa-pen {
  color: var(--cn-primary-ink, #2563eb) !important;
}

/* „Schimbă în Subrețetă" / „Schimbă în Rețetă": iconițele aveau style="color:blue"
   în markup — albastrul pur CSS (#0000FF), nu cel al temei. Stilul inline a fost
   scos din lista_retete.php, culoarea stă acum aici, ca la celelalte. */
#example2 [data-bs-target*="schimbasubreteta_"] > i,
#example2 [data-bs-target*="schimbareteta_"] > i {
  color: var(--cn-primary-ink, #2563eb) !important;
}

/* „Etichete (nou, picant, etc.)": iconița în verdele temei. Selectorul include
   și clasa iconiței — pe #atribute mai țintesc și alte elemente din modal, iar
   fără .fa-tag regula s-ar întinde peste ele. */
#example2 [data-bs-target*="atribute"] > i.fa-tag {
  color: var(--cn-success, #2f7d4f) !important;
}

/* Iconițele poartă culoarea acțiunii, ca textul să rămână negru și lizibil —
   același principiu ca pe lista de rețete, unde iconițele sunt colorate iar
   eticheta nu. Regulă pe <i>, nu moștenire: culoarea butonului e pusă cu
   !important, dar o declarație directă pe copil bate oricum moștenirea. */
.dn-modifica-produs > i {
  color: var(--cn-primary-ink, #2563eb) !important;
}

.dn-sterge-produs > i {
  color: var(--cn-danger, #dc2626) !important;
}

/* „Etichetă și Valori" își ține iconița și textul într-un <a>, deci textul lua
   culoarea de link (albastru) în loc de culoarea butonului, spre deosebire de
   celelalte opțiuni din coloană. Ținta e href-ul, nu poziția în markup — aceeași
   convenție ca la restul regulilor din fișier. Iconița rămâne colorată. */
#example2 .btn > a[href*="lista_retete_valori"],
#example2 .btn > a[href*="lista_retete_valori"]:hover,
#example2 .btn > a[href*="lista_retete_valori"]:focus {
  color: var(--cn-text) !important;
  text-decoration: none;
}

/* ---- Switch „În meniul digital” ----
   Înlocuiește vechea pereche de butoane „Export/QR”, care era și ambiguă (nu
   spunea nici starea, nici ce face) și asimetrică (jumătatea „vizibil” nu avea
   handler). Aceeași problemă de așezare ca la .dn-selectie-multipla: .form-check
   aruncă inputul în stânga cu float și un padding de 2.5em, ceea ce iese strâmb
   în coloana centrată. Aici stă ca un rând compact. Fără media query. */
.dn-qr-switch {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 12px 0 4px;
  max-width: 85%;
  text-align: left;
}

.dn-qr-switch .form-check-input {
  float: none;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

/* Pornit = apare în meniu și în exporturi. Verde, nu albastru: perechea
   verde/roșu se citește ca pornit/oprit fără să fie nevoie de etichetă, iar
   albastrul rămâne rezervat acțiunilor, nu stărilor. */
.dn-qr-switch .form-check-input:checked {
  background-color: var(--cn-success, #2f7d4f);
  border-color: var(--cn-success, #2f7d4f);
}

/* Stins = rețeta NU apare în meniul digital și în exporturi. Roșul temei, ca
   starea să se citească dintr-o privire — gri-ul implicit se confunda cu un
   comutator dezactivat. Bilei i se dă alb: pe roșu, gri-ul implicit al lui
   Bootstrap (rgba(0,0,0,.25)) abia se vede.
   !important pe fundal: în dark mode _setari.php pune fundalul comutatoarelor
   tot cu !important, iar acolo starea stinsă ar reveni la gri. */
.dn-qr-switch .form-check-input:not(:checked) {
  background-color: var(--cn-danger, #dc2626) !important;
  border-color: var(--cn-danger, #dc2626) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Eticheta numește ambele destinații („In meniul QR si exporturi”), fiindcă un
   singur flag le guvernează pe amândouă. Fiind mai lungă decât o etichetă
   obișnuită de switch, trebuie să poată trece pe rândul următor — un nowrap ar
   împinge-o în afara coloanei, mai ales pe mobil. */
.dn-qr-switch .form-check-label {
  margin: 0;
  cursor: pointer;
  font-weight: 600;
  text-align: left;
  line-height: 1.25;
}

/* ---- Comutatoarele din Setari Sistem / Setari Export ----
   Erau widgetul `bootstrap-switch` 3.3.4, luat de pe un CDN: un plugin jQuery
   din era Bootstrap 3, care desena două dreptunghiuri lipite („ON" verde plin /
   „OFF" roșu plin) cu colțuri drepte și fontul lui. Într-o temă Bootstrap 5 nu
   semăna cu niciun alt comutator din aplicație — și aplicația are deja unul,
   `.dn-qr-switch` de mai sus, pe Preparatele Mele și pe Produse.

   Aici e același comutator nativ al temei, doar puțin mai mare (paginile astea
   n-au altceva pe rând) și cu starea scrisă lângă el. Verde/roșu e convenția
   deja stabilită de `.dn-qr-switch`: pornit/oprit se citește din culoare, fără
   să fie nevoie de etichetă. */
.cn-switch-setare {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0;
  min-height: 0;
}

.cn-switch-setare .form-check-input {
  /* `.form-check` aruncă inputul în stânga cu float și un padding de 2.5em;
     aici stă ca un rând compact, ca la .dn-qr-switch. */
  float: none;
  margin: 0;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.cn-switch-setare .form-check-input:checked {
  background-color: var(--cn-success, #2f7d4f);
  border-color: var(--cn-success, #2f7d4f);
}

/* Stins = roșul temei, cu bila albă. Gri-ul implicit al lui Bootstrap se
   confundă cu un comutator dezactivat, iar bila lui (rgba(0,0,0,.25)) abia se
   vede pe roșu. !important pe fundal: în dark mode _setari.php pune fundalul
   comutatoarelor tot cu !important. */
.cn-switch-setare .form-check-input:not(:checked) {
  background-color: var(--cn-danger, #dc2626) !important;
  border-color: var(--cn-danger, #dc2626) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Cuvântul de stare („Activat" / „Dezactivat"), rescris de JS la fiecare
   comutare. Nuanțele `-ink` sunt cele calibrate pentru text mic pe fundal
   deschis (7:1 și 8.8:1), nu cele de buton plin. */
.cn-switch-setare .form-check-label {
  margin: 0;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.25;
  color: var(--cn-success-ink, #286a43);
}

.cn-switch-setare .form-check-input:not(:checked) ~ .form-check-label {
  color: var(--cn-danger-ink, #b91c1c);
}

/* ---- Aceleași comutatoare, în tema închisă ----
   În dark mode `_setari.php` scrie `.form-check-input:checked` pe albastrul de
   accent și `.form-check-label` pe culoarea de text, amândouă cu `!important`.
   Fără blocul ăsta, verdele de deasupra pierdea la comutatoarele pornite (roșul
   supraviețuia doar fiindcă are și el `!important`), deci în tema închisă
   pornit/oprit ieșea albastru/roșu — două culori care nu formează o pereche.

   Se corectează pentru amândouă comutatoarele din aplicație, nu doar pentru cel
   nou: `.dn-qr-switch` (Preparatele Mele, Produse) pățea exact același lucru,
   iar convenția verde/roșu trebuie să se citească la fel în ambele teme. */
html[data-bs-theme="dark"] .cn-switch-setare .form-check-input:checked,
body[data-bs-theme="dark"] .cn-switch-setare .form-check-input:checked,
html[data-bs-theme="dark"] .dn-qr-switch .form-check-input:checked,
body[data-bs-theme="dark"] .dn-qr-switch .form-check-input:checked {
  background-color: var(--cn-success, #2f7d4f) !important;
  border-color: var(--cn-success, #2f7d4f) !important;
}

/* Nuanțele `-tint` sunt cele calibrate pentru text pe fundal închis. */
html[data-bs-theme="dark"] .cn-switch-setare .form-check-label,
body[data-bs-theme="dark"] .cn-switch-setare .form-check-label {
  color: var(--cn-success-tint, #97d8b2) !important;
}

html[data-bs-theme="dark"] .cn-switch-setare .form-check-input:not(:checked) ~ .form-check-label,
body[data-bs-theme="dark"] .cn-switch-setare .form-check-input:not(:checked) ~ .form-check-label {
  color: var(--cn-danger-tint, #fca5a5) !important;
}

/* ---- Chenar colorat pe acțiunile care scot rândul din listă ----
   Chenar peste fundalul neutru de .btn-light, ca acțiunea să se distingă fără
   să domine coloana. Fără media query — la fel pe desktop și pe mobil.
   !important: .btn-light din _setari.php impune `border` tot cu !important, dar
   _setari.php se emite la începutul paginii iar dn-mobile.css se încarcă după,
   deci la specificitate egală ordinea sursei ne dă câștig de cauză. */

/* Roșu pentru ștergere: blocul de selecție în masă de pe produse */
.dn-selectie-multipla,
.dn-selectie-multipla:hover,
.dn-selectie-multipla:focus {
  --bs-btn-border-color: var(--cn-danger, #dc2626);
  --bs-btn-hover-border-color: var(--cn-danger, #dc2626);
  border-color: var(--cn-danger, #dc2626) !important;
}

/* Chenar de culoarea iconiței pe restul opțiunilor din coloană, ca la arhivare:
   fiecare acțiune își poartă semnalul cromatic și pe contur, nu doar pe glifă.
   Țintele sunt modalul, respectiv o clasă pusă pe buton — „Etichetă și Valori"
   își ține href-ul pe <a>-ul interior, iar :has() e evitat în fișierul ăsta.
   Declarate ÎNAINTE de regulile galbene și roșii: butoanele de arhivare și de
   ștergere nu se suprapun cu astea, dar ordinea păstrează convenția din fișier
   (semnalele mai tari se declară ultimele). */
#example2 .dn-eticheta-valori,
#example2 .dn-eticheta-valori:hover,
#example2 .dn-eticheta-valori:focus {
  --bs-btn-border-color: var(--cn-text);
  --bs-btn-hover-border-color: var(--cn-text);
  border-color: var(--cn-text) !important;
}

#example2 .btn[data-bs-target*="schimbasubreteta_"],
#example2 .btn[data-bs-target*="schimbasubreteta_"]:hover,
#example2 .btn[data-bs-target*="schimbasubreteta_"]:focus,
#example2 .btn[data-bs-target*="schimbareteta_"],
#example2 .btn[data-bs-target*="schimbareteta_"]:hover,
#example2 .btn[data-bs-target*="schimbareteta_"]:focus {
  --bs-btn-border-color: var(--cn-primary-ink, #2563eb);
  --bs-btn-hover-border-color: var(--cn-primary-ink, #2563eb);
  border-color: var(--cn-primary-ink, #2563eb) !important;
}

/* .btn în selector: pe #atribute mai țintesc și 8 <img> (badge-urile picant,
   vegan, halal…), care deschid același modal și n-au ce face cu un chenar. */
#example2 .btn[data-bs-target*="atribute"],
#example2 .btn[data-bs-target*="atribute"]:hover,
#example2 .btn[data-bs-target*="atribute"]:focus {
  --bs-btn-border-color: var(--cn-success, #2f7d4f);
  --bs-btn-hover-border-color: var(--cn-success, #2f7d4f);
  border-color: var(--cn-success, #2f7d4f) !important;
}

/* Galben pentru arhivare: e reversibilă (rețeta se întoarce din Arhivă), deci
   nu merită semnalul de ștergere. Aceeași culoare ca iconițele lor.
   Declarată după regula roșie: blocul de selecție de pe rețete are ambele
   clase, iar la specificitate egală câștigă ultima. */
.dn-arhivare,
.dn-arhivare:hover,
.dn-arhivare:focus,
.dn-arhivare:active,
.dn-selectie-arhivare,
.dn-selectie-arhivare:hover,
.dn-selectie-arhivare:focus {
  --bs-btn-border-color: var(--cn-warning, #d94a2b);
  --bs-btn-hover-border-color: var(--cn-warning, #d94a2b);
  border-color: var(--cn-warning, #d94a2b) !important;
}

/* Selectat = se umple cu chiar culoarea acțiunii, nu cu albastrul generic:
   cardul spune atunci și „e bifat", și „ce urmează". Textul rămâne negru —
   pe galben, albul dă 1.75:1 (ilizibil), iar negrul 12:1.
   Declarat DUPĂ regula generală .dn-selectie-multipla.is-selected, care pune
   fundal albastru cu text alb; la specificitate egală câștigă ultima. */
.dn-selectie-arhivare.is-selected,
.dn-selectie-arhivare.is-selected:hover,
.dn-selectie-arhivare.is-selected:focus {
  background-color: var(--cn-warning, #d94a2b) !important;
  border-color: var(--cn-warning, #d94a2b) !important;
  color: #000 !important;
}

.dn-selectie-arhivare.is-selected .form-check-label,
.dn-selectie-arhivare.is-selected .form-check-label > i {
  color: #000 !important;
}

/* Bifa stă acum în afara cardului (o comută două carduri deodată), deci regula
   care o ascunde din interiorul lui .dn-selectie-multipla n-o mai prinde.
   Ascunsă cu opacity, nu display:none, ca să rămână focalizabilă de la tastatură. */
.dn-bifa-ascunsa {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

/* Cele două intenții își poartă culoarea acțiunii pe chenar: verde readuce
   rețeta în listă, roșu o șterge definitiv. Cardul apăsat se umple (.is-selected,
   pusă din JS doar pe intenția curentă), deci se vede care dintre ele se aplică. */
.dn-selectie-activare,
.dn-selectie-activare:hover,
.dn-selectie-activare:focus {
  --bs-btn-border-color: var(--cn-success, #2f7d4f);
  --bs-btn-hover-border-color: var(--cn-success, #2f7d4f);
  border-color: var(--cn-success, #2f7d4f) !important;
}

.dn-selectie-activare .form-check-label > i { color: var(--cn-success, #2f7d4f); }

.dn-selectie-stergere,
.dn-selectie-stergere:hover,
.dn-selectie-stergere:focus {
  --bs-btn-border-color: var(--cn-danger, #dc2626);
  --bs-btn-hover-border-color: var(--cn-danger, #dc2626);
  border-color: var(--cn-danger, #dc2626) !important;
}

.dn-selectie-stergere .form-check-label > i { color: var(--cn-danger, #dc2626); }

/* Umplut = chiar culoarea acțiunii, ca la .dn-selectie-arhivare: verde pentru
   activare, roșu pentru ștergere. Scrisul rămâne alb — pe verde dă 4.7:1, pe
   roșu 10:1, față de 4.5:1 și 2.1:1 cu negru. Vine DUPĂ regula generală
   .dn-selectie-multipla.is-selected (albastru cu text alb) — la specificitate
   egală câștigă ultima declarată. */
.dn-selectie-activare.is-selected,
.dn-selectie-activare.is-selected:hover,
.dn-selectie-activare.is-selected:focus {
  background-color: var(--cn-success, #2f7d4f) !important;
  border-color: var(--cn-success, #2f7d4f) !important;
  color: #fff !important;
}

.dn-selectie-stergere.is-selected,
.dn-selectie-stergere.is-selected:hover,
.dn-selectie-stergere.is-selected:focus {
  background-color: var(--cn-danger, #dc2626) !important;
  border-color: var(--cn-danger, #dc2626) !important;
  color: #fff !important;
}

.dn-selectie-activare.is-selected .form-check-label,
.dn-selectie-activare.is-selected .form-check-label > i,
.dn-selectie-stergere.is-selected .form-check-label,
.dn-selectie-stergere.is-selected .form-check-label > i {
  color: #fff !important;
}

/* Modificator neutru, pentru selecțiile care duc la MAI MULTE acțiuni: pe Arhiva
   Rețete aceeași bifă alimentează și „Activează Selecțiile" (verde), și „Șterge
   Selecțiile" (roșu). Un chenar roșu ar minți pe jumătate, unul galben la fel —
   deci cardul poartă albastrul de selecție, iar culoarea acțiunii o dau butoanele
   din bara de jos. Coincide și cu albastrul stării „selectat". */
.dn-selectie-neutra,
.dn-selectie-neutra:hover,
.dn-selectie-neutra:focus {
  --bs-btn-border-color: var(--cn-primary-ink, #2563eb);
  --bs-btn-hover-border-color: var(--cn-primary-ink, #2563eb);
  border-color: var(--cn-primary-ink, #2563eb) !important;
}

.dn-selectie-neutra .form-check-label > i {
  color: var(--cn-primary-ink, #2563eb);
}

/* Cât e selectat, cardul e albastru plin — iconița trebuie să treacă pe alb. */
.dn-selectie-neutra.is-selected .form-check-label > i {
  color: #fff !important;
}

/* Peste 768px tabelul redevine tabel: butonul de colapsare dispare și
   ingredientele se văd din nou, indiferent de starea lăsată în urmă pe
   mobil. Regula asta e plasa de siguranță a întregii secțiuni 5 — dacă
   JS-ul nu apucă să reacționeze la rotirea telefonului, tot ce rămâne
   deplasat e poza, nu conținutul. */
@media (min-width: 768px) {
  #example2 .dn-ing-sum {
    display: none;
  }

  #example2 .dn-ing-wrap {
    display: block !important;
    padding: 0;
  }

  /* Arhiva Rețete: pe desktop ingredientele NU mai au colapsarea lor pe celulă.
     Aveau una — butonul „Ingrediente (N)", construit de un script din
     `lista_retete_arhiva.php` — dar rândul a primit între timp cardul întreg al
     listei de preparate (săgeata `.cn-rand-toggle` cu linia de sumar, vezi
     `<style>`-ul din capul paginii). Două colapsări suprapuse pe același
     conținut nu-și mai spuneau nimic, așa că a rămas cea care strânge tot
     rândul, nu doar o celulă.

     Regulile care aprindeau aici `.dn-ing-sum` peste 768px au fost scoase odată
     cu scriptul. Ele făceau și un rău tăcut: sub prag `cardificaRand` împachetează
     celula în `.dn-ing-wrap` și NU desface împachetarea la întoarcere, deci după
     o simplă micșorare-și-mărire a ferestrei `.dn-ing-sum + .dn-ing-wrap`
     ascundea ingredientele pe desktop, fără niciun buton care să le mai
     deschidă. Acum se aplică regula generală de deasupra: peste 768px butonul de
     mobil dispare și învelișul se vede oricum.

     Spatiu egal sus si jos, plus continut aliniat la varf in toate coloanele:
     altfel celulele mai scurte lasau golul acumulat la baza cardului. Cardul
     închis își scrie singur padding-ul, mai strâns — vezi pagina. */
  #example2.dn-tabel-arhiva > tbody > tr > td {
    padding-top: 12px;
    padding-bottom: 12px;
    vertical-align: top;
  }

  /* dacă poza a rămas mutată (rotire în landscape, înainte ca JS-ul să
     o ducă înapoi), măcar să stea cuminte lângă nume în loc să întindă
     coloana; în mod normal selectorul nu găsește nimic pe desktop */
  #example2 td.dn-c-cap > .dn-poza {
    float: left;
    margin: 0 10px 6px 0;
    padding: 0;
    border: 0;
    background: none;
  }

  #example2 td.dn-c-cap > .dn-poza img {
    width: 84px !important;
    border-radius: 8px;
  }
}

/* Tabletă în portret: .col-sm-2 înseamnă 6 câmpuri pe rând, cu
   eticheta „Lipide Saturate" ruptă în trei rânduri. Trei pe rând
   încap. Peste 992px layout-ul rămâne exact cel de dinainte. */
@media (min-width: 576px) and (max-width: 991.98px) {
  form .row > .col-sm-2 {
    flex: 0 0 auto;
    width: 33.333333%;
  }
}

/* ---- Paginarea DataTables ----
   „Anteriorul" și „Următorul" stăteau lipite: Bootstrap suprapune bordurile
   butoanelor de paginare cu margin-left:-1px, ca să iasă un bloc continuu.
   Tema le desenează însă cu colțuri rotunjite, deci arătau ca două pastile
   lipite. Fără media query — la fel pe desktop și pe mobil. */
.dataTables_wrapper .pagination {
  gap: 6px;
}

.dataTables_wrapper .pagination .page-item:not(:first-child) .page-link {
  margin-left: 0;
}

/* ---- Pastilele de gramaj din arhiva de rețete ----
   Stau într-un .btn-group, care în Bootstrap le lipește: suprapune bordurile
   cu margin-left:-1px și taie colțurile interioare, ca să iasă un bloc
   continuu. Aici sunt însă două valori distincte — gramajul rețetei și cel al
   ingredientelor — deci se citesc mai bine despărțite. Fără media query. */
.dn-gramaje {
  gap: 6px;
}

.dn-gramaje > .btn {
  margin-left: 0 !important;
  border-radius: var(--ct-btn-border-radius, .25rem) !important;
}

/* ============================================================
   7. Sumar (sumar.php)
   ============================================================
   Fișierul are mai multe blocuri @media intercalate (mobil și
   desktop), deci secțiunea își deschide propriul bloc la coadă —
   e singurul loc în care e sigur că e vorba de mobil.

   Pagina n-are tabele: din secțiunile de mai sus îi folosește doar
   recuperările de lățime de la 4a. Rămân cartonașele cu cifre, care
   la 375px stau două pe rând. */
@media (max-width: 767.98px) {

  /* Cu paddingul și iconița de pe desktop, blocul cu valoarea rămânea
     la 78px, iar data de expirare a abonamentului („01-01-2027") se
     rupea în două rânduri — singura dintre cele șase valori. Strâns
     puțin peste tot (padding, iconiță, spațiul dintre ele), blocul
     ajunge la 98px și data încape pe un rând.
     Aspectul cartonașului (chenar, umbră, culori) e declarat în
     sumar.php: e la fel pe desktop, doar dimensiunile se schimbă.

     `.card` în plus în selector: blocul <style> al paginii vine după
     acest fișier în <head>, deci la specificitate egală ar câștiga el.
     Cartonașele sunt oricum `<div class="card kpi-mini">`. */
  .card.kpi-mini .card-body {
    padding: 10px;
    gap: 6px !important;
  }

  .card.kpi-mini .kpi-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .card.kpi-mini .kpi-value {
    font-size: 16px;
  }
}

/* ============================================================
   9. Cardul de sablon (lista_retete_adauga_importa.php)
   Coloanele nu sunt cele ale listei de retete — ingredientele stau
   in a patra celula si nu exista coloana de optiuni — deci cardul
   are propria asezare. Vezi cardificaSablon() din dn-mobile.js.
   ============================================================ */

@media (max-width: 767.98px) {

  #example2 > tbody > tr[data-sablon-nr] {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 14px rgba(0, 0, 0, .06);
  }

  /* Aceleasi sectiuni, in aceeasi ordine ca pe cardul de reteta: capul (poza,
     nume, gramaje) → „Ingrediente" → „Optiuni" → codul, in subsol. Celula
     gramajelor a ramas goala — gramajele urca in cap — si gazduieste acum
     optiunile; vezi `cardificaSablon()` din dn-mobile.js. */
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cap  { order: 1; }
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-ing  { order: 2; }
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-gram { order: 3; }
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cod  {
    order: 4;
    border-bottom: 0 !important;
  }

  /* capul cardului: poza in stanga, numele si butonul de import in dreapta */
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cap {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    row-gap: 0;
  }

  #example2 > tbody > tr[data-sablon-nr] .dn-poza-bloc,
  #example2 > tbody > tr[data-sablon-nr] .dn-poza {
    grid-row: 1 / span 99;
    width: 84px;
    max-width: 84px;
    height: auto;
  }

  /* eticheta „NUME" n-are ce spune deasupra numelui insusi */
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cap::before { display: none !important; }

  /* butoanele din capul cardului (numele, „Importa in cont") pe toata latimea */
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cap .btn {
    white-space: normal;
    text-align: left;
  }

  /* Codul sablonului calatoreste odata cu poza: in markup sunt in acelasi
     <center>, deci mutarea ii ia pe amandoi. Poza sus, codul sub ea — ca pe
     lista de retete. */
  #example2 > tbody > tr[data-sablon-nr] .dn-poza-bloc > .btn { order: 1; }
  #example2 > tbody > tr[data-sablon-nr] .dn-poza-bloc > img  { order: -1; }
  #example2 > tbody > tr[data-sablon-nr] .dn-poza-bloc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  #example2 > tbody > tr[data-sablon-nr] .dn-poza-bloc > br { display: none; }

  /* ingredientele: acelasi buton de colapsare ca la retete, deci celula isi
     preda paddingul invelisului. Eticheta din <thead> se ascunde — butonul o
     poarta deja, si e si mult mai scurta decat titlul coloanei. */
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-ing {
    padding: 0 !important;
  }
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-ing::before {
    display: none !important;
  }

  /* codul sablonului, discret, in subsolul cardului */
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cod {
    text-align: center;
  }
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cod::before { display: none !important; }

  /* ---- Capul cardului, ca pe lista de retete ----
     Numele e titlul cardului, nu o pastila intre altele: aceeasi talie si
     aceeasi greutate ca la `td.dn-c-cap > button.btn` de mai sus. Selectorul
     merge prin `.cn-nume-bloc` fiindca aici numele nu e copil direct al
     celulei, ci al invelisului care tine stiva „nume → gramaje". */
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cap .cn-nume-bloc > button.btn {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    white-space: normal;
  }

  /* `<br>`-urile tineau stiva cat timp in cap erau doua butoane. Acum sub nume
     vine un bloc, deci ele n-ar face decat rinduri goale. Distanta o da
     marginea blocului de gramaje, la fel ca pe cardul de reteta. */
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cap .cn-nume-bloc > br,
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cap .dn-s-gramaje > br {
    display: none;
  }

  /* Gramajele urcate in cap: aceleasi pastile mici ca pe cardul de reteta
     (`td.dn-c-cap`), aliniate la stanga sub nume. */
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cap .dn-s-gramaje {
    margin-top: 8px;
    text-align: left !important;
  }

  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cap .dn-s-gramaje > .btn-group {
    display: inline-flex;
    vertical-align: top;
    margin: 2px 4px 2px 0;
  }

  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-cap .dn-s-gramaje .btn {
    font-size: 11px;
    padding: 3px 7px;
  }

  /* ---- Sectiunea „Optiuni" ----
     Celula isi preda paddingul invelisului, ca la ingrediente, iar eticheta din
     <thead> se stinge: butonul de colapsare o poarta deja. Restul stilului vine
     din regulile comune `td.dn-c-opt`, clasa pe care JS-ul o pune pe celula. */
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-gram {
    padding: 0 !important;
  }
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-gram::before {
    display: none !important;
  }

  /* Butonul de import e invelit intr-un `<a>`, invers fata de optiunile
     retetei (`.btn > a`), deci latimea se da pe inveli.

     Fara plafon de latime: pe cardul de reteta optiunile tin toata celula
     (masurat: 309px la o fereastra de 420px), iar asta ramanea la 220px si se
     citea ca un buton de alt rang, desi e singura actiune a cardului. */
  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-gram .cn-importa {
    display: block;
    width: 100%;
    margin: 0;
  }

  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-gram .cn-importa > .btn {
    width: 100%;
    font-size: 12px;
  }

  #example2 > tbody > tr[data-sablon-nr] > td.dn-s-gram .dn-ing-wrap > br {
    display: none;
  }
}