/* * ==========================================
       * ISTORIC MODIFICĂRI CSS
       * ==========================================
       * v2.82: Fix eroare sintaxă JS.
       * v2.83: Modificare stiluri pentru persistența stării modalelor (display: none).
       * v2.85 (Curent): Actualizare UI pentru a treia opțiune la schimbare diriginte.
       */

      /* --- PALETĂ CALDĂ (crem + teracotă) --- */
      :root {
        --lc-ground: #F4EFE6;      /* fond crem cald */
        --lc-panel: #FDFBF6;       /* panouri / tabel */
        --lc-panel-2: #FBF6EC;     /* fundal subtil (header celule) */
        --lc-ink: #2C2620;         /* text principal */
        --lc-muted: #9A8E7C;       /* text secundar (taupe) */
        --lc-hair: #E7DECE;        /* borduri grid */
        --lc-hair-2: #E1D6C0;      /* borduri interne (contrast pe fundaluri calde) */
        --lc-accent: #C67B5C;      /* accent teracotă */
        --lc-accent-ink: #A75A3C;  /* accent teracotă (text) */
        --lc-accent-soft: #F1E0D8; /* teracotă pal (hover) */
        --lc-present: #5E8457;     /* prezent „1" — salvie */
        --lc-present-bg: #EBF0E2;  --lc-present-ink: #4A6E44;
        --lc-absent: #BE5A3E;      /* absent „0" — cărămiziu */
        --lc-absent-bg: #F6E3DB;   --lc-absent-ink: #9E4830;
        --lc-empty: #B4A796;       /* gol „-" */
        --lc-lock-red: #C0553B;    --lc-lock-green: #6E9463;
      }

      /* --- GENERAL STYLES --- */
      body { font-family: sans-serif; background-color: var(--lc-ground); height: 100vh; margin: 0; padding: 4px; overflow: hidden; box-sizing: border-box; }
      #root { height: 100%; display: flex; flex-direction: column; gap: 0.75rem; }

      /* Date input: click oriunde deschide calendarul */
      input[type="date"] { position: relative; cursor: pointer; }
      input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        width: 100%; height: 100%; opacity: 0; cursor: pointer;
      }
      input[type="date"]:disabled { cursor: not-allowed; }
      input[type="date"]:disabled::-webkit-calendar-picker-indicator { cursor: not-allowed; }

      ::-webkit-scrollbar { width: 8px; height: 8px; }
      ::-webkit-scrollbar-track { background: var(--lc-panel-2); }
      ::-webkit-scrollbar-thumb { background: #D9CDB8; border-radius: 4px; }
      ::-webkit-scrollbar-thumb:hover { background: var(--lc-muted); }
      
      /* --- TABLE STYLES --- */
      .table-container { 
          flex: 1 1 auto; 
          overflow: auto;
          background: var(--lc-panel);
          border: 1px solid var(--lc-hair);
          border-radius: 8px;
          user-select: none; 
          min-height: 0; 
      }
      .table-container.dragging-mode .input-cell { pointer-events: none; }
      table { border-collapse: separate; border-spacing: 0; width: max-content; }
      th, td { white-space: nowrap; text-align: center; border-right: 1px solid var(--lc-hair-2); border-bottom: 1px solid var(--lc-hair-2); padding: 0px; font-size: 12px; font-weight: 400; vertical-align: middle !important; height: 22px; color: var(--lc-ink); box-sizing: border-box; }
      th { background-color: var(--lc-panel-2); font-weight: 400; color: var(--lc-ink); position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--lc-hair); height: 30px; will-change: background-color; }
      
      /* --- STICKY COLUMNS --- */
      .sticky-col-left { position: sticky; background-color: var(--lc-panel); z-index: 40; border-right: 1px solid var(--lc-hair) !important; }
      th.sticky-col-left { z-index: 50; }
      .sticky-col-right { position: sticky; right: 0; background-color: var(--lc-panel); z-index: 40; border-left: 1px solid var(--lc-hair) !important; }
      th.sticky-col-right { z-index: 50; }
      th.header-sub { z-index: 29; top: 30px; height: 22px; border-bottom: 1px solid var(--lc-hair); }
      th.sticky-col-left.header-sub { z-index: 50; background-color: var(--lc-panel-2); }
      th.sticky-col-right.header-sub { z-index: 50; background-color: var(--lc-panel-2); }
      
      /* --- INTERACTION & STATES --- */
      tr:hover td { background-color: var(--lc-accent-soft) !important; }
      tr:hover td.sticky-col-left, tr:hover td.sticky-col-right { background-color: var(--lc-accent-soft) !important; }
      .weekend { background-color: var(--lc-panel-2); color: var(--lc-empty); pointer-events: none; }
      .holiday-locked { background-color: var(--lc-absent-bg); color: var(--lc-absent-ink); font-weight: 700; font-size: 16px; }
.ntr-tip-wrap { position: relative; display: inline-flex; }
.ntr-tip { position: absolute; right: 0; top: calc(100% + 6px); width: max-content; max-width: 280px; background: #1e293b; color: #fff; font-size: 11px; line-height: 1.45; font-weight: 500; padding: 7px 10px; border-radius: 7px; box-shadow: 0 6px 18px rgba(0,0,0,.20); white-space: normal; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-2px); transition: opacity .12s, transform .12s; z-index: 130; }
.ntr-tip-wrap:hover .ntr-tip { opacity: 1; visibility: visible; transform: translateY(0); }
      .outside-interval-locked { background-color: #F3ECDE; color: var(--lc-muted); font-weight: 700; font-size: 14px; background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(166,90,60,0.10) 4px, rgba(166,90,60,0.10) 8px); }
      .holiday-unlocked { background-color: var(--lc-panel); color: var(--lc-absent-ink); }
      .manual-locked { background-color: #EFE7D6; color: var(--lc-empty); font-weight: 700; font-size: 16px; }
      
      /* --- INPUTS --- */
      .input-cell { width: 100%; height: 100%; text-align: center; border: none; background: transparent; font-weight: 700; cursor: cell; padding: 0; margin: 0; display: block; line-height: 22px; font-size: 16px; }
      .input-cell:focus { outline: 2px solid var(--lc-accent); outline-offset: -2px; background-color: var(--lc-panel); cursor: text; user-select: text; z-index: 10; position: relative; }
      .type-select { width: 100%; height: 100%; border: none; background: transparent; text-align: center; font-size: 11px; font-weight: bold; color: var(--lc-accent-ink); cursor: pointer; appearance: none; -webkit-appearance: none; }
      .type-select:focus { outline: none; background-color: var(--lc-accent-soft); }

      /* --- CULORI VALORI / TOTALURI / LACĂTE (paletă caldă, scoped pe tabel) --- */
      .table-container .input-cell.text-emerald-600 { color: var(--lc-present) !important; }
      .table-container .input-cell.text-rose-500 { color: var(--lc-absent) !important; }
      .table-container .input-cell.text-slate-400 { color: var(--lc-empty) !important; }
      .table-container .bg-emerald-50 { background-color: var(--lc-present-bg) !important; }
      .table-container .text-emerald-700 { color: var(--lc-present-ink) !important; }
      .table-container .bg-rose-50 { background-color: var(--lc-absent-bg) !important; }
      .table-container .text-rose-700 { color: var(--lc-absent-ink) !important; }
      .table-container thead i.fa-lock { color: var(--lc-lock-red) !important; }
      .table-container thead i.fa-lock-open { color: var(--lc-lock-green) !important; }
      /* Fundal cald peste bg-white explicit (name col, TIP PRODUS, Total, header) */
      .table-container .bg-white { background-color: var(--lc-panel) !important; }
      .table-container thead .bg-white { background-color: var(--lc-panel-2) !important; }
      /* Borduri reci Tailwind → hairline cald */
      .table-container .border-slate-100,
      .table-container .border-slate-200,
      .table-container .border-slate-300 { border-color: var(--lc-hair) !important; }
      /* Separatoare vizibile pe zilele blocate/libere/în afara anului */
      .table-container .weekend,
      .table-container .holiday-locked,
      .table-container .holiday-unlocked,
      .table-container .manual-locked,
      .table-container .outside-interval-locked,
      .table-container .transfer-locked { border-color: #D8CBB2 !important; }

      /* ============ TOOLBAR (header-bar) + BARA JOS (footer-bar) — paletă caldă ============ */
      .header-bar, .footer-bar { background-color: var(--lc-panel) !important; border-color: var(--lc-hair) !important; }
      /* suprafețe albe interioare (selecturi, pill-uri, butoane) */
      .header-bar .bg-white, .footer-bar .bg-white { background-color: var(--lc-panel) !important; }
      .header-bar .bg-slate-100, .footer-bar .bg-slate-100 { background-color: var(--lc-panel-2) !important; }
      /* fundal uniform, discret, pe toate dropdown-urile din toolbar + butonul calendar */
      .header-bar select { background-color: var(--lc-panel-2) !important; color: var(--lc-ink) !important; }
      .header-bar select.bg-slate-50, .header-bar select.bg-indigo-50, .header-bar select.bg-emerald-50 { background-color: var(--lc-panel-2) !important; }
      .header-bar .hover\:bg-slate-200:hover, .footer-bar .hover\:bg-slate-200:hover { background-color: #F1E6D4 !important; }
      /* borduri reci → hairline cald */
      .header-bar .border-slate-100, .header-bar .border-slate-200, .header-bar .border-slate-300,
      .footer-bar .border-slate-100, .footer-bar .border-slate-200, .footer-bar .border-slate-300 { border-color: var(--lc-hair) !important; }
      /* text neutru rece → cald */
      .header-bar .text-slate-600, .header-bar .text-slate-700, .footer-bar .text-slate-600, .footer-bar .text-slate-700 { color: #6E6558 !important; }
      .header-bar .text-slate-500, .footer-bar .text-slate-500 { color: #7C7060 !important; }
      .header-bar .text-slate-400, .footer-bar .text-slate-400 { color: var(--lc-muted) !important; }
      .header-bar .text-slate-300, .footer-bar .text-slate-300 { color: #C9BCA8 !important; }
      /* indigo (accent principal) → teracotă */
      .header-bar .text-indigo-600, .footer-bar .text-indigo-600 { color: var(--lc-accent-ink) !important; }
      .header-bar .bg-indigo-50, .footer-bar .bg-indigo-50 { background-color: var(--lc-accent-soft) !important; }
      .header-bar .bg-indigo-600, .footer-bar .bg-indigo-600 { background-color: var(--lc-accent) !important; }
      .header-bar .hover\:bg-indigo-100:hover, .footer-bar .hover\:bg-indigo-100:hover { background-color: #E8CBB9 !important; }
      /* emerald (Tranziție, SALVAT-salvat) → salvie */
      .header-bar .text-emerald-600, .footer-bar .text-emerald-600 { color: var(--lc-present) !important; }
      .header-bar .bg-emerald-50, .footer-bar .bg-emerald-50 { background-color: var(--lc-present-bg) !important; }
      .header-bar .border-emerald-200, .header-bar .border-emerald-300,
      .footer-bar .border-emerald-200, .footer-bar .border-emerald-300 { border-color: #A9C39A !important; }
      .header-bar .hover\:bg-emerald-100:hover, .footer-bar .hover\:bg-emerald-100:hover { background-color: #DCE8CE !important; }
      /* rose (umple cu 0 / absențe) → cărămiziu */
      .header-bar .text-rose-600, .header-bar .text-rose-500, .footer-bar .text-rose-600, .footer-bar .text-rose-500 { color: var(--lc-absent) !important; }
      .header-bar .bg-rose-50, .footer-bar .bg-rose-50 { background-color: var(--lc-absent-bg) !important; }
      .header-bar .hover\:bg-rose-100:hover, .footer-bar .hover\:bg-rose-100:hover { background-color: #F0D3C8 !important; }
      /* blue (SALVAT-modificat / hamburger) → teracotă solid */
      .header-bar .bg-blue-600, .footer-bar .bg-blue-600 { background-color: var(--lc-accent) !important; border-color: var(--lc-accent) !important; }
      .header-bar .text-blue-600, .footer-bar .text-blue-600 { color: var(--lc-accent-ink) !important; }
      .header-bar .bg-blue-50, .footer-bar .bg-blue-50 { background-color: var(--lc-accent-soft) !important; }
      .header-bar .border-blue-200, .footer-bar .border-blue-200 { border-color: #E3C3B0 !important; }
      .header-bar .border-blue-600, .footer-bar .border-blue-600 { border-color: var(--lc-accent) !important; }
      .header-bar .hover\:bg-blue-700:hover, .footer-bar .hover\:bg-blue-700:hover { background-color: #B36A4C !important; }
      /* butoane completează/șterge — variantele -700 și bordurile neacoperite în faza 2 */
      .header-bar .text-indigo-700, .footer-bar .text-indigo-700 { color: var(--lc-accent-ink) !important; }
      .header-bar .text-emerald-700, .footer-bar .text-emerald-700 { color: var(--lc-present) !important; }
      .header-bar .text-rose-700, .footer-bar .text-rose-700 { color: var(--lc-absent) !important; }
      .header-bar .border-indigo-200, .footer-bar .border-indigo-200 { border-color: #E3C3B0 !important; }
      .header-bar .border-rose-200, .footer-bar .border-rose-200 { border-color: #EAC7B8 !important; }
      /* butoane acțiune coloană/rând: hover indigo → teracotă (coerent cu tabelul) */
      .col-action-btn:hover { color: var(--lc-accent-ink) !important; background-color: var(--lc-accent-soft) !important; }
      .row-action-btn:hover { color: var(--lc-accent-ink) !important; background-color: var(--lc-accent-soft) !important; }

      /* ============ MODALE (.modal-box) + backdrop — paletă caldă ============ */
      .modal-backdrop { background-color: rgba(44,38,32,0.55) !important; }
      /* Condica conturilor „doar condică" e blocată permanent și avea overlay propriu
         (bg-slate-200), care nu se potrivea cu NICIUNUL dintre cei doi selectori ai paletei —
         de aceea doar ea rămânea cu albastru/teal, deși pop-up-urile ei erau calde. Acum poartă
         `modal-backdrop`, iar aici i se repune fundalul OPAC (ascunde aplicația la care contul
         n-are acces) și cota z-120, peste bara principală. */
      .modal-backdrop.cond-lock { background-color: var(--lc-ground) !important; z-index: 120 !important; }
      .modal-box { background: var(--lc-panel) !important; }
      .modal-box h3, .modal-box h2, .modal-box h4 { color: var(--lc-ink) !important; }
      /* suprafețe neutre */
      .modal-box .bg-white { background-color: var(--lc-panel) !important; }
      .modal-box .bg-slate-50, .modal-box .bg-slate-100 { background-color: var(--lc-panel-2) !important; }
      .modal-box select { background-color: var(--lc-panel-2) !important; color: var(--lc-ink) !important; }
      .modal-box .border-slate-100, .modal-box .border-slate-200, .modal-box .border-slate-300 { border-color: var(--lc-hair) !important; }
      .modal-box .text-slate-700, .modal-box .text-slate-800, .modal-box .text-slate-900 { color: var(--lc-ink) !important; }
      .modal-box .text-slate-600 { color: #6E6558 !important; }
      .modal-box .text-slate-500 { color: #7C7060 !important; }
      .modal-box .text-slate-400 { color: var(--lc-muted) !important; }
      /* indigo (primar + accent) → teracotă */
      .modal-box .bg-indigo-600 { background-color: var(--lc-accent) !important; }
      .modal-box .hover\:bg-indigo-700:hover { background-color: #B36A4C !important; }
      .modal-box .text-indigo-600, .modal-box .text-indigo-700, .modal-box .text-indigo-800 { color: var(--lc-accent-ink) !important; }
      .modal-box .bg-indigo-50 { background-color: var(--lc-accent-soft) !important; }
      .modal-box .bg-indigo-100 { background-color: #EAD3C6 !important; }
      .modal-box .border-indigo-200, .modal-box .border-indigo-300 { border-color: #E3C3B0 !important; }
      .modal-box .hover\:bg-indigo-100:hover { background-color: #E8CBB9 !important; }
      .modal-box .hover\:bg-indigo-50:hover { background-color: var(--lc-accent-soft) !important; }
      /* emerald → salvie */
      .modal-box .bg-emerald-600 { background-color: var(--lc-present) !important; }
      .modal-box .hover\:bg-emerald-700:hover { background-color: #4A6E44 !important; }
      .modal-box .text-emerald-600, .modal-box .text-emerald-700 { color: var(--lc-present) !important; }
      .modal-box .bg-emerald-50, .modal-box .bg-emerald-100 { background-color: var(--lc-present-bg) !important; }
      .modal-box .border-emerald-200, .modal-box .border-emerald-300 { border-color: #A9C39A !important; }
      .modal-box .hover\:bg-emerald-100:hover { background-color: #DCE8CE !important; }
      /* red / rose → cărămiziu */
      .modal-box .bg-red-600, .modal-box .bg-rose-600 { background-color: var(--lc-absent) !important; }
      .modal-box .hover\:bg-red-700:hover, .modal-box .hover\:bg-rose-700:hover { background-color: #9E4830 !important; }
      .modal-box .text-red-600, .modal-box .text-rose-600, .modal-box .text-red-700, .modal-box .text-rose-700 { color: var(--lc-absent) !important; }
      .modal-box .bg-red-50, .modal-box .bg-rose-50 { background-color: var(--lc-absent-bg) !important; }
      .modal-box .border-red-200, .modal-box .border-rose-200, .modal-box .border-red-300, .modal-box .border-rose-300 { border-color: #EAC7B8 !important; }
      .modal-box .hover\:bg-red-100:hover, .modal-box .hover\:bg-rose-100:hover { background-color: #F0D3C8 !important; }
      /* blue → teracotă */
      .modal-box .bg-blue-600 { background-color: var(--lc-accent) !important; }
      .modal-box .hover\:bg-blue-700:hover { background-color: #B36A4C !important; }
      .modal-box .text-blue-600, .modal-box .text-blue-700 { color: var(--lc-accent-ink) !important; }
      .modal-box .bg-blue-50 { background-color: var(--lc-accent-soft) !important; }
      .modal-box .border-blue-200 { border-color: #E3C3B0 !important; }

      /* ===== MODALE „grup B": carduri bg-white în .modal-backdrop / overlay bg-black/* ===== */
      /* overlay bg-black/* → dark cald */
      [class*="bg-black/"] { background-color: rgba(44,38,32,0.5) !important; }
      /* suprafețe neutre */
      .modal-backdrop .bg-white, [class*="bg-black/"] .bg-white { background-color: var(--lc-panel) !important; }
      .modal-backdrop .bg-slate-50, .modal-backdrop .bg-slate-100,
      [class*="bg-black/"] .bg-slate-50, [class*="bg-black/"] .bg-slate-100 { background-color: var(--lc-panel-2) !important; }
      .modal-backdrop select, [class*="bg-black/"] select { background-color: var(--lc-panel-2) !important; color: var(--lc-ink) !important; }
      .modal-backdrop .text-slate-700, .modal-backdrop .text-slate-800, .modal-backdrop .text-slate-900,
      [class*="bg-black/"] .text-slate-700, [class*="bg-black/"] .text-slate-800, [class*="bg-black/"] .text-slate-900 { color: var(--lc-ink) !important; }
      .modal-backdrop .text-slate-600, [class*="bg-black/"] .text-slate-600 { color: #6E6558 !important; }
      .modal-backdrop .text-slate-500, [class*="bg-black/"] .text-slate-500 { color: #7C7060 !important; }
      .modal-backdrop .text-slate-400, [class*="bg-black/"] .text-slate-400 { color: var(--lc-muted) !important; }
      .modal-backdrop .border-slate-100, .modal-backdrop .border-slate-200, .modal-backdrop .border-slate-300,
      [class*="bg-black/"] .border-slate-100, [class*="bg-black/"] .border-slate-200, [class*="bg-black/"] .border-slate-300 { border-color: var(--lc-hair) !important; }
      /* indigo (primar + accent) → teracotă */
      .modal-backdrop .bg-indigo-600, [class*="bg-black/"] .bg-indigo-600 { background-color: var(--lc-accent) !important; }
      .modal-backdrop .hover\:bg-indigo-700:hover, [class*="bg-black/"] .hover\:bg-indigo-700:hover { background-color: #B36A4C !important; }
      .modal-backdrop .text-indigo-500, .modal-backdrop .text-indigo-600, .modal-backdrop .text-indigo-700, .modal-backdrop .text-indigo-800, .modal-backdrop .text-indigo-900,
      [class*="bg-black/"] .text-indigo-500, [class*="bg-black/"] .text-indigo-600, [class*="bg-black/"] .text-indigo-700, [class*="bg-black/"] .text-indigo-800, [class*="bg-black/"] .text-indigo-900 { color: var(--lc-accent-ink) !important; }
      .modal-backdrop .bg-indigo-50, [class*="bg-black/"] .bg-indigo-50 { background-color: var(--lc-accent-soft) !important; }
      .modal-backdrop .bg-indigo-100, [class*="bg-black/"] .bg-indigo-100 { background-color: #EAD3C6 !important; }
      .modal-backdrop .border-indigo-200, .modal-backdrop .border-indigo-300,
      [class*="bg-black/"] .border-indigo-200, [class*="bg-black/"] .border-indigo-300 { border-color: #E3C3B0 !important; }
      .modal-backdrop .hover\:bg-indigo-50:hover, [class*="bg-black/"] .hover\:bg-indigo-50:hover { background-color: var(--lc-accent-soft) !important; }
      .modal-backdrop .hover\:bg-indigo-100:hover, [class*="bg-black/"] .hover\:bg-indigo-100:hover { background-color: #E8CBB9 !important; }
      .modal-backdrop .hover\:border-indigo-400:hover, [class*="bg-black/"] .hover\:border-indigo-400:hover { border-color: var(--lc-accent) !important; }
      /* emerald → salvie */
      .modal-backdrop .bg-emerald-600, [class*="bg-black/"] .bg-emerald-600 { background-color: var(--lc-present) !important; }
      .modal-backdrop .text-emerald-500, .modal-backdrop .text-emerald-600, .modal-backdrop .text-emerald-700,
      [class*="bg-black/"] .text-emerald-500, [class*="bg-black/"] .text-emerald-600, [class*="bg-black/"] .text-emerald-700 { color: var(--lc-present) !important; }
      .modal-backdrop .bg-emerald-50, .modal-backdrop .bg-emerald-100,
      [class*="bg-black/"] .bg-emerald-50, [class*="bg-black/"] .bg-emerald-100 { background-color: var(--lc-present-bg) !important; }
      .modal-backdrop .border-emerald-200, .modal-backdrop .border-emerald-300,
      [class*="bg-black/"] .border-emerald-200, [class*="bg-black/"] .border-emerald-300 { border-color: #A9C39A !important; }
      /* red / rose → cărămiziu */
      .modal-backdrop .bg-red-600, .modal-backdrop .bg-rose-600, [class*="bg-black/"] .bg-red-600, [class*="bg-black/"] .bg-rose-600 { background-color: var(--lc-absent) !important; }
      .modal-backdrop .hover\:bg-red-700:hover, .modal-backdrop .hover\:bg-rose-700:hover,
      [class*="bg-black/"] .hover\:bg-red-700:hover, [class*="bg-black/"] .hover\:bg-rose-700:hover { background-color: #9E4830 !important; }
      .modal-backdrop .text-red-500, .modal-backdrop .text-red-600, .modal-backdrop .text-rose-500, .modal-backdrop .text-rose-600, .modal-backdrop .text-rose-700,
      [class*="bg-black/"] .text-red-500, [class*="bg-black/"] .text-red-600, [class*="bg-black/"] .text-rose-500, [class*="bg-black/"] .text-rose-600, [class*="bg-black/"] .text-rose-700 { color: var(--lc-absent) !important; }
      .modal-backdrop .bg-red-50, .modal-backdrop .bg-rose-50, [class*="bg-black/"] .bg-red-50, [class*="bg-black/"] .bg-rose-50 { background-color: var(--lc-absent-bg) !important; }
      /* gradient indigo→purple → teracotă→maro (butoane + antete din modale)
         ⚠️ Și pe `[class*="bg-black/"]`, ca restul stratului: modalele administrative folosesc
         overlay `bg-black/50`, nu `.modal-backdrop`, deci culorile plate li se calmau, dar
         gradientul rămânea violet (butoanele „Generează" din rapoarte / programare / backup). */
      .modal-backdrop .from-indigo-600,
      [class*="bg-black/"] .from-indigo-600 { --tw-gradient-from: #C67B5C var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(198 123 92 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
      .modal-backdrop .to-purple-600,
      [class*="bg-black/"] .to-purple-600 { --tw-gradient-to: #9E5A3C var(--tw-gradient-to-position) !important; }

      /* ===== BURSE: culorile celor 7 tipuri, pe paleta caldă =====
         Tailwind nu remapează chihlimbar/mov/roz/teal (vezi blocul de mai sus), deci tipurile
         de bursă ieșeau ca un curcubeu peste fundalul crem. Clasele astea sunt folosite DOAR
         prin TIP_META, deci nu ating alte elemente ale modalului (butoane, benzi, lacăt).
         cb = pastilă plină · hb = fundal chip · ht = text. */
      .bur-cb-merit { background-color: #C79A3E !important; }
      .bur-hb-merit { background-color: #F3E4C6 !important; }
      .bur-ht-merit { color: #7E5A1E !important; }
      .bur-cb-venit { background-color: var(--lc-accent) !important; }
      .bur-hb-venit { background-color: var(--lc-accent-soft) !important; }
      .bur-ht-venit { color: var(--lc-accent-ink) !important; }
      .bur-cb-orfan { background-color: #8C6A85 !important; }
      .bur-hb-orfan { background-color: #EADFE6 !important; }
      .bur-ht-orfan { color: #6E4A63 !important; }
      .bur-cb-plas { background-color: #A78A6B !important; }
      .bur-hb-plas { background-color: #EFE6DA !important; }
      .bur-ht-plas { color: #7A6550 !important; }
      .bur-cb-med { background-color: var(--lc-absent) !important; }
      .bur-hb-med { background-color: var(--lc-absent-bg) !important; }
      .bur-ht-med { color: var(--lc-absent-ink) !important; }
      .bur-cb-mame { background-color: #B36A62 !important; }
      .bur-hb-mame { background-color: #F4DFDA !important; }
      .bur-ht-mame { color: #8E4A45 !important; }
      .bur-cb-ces { background-color: var(--lc-present) !important; }
      .bur-hb-ces { background-color: var(--lc-present-bg) !important; }
      .bur-ht-ces { color: var(--lc-present-ink) !important; }

      /* --- ANIMATIONS & MODALS --- */
      .loading-curtain { position: fixed; inset: 0; background-color: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: curtainIn 0.3s ease-out; }
      @keyframes curtainIn { from { opacity: 0; } to { opacity: 1; } }
      .loading-curtain.fade-out { animation: curtainOut 0.25s ease-in forwards; }
      @keyframes curtainOut { from { opacity: 1; } to { opacity: 0; } }
      .loading-icon { font-size: 2.2rem; color: #A75A3C; animation: loadPulse 1.8s infinite ease-in-out; }
      @keyframes loadPulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.12); opacity: 1; } }
      .loading-bar-track { width: 220px; height: 4px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-top: 20px; }
      .loading-bar-fill { height: 100%; width: 35%; background: linear-gradient(90deg, #6366f1, #818cf8, #6366f1); border-radius: 4px; animation: loadBar 1.4s infinite ease-in-out; }
      @keyframes loadBar { 0% { transform: translateX(-100%); width: 35%; } 50% { width: 55%; } 100% { transform: translateX(350%); width: 35%; } }
      .loading-slow-msg { animation: fadeInSlow 0.5s ease-out forwards; opacity: 0; }
      .month-lock-bar { display:flex; align-items:center; gap:6px; padding:4px 10px; border-radius:10px; margin-bottom:2px; font-size:11px; font-weight:700; transition:all 0.3s; flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; min-height:28px; }
      .month-lock-bar.locked { background:linear-gradient(135deg,#F6E7D2,#EFD9BE); border:1px solid #D9A66B; color:#8A5A24; }
      .month-lock-bar.temp-access { background:linear-gradient(135deg,#EBF0E2,#DAE6CC); border:1px solid #A9C39A; color:var(--lc-present-ink); }
      .month-lock-bar.unlocked { display:none; }
      .month-lock-bar.can-lock { background:linear-gradient(135deg,#FBF6EC,#F1E0D8); border:1px solid #E3C3B0; color:var(--lc-accent-ink); }
      .table-locked-overlay { position:relative; }
      .table-locked-overlay::after { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(251,191,36,0.06); pointer-events:all; z-index:55; border-radius:8px; }
      .table-locked-overlay .input-cell { pointer-events:none !important; cursor:not-allowed !important; }
      .table-locked-overlay .sticky-col-left, .table-locked-overlay .sticky-col-right { z-index:1 !important; }
      .table-locked-overlay thead th { z-index:2 !important; }
      .table-locked-overlay .type-select { pointer-events:none !important; }
      .table-locked-overlay .col-action-btn, .table-locked-overlay .row-action-btn, .table-locked-overlay .transfer-icon { pointer-events:none !important; opacity:0.3 !important; }
      .action-btns-desktop button:disabled, .action-btns-mobile button:disabled { opacity:0.3 !important; cursor:not-allowed !important; pointer-events:none !important; }
      .lock-btn { padding:2px 8px; border-radius:6px; font-size:10px; font-weight:700; border:1px solid; cursor:pointer; transition:all 0.2s; }
      .lock-btn:hover { transform:scale(1.05); }
      .temp-access-form { display:inline-flex; align-items:center; gap:4px; background:white; border:1px solid #d1d5db; border-radius:8px; padding:2px 6px; white-space:nowrap; flex-shrink:0; }
      @keyframes fadeInSlow { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
      .loading-steps { display: flex; gap: 8px; margin-top: 16px; }
      .loading-step { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; transition: all 0.4s ease; }
      .loading-step.active { background: #6366f1; transform: scale(1.3); }
      .loading-step.done { background: #10b981; }

      .modal-backdrop { position: fixed; inset: 0; background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(3px); z-index: 110; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease-out; }
      .modal-box { background: white; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); padding: 24px; width: 90%; max-width: 420px; transform: scale(0.95); animation: popIn 0.25s forwards; }
      .modal-box-large { max-width: 500px; padding: 16px; position: relative; max-height: 92vh; overflow-y: auto; }
      /* Wizardul de tranziție: înălțime fixă, cu antet și bară de acțiuni lipite — derulează
         doar corpul, ca butoanele „Înapoi"/„Aplică" să fie mereu vizibile. Regulile de mai
         jos bat media query-urile generice ale modalelor (care ar readăuga padding/scroll). */
      .modal-box.tw-modal { padding: 0 !important; max-width: 1080px !important; width: 96vw !important; height: 88vh !important; overflow: hidden !important; }
      @media (max-width: 767px) { .modal-box.tw-modal { width: 100% !important; height: 94vh !important; } }
      /* Ecran SCUND (telefon rotit, fereastră joasă): modalele mari umplu ecranul. Regula nu
         depinde de șasiul mobil — pe un ecran de ~500px înălțime, un card centrat cu margini și
         colțuri rotunjite pierde ~15% din puținul disponibil. Zonele de siguranță se pun pe
         laterale: în orizontal, notch-ul e la stânga sau la dreapta, nu sus. */
      @media (max-height: 620px) {
        .modal-backdrop { padding: 0 !important; }
        .modal-shell { position: fixed !important; inset: 0 !important; width: 100% !important;
          max-width: none !important; height: 100% !important; max-height: 100% !important;
          margin: 0 !important; border-radius: 0 !important;
          padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
      }
      /* ---- Câmp de numerotare cu săgeți sus/jos (C.A.: „Nr. înreg." și „Hotărârea nr.") ----
         Săgețile stau LÂNGĂ cifră, nu în ea: câmpul și butoanele par o singură piesă, dar zona
         de scriere rămâne întreagă (săgețile native `type=number` ocupau jumătate din lățime). */
      /* Înălțime FIXĂ, ca să stea pe linie cu câmpurile vecine (`py-1.5 text-[13px]`);
         `.sm` = varianta pentru rândul dens al hotărârii. */
      .ca-nr { display: inline-flex; align-items: stretch; height: 34px; flex: none;
        border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; background: #fff; }
      .ca-nr input { width: 42px; border: none; border-radius: 0; background: transparent;
        text-align: center; font-weight: 700; font-size: 13px; padding: 0 2px;
        font-variant-numeric: tabular-nums; color: #334155; }
      .ca-nr input:focus { outline: none; background: #eef2ff; }
      .ca-nrst { display: flex; flex-direction: column; border-left: 1px solid #cbd5e1; }
      .ca-nrb { width: 20px; height: 50%; padding: 0; border: none; background: #fff;
        color: #64748b; cursor: pointer; font-size: 8px; line-height: 1; display: flex;
        align-items: center; justify-content: center; }
      .ca-nrb:first-child { border-bottom: 1px solid #cbd5e1; }
      .ca-nrb:hover { background: #f1f5f9; color: #334155; }
      .ca-nrb.off { color: #cbd5e1; cursor: default; background: #fff; }
      .ca-nr.sm { height: 26px; }
      .ca-nr.sm input { width: 34px; font-size: 12px; }
      .ca-nr.sm .ca-nrb { width: 18px; }
      /* Pe telefon săgețile primesc o țintă de atins mai mare. */
      body.mobile-ui .ca-nr { height: 38px; }
      body.mobile-ui .ca-nr input { width: 48px; }
      body.mobile-ui .ca-nrb { width: 28px; font-size: 9px; }
      body.mobile-ui .ca-nr.sm { height: 30px; }
      @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
      @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
      @keyframes burseLockPulse { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } 50% { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 32px rgba(245,158,11,0.35); } }
      @keyframes fadeScaleIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
      @keyframes toastProgress { from { width: 100%; } to { width: 0%; } }

      .col-header-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding-top: 2px; padding-bottom: 2px; }
      .col-action-btn { opacity: 0.5; transition: all 0.2s; font-size: 9px; margin-top: 0px; cursor: pointer; color: #64748b; padding: 1px; border-radius: 4px; line-height: 1; }
      .col-action-btn:hover { color: #6366f1; background-color: #e0e7ff; opacity: 1; }
      .row-action-btn { opacity: 0.2; transition: all 0.2s; cursor: pointer; font-size: 11px; padding: 2px; border-radius: 4px; }
      .row-action-btn:hover { color: #6366f1; background-color: #e0e7ff; opacity: 1; }
      tr:hover .row-action-btn { opacity: 0.6; }
      tr:hover .row-action-btn:hover { opacity: 1; }
      
      /* --- CALENDAR WIDGET --- */
      .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; user-select: none; }
      .cal-grid-5 { grid-template-columns: repeat(5, 1fr) !important; }
      .cal-day.zone-outside:not(.selected) { background-color: #e0e7ff !important; color: #4338ca; }
      .cal-day.zone-viii:not(.selected) { background-color: #fef3c7 !important; color: #92651a; }
      .cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; font-size: 13px; font-weight: 500; height: 32px; width: 32px; margin: 0 auto; transition: background-color 0.1s, transform 0.1s; }
      .cal-day:hover { background-color: #f1f5f9; transform: scale(1.1); }
      .cal-day.selected { background-color: #fee2e2; color: #dc2626; border: 2px solid #dc2626; }
      .cal-day.weekend { color: #94a3b8; pointer-events: none; }
      
      .selector-overlay { position: absolute; top: 60px; left: 0; right: 0; bottom: 0; background: var(--lc-panel); z-index: 20; padding: 10px; display: flex; flex-direction: column; border-radius: 0 0 16px 16px; animation: fadeIn 0.15s; }
      .selector-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
      .selector-item { padding: 10px 16px; text-align: center; border-radius: 8px; cursor: pointer; font-size: 15px; color: #6E6558; transition: all 0.2s; border-bottom: 1px solid var(--lc-hair-2); }
      .selector-item:hover { background-color: var(--lc-panel-2); color: var(--lc-accent-ink); padding-left: 24px; }
      .selector-item.active { background-color: var(--lc-accent-soft); color: var(--lc-accent-ink); font-weight: bold; border: none; }
      
      /* --- TRANSFER v3.0 --- */
      .transfer-locked { background-color: #EFE7D6; color: var(--lc-empty); font-weight: 700; font-size: 14px; }
      .transfer-icon { opacity: 0.3; transition: all 0.2s; cursor: pointer; font-size: 10px; padding: 1px 2px; border-radius: 3px; display: inline-flex; align-items: center; }
      /* Nume elevi: full pe desktop, short ascuns */
      .student-name-short { display: none; }
      .student-name-full { display: inline; }
      .transfer-icon:hover { opacity: 1; }
      .rename-pencil { cursor: pointer; padding: 1px 3px; }
      .rename-pencil:hover { opacity: 1; }
      .transfer-icon.active-out { opacity: 1; color: #ef4444; }
      .transfer-icon.active-withdrawal { opacity: 1; color: #e11d48; }
      .transfer-icon.active-in { opacity: 1; color: #22c55e; }
      .transfer-icon.active-local { opacity: 1; color: #f59e0b; }
      .transfer-icon.active-withdrawal { opacity: 1; color: #e11d48; }
      tr:hover .transfer-icon { opacity: 0.7; }
      @keyframes shake { 0%,100%{transform:translateX(0)} 10%,30%,50%,70%,90%{transform:translateX(-4px)} 20%,40%,60%,80%{transform:translateX(4px)} }
      .shake-error { animation: shake 0.5s ease-in-out; }
      .error-border { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239,68,68,0.3); }
      .student-tooltip { position: relative; }
      .student-tooltip .tooltip-text { visibility: hidden; background-color: #1e293b; color: #fff; text-align: center; border-radius: 6px; padding: 6px 10px; position: absolute; z-index: 999; bottom: 125%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
      .student-tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }
      
      /* Crosshair: evidențiere coloană */
      table thead th[data-col], table tbody td[data-col], table tfoot td[data-col] { transition-property: none !important; }
      
      /* ==========================================
       * DARK MODE
       * ========================================== */
      body.dark-mode { background-color: #0f172a !important; color: #e2e8f0; }
      body.dark-mode .bg-white, body.dark-mode .bg-slate-50 { background-color: #1e293b !important; color: #e2e8f0 !important; }
      html.dark-mode { background-color: #0f172a !important; }
      body.dark-mode .table-container { background: #0f172a !important; border-color: #475569 !important; }
      body.dark-mode .selector-overlay { background: #1e293b !important; }
      body.dark-mode .sticky-col-left { background-color: #0f172a !important; }
      body.dark-mode .sticky-col-right { background-color: #0f172a !important; }
      body.dark-mode th.sticky-col-left.header-sub, body.dark-mode th.sticky-col-right.header-sub { background-color: #1e293b !important; }
      body.dark-mode .holiday-unlocked { background-color: #1e293b !important; }
      body.dark-mode .modal-box { background: #1e293b !important; border-color: #475569 !important; color: #e2e8f0 !important; }
      body.dark-mode .bg-slate-100 { background-color: #334155 !important; }
      body.dark-mode .border-slate-200, body.dark-mode .border-slate-300 { border-color: #475569 !important; }
      body.dark-mode .text-slate-700, body.dark-mode .text-slate-800, body.dark-mode .text-slate-900 { color: #e2e8f0 !important; }
      body.dark-mode .text-slate-500, body.dark-mode .text-slate-600 { color: #94a3b8 !important; }
      body.dark-mode .text-slate-400 { color: #64748b !important; }
      body.dark-mode table { border-color: #475569; }
      body.dark-mode thead { background-color: #1e293b !important; }
      body.dark-mode thead th { background-color: #1e293b !important; color: #cbd5e1 !important; border-color: #475569 !important; }
      body.dark-mode tbody td { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; }
      body.dark-mode tbody tr:hover td { background-color: #1e293b !important; }
      body.dark-mode tbody tr:hover .sticky-col-left { background-color: #1e293b !important; }
      body.dark-mode tfoot td { background-color: #1e293b !important; color: #cbd5e1 !important; border-color: #475569 !important; }
      body.dark-mode input[type="text"], body.dark-mode input[type="date"], body.dark-mode select, body.dark-mode textarea { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important; }
      body.dark-mode .modal-backdrop { background-color: rgba(0,0,0,0.7) !important; }
      body.dark-mode .loading-curtain { background-color: rgba(15,23,42,0.97) !important; }
      body.dark-mode .loading-bar-track { background: #334155; }
      body.dark-mode .loading-step { background: #475569; }
      body.dark-mode .loading-step.done { background: #10b981; }
      body.dark-mode .bg-indigo-50, body.dark-mode .bg-emerald-50, body.dark-mode .bg-amber-50, body.dark-mode .bg-red-50, body.dark-mode .bg-rose-50 { background-color: #1e293b !important; }
      body.dark-mode .shadow-sm, body.dark-mode .shadow-md { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }
      body.dark-mode ::-webkit-scrollbar { background: #1e293b; }
      body.dark-mode ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
      /* ===== ANIMAȚIE TRANZIȚIE TABEL ===== */
      .table-fade { animation: tableFadeIn 0.18s ease-out; }
      @keyframes tableFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
      /* Highlight celulă activă la navigare cu săgeți */
      td[data-student]:focus-within { outline: 2px solid #6366f1; outline-offset: -2px; background: #eef2ff !important; z-index: 2; }
      body.dark-mode td[data-student]:focus-within { outline-color: #818cf8; background: #1e1b4b !important; }
      /* Ziua de azi — fără highlight (păstrăm clasa pentru compatibilitate, dar fără stil) */
      .today-col-header { background: transparent !important; color: inherit !important; border-radius: 0 !important; font-weight: inherit !important; }
      .today-col-cell { background: transparent !important; }
      body.dark-mode .today-col-header { background: transparent !important; color: inherit !important; }
      body.dark-mode .today-col-cell { background: transparent !important; }
      /* Animație completare 100% */
      @keyframes celebrate { 0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,0);} 30%{box-shadow:0 0 0 6px rgba(99,102,241,0.3);} 60%{box-shadow:0 0 0 3px rgba(16,185,129,0.2);} }
      .table-complete { animation: celebrate 1.2s ease-out; outline: 2px solid #10b981; outline-offset: 2px; border-radius: 4px; }
      /* ===== TOOLTIP SHORTCUT ===== */
      .has-shortcut { position: relative; }
      .has-shortcut .shortcut-tip { display:none; position:fixed; background:#1e293b; color:#e2e8f0; font-size:10px; padding:3px 7px; border-radius:5px; white-space:nowrap; pointer-events:none; z-index:99999; font-family:monospace; letter-spacing:0.03em; transform:translateX(-50%); }
      .has-shortcut .shortcut-tip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:4px solid transparent; border-top-color:#1e293b; }
      .has-shortcut:hover .shortcut-tip { display:block; }
      /* ===== BUTOANE UNDO/REDO ===== */
      /* Paint mode indicator */
      .paint-mode-btn { display:flex; align-items:center; gap:4px; padding:3px 8px; border-radius:6px; border:1.5px solid; font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; user-select:none; white-space:nowrap; }
      .paint-mode-btn.mode-1 { background:#dcfce7; border-color:#86efac; color:#15803d; }
      .paint-mode-btn.mode-0 { background:#fee2e2; border-color:#fca5a5; color:#dc2626; }
      .paint-mode-btn.mode-empty { background:#f1f5f9; border-color:#cbd5e1; color:#475569; }
      body.dark-mode .paint-mode-btn.mode-1 { background:#14532d; border-color:#166534; color:#86efac; }
      body.dark-mode .paint-mode-btn.mode-0 { background:#450a0a; border-color:#7f1d1d; color:#fca5a5; }
      body.dark-mode .paint-mode-btn.mode-empty { background:#1e293b; border-color:#475569; color:#94a3b8; }
      .undo-redo-btn { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; border:1px solid #e2e8f0; background:#f8fafc; color:#64748b; cursor:pointer; transition:all 0.15s; font-size:13px; }
      .undo-redo-btn:hover:not(:disabled) { background:#e0e7ff; border-color:#a5b4fc; color:#A75A3C; }
      .undo-redo-btn:disabled { opacity:0.3; cursor:not-allowed; }
      body.dark-mode .undo-redo-btn { background:#1e293b; border-color:#475569; color:#94a3b8; }
      body.dark-mode .undo-redo-btn:hover:not(:disabled) { background:#312e81; border-color:#6366f1; color:#a5b4fc; }
      /* ===== DARK MODE ÎMBUNĂTĂȚIT ===== */
      body.dark-mode .footer-bar { background:#0f172a !important; border-color:#334155 !important; }
      body.dark-mode .text-indigo-600 { color:#818cf8 !important; }
      body.dark-mode .text-indigo-700 { color:#a5b4fc !important; }
      body.dark-mode .bg-indigo-50 { background-color:#1e1b4b !important; }
      body.dark-mode .border-indigo-200 { border-color:#3730a3 !important; }
      body.dark-mode .text-emerald-600 { color:#34d399 !important; }
      body.dark-mode .bg-amber-50 { background-color:#1c1408 !important; }
      body.dark-mode .text-amber-700 { color:#fbbf24 !important; }
      body.dark-mode .border-amber-200 { border-color:#92400e !important; }
      body.dark-mode select option { background:#1e293b; color:#e2e8f0; }
      body.dark-mode .modal-box h3 { color:#e2e8f0 !important; }
      body.dark-mode .modal-box p, body.dark-mode .modal-box label { color:#94a3b8 !important; }
      body.dark-mode button:not([class*="bg-indigo"]):not([class*="bg-rose"]):not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-amber"]):not(.undo-redo-btn) { --tw-ring-color: #6366f1; }
      /* Dark mode: mobile elements */
      body.dark-mode .mobile-product-tabs button { background: #1e293b; border-color: #475569; color: #94a3b8; }
      body.dark-mode .mobile-product-tabs button.active-tab { background: #312e81; border-color: #6366f1; color: #a5b4fc; }
      body.dark-mode .mobile-class-nav button { background: #1e293b; border-color: #475569; color: #94a3b8; }
      body.dark-mode .mobile-school-toggle { background: #1e293b !important; border-color: #475569 !important; color: #94a3b8 !important; }

      /* ==========================================
       * MOBILE RESPONSIVE
       * ========================================== */
      
      /* Telefon: sub 768px */
      @media (max-width: 767px) {
        body { padding: 2px; font-size: 13px; }
        #root { gap: 0.25rem; }

        /* HEADER: compact grid pe mobil */
        .header-bar {
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          gap: 4px !important;
          padding: 6px !important;
          border-radius: 10px !important;
          align-items: center !important;
        }
        .header-bar > div {
          min-width: 0 !important;
          flex: unset !important;
          width: 100% !important;
        }
        /* Școala, Clasa, Produs: full width (span 2 coloane) */
        .header-bar > div:nth-child(n+3) {
          grid-column: 1 / -1 !important;
        }
        .header-bar select, .header-bar input[type="number"] {
          font-size: 13px !important;
          padding: 4px 6px !important;
          height: 32px !important;
        }
        .header-bar label {
          font-size: 9px !important;
          white-space: nowrap;
        }

        /* Școala: ascunsă implicit pe mobil, toggle cu buton */
        .mobile-school-row { display: none !important; }
        .mobile-school-row.mobile-school-visible { display: flex !important; grid-column: 1 / -1 !important; }

        /* Produse: tabs pe mobil */
        .mobile-product-tabs { display: flex !important; grid-column: 1 / -1 !important; }
        .mobile-product-tabs button {
          flex: 1; height: 32px; border-radius: 8px; font-size: 11px; font-weight: 700;
          border: 1.5px solid #e2e8f0; background: #f8fafc; color: #64748b;
          display: flex; align-items: center; justify-content: center; gap: 4px;
          transition: all 0.15s ease; position: relative;
        }
        .mobile-product-tabs button.active-tab {
          background: #eef2ff; border-color: #818cf8; color: #4338ca;
          box-shadow: 0 1px 3px rgba(99,102,241,0.2);
        }
        .mobile-product-tabs .tab-completion {
          position: absolute; bottom: 1px; left: 8px; right: 8px; height: 2px;
          border-radius: 2px; background: #e2e8f0; overflow: hidden;
        }
        .mobile-product-tabs .tab-completion-fill {
          height: 100%; border-radius: 2px; transition: width 0.5s ease;
        }
        .desktop-product-select { display: none !important; }

        /* Navigare clase: prev/next */
        .mobile-class-nav { display: flex !important; }
        .mobile-class-nav button {
          width: 28px; height: 32px; border-radius: 6px; border: 1.5px solid #e2e8f0;
          background: #f8fafc; color: #64748b; font-size: 12px;
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
        }
        .mobile-class-nav button:active { background: #e0e7ff; border-color: #818cf8; color: #4338ca; }
        .mobile-class-nav button:disabled { opacity: 0.3; }

        /* Buton toggle școală */
        .mobile-school-toggle { display: flex !important; }

        /* Footer: simplificat pe mobil */
        .footer-pdf-group { display: none !important; }
        .footer-bar {
          flex-wrap: nowrap !important;
          gap: 4px !important;
          padding: 4px 6px !important;
          min-height: auto !important;
          height: 44px !important;
          justify-content: space-between !important;
          overflow: hidden !important;
        }
        .footer-bar > div:first-child { flex: 1; min-width: 0; }
        .footer-bar .cloud-save-text { display: none !important; }
        .footer-totals-section { flex-shrink: 1 !important; gap: 6px !important; padding: 0 6px !important; }
        .footer-total-label { display: none !important; }
        .footer-total-label-short { display: inline !important; }

        /* Swipe indicator */
        .swipe-indicator {
          position: fixed; top: 50%; z-index: 9999; pointer-events: none;
          background: rgba(99,102,241,0.9); color: white; border-radius: 50%;
          width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
          font-size: 16px; opacity: 0; transition: opacity 0.15s;
          transform: translateY(-50%);
        }
        .swipe-indicator.swipe-left { left: 8px; }
        .swipe-indicator.swipe-right { right: 8px; }
        .swipe-indicator.swipe-visible { opacity: 1; }

        /* TABEL */
        .table-container { border-radius: 4px; }
        th, td { font-size: 11px; height: 26px; padding: 0 1px; }
        th { height: 32px; }
        .input-cell { font-size: 13px; line-height: 26px; min-width: 24px; }
        .type-select { font-size: 10px; }

        /* Sticky left: coloana Nr.crt ascunsă, coloana Nume sticky + compactă */
        th.sticky-col-left[style*="left:0"], th.sticky-col-left[style*="left: 0"],
        td.sticky-col-left[style*="left:0"], td.sticky-col-left[style*="left: 0"] {
          /* Nr. crt. column - ascunsă pe mobil */
        }
        .sticky-col-left {
          position: sticky !important;
          z-index: 11 !important;
          left: 0 !important;
        }
        /* th.sticky-col-left: trebuie z-index > 30 (th normal) ca header-ul să nu treacă în spatele coloanelor zi */
        th.sticky-col-left {
          z-index: 50 !important;
        }
        th.sticky-col-left.header-sub {
          z-index: 50 !important;
        }
        /* Sub-header (TIP PRODUS): pe mobil th e 32px înălțime */
        th.header-sub {
          top: 32px !important;
        }
        /* Forțăm lățimea coloanei cu numele */
        td.sticky-col-left[style*="left: 24"], td.sticky-col-left[style*="left:24"],
        th.sticky-col-left[style*="left: 24"], th.sticky-col-left[style*="left:24"] {
          left: 0 !important;
        }
        /* Dezactivează sticky pe coloanele din dreapta (totaluri) — DOAR în vechiul mod mobil
           („Mod desktop" pe ecran îngust). În șasiul nou totalurile rămân sticky, cu
           offseturile `right` inline calculate de aplicație pe lățimile reale. */
        body:not(.mobile-ui) .sticky-col-right { position: static !important; right: auto !important; }
        body:not(.mobile-ui) th.sticky-col-right { position: static !important; right: auto !important; }

        /* Ascunde Nr. crt. pe mobil */
        .nr-crt-col { display: none !important; }

        /* FOOTER: compact pe mobil — regulile principale sunt mai sus (footer simplificat) */
        .footer-bar .pdf-btn-text { display: none !important; }
        .footer-bar .toggle-label { display: none !important; }
        .footer-bar .toggle-label-keep { font-size: 9px !important; }
        /* Cloud save: mai mic */
        .footer-bar .text-2xl { font-size: 1.1rem !important; }

        /* MODALE: full-width pe mobil */
        .modal-box { width: 96% !important; max-width: none !important; padding: 14px !important; max-height: 90vh; overflow-y: auto; }
        .modal-box-large { max-width: none !important; padding: 12px !important; }

        /* TOAST */
        .toast-mobile { left: 8px !important; right: 8px !important; transform: none !important; }

        /* Calendar widget */
        .cal-day { height: 28px; width: 28px; font-size: 12px; }

        /* Scrollbar mai mică */
        ::-webkit-scrollbar { width: 4px; height: 4px; }

        /* Transfer icons: mai mari pe touch */
        .transfer-icon { font-size: 14px; padding: 4px; }
        .row-action-btn { font-size: 14px; padding: 4px; opacity: 0.5; }
        .col-action-btn { font-size: 11px; padding: 2px; }

        /* Override Tailwind min-width pe mobil */
        .min-w-\[200px\], .min-w-\[180px\], .min-w-\[270px\] { min-width: 0 !important; }

        /* Ascunde elemente non-esențiale pe mobil */
        .hide-mobile { display: none !important; }

        /* Cloud save: doar icona, fără text */
        .cloud-save-text { display: none !important; }

        /* Nume elevi: afișăm numele complet pe mobil */
        .student-name-full { display: inline !important; }
        .student-name-short { display: none !important; }

        /* Butoane completare automată: o singură linie sub produs */
        .action-btns-desktop { display: none !important; }
        .action-btns-mobile { display: flex !important; }

        /* Weekend: doar icona */
        .weekend-text { display: none !important; }
      }

      /* Telefon mic portrait: sub 480px */
      @media (max-width: 479px) {
        .header-bar {
          padding: 4px !important;
          gap: 3px !important;
        }
        .header-bar select, .header-bar input[type="number"] {
          font-size: 12px !important;
          height: 30px !important;
          padding: 3px 5px !important;
        }
        /* Tabel: celule și mai compacte */
        th, td { font-size: 10px; height: 24px; }
        th { height: 28px; }
        .input-cell { font-size: 12px; line-height: 24px; min-width: 22px; }
        th.header-sub { top: 28px !important; }

        /* Mobile elements: și mai compacte pe telefon mic */
        .mobile-product-tabs button { height: 28px; font-size: 10px; border-radius: 6px; }
        .mobile-class-nav button { width: 24px; height: 28px; font-size: 11px; }
        .mobile-school-toggle { width: 28px !important; height: 28px !important; }

        /* Footer: minimal */
        .footer-bar {
          gap: 2px !important;
          padding: 2px 3px !important;
          height: 40px !important;
        }
        .footer-bar button { 
          padding-left: 4px !important; 
          padding-right: 4px !important;
          height: 26px !important;
          font-size: 10px !important;
        }
        .footer-bar .text-2xl { font-size: 1rem !important; }
        .footer-bar .text-xs, .footer-bar .text-\[11px\] { font-size: 9px !important; }
      }

      /* Tablet: 768px - 1024px */
      @media (min-width: 768px) and (max-width: 1024px) {
        .header-bar {
          flex-wrap: wrap !important;
          gap: 6px !important;
        }
        /* Sticky right: dezactivat și pe tablet */
        .sticky-col-right { position: static !important; right: auto !important; }
        th.sticky-col-right { position: static !important; right: auto !important; }

        /* Footer: 1-2 rânduri max pe tablet */
        .footer-bar {
          flex-wrap: wrap !important;
          gap: 3px !important;
          min-height: auto !important;
          padding: 3px 4px !important;
        }
        .footer-bar .toggle-label { font-size: 9px !important; }
        .footer-bar .pdf-btn-text { font-size: 9px !important; }
        .modal-box { width: 94% !important; }
      }

      /* Laptopuri cu rezoluție mică (1025-1550px): footerul nu încape pe un rând.
         Păstrăm toate butoanele dar ascundem textele — rămân iconițele + tooltip-urile. */
      @media (min-width: 1025px) {
        .footer-bar .footer-total-label { display: none !important; }
        .footer-bar .footer-total-label-short { display: inline !important; }
        .footer-bar { gap: 2px !important; }
        .footer-bar .footer-totals-section { padding-left: 4px !important; padding-right: 4px !important; gap: 6px !important; }
        .footer-bar .footer-pdf-group button,
        .footer-bar .footer-pdf-group .rounded-r { padding-left: 8px !important; padding-right: 8px !important; }
        /* Toggle-ul Simultane: ascundem cuvântul, rămâne doar bulina cu numărul. */
        .footer-bar .sim-word { display: none !important; }
      }
      /* Laptopuri 1025-1550px (ex. 1366x768): bara de jos nu încape cu etichetele text.
         Butoanele rămân TOATE, dar afișează doar iconița — numele apare la hover (title).
         Se aplică TUTUROR rolurilor (înainte era doar pentru admin, de aici scroll-ul la
         diriginți/responsabili). Peste 1550px etichetele reapar, ca înainte. */
      @media (min-width: 1025px) and (max-width: 1550px) {
        .footer-bar .pdf-btn-text { display: none !important; }
        .footer-bar .toggle-label { display: none !important; }
        /* Laptopurile scolii au 1366px, iar antetul nu incape: se stringeau tocmai
           selectoarele pe care se lucreaza (clasa, produsul). Numele dirigintelui si
           cuvintul „Tranzitie” sint singurele lucruri din bara care se pot citi la fel de
           bine dintr-un tooltip — amindoua au deja `title`, deci nu se pierde nimic. */
        .header-bar .diriginte-name { display: none !important; }
        .header-bar .diriginte-badge { padding-left: 7px !important; padding-right: 7px !important; }
        .header-bar .tranzitie-text { display: none !important; }
        .header-bar .tranzitie-text + i, .header-bar .fa-forward { margin-right: 0 !important; }
      }
      /* Plasă de siguranță: dacă footerul tot nu încape, devine derulabil orizontal
         în loc să taie butoanele (overflow-hidden din clasa Tailwind e suprascris). */
      @media (min-width: 1025px) {
        .footer-bar { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin; }
      }

      /* Header: etichetele AN/LUNA/ȘCOALA/CLASA/PRODUS.
         - implicit (mobil + general): arătăm TEXTUL, ascundem iconița. */
      .header-bar .hdr-icon { display: none; }
      .header-bar .hdr-label { display: inline; }

      /* Selectorul de produs. Numele lui hotaraste ce se scrie in toata foaia, deci trebuie
         citit dintr-o privire. Pe laptopurile scolii (1366x768) se stringea pina ramineau doua
         litere — „Bi" — iar la un antet mai incarcat raminea doar sageata.
         ⚠️ Latimea sta AICI, in foaia de stil, nu intr-o clasa utilitara: `min-w-[180px]` din
         markup nu tinea, iar cu `flex-basis: 0` un <select> se lasa strins pina la latimea lui
         minima, care e cit incape o litera. `flex: 0 0 auto` il scoate din impartirea spatiului:
         cind antetul se ingusteaza, se string Scoala si Clasa (au text lung, deci au de unde),
         iar daca tot nu incape, rindul se rupe — antetul are flex-wrap. */
      .header-bar .desktop-product-select {
        flex: 0 0 auto !important;
        min-width: 182px !important;
      }
      .header-bar .desktop-product-select select {
        min-width: 152px;
        text-overflow: ellipsis;
      }
      /* Pe desktop: înlocuim textul cu iconița (câștigăm spațiu). Iconița are tooltip. */
      @media (min-width: 1025px) {
        .header-bar label:has(.hdr-icon) {
          display: inline-flex;
          align-items: center;
          align-self: center;
          height: auto;
          margin: 0;
          line-height: 0;
        }
        .header-bar .hdr-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;          /* mai mari, se văd clar */
          color: #475569;           /* slate-600: contrast bun, nu șterse */
          line-height: 1;
          min-width: 18px;
          height: 30px;             /* aceeași înălțime ca dropdown-urile → centrate */
        }
        .header-bar .hdr-label { display: none; }
        /* Weekend/Reset (desktop): doar iconițe, una lângă alta, butoane pătrate. */
        .header-bar .weekend-reset-group .weekend-text { display: none !important; }
        .header-bar .weekend-reset-group button {
          width: 30px;
          height: 30px;
          padding: 0 !important;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        .header-bar .weekend-reset-group button i { font-size: 14px; }
        .header-bar .weekend-reset-group > div { margin-top: 0 !important; }
        /* Simplificare efecte: aspect unitar, mai liniștit. Scoatem umbrele și
           uniformizăm bordurile butoanelor mici din header. Culoarea rămâne pe
           iconiță (verde=adaugă, roșu=șterge), deci sensul se păstrează. */
        .header-bar button.shadow-sm,
        .header-bar .action-btns-desktop button,
        .header-bar .weekend-reset-group button {
          box-shadow: none !important;
          border-color: #e2e8f0 !important;  /* slate-200 uniform */
        }
        .header-bar button.shadow-sm:hover,
        .header-bar .action-btns-desktop button:hover,
        .header-bar .weekend-reset-group button:hover {
          border-color: #cbd5e1 !important;  /* slate-300 la hover, discret */
        }
        /* Badge diriginte: discret, lângă clasă. Text trunchiat dacă e prea lung. */
        .header-bar .diriginte-badge {
          background: #f1f5f9;       /* slate-100 */
          max-width: 280px;
          min-width: 0;
        }
        .header-bar .diriginte-name {
          font-size: 12px;
          color: #475569;            /* slate-600 */
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        /* Auto-copy: pe desktop rămâne doar bagheta magică (text ascuns), ca să facem
           loc dirigintelui. Detaliile apar la hover prin tooltip. */
        .header-bar .autocopy-text { display: none !important; }
      }

      /* Contrast iconițe footer: gri deschis (slate-400/500) pare șters/blurat la dimensiuni
         mici. Le facem mai închise și puțin mai mari, DOAR pe cele gri în stare normală.
         La hover butoanele își păstrează culoarea proprie (indigo/teal/roșu etc.). */
      .footer-bar button i.fas,
      .footer-bar label i.fas {
        font-size: 16px !important;
      }
      .footer-bar button:not(:hover) i.fas.text-slate-400,
      .footer-bar button:not(:hover) i.fas.text-slate-500,
      .footer-bar button:not(:hover).text-slate-400 i.fas,
      .footer-bar button:not(:hover).text-slate-500 i.fas,
      .footer-bar label:not(:hover) i.fas.text-slate-400,
      .footer-bar label:not(:hover) i.fas.text-slate-500 {
        color: #475569 !important; /* slate-600: mult mai lizibil pe alb */
      }

      /* Touch devices: bigger tap targets */
      @media (hover: none) and (pointer: coarse) {
        .input-cell { min-width: 32px; min-height: 32px; }
        button { min-height: 32px; }
        select { min-height: 36px; }
        .transfer-icon { padding: 6px; font-size: 14px; }
        .row-action-btn { opacity: 0.5; padding: 4px; }
      }

      /* ==========================================
       * MOBILE LANDSCAPE — max spațiu pentru tabel
       * Detectare prin JS: body.landscape-compact
       * (media queries nu funcționează fiabil în iframe GAS)
       * ========================================== */
      /* === SWITCH DESKTOP → MOBILE ELEMENTS === */
      body.landscape-compact .desktop-product-select { display: none !important; }
      body.landscape-compact .mobile-product-tabs { display: flex !important; }
      body.landscape-compact .mobile-class-nav { display: flex !important; }
      body.landscape-compact .hamburger-btn { display: flex !important; }
      body.landscape-compact .hide-mobile { display: none !important; }
      body.landscape-compact .action-btns-desktop { display: none !important; }
      body.landscape-compact .action-btns-mobile { display: none !important; }
      body.landscape-compact .footer-pdf-group { display: none !important; }
      body.landscape-compact .cloud-save-text { display: none !important; }
      body.landscape-compact .footer-total-label { display: none !important; }
      body.landscape-compact .footer-total-label-short { display: inline !important; }
      body.landscape-compact .nr-crt-col { display: none !important; }
      body.landscape-compact .weekend-text { display: none !important; }

      /* HEADER: o singură linie */
      body.landscape-compact .header-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 3px 6px !important;
        border-radius: 8px !important;
        align-items: center !important;
        height: 34px !important; min-height: 34px !important; max-height: 34px !important;
        overflow: visible !important;
      }
      body.landscape-compact .header-bar > div {
        min-width: 0 !important; flex: 0 1 auto !important;
        width: auto !important; grid-column: unset !important;
      }
      body.landscape-compact .header-bar > div:nth-child(n+3) { grid-column: unset !important; }
      body.landscape-compact .header-bar label { display: none !important; }
      body.landscape-compact .header-bar select,
      body.landscape-compact .header-bar input[type="number"] {
        font-size: 11px !important; height: 26px !important;
        padding: 2px 4px !important; min-height: 26px !important;
      }
      body.landscape-compact .header-bar select { max-width: 120px !important; }
      body.landscape-compact .header-bar input[type="number"] { width: 52px !important; }
      body.landscape-compact .mobile-school-row { display: none !important; }
      body.landscape-compact .mobile-school-toggle { display: none !important; }

      /* Tabs produse: inline compacte */
      body.landscape-compact .mobile-product-tabs {
        gap: 2px !important; flex-shrink: 1 !important;
        min-width: 0 !important; grid-column: unset !important;
      }
      body.landscape-compact .mobile-product-tabs button {
        height: 24px !important; font-size: 9px !important;
        padding: 0 6px !important; border-radius: 4px !important;
        min-width: 0 !important; flex: 0 1 auto !important;
        gap: 2px !important; min-height: 24px !important;
      }
      body.landscape-compact .mobile-product-tabs button i { display: none !important; }
      body.landscape-compact .mobile-product-tabs .tab-completion { display: none !important; }

      /* Navigare clase compactă */
      body.landscape-compact .mobile-class-nav button {
        width: 22px !important; height: 24px !important;
        font-size: 10px !important; min-height: 22px !important;
      }

      /* Butoane header compacte */
      body.landscape-compact .header-bar button {
        min-height: 24px !important; height: 24px !important; padding: 0 4px !important;
      }
      body.landscape-compact .header-bar .bg-green-50 { display: none !important; }
      body.landscape-compact .completion-mini-bars { display: none !important; }

      /* TABEL: rânduri compacte */
      body.landscape-compact th { height: 24px !important; font-size: 10px !important; }
      body.landscape-compact td { height: 22px !important; }
      body.landscape-compact .input-cell { min-height: 22px !important; line-height: 22px !important; font-size: 12px !important; min-width: 24px !important; }
      body.landscape-compact th.header-sub { top: 24px !important; }
      body.landscape-compact th.sticky-col-left { z-index: 50 !important; }
      body.landscape-compact th.sticky-col-left.header-sub { z-index: 50 !important; }
      body.landscape-compact .sticky-col-left { max-width: 90px !important; }
      body.landscape-compact .student-name-full { display: none !important; }
      body.landscape-compact .student-name-short { display: inline !important; }

      /* FOOTER: ultra-compact */
      body.landscape-compact .footer-bar {
        height: 30px !important; min-height: 30px !important; max-height: 30px !important;
        padding: 2px 4px !important; gap: 4px !important;
        flex-wrap: nowrap !important; justify-content: space-between !important;
        overflow: hidden !important;
      }
      body.landscape-compact .footer-bar .text-2xl { font-size: 0.9rem !important; }
      body.landscape-compact .footer-totals-section { flex-shrink: 1 !important; gap: 4px !important; padding: 0 4px !important; }
      body.landscape-compact .footer-bar button,
      body.landscape-compact .footer-bar .hamburger-btn {
        height: 24px !important; min-height: 24px !important;
        font-size: 10px !important; padding: 0 6px !important;
      }
      body.landscape-compact #root { gap: 1px !important; }

      /* Touch targets reduced in landscape */
      body.landscape-compact .input-cell { min-width: 28px; min-height: 22px; }
      body.landscape-compact button { min-height: unset; }
      body.landscape-compact select { min-height: unset; }

      /* Meniu hamburger mobil */
      .mobile-menu-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9999;
      }
      .mobile-menu-panel {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000;
        background: white; border-radius: 16px 16px 0 0; padding: 16px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        max-height: 70vh; overflow-y: auto;
        animation: slideUp 0.2s ease-out;
      }
      @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
      .mobile-menu-btn {
        display: flex; align-items: center; gap: 10px; width: 100%;
        padding: 12px; border-radius: 10px; border: 1px solid #e2e8f0;
        background: white; font-size: 14px; font-weight: 600; color: #334155;
        text-align: left; transition: background 0.15s;
      }
      .mobile-menu-btn:active { background: #f1f5f9; }
      .mobile-menu-btn i { width: 20px; text-align: center; }
      .mobile-menu-divider { height: 1px; background: #e2e8f0; margin: 8px 0; }
      .hamburger-btn { display: none; }
      .mobile-product-tabs { display: none; }
      .mobile-class-nav { display: none; }
      .mobile-school-toggle { display: none; }
      .swipe-indicator { display: none; }
      .footer-total-label-short { display: none; }
      @media (max-width: 767px) {
        .hamburger-btn { display: flex !important; }
        .desktop-product-select { display: none !important; }
        .footer-desktop-section { display: none !important; }
      }
    
/* Date input dd/mm/yyyy wrapper */
.date-dmy-wrap{position:relative;display:inline-block;width:100%}
.date-dmy-wrap input[type="date"]{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;width:100%;height:100%}
.date-dmy-wrap .date-dmy-display{pointer-events:none;z-index:1}

@keyframes fadeScaleIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}

      /* === Vista burse — crosshair hover pe AMBELE tabele === */
      .bursa-row td.idx-cell { color: #4338ca !important; font-weight: 700; }
      /* Hover ROW — pe toate celulele, inclusiv cele cu bifă */
      .bst-sel tbody tr:hover td,
      .bst-att tbody tr:hover td { background-color: rgba(99,102,241,0.08); }
      /* Hover COLUMN — pe toate celulele, inclusiv cele cu bifă */
      .bst-sel td.bhov,
      .bst-att td.bhov { background-color: rgba(99,102,241,0.08); }
      .bst-sel th.bhov,
      .bst-att th.bhov { background-color: rgba(99,102,241,0.10); }
      .bst-sel tfoot td.bhov,
      .bst-att tfoot td.bhov { background-color: rgba(99,102,241,0.08); }
      /* Intersection (rând + coloană) */
      .bst-sel tbody tr:hover td.bhov,
      .bst-att tbody tr:hover td.bhov { background-color: rgba(99,102,241,0.14); }
      /* === Absențe — crosshair hover rând + coloană === */
      .abst tbody tr:hover td:not(.abs-lk) { background-color: #eef2f7 !important; }
      .abst tbody tr:hover td.abs-lk { background-color: #f1f5f9 !important; }
      .abst td.ahov { background-color: #eef2f7 !important; }
      .abst th.ahov { background-color: #e2e8f0 !important; }
      .abst tbody tr:hover td.ahov { background-color: #dde5ef !important; }
      .abst td.ahov input:not(:disabled) { background-color: transparent !important; }
      .abst tbody tr:hover td:not(.abs-lk) input:not(:disabled) { background-color: transparent !important; }
      .abst td.abs-total, .abst th.abs-total { cursor: help; }
      .abst td.abs-revizuit { background-color: #FAEEDA !important; cursor: help; }
      .abst td.abs-revizuit input { background-color: transparent !important; }
      .abst tbody tr:hover td.abs-revizuit { background-color: #FAC775 !important; }
      .abst td.abs-flash { animation: absFlashPulse 0.55s ease-in-out 3; }
      .abst td.abs-flash input { background-color: transparent !important; }
      @keyframes absFlashPulse { 0%,100% { background-color: transparent; } 50% { background-color: #FAC775; box-shadow: inset 0 0 0 2px #BA7517; } }
      .abst input[type=number]{ -moz-appearance: textfield; appearance: textfield; text-align: center; padding-left: 0; padding-right: 0; }
      .abst input[type=number]::-webkit-outer-spin-button,
      .abst input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
      .abst td{ text-align: center; }

      /* ============================================================
         ȘASIUL MOBIL (RUNDA 131)
         Clasa `mobile-ui` se pune pe <body> din JS (useIsMobile), nu dintr-un media query:
         în iframe-ul Apps Script media queries nu sunt fiabile, iar userul poate cere
         „Mod desktop". Tot ce nu se poate folosi cu degetul se ascunde AICI, într-un singur
         loc, în loc de `hide-mobile` pus bucată cu bucată.
         ============================================================ */
      /* Vechiul antet, vechea bară de jos și meniul hamburger dispar complet — taburile de produs
         se randează acum în MobileHeader, pe ACELAȘI rând cu navigarea clasei. */
      body.mobile-ui .header-bar,
      body.mobile-ui .footer-bar,
      body.mobile-ui .mobile-menu-panel { display: none !important; }
      /* Adeverințe — tabelul de valori (RUNDA 258): pe telefon, cu patru ani în tabel, derularea
         laterală ascundea numele disciplinei și nu mai știai ce completezi. Coloana ei rămâne pe
         loc; fundalul e opac și dat explicit per context, altfel celulele derulate se văd sub ea. */
      body.mobile-ui .adv-tbl .adv-stk { position: sticky; left: 0; z-index: 2; background: #fff; }
      body.mobile-ui .adv-tbl .adv-stk2 { position: sticky; left: 26px; z-index: 2; background: #fff; }
      body.mobile-ui .adv-tbl thead .adv-stk { background: #f1f5f9; }
      body.mobile-ui .adv-tbl tr.adv-jos .adv-stk { background: #f8fafc; }
      body.mobile-ui .adv-tbl .adv-stk2,
      body.mobile-ui .adv-tbl .adv-stk[colspan] { box-shadow: 6px 0 6px -6px rgba(0,0,0,.12); }
      /* ⚠️ Regula globală `th,td{white-space:nowrap;text-align:center}` făcea coloana disciplinei
         cât cel mai lung nume ținut pe UN rând („Matematică în societatea cunoașterii - opțional"),
         iar pe telefon nu mai rămânea nimic pentru anii de studiu. Aici numele se rupe pe rânduri
         și se aliniază la stânga, ca lățimea să fie a noastră, nu a celui mai lung text. */
      body.mobile-ui .adv-tbl td.adv-stk2 { white-space: normal; text-align: left;
        font-size: 10.5px; line-height: 1.25; max-width: 116px; }
      body.mobile-ui .adv-tbl th.adv-stk { text-align: left; }
      body.mobile-ui .adv-tbl th, body.mobile-ui .adv-tbl td { padding: 2px 4px; height: auto; }
      body.mobile-ui .adv-tbl th.adv-an { white-space: normal; font-size: 10px; line-height: 1.15; }
      body.mobile-ui .adv-tbl td.adv-val input { font-size: 11px; padding: 1px 2px; }
      /* Banda de blocare a lunii mânca un rând întreg pentru un mesaj care se citește o dată.
         Pe telefon rămâne doar lacătul din antet; textul complet apare la atingere. */
      body.mobile-ui .month-lock-bar { display: none !important; }
      body.mobile-ui .mlock-scope { display: none !important; }
      /* În modul „Ziua" tabelul rămâne montat, dar ascuns — nu rescriem randarea lui. */
      body.zi-mode .table-container { display: none !important; }
      .mb-lock {
        flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid #fde68a;
        background: #fef3c7; color: #b45309; display: flex; align-items: center;
        justify-content: center; font-size: 13px;
      }
      /* Modalele ocupă TOT ecranul pe telefon (azi rămâneau 4% pe margini și 10vh sus/jos).
         `position:fixed` le scoate din centrarea overlay-ului, indiferent ce padding are el. */
      body.mobile-ui .modal-box {
        position: fixed !important; inset: 0 !important; width: 100% !important;
        max-width: none !important; height: 100% !important; max-height: 100% !important;
        margin: 0 !important; border-radius: 0 !important; padding: 12px !important;
        overflow-y: auto; padding-top: calc(12px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
      }
      /* Condica, Portofoliul și Bursele NU folosesc `.modal-box` (au containere Tailwind proprii,
         cu `maxWidth` inline), iar `.modal-box` nu li se poate pune: ar trage după el stilurile de
         desktop. Clasa asta nu face nimic pe calculator — doar aici. Fără `overflow-y`: toate au
         deja o zonă internă care derulează, iar două bare de derulare ar fi mai rău decât nimic. */
      body.mobile-ui .modal-shell {
        position: fixed !important; inset: 0 !important; width: 100% !important;
        max-width: none !important; height: 100% !important; max-height: 100% !important;
        margin: 0 !important; border-radius: 0 !important;
        padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
      }
      /* ⚠️ Zona de siguranță pentru notch se compensează O SINGURĂ dată, aici, pe cutia
         modalului. Modalele care poartă ȘI `modal-box`, ȘI `modal-shell` o primeau de două ori
         (regula de mai sus + cea de la `.modal-box`), iar în ECRAN COMPLET insetul e ~90px →
         bandă goală de ~190px deasupra antetului. */
      body.mobile-ui .modal-box.modal-shell {
        padding-top: 12px !important; padding-bottom: 12px !important;
      }
      /* Tabul „Componență și șablon" pe două coloane. Coloana dreaptă (șablon + ordine) e mai
         lată: acolo stau texte lungi de temeiuri, care altfel se rup pe 3 rânduri, în timp ce
         stânga are doar nume. Sub 900px revine la o singură coloană. */
      .ca-set2 { display: grid; gap: 12px; align-items: start; grid-template-columns: 1fr; }
      @media (min-width: 900px) {
        .ca-set2 { grid-template-columns: minmax(320px, 0.78fr) minmax(420px, 1.22fr); }
      }
      /* ── Consiliul de Administrație pe telefon ──
         Modalul e deja pe tot ecranul (modal-shell+flex). Aici se rezolvă doar ce se strivește
         la 360px: taburile derulează lateral în loc să se rupă, rândurile cu multe butoane se
         înfășoară, iar câmpurile își păstrează lățimea utilă. */
      body.mobile-ui .ca-tabs {
        overflow-x: auto; -webkit-overflow-scrolling: touch; padding-left: 10px; padding-right: 10px;
      }
      body.mobile-ui .ca-tabs::-webkit-scrollbar { display: none; }
      body.mobile-ui .ca-tabs button { padding-left: 10px; padding-right: 10px; font-size: 11.5px; }
      /* Zona derulantă a modalului: padding mai mic, ca să rămână lățime pentru conținut. */
      body.mobile-ui .ca-body { padding-left: 10px !important; padding-right: 10px !important; }
      /* Rândurile de listă (ședințe, hotărâri, registru): butoanele trec pe rândul lor. */
      body.mobile-ui .ca-row { flex-wrap: wrap; row-gap: 6px; }
      body.mobile-ui .ca-row .ca-act { width: 100%; justify-content: flex-end; }
      /* Grilele de persoane / bife: o singură coloană în portret. */
      body.mobile-ui .ca-grid { grid-template-columns: 1fr !important; }
      /* Câmpul de căutare din registru nu mai stă lipit de marginea dreaptă. */
      body.mobile-ui .ca-search { width: 100% !important; margin-left: 0 !important; }
      /* Butonul unic de salvare, lat cât ecranul — ținta principală a formularului. */
      body.mobile-ui .ca-save { width: 100%; justify-content: center; }
      /* Rotit: lățimea devine abundentă, înălțimea e resursa rară. */
      body.mobile-ui.mb-land .ca-grid { grid-template-columns: 1fr 1fr !important; }
      body.mobile-ui.mb-land .ca-row .ca-act { width: auto; }
      body.mobile-ui.mb-land .ca-tabs button { padding-top: 6px; padding-bottom: 6px; }
      body.mobile-ui.mb-land .ca-save { width: auto; }

      /* Elementele fără sens pe telefon (transfer/retragere pe rând, lacăt pe zi, creion pe coloană) */
      body.mobile-ui .row-action-btn,
      body.mobile-ui .col-action-btn,
      body.mobile-ui .rename-pencil,
      body.mobile-ui .transfer-icon { display: none !important; }
      /* Totalurile revin înghețate pe mobil — azi erau dezactivate și trebuia derulat până la capăt */
      body.mobile-ui .sticky-col-right { position: sticky !important; }

      /* Antetul și bara stau ÎN fluxul lui #root (flex column, height:100%) — nu `fixed`.
         Așa nu pot acoperi tabelul și nu trebuie compensate cu padding. */
      .mb-head {
        flex: none; background: #fff; border-radius: 12px; padding: 6px 8px;
        padding-top: calc(6px + env(safe-area-inset-top));
        box-shadow: 0 1px 3px rgba(15,23,42,.06);
      }
      body.mobile-ui #root { gap: 6px; }
      /* Taburile de produs, compacte: iconiță + bară de completitudine; eticheta doar pe cel activ. */
      .mb-ptabs { display: flex; gap: 4px; flex: 1; min-width: 0; }
      .mb-ptab {
        min-width: 0; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px;
        padding: 4px 2px 3px; display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 3px; min-height: 34px; color: #64748b;
      }
      .mb-ptab.on { background: #ecfdf5; border-color: #5eead4; color: #0f766e; }
      .mb-ptab:disabled { opacity: .5; }
      .mb-ptab-in { display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 11px; }
      .mb-ptab-in i { font-size: 12px; }
      .mb-ptab-lbl { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .mb-ptab-auto { font-size: 7.5px; background: #f1e0d8; color: #534ab7; padding: 0 3px; border-radius: 99px; }
      .mb-ptab-bar { display: block; width: 90%; height: 2.5px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
      .mb-ptab-bar i { display: block; height: 100%; }
      /* ---- Modul „Ziua": lista elevilor pentru o singură zi ---- */
      .mb-zi { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
        background: #fff; border-radius: 12px; overflow: hidden;
        box-shadow: 0 1px 3px rgba(15,23,42,.06); }
      .mb-zi-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px;
        border-bottom: 1px solid #e2e8f0; background: #fff; }
      .mb-zi-lbl { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; color: #0f172a;
        line-height: 1.15; min-width: 0; }
      .mb-zi-lbl small { display: block; font-size: 9px; font-weight: 700; color: #0d9488;
        text-transform: uppercase; letter-spacing: .08em; }
      .mb-seg { display: flex; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; flex: none; }
      .mb-seg-b { font-size: 10.5px; font-weight: 700; padding: 5px 8px; color: #64748b; background: #fff; border: 0; }
      .mb-seg-b.on { background: #0d9488; color: #fff; }
      /* Doar afișare — tipul zilei vine din „Program distribuție", nu se schimbă de aici. */
      .mb-tip { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 800;
        border-radius: 5px; padding: 1px 5px; background: #e2e8f0; color: #475569;
        vertical-align: middle; }
      .mb-zi-banner { margin: 8px; padding: 10px 12px; border-radius: 10px; background: #fef3c7;
        border: 1px solid #fde68a; color: #b45309; font-size: 11.5px; text-align: center; line-height: 1.4; }
      .mb-zi-banner b { display: block; font-size: 12.5px; margin-bottom: 2px; }
      .mb-zi-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
      .mb-zi-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px;
        border-bottom: 1px solid #f1f5f9; min-height: 44px; }
      .mb-zi-row .no { font-size: 10.5px; color: #94a3b8; width: 16px; flex: none; text-align: right;
        font-variant-numeric: tabular-nums; }
      .mb-zi-row .nm { flex: 1; font-size: 13px; min-width: 0; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; color: #0f172a; }
      .mb-zi-row.off { background: #f8fafc; }
      .mb-zi-row.off .nm { color: #94a3b8; text-decoration: line-through; }
      .mb-zi-row.dim { opacity: .45; }
      .mb-zi-row .why { font-size: 9.5px; color: #b45309; white-space: nowrap; font-weight: 600; }
      .mb-zi-row .yn { display: flex; gap: 5px; flex: none; }
      .mb-yn { width: 38px; height: 34px; border-radius: 9px; border: 1px solid #e2e8f0;
        background: #fff; color: #cbd5e1; font-size: 13px; display: flex; align-items: center;
        justify-content: center; }
      .mb-yn.y.on { background: #d1fae5; border-color: transparent; color: #059669; }
      .mb-yn.n.on { background: #ffe4e6; border-color: transparent; color: #e11d48; }
      .mb-yn:disabled { opacity: .4; }
      .mb-zi-foot { flex: none; display: flex; align-items: center; justify-content: space-between;
        gap: 8px; padding: 7px 8px; background: #f8fafc; border-top: 1px solid #e2e8f0;
        font-size: 11px; color: #64748b; }
      .mb-zi-foot b { color: #0f172a; font-variant-numeric: tabular-nums; }
      .mb-zi-undo { width: 32px; height: 30px; border-radius: 8px; border: 1px solid #e2e8f0;
        background: #fff; color: #64748b; font-size: 12px; flex: none; margin-left: auto; }
      .mb-zi-fill { font-size: 10.5px; font-weight: 700; color: #0f766e; background: #fff;
        border: 1px solid #0d9488; border-radius: 8px; padding: 6px 9px; white-space: nowrap;
        display: flex; align-items: center; gap: 5px; }
      .mb-zi-gol { padding: 24px 12px; text-align: center; color: #94a3b8; font-size: 12.5px; }
      .mb-viewbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 8px;
        background: #fff; border-radius: 12px 12px 0 0; font-size: 10.5px; color: #94a3b8; }
      /* ---- Condica de prezență pe telefon ----
         Antetul era un singur rând flex: selectorul de școală (fără lățime maximă) strivea titlul
         până ieșea pe verticală, un cuvânt pe rând. Acum titlul ocupă un rând întreg, controalele
         trec dedesubt, iar X-ul se ancorează în colț (fără să mutăm nimic în DOM). */
      body.mobile-ui .cond-head {
        position: relative; flex-wrap: wrap; gap: 6px;
        /* FĂRĂ safe-area aici: decalajul pentru notch îl dă `.modal-shell` (o singură dată). */
        padding: 8px 10px !important;
      }
      /* Loc pentru cele două butoane absolute din colț (ecran complet + X), acum distanțate. */
      body.mobile-ui .cond-head-l { flex: 1 1 100%; min-width: 0; padding-right: 92px; }
      body.mobile-ui .cond-head-l h2 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      body.mobile-ui .cond-head-l > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      body.mobile-ui .cond-head-r { flex: 1 1 100%; min-width: 0; }
      body.mobile-ui .cond-head-r > select { flex: 1 1 auto; min-width: 0; }
      /* Butoanele sunt absolute ÎN antet, care stă deja sub zona de siguranță (`.modal-shell`) —
         deci `top` nu mai adaugă insetul. Ținta de atins e mărită, iar fullscreen-ul stă
         departe de X: la 28px se nimerea din greșeală, ieșeai din ecran complet și, la
         reintrare, browserul afișa din nou notificarea lui. */
      body.mobile-ui .cond-x { position: absolute; right: 6px; top: 2px; padding: 6px 8px; }
      /* Cele 7 taburi nu încap: se derulează lateral, fără să se taie ultimul. */
      body.mobile-ui .cond-tabs {
        padding: 6px 8px 0 !important; overflow-x: auto; flex-wrap: nowrap;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
      }
      body.mobile-ui .cond-tabs::-webkit-scrollbar { display: none; }
      body.mobile-ui .cond-tabs > button {
        flex: none; white-space: nowrap; padding: 6px 10px !important;
        display: flex; align-items: center; gap: 5px;
      }
      /* Textele care se ascund pe telefon (etichete de tab inactiv, „Semnătura mea"). */
      body.mobile-ui .cond-txt { display: none !important; }
      /* Explicația de lângă „inițială / finală": pe telefon n-are loc pe orizontală și
         s-ar rupe cuvânt cu cuvânt. Rămâne în `title`, la apăsare lungă. */
      body.mobile-ui .efs-hint { display: none !important; }
      body.mobile-ui .cond-tabs > button i { margin-right: 0 !important; font-size: 14px; }
      body.mobile-ui .cond-sig-i { margin-right: 0 !important; }
      /* Notele informative: un rând, cu „…"; la atingere se desfășoară (clasa `open` din JS). */
      /* Notele se afișează ÎNTREGI: un text tăiat cu „…" arată a defect, iar mesajul explică de ce
         lipsesc ore din condică — nu e ceva ce vrei să ceri un tap ca să citești. Compensăm din
         font și spațiere: 3 rânduri la 10px ≈ 40px, o dată pe zi. */
      body.mobile-ui .cond-note {
        font-size: 10px !important; padding: 4px 7px !important; margin-bottom: 4px !important;
        line-height: 1.3;
      }
      /* Rândul de sus al zilei: selectorul de dată se strânge, iar „S36 · 15/06 - 19/06" iese —
         intervalul săptămânii nu-l citește nimeni de pe telefon, dar ocupa cât două butoane. */
      body.mobile-ui .cond-zi-pick { width: 118px !important; }
      body.mobile-ui .cond-zi-week { display: none !important; }
      /* „Fișa online" / „Export PDF" rămân doar iconițe pe telefon (au title pentru claritate). */
      body.mobile-ui .cond-ibtn { padding: 6px 9px !important; }
      body.mobile-ui .cond-ibtn i { margin-right: 0 !important; }
      /* ⚠️ Bara zilei e `flex-nowrap` pe DESKTOP, ca butonul de ștergere să nu sară singur pe
         rândul doi. Pe telefon `nowrap` n-are unde încăpea: împingea butoanele („Fișa online",
         „Export PDF", guma) în afara ecranului, iar modalul întreg derula lateral. Aici bara
         redevine înfășurabilă — ce nu încape trece pe rândul următor, dar rămâne vizibil. */
      body.mobile-ui .cond-zi-bar { flex-wrap: wrap !important; }
      body.mobile-ui .cond-zi-right { margin-left: 0 !important; flex-wrap: wrap; }
      /* Dialogurile SCURTE (pickerele de PDF: 3-5 opțiuni + un buton) rămân dialoguri — întinse pe
         tot ecranul ar avea trei rânduri de conținut și 80% gol, iar butonul „Generează" ar ajunge
         la celălalt capăt față de degetul care tocmai a ales. Le dăm doar lățime și ținte mari. */
      body.mobile-ui .fixed.inset-0.z-\[160\],
      body.mobile-ui .fixed.inset-0.z-\[170\] { padding: 8px !important; }
      body.mobile-ui .fixed.inset-0 label { min-height: 42px; }
      /* ---- Notarea ritmică pe telefon: o disciplină, elevii pe verticală ----
         `modal-flex` = tot ecranul FĂRĂ derulare exterioară: cutia are deja o zonă internă care
         derulează, iar `overflow-y:auto` moștenit de la `.modal-box` dădea două bare suprapuse.
         Regula generală nu se atinge — dialogurile scurte chiar au nevoie de scroll exterior. */
      body.mobile-ui .modal-flex { overflow: hidden !important; }
      body.mobile-ui .nt-body { min-height: 0 !important; }
      .nt-dsel { margin-bottom: 6px; }
      .nt-dsel select { width: 100%; font-size: 13px; font-weight: 600; color: #334155;
        border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 8px; background: #fff; }
      .nt-dsel.one { font-size: 13px; font-weight: 700; color: #334155; background: #f1f5f9;
        border-radius: 8px; padding: 7px 9px; }
      .nt-list { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
      .nt-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-height: 44px;
        border-bottom: 1px solid #f1f5f9; }
      .nt-row:last-child { border-bottom: 0; }
      .nt-row.on { background: #e0e7ff; }
      .nt-nr { flex: none; width: 16px; text-align: right; font-size: 10.5px; color: #94a3b8;
        font-variant-numeric: tabular-nums; }
      .nt-nume { flex: 1; min-width: 0; font-size: 13px; color: #0f172a; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; }
      .nt-note { flex: none; display: flex; gap: 4px; align-items: center; }
      .nt-chip { min-width: 26px; height: 28px; border-radius: 7px; background: #f8fafc;
        border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 13px; padding: 0 4px; }
      .nt-plus { color: #cbd5e1; font-size: 13px; width: 26px; text-align: center; }
      .nt-gol { padding: 24px 12px; text-align: center; color: #94a3b8; font-size: 12.5px; }
      /* Sub-modalele Notării (Completitudine, Medii): tot ecranul. Containerele lor au stiluri
         INLINE, deci regulile au nevoie de `!important` ca să câștige. */
      body.mobile-ui .nt-sub { padding: 0 !important; align-items: stretch !important; }
      body.mobile-ui .nt-subbox { max-width: none !important; border-radius: 0 !important;
        min-height: 100%; padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom); }
      /* Completitudine: o clasă = un rând. */
      body.mobile-ui .nt-cl { padding: 7px 4px !important; }
      body.mobile-ui .nt-cl-l { min-width: 0; overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; margin-right: 8px; }
      /* Medii: un card per elev, mediile ca pastile. */
      .nt-med-sum { font-size: 12px; color: #475569; background: #eef2ff; border-radius: 8px;
        padding: 6px 9px; margin: 8px 0; }
      .nt-med-c { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
        padding: 7px 9px; margin-bottom: 6px; }
      .nt-med-h { display: flex; align-items: center; gap: 7px; }
      .nt-med-nr { flex: none; font-size: 10.5px; color: #94a3b8; width: 16px; text-align: right;
        font-variant-numeric: tabular-nums; }
      .nt-med-nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #0f172a;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .nt-med-an { flex: none; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
      .nt-med-p { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
      .nt-med-chip { font-size: 10.5px; color: #475569; background: #f8fafc;
        border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
      .nt-med-chip b { color: #64748b; font-weight: 700; }
      .nt-med-chip.bad { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
      .nt-med-chip.bad b { color: #dc2626; }
      body.mb-land .nt-med { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
      body.mb-land .nt-med-c { margin-bottom: 0; }
      body.mb-land .nt-med-sum { grid-column: 1 / -1; }
      /* Cele zece note: două rânduri de câte cinci, ținte de 44px. */
      .nt-nbtns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; flex: 1 1 100%; }
      .nt-nb { min-height: 42px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
        font-size: 16px; font-weight: 800; }
      .nt-nb.on { border-color: #6366f1; border-width: 2px; background: #eef2ff; }
      body.mb-land .nt-nbtns { grid-template-columns: repeat(10, 1fr); }
      body.mb-land .nt-nb { min-height: 36px; font-size: 14px; }
      /* ---------- FIȘA DE AUTOEVALUARE ---------- */
      /* Pe telefon indicatorul are nevoie de toată lățimea: „Max" + câmpurile de punctaj trec
         împreună pe rândul al doilea, aliniate dreapta (antetul de coloane face la fel, deci
         etichetele rămân exact deasupra câmpurilor lor). */
      /* Capul de coloane rămâne lipit sus în zona derulantă: la indicatorul 60 se vede în
         continuare ce coloană e care (fișa are 97 de indicatori). */
      .fs-head { position: sticky; top: 0; z-index: 5; background: var(--lc-panel, #fff);
                 padding-top: 4px; padding-bottom: 4px; }
      /* Eticheta + creionul trebuie să încapă ÎN coloana de 52px. „COMISIE" la 10px MAJUSCULE
         cu tracking o umple singură, deci creionul sărea pe rândul de deasupra, iar etichetele
         marcate coborau față de „Max"/„Autoev." — nu mai stăteau peste câmpurile lor. */
      .fs-head .fs-cells span { font-size: 10px; text-transform: none; letter-spacing: 0;
                 white-space: nowrap; }
      /* Coloana pe care o completează rolul curent: linie sub etichetă, cât coloana. Marchează
         coloana până jos, fără să coste niciun pixel de lățime. */
      .fs-head .fs-cells .fs-meu { border-bottom: 2px solid currentColor; padding-bottom: 1px; }
      /* „Max" e referința indicatorului, nu un punctaj acordat — un pas de despărțire față de
         grupul de punctaje, la fel în antet și pe rânduri. */
      .fs-max { margin-right: 7px; }
      /* Pe telefon „COMISIE"/„CONTEST." la 10px MAJUSCULE depășesc câmpul de 52px (creionul
         sare pe rândul de deasupra). Fără majuscule, la 9px, încap fix peste coloanele lor. */
      body.mobile-ui .fs-head .fs-cells span { font-size: 9px; text-transform: none;
                 letter-spacing: 0; white-space: nowrap; }
      /* Rândul de deasupra domeniilor: pe telefon explicația se scoate, ca „Extinde toate" să
         încapă pe o linie (se rupea în două). */
      body.mobile-ui .fs-toolbar { flex-wrap: wrap; }
      body.mobile-ui .fs-hint { display: none; }
      body.mobile-ui .fs-row { flex-wrap: wrap; }
      body.mobile-ui .fs-cells { flex: 0 0 100%; justify-content: flex-end; margin-top: 3px; }
      /* Indicatorul CDI e o listă de 10-16 poziții: câmpurile de punctaj urcă DEASUPRA textului,
         altfel trebuie derulat un perete de text ca să ajungi la ele (punctajul e pe domeniu). */
      body.mobile-ui .fs-long .fs-cells { order: -1; margin-top: 0; margin-bottom: 5px; }
      /* Cardurile de identificare: pe telefon o coloană (altfel „2425 / 46 / 09.09.2025" iese din card). */
      body.mobile-ui .fs-ident { grid-template-columns: 1fr !important; }
      body.mb-land .fs-ident { grid-template-columns: 1fr 1fr !important; }
      /* Cardul „Nr. înregistrare" are input + calendar + buton — ia rândul întreg. */
      body.mobile-ui .fs-card-wide { grid-column: 1 / -1; }
      .fs-cards { display: flex; flex-direction: column; gap: 7px; }
      /* Orizontal: lățimea devine abundentă — rândul revine la o linie, cardurile pe 2 coloane. */
      body.mb-land .fs-row { flex-wrap: nowrap; }
      body.mb-land .fs-cells { flex: 0 0 auto; margin-top: 0; }
      body.mb-land .fs-cards { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
      /* Orizontal: elevii pe două coloane (lățimea devine abundentă, înălțimea e rară). */
      body.mb-land .nt-list { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
      body.mb-land .nt-row { min-height: 38px; }
      /* ---- CDI: un card per interval orar, în locul tabelului de 6 coloane ---- */
      .cdi-mlist { display: none; }
      body.mobile-ui .cdi-mlist { display: block; }
      body.mobile-ui .cdi-tbl { display: none !important; }
      .cdi-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
        padding: 7px 8px; margin-bottom: 6px; }
      .cdi-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
      .cdi-card-ora { font-size: 11.5px; font-weight: 700; color: #475569;
        font-variant-numeric: tabular-nums; }
      .cdi-card-b { margin-bottom: 6px; }
      .cdi-card-r { display: flex; align-items: flex-start; gap: 8px; margin-top: 5px; }
      .cdi-card-l { flex: none; width: 74px; font-size: 9.5px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; padding-top: 6px; }
      /* Controalele devin ținte cât degetul (în tabel erau la 10px). */
      body.mobile-ui .cdi-card select,
      body.mobile-ui .cdi-card input[type="text"] { font-size: 12px !important; min-height: 34px; }
      /* Titlul și butonul AI pe același rând (iconița ocupa altfel un rând în fiecare card). */
      body.mobile-ui .cdi-tip-in { display: flex; align-items: center; gap: 6px; }
      body.mobile-ui .cdi-tip-in input[type="text"] { flex: 1; min-width: 0; margin-top: 0 !important; }
      body.mobile-ui .cdi-tip-in > button { flex: none; margin-top: 0 !important; min-height: 34px; padding: 0 9px !important; }
      body.mobile-ui .cdi-zi { width: auto !important; }
      /* Bara zilei ocupă un rând propriu pe telefon, iar acțiunile globale stau lângă titlu, unde
         e loc liber. Altfel, când apar iconițele de stare (anulează / salvează), PDF-ul sărea jos. */
      body.mobile-ui .cdi-daybar { flex: 1 0 100%; }
      /* ---- Raport: mai puține coloane, bară de progres mai lată ---- */
      .rp-mob { display: none; }
      body.mobile-ui .rp-mob { display: inline; }

      /* ---- PORTOFOLIU pe telefon ----
         Perechea `cond-txt` / `po-mob`: același rând spune altceva pe calculator și pe telefon,
         fără o a doua ramură de randare. */
      .po-mob { display: none; }
      body.mobile-ui .po-mob { display: inline; }
      /* Matricea clase × documente (și tabelul de ani) se rendează AMÂNDOUĂ; se vede exact una. */
      .po-mlist { display: none; }
      body.mobile-ui .po-mlist { display: grid; gap: 6px; }
      body.mobile-ui .po-tbl { display: none !important; }
      body.mobile-ui .po-cls, body.mobile-ui .po-an {
        display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px;
      }
      body.mobile-ui .po-cls:active { background: #f0fdfa; }
      body.mobile-ui .po-cls-h { display: flex; align-items: baseline; gap: 8px; }
      body.mobile-ui .po-cls-n { flex: 1; min-width: 0; font-size: 13.5px; color: #0f172a; }
      body.mobile-ui .po-cls-c { flex: none; font-size: 11px; font-weight: 700; }
      body.mobile-ui .po-cls-p { font-size: 11px; color: #64748b; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; }
      body.mobile-ui .po-cls-d { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
      /* Încărcarea multiplă: numele fișierului pe primul rând, rubrica + „×" pe al doilea —
         altfel selectorul de rubrică rămâne cu ~90px și nu se poate citi ce s-a ales. */
      /* Convocatoare: indentările de 36px/28px (`pl-9`, `pl-7`) sunt gândite pentru un modal de
         980px — pe 360px mănâncă o zecime din lățime, iar titlul „Nr. 8 · ședința…" se rupe
         literă cu literă. */
      body.mobile-ui .po-conv-in { padding-left: 8px !important; padding-right: 4px !important; }
      body.mobile-ui .po-pv-row { padding-left: 10px !important; }
      body.mobile-ui .po-upl-row { flex-wrap: wrap; }

      /* ---- CATALOG, vederea „Tabel" = LISTA-HEATMAP (mockup aprobat) ---- */
      body.luna-mode .table-container { display: none !important; }
      .mb-luna { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
      .mb-lsum { display: flex; gap: 6px; padding: 8px; background: #f8fafc; }
      .mb-lsc { flex: 1; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
        padding: 6px 4px; text-align: center; display: flex; flex-direction: column; gap: 1px;
        font-size: 9px; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; }
      .mb-lsc b { font-size: 16px; color: #0f172a; letter-spacing: 0; }
      .mb-lsc.done b { color: #0f766e; }
      .mb-llist { margin: 0 8px 6px; background: #fff; border: 1px solid #e2e8f0;
        border-radius: 12px; overflow: hidden; }
      .mb-lrow { display: flex; align-items: center; gap: 7px; padding: 7px 9px; width: 100%;
        text-align: left; background: none; border: 0; border-bottom: 1px solid #f1f5f9;
        min-height: 44px; }
      .mb-lrow .no { width: 16px; text-align: right; font-size: 10px; color: #94a3b8; flex: none;
        font-variant-numeric: tabular-nums; }
      .mb-lbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
      .mb-lrow .nm { font-size: 13px; color: #0f172a; white-space: nowrap; overflow: hidden;
        text-overflow: ellipsis; }
      .mb-ldots { display: flex; gap: 2.5px; flex-wrap: wrap; }
      .mb-ld { width: 9px; height: 9px; border-radius: 3px; background: #cbd5e1; flex: none; }
      .mb-ld.p { background: #059669; }
      .mb-ld.a { background: #dc2626; }
      .mb-ld.x { background: transparent; border: 1px dashed #cbd5e1; }
      .mb-ld.az { outline: 2px solid #0d9488; outline-offset: 1px; }
      .mb-ltot { flex: none; min-width: 34px; text-align: center; font-size: 13px; font-weight: 800;
        color: #475569; background: #f1f5f9; border-radius: 8px; padding: 5px 6px;
        font-variant-numeric: tabular-nums; }
      .mb-lrow.warn .mb-ltot { background: #fef3c7; color: #92400e; }
      .mb-lrow.open { background: #f0fdfa; border-left: 3px solid #0d9488; }
      .mb-ldet { background: #f8fafc; border-bottom: 1px solid #f1f5f9; padding: 8px 9px 9px 32px; }
      .mb-ldet-t { font-size: 9.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase;
        margin-bottom: 5px; }
      .mb-lzgrid { display: flex; flex-wrap: wrap; gap: 3px; }
      .mb-lz { width: 30px; height: 26px; border-radius: 6px; display: flex; flex-direction: column;
        align-items: center; justify-content: center; font-size: 8px; color: #94a3b8;
        line-height: 1; gap: 1px; }
      .mb-lz b { font-size: 11px; }
      .mb-lz.p { background: #ecfdf5; } .mb-lz.p b { color: #059669; }
      .mb-lz.a { background: #fef2f2; } .mb-lz.a b { color: #dc2626; }
      .mb-lz.g { background: #f1f5f9; border: 1px dashed #cbd5e1; } .mb-lz.g b { color: #cbd5e1; }
      .mb-lz.az { outline: 2px solid #0d9488; }
      .mb-ldtots { display: flex; gap: 6px; margin-top: 8px; }
      .mb-ldt { flex: 1; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
        padding: 4px; text-align: center; display: flex; flex-direction: column;
        font-size: 8.5px; color: #94a3b8; text-transform: uppercase; }
      .mb-ldt b { font-size: 14px; color: #334155; }
      .mb-lfoot { display: flex; gap: 6px; margin: 0 8px 6px; }
      .mb-lfoot span { flex: 1; border-radius: 10px; padding: 7px; text-align: center;
        font-size: 11px; font-weight: 700; }
      .mb-lfoot .ok { background: #ecfdf5; color: #065f46; }
      .mb-lfoot .bad { background: #fef2f2; color: #991b1b; }
      .mb-lleg { display: flex; gap: 12px; justify-content: center; font-size: 10px;
        color: #94a3b8; padding: 0 8px 10px; }
      .mb-lleg span { display: inline-flex; align-items: center; gap: 3px; }
      .mb-lhint { text-align: center; font-size: 10.5px; color: #64748b; padding: 0 8px 10px; }
      /* Rotit: elevii pe două coloane, pătrățele puțin mai mari. */
      body.mb-land .mb-llist { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
      body.mb-land .mb-ld { width: 11px; height: 11px; }
      body.mb-land .mb-lrow { min-height: 40px; }
      body.mb-land .mb-ldet { grid-column: 1 / -1; }

      /* ---- CATALOG, vechiul tabel pe telefon (rămas pentru „Mod desktop") ----
         Tabelul e DOAR DE PRIVIT (cerut explicit — se evită introducerea din greșeală; se
         completează din „Ziua"). Prin urmare: fără interacțiune pe celule, iar restul merge la
         lizibilitate — celule mai înalte, cifre mari, zebră, coloana de AZI reaprinsă. */
      body.mobile-ui .table-container .input-cell,
      body.mobile-ui .table-container .type-select { pointer-events: none; }
      body.mobile-ui .table-container td { height: 34px; border-bottom-color: #cbd5e1; }
      body.mobile-ui .table-container .input-cell { line-height: 34px; font-size: 17px; }
      /* Numele elevilor — formatarea listei din catalog (13px, închis). */
      body.mobile-ui .table-container td.sticky-col-left { font-size: 13px; color: #0f172a; }
      /* Zebra: rândul se urmărește cu ochiul fără să aluneci la vecin. Celulele cu semantică
         proprie (weekend, vacanțe, blocate, azi) rămân cu fundalul lor. */
      body.mobile-ui .table-container tbody tr:nth-child(even) td:not(.weekend):not(.holiday-locked):not(.holiday-unlocked):not(.manual-locked):not(.outside-interval-locked):not(.today-col-cell) {
        background-color: #f1f5f9 !important;
      }
      body.mobile-ui .table-container th.today-col-header {
        background: #ccfbf1 !important; color: #0f766e !important; font-weight: 700 !important;
        box-shadow: inset 0 -2px 0 #0d9488;
      }
      body.mobile-ui .table-container td.today-col-cell { background: #f0fdfa !important; }
      /* Zilele mai înguste (32-42px → 30px): tabelul e doar de privit, o cifră încape lejer,
         iar pe ecran intră 2-3 zile în plus. Totalurile sunt excluse (au regulile lor). */
      body.mobile-ui .table-container th[data-col]:not(.sticky-col-right),
      body.mobile-ui .table-container td[data-col]:not(.sticky-col-right) {
        width: 30px !important; min-width: 30px !important; max-width: 30px !important;
      }
      /* Totalurile (ultimele 3 coloane) ÎNGHEȚATE la dreapta — mereu vizibile în timp ce
         zilele derulează între numele sticky și ele. Sticky-ul și offseturile `right` vin din
         CSS-ul de desktop + stilurile inline (calculate pe lățimile REALE) — lățimi forțate cu
         offseturi fixe s-au suprapus o dată, fiindcă tabelul e auto-layout. */
      body.mobile-ui .table-container th.sticky-col-right { z-index: 50 !important; }

      /* ---- STATISTICA de sfârșit de an pe telefon ---- */
      /* Cutiile sunt pe tot ecranul (modal-shell+flex) → zonele de scroll au nevoie de
         min-height:0 ca footerul să rămână jos, iar barele fără wrap se înfășoară. */
      body.mobile-ui .sf-body { min-height: 0; padding: 10px !important; }
      body.mobile-ui .sf-head { flex-wrap: wrap; gap: 6px; padding: 8px 10px !important; }
      body.mobile-ui .sf-head select { max-width: 100% !important; min-width: 0; }
      body.mobile-ui .sf-bar { flex-wrap: wrap; gap: 8px; row-gap: 4px; padding: 6px 10px !important; }
      body.mobile-ui .sf-foot { flex-wrap: wrap; padding: 8px 10px !important; justify-content: flex-end; }
      /* Pasul fată/băiat: butoane tactile și mai mult loc pentru nume. */
      body.mobile-ui .sf-sex-row { gap: 6px; }
      body.mobile-ui .sf-sex-row button { padding: 8px 10px !important; min-height: 40px; }
      /* Tabelele 1/1b/corigenți/mișcare n-au wrapper de overflow — pe telefon devin blocuri
         care derulează lateral DOAR dacă nu încap („din care fete:" e scurtat la „fete:"). */
      body.mobile-ui table.sf-tbl { display: block; overflow-x: auto; }
      body.mobile-ui .sf-tbl input, body.mobile-ui .sf-tbl select {
        height: 38px; font-size: 14px !important; }
      /* Telefon rotit: lista fată/băiat pe două coloane; barele mai scunde. Tabelele revin la
         `display:table` — la ~800px lățime totul încape, iar `display:block` (trucul de scroll
         din portret) le strângea la lățimea conținutului și lăsa jumătate de ecran gol. */
      body.mb-land .sf-sex-list { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
      body.mb-land .sf-foot, body.mb-land .sf-bar { padding: 4px 10px !important; }
      body.mb-land table.sf-tbl { display: table; }

      /* ---- STATISTICA de început de an pe telefon ---- */
      /* Cutia e pe tot ecranul (modal-shell+flex) → zona de scroll trebuie să ia restul,
         altfel footerul nu rămâne jos. */
      body.mobile-ui .si-body { flex: 1; min-height: 0; padding: 10px !important; }
      /* Rândul din tabelele manuale: numele rubricii pe primul rând (întreg), stepperele
         Total/Fete + ștergerea pe al doilea — la lățimi fixe numele rămânea cu ~70px. */
      body.mobile-ui .si-row { flex-wrap: wrap; row-gap: 4px; margin-bottom: 8px !important; }
      body.mobile-ui .si-name { flex: 1 0 100%; font-size: 13px !important; padding: 7px 8px !important; }
      body.mobile-ui .si-row > div { width: auto !important; }
      body.mobile-ui .si-lb { font-size: 10.5px; font-weight: 700; color: #94a3b8; }
      /* Stepperele −/+ erau 20×24px — sub orice țintă tactilă. */
      body.mobile-ui .si-step button { width: 34px !important; height: 40px !important; font-size: 17px; }
      body.mobile-ui .si-step input { width: 44px !important; height: 40px; font-size: 15px !important; }
      body.mobile-ui .si-val { white-space: normal; }
      body.mobile-ui .si-two { grid-template-columns: 1fr !important; }
      body.mobile-ui .si-foot { flex-wrap: wrap; padding: 8px 10px !important; }
      /* Telefon rotit: lățimea (~800px) permite rândul ÎNTREG pe o linie — numele + stepperele
         mari + ștergerea, ca pe desktop dar cu ținte tactile. Înălțimea e rară: antetul și
         footerul se strâng, iar Reînmatriculați/Repetenție revin pe două coloane. */
      body.mb-land .si-row { flex-wrap: nowrap; }
      body.mb-land .si-name { flex: 1 1 auto; }
      body.mb-land .si-lb { display: none; }
      body.mb-land .si-two { grid-template-columns: 1fr 1fr !important; }
      body.mb-land .si-foot { padding: 5px 10px !important; }
      body.mb-land .si-body { padding: 8px !important; }

      /* ---- BURSE pe telefon ---- */
      /* Agenda de prezență pe ZI (tiparul „Ziua" din catalog): bara de navigare + lista elevilor. */
      .bur-zi { padding: 8px; }
      .bur-zi-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
      .bur-zi-b { flex: none; width: 40px; height: 36px; border: 1px solid #cbd5e1; border-radius: 9px;
        background: #fff; color: #475569; }
      .bur-zi-b:disabled { opacity: .35; }
      .bur-zi-t { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; color: #1e293b; }
      .bur-azi { margin-left: 6px; font-size: 9px; font-weight: 700; color: #0f766e;
        background: #ccfbf1; border-radius: 99px; padding: 1px 6px; vertical-align: middle; }
      .bur-zi-list { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
      .bur-zi-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px;
        border-bottom: 1px solid #f1f5f9; min-height: 46px; }
      .bur-zi-row:last-child { border-bottom: 0; }
      /* R181c: lista lunii se folosește și pe desktop — un hover discret ajută urmărirea rândului. */
      body:not(.mobile-ui) .bur-zi-row:hover { background: #f8fafc; }
      /* R181e: pe desktop rândurile devin SCUNDE (~30px) — dimensiunile mari (input 38px) erau
         ținte tactile pentru telefon; cu mouse-ul nu e nevoie, iar 22 de elevi încap pe ecran. */
      body:not(.mobile-ui) .bur-zi-row { padding: 1px 8px; min-height: 0; }
      body:not(.mobile-ui) .bur-zi-row .nm { font-size: 12.5px; }
      body:not(.mobile-ui) .bur-in { height: 26px; width: 48px; font-size: 13.5px; }
      body:not(.mobile-ui) .abs-ml-ro { height: 26px; font-size: 13px; }
      body:not(.mobile-ui) .abs-ml-t { font-size: 13px; }
      body:not(.mobile-ui) .abs-ml-f { padding: 5px; }
      .bur-zi-row .no { font-size: 10.5px; color: #94a3b8; width: 18px; flex: none; text-align: right;
        font-variant-numeric: tabular-nums; }
      .bur-zi-row .nm { flex: 1; font-size: 13px; min-width: 0; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; color: #0f172a; }
      .bur-zi-row.off { background: #f8fafc; }
      .bur-zi-row.off .nm { color: #94a3b8; }
      .bur-zi-row .why { font-size: 9.5px; color: #b45309; white-space: nowrap; font-weight: 600; }
      .bur-tot { flex: none; font-size: 10px; color: #94a3b8; }
      .bur-tot.bad { color: #dc2626; font-weight: 700; }
      .bur-in { flex: none; width: 52px; height: 38px; text-align: center; font-size: 16px;
        font-weight: 700; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff;
        font-variant-numeric: tabular-nums; }
      .bur-in.ok { color: #059669; border-color: #a7f3d0; background: #ecfdf5; }
      .bur-in.bad { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
      .bur-in:focus { outline: 2px solid #0d9488; outline-offset: -2px; background: #fefce8; }
      .bur-pa { flex: none; width: 52px; height: 38px; border-radius: 9px; border: 1px solid #cbd5e1;
        font-size: 15px; font-weight: 800; }
      .bur-pa.p { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
      .bur-pa.a { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
      /* Categoriile agendei: pe telefon un rând de butoane EGALE (stivuite la lățimi diferite
         arătau a listă ruptă, nu a comutator). */
      body.mobile-ui .bur-cats { flex: 1 1 100%; }
      body.mobile-ui .bur-cats > button { flex: 1; justify-content: center; }
      /* Rapoartele: KPI 2×2, secțiunea duală pe o coloană, tabelele derulează în cutia lor. */
      body.mobile-ui .bur-kpi { grid-template-columns: 1fr 1fr !important; }
      body.mobile-ui .bur-dual { grid-template-columns: 1fr !important; }
      body.mobile-ui table.bur-tw { display: block; overflow-x: auto; }
      /* Rapoartele erau dimensionate pentru 1300px: fonturi de 10-11px, grafic SVG care la 360px
         scalează textele la ~6px. Graficul dispare (cifrele lui sunt în KPI-uri și tabele),
         restul crește la mărimi de citit fără zoom. */
      body.mobile-ui .bur-evo { display: none !important; }
      body.mobile-ui .bur-kpi > div { padding: 10px 8px !important; }
      body.mobile-ui .bur-kpi > div > div:first-child { font-size: 11px !important; }
      body.mobile-ui .bur-kpi > div > div:nth-child(2) { font-size: 22px !important; }
      body.mobile-ui table.bur-tw { font-size: 12.5px !important; }
      body.mobile-ui table.bur-tw th, body.mobile-ui table.bur-tw td {
        padding: 6px 8px !important; font-size: 12.5px !important; }
      body.mobile-ui .bur-kpi > div > div:nth-child(3) { font-size: 10.5px !important; }
      /* Eticheta barelor „Burse pe tipuri": 60px pe desktop (textul lung), 66px pe telefon
         (tag-urile scurte consacrate — Merit, Venit, CES…). */
      .bur-bar-l { width: 60px; flex: none; }
      body.mobile-ui .bur-bar-l { width: 66px; font-size: 12px; }
      /* Textele secțiunilor de raport (scrise pentru 1300px la 10-12px) cresc la citibil. */
      body.mobile-ui .bur-sec .text-\[12px\] { font-size: 13.5px !important; }
      body.mobile-ui .bur-sec .text-\[11px\],
      body.mobile-ui .bur-sec .text-\[10px\] { font-size: 12px !important; }
      body.mobile-ui .bur-sec { padding: 10px !important; }
      body.mobile-ui .bur-srch { flex: 1; min-width: 120px; }
      body.mobile-ui .bur-search { width: 100%; }
      body.mobile-ui .bur-foot { flex-wrap: wrap; }
      /* Telefon rotit: elevii pe două coloane, ca la catalog. */
      body.mb-land .bur-zi-list { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
      body.mb-land .bur-zi-row { min-height: 40px; }
      /* Modalul Absențe ca listă (stilul agendei de burse): antet aliniat cu câmpurile, valori
         read-only la luna blocată, subsolul cu totalul clasei. */
      .abs-ml-h { display: flex; align-items: center; gap: 8px; padding: 2px 8px 4px;
        font-size: 10.5px; font-weight: 700; color: #64748b; }
      .abs-ml-h .no { width: 18px; flex: none; }
      .abs-ml-h .nm { flex: 1; min-width: 0; }
      .abs-ml-c { flex: none; width: 52px; text-align: center; color: #be123c; }
      .abs-ml-c.t { color: #64748b; }
      .abs-ml-ro { flex: none; width: 52px; height: 38px; display: flex; align-items: center;
        justify-content: center; font-size: 15px; font-weight: 700; color: #94a3b8;
        background: #f1f5f9; border-radius: 9px; }
      .abs-ml-t { flex: none; width: 52px; text-align: center; font-size: 15px; font-weight: 800;
        color: #475569; font-variant-numeric: tabular-nums; }
      .abs-ml-f { padding: 8px; font-size: 11.5px; color: #475569; text-align: center; }
      /* Absențele din listă nu au varianta pe două coloane la rotire — rândul are trei câmpuri. */
      body.mb-land .abs-ml-h ~ .bur-zi-list { display: block; }

      /* ---- ADMINISTRARE pe telefon ----
         Doar ce se poate face cu adevărat de pe telefon (cereri de acces, efective, monitorizare,
         roluri, jurnal). Restul rămâne pe calculator. */
      /* Butoanele de acțiune ale unei cereri: lățime plină, ținte tactile. */
      body.mobile-ui .adm-acts { flex-wrap: wrap; }
      body.mobile-ui .adm-acts > button { flex: 1 1 44%; min-height: 44px; font-size: 13px !important; }
      /* Jurnalul de securitate ca listă de carduri (tabelul de 4 coloane rămâne pe calculator). */
      .adm-log { display: flex; flex-direction: column; gap: 6px; }
      .adm-log-c { border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; background: #fff; }
      .adm-log-c.ref { background: #fff1f2; border-color: #fecdd3; }
      .adm-log-h { display: flex; align-items: baseline; gap: 8px; }
      .adm-log-a { font-size: 12px; font-weight: 800; color: #334155; flex: 1; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; }
      .adm-log-c.ref .adm-log-a { color: #be123c; }
      .adm-log-d { font-size: 10px; color: #94a3b8; flex: none; font-variant-numeric: tabular-nums; }
      .adm-log-w { font-size: 11px; color: #475569; margin-top: 2px; }
      .adm-log-x { font-size: 11px; color: #64748b; margin-top: 3px; word-break: break-word; line-height: 1.35; }
      body.mb-land .adm-log { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
      /* Efective: rândul-bară avea numele pe lățime fixă (92-108px), iar barei îi rămâneau ~110px.
         Pe telefon numele urcă pe rândul lui, bara și cifrele iau toată lățimea. */
      body.mobile-ui .ef-row { flex-wrap: wrap; gap: 6px !important; padding: 8px 0; }
      body.mobile-ui .ef-row .ef-nm { width: auto !important; flex: 1 0 100%; font-size: 13px; }
      body.mb-land .ef-row { flex-wrap: nowrap; }
      body.mb-land .ef-row .ef-nm { flex: none; width: 96px !important; }
      /* Roluri: formularul pe o coloană; tabelul devine listă (fiecare celulă pe rândul ei). */
      body.mobile-ui .rol-form { grid-template-columns: 1fr !important; }
      body.mobile-ui .rol-tbl, body.mobile-ui .rol-tbl tbody, body.mobile-ui .rol-tbl tr { display: block; }
      body.mobile-ui .rol-tbl thead { display: none; }
      body.mobile-ui .rol-tbl tr { border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 6px;
        padding: 8px 10px; position: relative; }
      body.mobile-ui .rol-tbl td { display: block; border: 0 !important; padding: 1px 0 !important;
        width: auto !important; text-align: left !important; font-size: 12px; }
      body.mobile-ui .rol-tbl td:first-child { font-weight: 700; padding-right: 62px !important;
        word-break: break-all; }
      /* Ultima celulă = butoanele; le scoatem în colțul cardului, la ținte de 32px. */
      body.mobile-ui .rol-tbl td:last-child { position: absolute; top: 6px; right: 8px; display: flex; gap: 4px; }
      body.mobile-ui .rol-tbl td:last-child button { width: 32px; height: 32px; font-size: 14px !important; }
      /* Definițiile rolurilor sunt un text citit o dată — pe telefon ocupau 6 rânduri. */
      body.mobile-ui .rol-info { display: none; }
      /* Monitorizare: card per utilizator, cu banda zilelor lunii (ca vederea „Tabel"). */
      .adm-u { display: flex; flex-direction: column; gap: 6px; }
      .adm-uc { border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; background: #fff; }
      .adm-uh { display: flex; align-items: center; gap: 8px; }
      .adm-un { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #334155;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .adm-ul { flex: none; font-size: 10.5px; color: #94a3b8; white-space: nowrap;
        font-variant-numeric: tabular-nums; }
      .adm-ul.on { color: #059669; font-weight: 700; }
      .adm-ux { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #e2e8f0;
        background: #fff; color: #94a3b8; font-size: 12px; }
      .adm-uq { display: flex; gap: 4px; flex: none; }
      .adm-uq button { min-width: 34px; height: 30px; border-radius: 8px; font-size: 11px;
        font-weight: 700; border: 1px solid #e2e8f0; background: #fff; }
      .adm-uq button:first-child { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
      .adm-ub { display: flex; flex-wrap: wrap; gap: 1.5px; margin-top: 6px; }
      .adm-ud { width: 5px; height: 12px; border-radius: 2px; background: #e2e8f0; flex: none; }
      .adm-ud.on { background: #1D9E75; }
      .adm-ud.az { outline: 1.5px solid #0d9488; outline-offset: 1px; }
      body.mb-land .adm-u { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
      /* Statistici mișcări: tabele de 4-7 coloane. Pe telefon derulează în cutia lor (nu se
         comprimă), textul se înfășoară, iar numele de școli din butoane nu mai umplu rândul. */
      /* ⚠️ NU „display:block" aici: tabelul ar lua lățimea conținutului (arăta pe jumătate de
         ecran). Rămâne tabel, pe toată lățimea, iar textul se înfășoară. */
      body.mobile-ui .stat-tbl { width: 100% !important; table-layout: auto; }
      body.mobile-ui .stat-tbl td, body.mobile-ui .stat-tbl th { white-space: normal !important;
        word-break: break-word; }
      body.mobile-ui .stat-tbl td.nowrap-keep { white-space: nowrap !important; }
      body.mobile-ui .stat-school-picker button { font-size: 11px !important; padding: 5px 8px !important;
        max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      body.mobile-ui .stat-tabs button { font-size: 11px !important; padding: 8px 2px !important; }
      /* Absențe: fiecare clasă e un rând pliabil (altfel 16 clase × ~30 de rânduri = scroll enorm). */
      .stat-cls { border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 6px; overflow: hidden; }
      .stat-cls-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px;
        background: #fff; border: 0; text-align: left; min-height: 44px; }
      .stat-cls.open .stat-cls-h { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
      .stat-cls-n { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #334155;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .stat-cls-d { font-size: 10.5px; color: #94a3b8; font-weight: 400; }
      .stat-cls-t { flex: none; font-size: 12.5px; font-weight: 800; color: #be123c;
        background: #fff1f2; border-radius: 8px; padding: 3px 8px; font-variant-numeric: tabular-nums; }
      .stat-cls-b { padding: 8px 10px; }

      /* ---- PLĂȚI CEC pe telefon (RUNDA 234) ----
         Modulul a fost construit pentru 1280px: antetul se rupea pe 5-6 rânduri, cele 23 de
         pastile de coloane luau ~150px, iar tabelul cerea ~715px lățime — derulare laterală în
         care nu se mai vedea al cui e rândul. Aici: antetul pe două rânduri (tiparul `cond-head`),
         coloanele pliate, iar tabelul înlocuit de o LISTĂ de persoane (randare separată din
         `mbUI`, ca la Notare — tabelul e prea greu ca să-l randăm degeaba pe telefon). */
      /* ⚠️ Corpul modalului e `flex flex-col`: cardurile pașilor sunt elemente flex, deci se
         COMPRIMĂ ca să încapă, iar `overflow-hidden`-ul lor retează conținutul (lista rămânea la
         4 rânduri, butoanele de Export dispăreau). Ele își păstrează înălțimea naturală, iar
         derularea o face corpul. Valabil pe ORICE ecran — pe desktop nu se vedea doar fiindcă
         tabelul avea înălțime proprie mărginită. */
      .cec-body > * { flex-shrink: 0; }
      body.mobile-ui .cec-head { position: relative; padding: 8px 10px !important; gap: 6px; }
      body.mobile-ui .cec-head-l { flex: 1 1 100%; min-width: 0; padding-right: 40px; }
      body.mobile-ui .cec-head-r { flex: 1 1 100%; min-width: 0; gap: 6px; }
      body.mobile-ui .cec-x { position: absolute; right: 6px; top: 4px; padding: 6px 8px; }
      /* Pe desktop împinge controalele la dreapta; pe wrap ar consuma un rând întreg. */
      body.mobile-ui .cec-sp { display: none !important; }
      /* Lățimile fixe (Detalii 1, căutarea) se întind pe rândul lor. */
      body.mobile-ui .cec-grow { flex: 1 1 auto; min-width: 0; width: auto !important; }
      body.mobile-ui .cec-bar { gap: 6px; }
      /* Tabelul lunilor salvate derulează în cutia lui, nu lățește ecranul. */
      body.mobile-ui .cec-tw { display: block; overflow-x: auto; }
      /* Lista de persoane — tiparul `bur-zi-row` (rând de 46px, nume trunchiat, cifre aliniate). */
      .cec-list { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff; }
      .cec-row { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 6px 10px;
        border-bottom: 1px solid #f1f5f9; }
      .cec-row:last-child { border-bottom: 0; }
      .cec-row .no { flex: none; width: 20px; text-align: right; font-size: 11px; color: #94a3b8;
        font-variant-numeric: tabular-nums; }
      .cec-row .nm { flex: 1; min-width: 0; font-size: 13px; color: #0f172a; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; }
      .cec-row .sum { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
      .cec-row.dup { background: #fffbeb; }
      .cec-row.open { background: #eef2ff; }
      .cec-flag { font-size: 9.5px; font-weight: 700; border-radius: 5px; padding: 1px 5px;
        margin-left: 6px; background: #fee2e2; color: #b91c1c; white-space: nowrap; }
      .cec-flag.w { background: #fef3c7; color: #92400e; }
      .cec-edit { padding: 8px 10px 10px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
      .cec-f { margin-bottom: 7px; }
      .cec-f > label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; color: #94a3b8; margin-bottom: 3px; }
      .cec-f input, .cec-f select { width: 100%; height: 40px; border: 1px solid #cbd5e1;
        border-radius: 8px; background: #fff; padding: 0 10px; font-size: 13.5px;
        font-variant-numeric: tabular-nums; }
      .cec-f input:focus, .cec-f select:focus { outline: 2px solid #0d9488; outline-offset: -2px; }
      .cec-f input[readonly] { background: #f1f5f9; color: #64748b; }
      .cec-f input.bad { background: #fee2e2; border-color: #fecaca; color: #b91c1c; font-weight: 600; }
      .cec-f input.warn { background: #fef3c7; border-color: #fde68a; }
      .cec-f .err { font-size: 10.5px; color: #b91c1c; margin-top: 3px; }
      /* Adeverințe — grila datelor elevului are lățimi pe măsura conținutului („Sexul" e cel
         mai lat, „Clasa" cel mai îngust); sub 900px cade pe două coloane, pe telefon pe una. */
      @media (max-width: 900px) {
        .adev-grid { grid-template-columns: 1fr 1fr !important; }
      }
      body.mobile-ui .adev-grid { grid-template-columns: 1fr !important; }
      /* Telefon rotit: lățimea e din belșug, înălțimea e resursa rară — grilele revin la două
         coloane, iar cardurile de an și rândurile registrului se așază tot pe două. */
      body.mb-land .adev-grid { grid-template-columns: 1fr 1fr !important; }

      /* FOAIE MATRICOLĂ + ADEVERINȚE pe telefon (RUNDA 255)
         Tabelele cu 6-7 coloane devin carduri (randate din JS pe `mbUI`); aici rămâne doar
         densitatea: câmpuri cu ținte tactile și liste pe două coloane la rotire. */
      body.mobile-ui .fm-ani input,
      body.mobile-ui .fm-ani select { height: 38px; font-size: 14px !important; }
      body.mb-land .fm-ani { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      body.mb-land .fm-ani > div { margin: 0 !important; }
      body.mb-land .adv-reg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
      body.mb-land .adv-reg > div { margin: 0 !important; }
      /* Matricea de note rămâne tabel (e o matrice reală), dar coloana disciplinei se strânge
         ca să încapă mai mulți ani pe ecran înainte de derulare. */
      body.mobile-ui .fm-note th:first-child,
      body.mobile-ui .fm-note td:first-child { min-width: 132px !important; }

      /* Sub-modalele cu conținut lung (Setări, Comparație) ocupă tot ecranul — `!important` bate
         `maxWidth`-ul scris inline. Confirmările scurte rămân dialoguri centrate (regula E8). */
      body.mobile-ui .cec-sub { padding: 0 !important; }
      body.mobile-ui .cec-subbox { max-width: none !important; max-height: none !important;
        width: 100% !important; height: 100% !important; border-radius: 0 !important;
        padding: 12px !important;
        padding-top: calc(12px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
      body.mobile-ui .cec-cfg-grid { grid-template-columns: 1fr !important; }
      body.mobile-ui.mb-big .cec-row .nm { font-size: 15.5px; }
      body.mobile-ui.mb-big .cec-row .sum { font-size: 15px; }
      body.mobile-ui.mb-big .cec-f input, body.mobile-ui.mb-big .cec-f select { font-size: 15.5px; }
      /* Rotit: înălțimea e resursa rară — antetul și rândurile se subțiază. */
      body.mb-land .cec-head { padding: 5px 10px !important; }
      body.mb-land .cec-row { min-height: 38px; padding: 3px 10px; }
      body.mb-land .cec-f input, body.mb-land .cec-f select { height: 34px; }

      /* ---- „Text mai mare" (comutator în „Mai multe") ----
         Mărește cu ~15-20% textele din listele mobile (Ziua, Tabel-heatmap, Burse-agendă,
         Absențe-listă) — pentru colegii care citesc greu fonturile mici. */
      body.mobile-ui.mb-big .mb-zi-row .nm { font-size: 15.5px; }
      body.mobile-ui.mb-big .mb-zi-row .no { font-size: 12px; }
      body.mobile-ui.mb-big .mb-zi-row .why { font-size: 11px; }
      body.mobile-ui.mb-big .mb-zi-foot { font-size: 12.5px; }
      body.mobile-ui.mb-big .mb-lrow .nm { font-size: 15.5px; }
      body.mobile-ui.mb-big .mb-lrow .no { font-size: 12px; }
      body.mobile-ui.mb-big .mb-ltot { font-size: 15px; }
      body.mobile-ui.mb-big .mb-ld { width: 11px; height: 11px; }
      body.mobile-ui.mb-big .mb-lz { width: 34px; height: 30px; font-size: 9.5px; }
      body.mobile-ui.mb-big .mb-lz b { font-size: 13px; }
      body.mobile-ui.mb-big .mb-ldt b { font-size: 16px; }
      body.mobile-ui.mb-big .bur-zi-row .nm { font-size: 15.5px; }
      body.mobile-ui.mb-big .bur-zi-row .no { font-size: 12px; }
      body.mobile-ui.mb-big .bur-zi-t { font-size: 15.5px; }
      body.mobile-ui.mb-big .bur-in { font-size: 18px; }
      body.mobile-ui.mb-big .abs-ml-h { font-size: 12px; }
      body.mobile-ui.mb-big .abs-ml-t, body.mobile-ui.mb-big .abs-ml-ro { font-size: 17px; }

      /* Absențe — pe ORICE ecran: câmpurile M/N se simt editabile (fundal cald la hover,
         contur teal la focus); celula T rămâne gri, calculată. */
      .abst input:not(:disabled):hover { background: #fff7ed; }
      .abst input:focus { outline: 2px solid #0d9488; outline-offset: -2px; }

      /* ---- ABSENȚE pe telefon ----
         Vederea „Tot anul" înseamnă 10 luni × 3 coloane + 3 de total = 33 de coloane — nefolosibilă
         cu degetul. Rămâne vederea pe o lună (efectul din JS readuce `absView` pe „luna curentă"
         dacă venim din „Tot anul"). */
      body.mobile-ui .abs-all { display: none !important; }
      /* Antetul: `flex justify-between` FĂRĂ wrap + un `<select>` de clasă fără lățime maximă =
         titlul se umflă și grupul de butoane (cu tot cu X) e împins în afara ecranului — modalul
         nu se mai putea nici închide, nici comuta pe altă lună. Același tipar ca la `cond-head`. */
      body.mobile-ui .abs-head { flex-wrap: wrap; position: relative; gap: 6px; }
      /* Titlul + selectorul de clasă stau pe ACELAȘI rând: fără nowrap, selectorul sărea pe
         rândul lui și „—" rămânea agățat singur sub „Absențe". */
      body.mobile-ui .abs-head-l { flex: 1 1 100%; min-width: 0; padding-right: 34px;
        font-size: 15px; flex-wrap: nowrap; white-space: nowrap; }
      body.mobile-ui .abs-head-l > select { flex: 1 1 auto; min-width: 0; max-width: 100%;
        font-size: 12.5px; }
      body.mobile-ui .abs-head-r { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
      /* Decalajul pentru notch se pune pe POZIȚIE, nu pe padding (altfel butonul crește în
         înălțime cât zona de siguranță — greșeala reparată la ecranul complet). */
      body.mobile-ui .abs-x { position: absolute; right: 2px; top: 0;
        margin-left: 0 !important; padding: 6px 8px; }
      /* Tabelul umple lățimea: `Nr.` și T/M/N fixe, iar `Nume elev` ia restul — se adaptează
         singur la 360px și la 420px, în loc să lase spațiu gol trunchiind numele degeaba.
         `!important` fiindcă `tableLayout:fixed` + `width` inline vin din JS. */
      body.mobile-ui .abst { width: 100% !important; }
      /* „Nr." dispare pe telefon: într-o listă ordonată nu spune nimic ce nu se vede din poziție,
         dar costă 24px din lățimea numelor. Rămâne pe calculator și în PDF (registrul tipărit îl
         cere). ⚠️ Coloana „Nume elev" are `left:34px` inline pentru `sticky` — offsetul trebuie
         dus la 0, altfel numele se decalează sub o coloană care nu mai există. */
      body.mobile-ui .abst colgroup col:nth-child(1) { width: 0 !important; }
      /* ⚠️ Celulele de „Nr." RĂMÂN în DOM. Cu `table-layout:fixed`, `display:none` pe o CELULĂ nu
         elimină COLOANA — restul celulelor se decalează cu una la stânga, iar numele elevilor
         ajung în coloana de lățime 0 (au și dispărut o dată așa). Se ascunde COLOANA, nu celula. */
      body.mobile-ui .abst thead tr:first-child th:first-child,
      body.mobile-ui .abst tbody tr > td:first-child:not([colspan]) {
        padding: 0 !important; border-left: 0 !important; border-right: 0 !important;
        overflow: hidden; color: transparent;
      }
      /* Celula de nume are `left:34px` INLINE pentru `sticky` — offsetul trebuie dus la 0 în
         AMBELE locuri (antet și corp), altfel numele rămâne decalat sub coloana ascunsă. */
      body.mobile-ui .abst thead tr:first-child th:nth-child(2),
      body.mobile-ui .abst tbody tr > td:nth-child(2) { left: 0 !important; }
      body.mobile-ui .abst colgroup col:nth-child(2) { width: auto !important; }
      body.mobile-ui .abst colgroup col:nth-child(n+3) { width: 46px !important; }
      body.mobile-ui .abst th, body.mobile-ui .abst td { padding-left: 1px; padding-right: 1px; }
      body.mobile-ui .abst tbody td:nth-child(2) {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      /* Benzile informative mâncau ~205px înainte de primul elev. Textul rămâne ÎNTREG (explică de
         ce nu se poate completa o lună) — se comprimă doar fontul și spațierea. */
      body.mobile-ui .abs-band { flex-wrap: wrap; padding: 6px 8px !important; font-size: 10.5px; }
      body.mobile-ui .abs-band * { font-size: 10.5px !important; }
      /* Regulile de blocare se citesc o dată: banda apare DOAR când e apăsată iconița ⓘ din
         antet — pe orice ecran (R181b: pe desktop era bandă permanentă, un rând irosit). */
      .abs-info-btn { display: inline-block; }
      .abs-info:not(.open) { display: none !important; }
      /* Chipul verde „Iunie · 48h · Deschide" trăiește în rândul iconițelor doar pe telefon;
         banda verde originală rămâne pe calculator. */
      .abs-grn { display: none; }
      body.mobile-ui .abs-grn { display: inline-flex; }
      body.mobile-ui .abs-grnband { display: none !important; }
      /* Totalul coboară sub tabel (părintele modalului e flex-column → `order`), iar legenda
         „T = total…" dispare — abrevierile se înțeleg din antetul coloanelor. */
      body.mobile-ui .abs-tot { order: 98; margin-bottom: 0; margin-top: 6px; }
      body.mobile-ui .abs-leg { display: none; }
      /* Tabelul LIZIBIL — colegii în vârstă trebuie să vadă clar unde scriu, ca să nu introducă
         greșit: litere mai mari, rânduri mai înalte, zebră, M/N alb (editabil) vs T gri
         (calculat), iar celula focalizată cu contur teal gros. */
      body.mobile-ui .abst { font-size: 13px !important; }
      body.mobile-ui .abst tbody td { height: 38px; border-color: #cbd5e1; }
      body.mobile-ui .abst tbody tr:nth-child(even) td { background-color: #f1f5f9; }
      body.mobile-ui .abst tbody tr:nth-child(odd) td { background-color: #fff; }
      body.mobile-ui .abst tbody td.abs-total,
      body.mobile-ui .abst tbody tr:nth-child(even) td.abs-total { background-color: #e2e8f0; }
      body.mobile-ui .abst thead th { border-color: #cbd5e1; font-size: 12px; padding-top: 4px; padding-bottom: 4px; }
      body.mobile-ui .abst thead th:nth-child(2) { text-align: center; }
      /* Numele elevilor — aceeași formatare ca lista din catalog (.mb-zi-row .nm). */
      body.mobile-ui .abst tbody td:nth-child(2) { padding-left: 8px !important;
        font-size: 13px; font-weight: 400; color: #0f172a; }
      body.mobile-ui .abst input {
        width: 100%; height: 36px; text-align: center; font-size: 14px; font-weight: 700;
        font-variant-numeric: tabular-nums; background: #fff;
      }
      body.mobile-ui .abst input:focus {
        outline: 2px solid #0d9488; outline-offset: -2px; background: #fefce8;
      }
      body.mobile-ui .po-upl-row > span:first-child { flex: 1 0 100%; }
      body.mobile-ui .po-upl-row select { flex: 1; min-width: 0; }
      body.mobile-ui .rp-nr, body.mobile-ui .rp-ore { display: none !important; }
      body.mobile-ui .cond-body table td, body.mobile-ui .cond-body table th { padding-left: 5px; padding-right: 5px; }
      /* Butonul de ecran complet din antetul Condicii apare DOAR pe telefon (props null altfel). */
      body.mobile-ui .cond-fs { position: absolute; right: 46px; top: 2px; padding: 6px 8px; }
      /* Fără X (cont doar-condică) butonul rămâne singur — ia locul lui, în colț. */
      body.mobile-ui .cond-fs-solo { right: 6px; }
      /* ---- „Orarul meu" pe telefon: o zi pe rând, în locul grilei 5×7 ---- */
      body.mobile-ui .om-tbl { display: none !important; }
      .om-zile { display: flex; gap: 4px; margin-bottom: 8px; }
      .om-zi-b { flex: 1; font-size: 11px; font-weight: 700; padding: 7px 2px; border-radius: 8px;
        border: 1px solid #e2e8f0; background: #fff; color: #64748b; }
      .om-zi-b.on { background: #0d9488; border-color: #0d9488; color: #fff; }
      .om-list { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
      .om-row { display: flex; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #f1f5f9; }
      .om-row:last-child { border-bottom: 0; }
      .om-ora { flex: none; width: 44px; font-size: 10px; font-weight: 700; color: #64748b;
        text-align: center; line-height: 1.2; padding-top: 4px; font-variant-numeric: tabular-nums; }
      .om-cel { flex: 1; min-width: 0; }
      /* Selectoarele din celulă devin ținte cât degetul (în grilă erau de 11px). */
      .om-cel select { min-height: 32px; font-size: 12px !important; }
      /* Lista de ore vs. tabelul de 5 coloane: se randează amândouă, se vede exact una. */
      .cond-mlist { display: none; }
      body.mobile-ui .cond-mlist { display: block; background: #fff; border-radius: 10px;
        overflow: hidden; border: 1px solid #e2e8f0; }
      body.mobile-ui .cond-tblwrap { display: none !important; }
      .cond-mrow { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; }
      .cond-mrow:last-child { border-bottom: 0; }
      .cond-mtop { display: flex; align-items: center; gap: 8px; min-height: 30px; }
      .cond-mora { font-size: 11px; font-weight: 700; color: #64748b; white-space: nowrap;
        font-variant-numeric: tabular-nums; }
      .cond-mcls { font-size: 12px; font-weight: 700; color: #0f172a; background: #f1f5f9;
        border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
      .cond-mctl { margin-left: auto; flex: none; display: flex; align-items: center; }
      /* Bifa de semnare devine o țintă cât degetul, nu un checkbox de 13px. */
      .cond-mctl input[type="checkbox"] { width: 22px; height: 22px; }
      .cond-mctl label { padding: 6px 4px 6px 8px; }
      .cond-mdisc { font-size: 11.5px; color: #334155; line-height: 1.3; margin-top: 1px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .cond-mprof { color: #94a3b8; }
      .cond-msupl { color: #6366f1; font-weight: 700; font-size: 9.5px; }
      .cond-mgrp { font-size: 10px; font-weight: 700; color: #b45309; background: #fffbeb;
        border-top: 1px solid #fde68a; border-bottom: 1px solid #fde68a; padding: 4px 8px; }
      /* „Semnează orele selectate (N)" se lipește jos, ca să nu derulezi înapoi după bifare. */
      body.mobile-ui .cond-signbar {
        position: sticky; bottom: 0; z-index: 5; background: rgba(248,250,252,.96);
        margin: 0 -8px -8px; padding: 8px; border-top: 1px solid #e2e8f0;
        backdrop-filter: blur(4px); flex-wrap: wrap;
      }
      /* Conținutul câștigă lățime: 20px de padding pe fiecare parte e prea mult pe telefon. */
      body.mobile-ui .cond-body { padding: 8px !important; }
      /* Întoarcerea din „Mod desktop": fără ea, șasiul mobil dispare cu tot cu comutatorul lui. */
      .mb-back {
        position: fixed; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 80;
        background: rgba(15,23,42,.86); color: #fff; border: 0; border-radius: 99px;
        padding: 9px 14px; font-size: 12px; font-weight: 700; display: flex; align-items: center;
        gap: 7px; box-shadow: 0 6px 18px rgba(15,23,42,.3);
      }
      .mb-row { display: flex; align-items: center; gap: 6px; }
      .mb-chev {
        width: 30px; height: 30px; border-radius: 9px; border: 1px solid #e2e8f0;
        display: flex; align-items: center; justify-content: center; color: #64748b;
        font-size: 13px; flex: none; background: #fff;
      }
      .mb-chev:disabled { opacity: .35; }
      /* `flex:none`: cu flex:1 numele clasei înghițea jumătate din rând ca spațiu gol, iar
         taburile rămâneau înghesuite în dreapta. Acum ocupă exact cât textul. */
      .mb-cls {
        flex: none; min-width: 0; display: flex; align-items: center; justify-content: center;
        gap: 5px; font-size: 15px; font-weight: 700; color: #0f172a; background: none;
        border: 0; padding: 4px 2px; white-space: nowrap;
      }
      .mb-pill {
        font-size: 11px; padding: 4px 8px; border-radius: 99px; border: 1px solid #e2e8f0;
        color: #64748b; background: #fff; white-space: nowrap; flex: none;
      }
      .mb-pill.on { background: #f1f5f9; }
      /* Taburile de produs existente rămân, dar fără marginile vechi */
      body.mobile-ui .mobile-product-tabs { display: flex !important; margin-top: 6px; }

      .mb-foot { flex: none; margin-top: auto; }
      .mb-bar {
        background: #fff; border-top: 1px solid #e2e8f0; border-radius: 0 0 12px 12px;
        display: flex; padding: 5px 2px; padding-bottom: calc(7px + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(15,23,42,.07);
      }
      .mb-tab {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
        background: none; border: 0; color: #94a3b8; padding: 4px 0; min-height: 44px;
      }
      .mb-tab i { font-size: 17px; line-height: 1; }
      .mb-tab span { font-size: 9.5px; }
      .mb-tab.on { color: #0f766e; }
      .mb-tab.on span { font-weight: 700; }
      /* „⋯" nu are nevoie de etichetă (convenție universală pentru „mai multe"), iar `flex:none`
         îi lasă doar lățimea iconiței — restul se împarte celorlalte patru, care AU nevoie de text.
         Linia din stânga îl separă de taburi, ca să se citească drept comandă aparte, nu al 5-lea tab. */
      .mb-tab.mb-more { flex: none; padding: 0 14px 0 16px; margin-left: 4px;
        border-left: 1px solid #e2e8f0; justify-content: center; }
      /* În orizontal, `body.mb-land .mb-tab` (specificitate mai mare) ar reseta padding-ul la `2px 0`
         și „⋯" s-ar lipi de margine — se repune aici, pe același nivel de specificitate. */
      body.mb-land .mb-tab.mb-more { padding: 2px 14px 2px 16px; }
      /* Bara de salvare: apare DOAR când există modificări nesalvate (autosave e oprit). */
      .mb-save {
        margin: 0 8px 6px; background: #0d9488; color: #fff; border: 0; width: calc(100% - 16px);
        border-radius: 12px; padding: 11px 14px; display: flex; align-items: center;
        justify-content: space-between; font-size: 13.5px; font-weight: 700;
        box-shadow: 0 6px 18px rgba(13,148,136,.35);
      }
      .mb-save:disabled { opacity: .7; }
      .mb-save.err { background: #e11d48; box-shadow: 0 6px 18px rgba(225,29,72,.35); }
      .mb-save .k { font-size: 11px; font-weight: 400; opacity: .85; }

      .mb-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 70; }
      .mb-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: #fff;
        border-radius: 18px 18px 0 0; padding: 8px 12px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
        max-height: 82vh; overflow-y: auto; box-shadow: 0 -8px 30px rgba(15,23,42,.25);
      }
      .mb-grab { width: 38px; height: 4px; border-radius: 99px; background: #e2e8f0; margin: 2px auto 10px; }
      .mb-grp {
        font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8;
        font-weight: 700; margin: 12px 0 6px;
      }
      .mb-grp:first-of-type { margin-top: 0; }
      .mb-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
      .mb-cell {
        border: 1px solid #e2e8f0; border-radius: 11px; padding: 10px; font-size: 12.5px;
        display: flex; align-items: center; gap: 8px; background: #fff; color: #334155;
        font-weight: 600; text-align: left; min-height: 44px;
      }
      .mb-cell i { width: 22px; height: 22px; border-radius: 7px; background: #f1f5f9; color: #64748b;
        display: flex; align-items: center; justify-content: center; font-size: 11px; flex: none; }
      .mb-cell.wide { grid-column: 1 / -1; justify-content: space-between; }
      .mb-badge { margin-left: auto; background: #dc2626; color: #fff; font-size: 9.5px;
        font-weight: 800; border-radius: 99px; padding: 1px 6px; flex: none; }
      .mb-cell:disabled { opacity: .45; }
      .mb-sw { width: 36px; height: 20px; border-radius: 99px; background: #e2e8f0; position: relative; flex: none; }
      .mb-sw.on { background: #0d9488; }
      .mb-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 99px;
        background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
      .mb-sw.on i { left: 18px; }
      /* Comutatoarele din „Altele" ca simple iconițe: aprins = teal plin, stins = card alb. */
      .mb-cells.tri { grid-template-columns: repeat(3, 1fr); }
      .mb-cell.tgl { justify-content: center; min-height: 40px; padding: 8px; }
      .mb-cell.tgl i { background: transparent; width: auto; height: auto; font-size: 16px; color: #94a3b8; }
      .mb-cell.tgl.on { background: #0d9488; border-color: #0d9488; }
      .mb-cell.tgl.on i { color: #fff; }

      /* ============================================================
         TELEFON ROTIT (`mb-land`, pusă din JS ca `landscape-compact`)
         Se inversează ce e rar: lățimea devine abundentă (~800px), înălțimea e scumpă (~360px).
         Deci economisim pe verticală și cheltuim pe orizontală — altfel rotirea telefonului ar
         arăta MAI PUȚIN decât portretul, exact invers față de așteptare.
         ============================================================ */
      body.mb-land #root { gap: 4px; }
      body.mb-land .mb-head { padding: 4px 8px; border-radius: 10px; }
      body.mb-land .mb-cls { font-size: 14px; }
      body.mb-land .mb-chev { width: 28px; height: 28px; }
      body.mb-land .mobile-product-tabs button { padding-top: 2px !important; padding-bottom: 2px !important; }
      /* Bara de jos: eticheta trece LÂNGĂ iconiță, nu sub ea. Ascunsă complet ar fi economisit
         ~16px pe verticală, dar în orizontal lățimea e abundentă (iconițele pluteau în gol), iar
         cinci iconițe fără text nu se pot deosebi. Pe un rând, costul vertical e zero. */
      /* `justify-content` e necesar explicit: la `flex-direction:row`, `align-items:center` (care
         centra orizontal cât timp era coloană) centrează pe verticală, iar conținutul s-ar lipi la
         stânga fiecărui slot. */
      body.mb-land .mb-tab { flex-direction: row; justify-content: center; gap: 6px;
        min-height: 34px; padding: 2px 0; }
      body.mb-land .mb-tab i { font-size: 15px; }
      body.mb-land .mb-tab span { font-size: 11px; }
      /* Taburile Evaluării Naționale: în portret rămâne doar iconița (plus eticheta celui activ),
         dar în orizontal lățimea prisosește, deci revin toate etichetele. Regula e ținută pe
         `.en-tabs`, nu pe `.cond-tabs`, ca cele 7 taburi ale condicii să nu înceapă să curgă. */
      body.mobile-ui.mb-land .en-tabs .cond-txt { display: inline !important; }
      body.mb-land .mb-bar { padding: 3px 2px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
      body.mb-land .mb-save { padding: 7px 12px; font-size: 12.5px; margin-bottom: 4px; }
      /* Listele pe DOUĂ coloane: la catalog se văd 8-10 elevi în loc de 4. */
      body.mb-land .mb-zi-list,
      body.mb-land .cdi-mlist,
      body.mb-land .om-list { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
      body.mb-land .mb-zi-row { min-height: 38px; }
      body.mb-land .cdi-card { margin-bottom: 0; }
      body.mb-land .cdi-mlist { gap: 6px; }
      body.mb-land .mb-zi-bar { padding: 4px 8px; }
      body.mb-land .mb-zi-foot { padding: 5px 8px; }
      /* Portofoliu: clasele și anii pe două coloane. Cardurile de comisie rămân pe o coloană —
         au acordeon înăuntru, iar două coloane ar rupe conținutul desfășurat. */
      body.mb-land .po-mlist { grid-template-columns: 1fr 1fr; align-content: start; }