/* Fundație: variabile de design, reset, shell-ul layout-ului (.layout/.main), responsive.
   Restul stilurilor (sidebar, componente, modal, marketing, finanțe) sunt în fișierele vecine
   — vezi app/README.md pentru harta completă.

   Convenție responsive folosită în tot `app/css/`, gândită pe 3 paliere de ecran:
     A. ecran mare / monitor  (>1180px)  — sidebar-ul de 240px stă fix, .main are un plafon de
        lățime (mai jos) ca să nu se întindă absurd de larg pe monitoare ultra-wide.
     B. laptop mic            (~761–1180px) — sidebar-ul tot ocupă 240px + padding-ul lui .main,
        deci componentele late (tabele, rânduri-grid cu coloane fixe) trebuie să-și mute pragul
        de "breakpoint" luând în calcul acel offset de sidebar+padding (~264–304px), nu doar
        lățimea proprie a conținutului — altfel deraiază exact în acest interval, care e cel mai
        ușor de ratat pentru că la sidebar-ul deschis (>760px) nu mai există compromisul de spațiu
        pe care îl are telefonul. Vezi css/finante.css (.calc-produs-row, .cheltuieli-row).
     C. telefon               (<760px)  — sidebar-ul devine bară orizontală sus (vezi sidebar.css),
        .main își reduce padding-ul (mai jos), iar componentele late trec pe layout tip "card"
        (flex-wrap) în loc de grid cu coloane fixe. */

:root {
  --bg: #f4f5f8;
  --sidebar-bg: #1b2136;
  --sidebar-bg-2: #232a44;
  --sidebar-text: #aab0c6;
  --sidebar-text-dim: #6b7290;
  --sidebar-active-bg: #2c3660;
  --sidebar-active-text: #ffffff;
  --card-bg: #ffffff;
  --border: #e4e6ee;
  --text: #1b2136;
  --text-muted: #6b7280;
  --accent: #4f6df5;
  --accent-dark: #3b56d6;
  --green: #15803d;
  --green-bg: #e6f7ee;
  --yellow: #b45309;
  --yellow-bg: #fff4e0;
  --red: #dc2626;
  --red-bg: #fdeaea;
  --gray: #6b7280;
  --gray-bg: #f1f2f4;
  --blue: #2563eb;
  --blue-bg: #e8efff;
  --pchart-1: #2a78d6;
  --pchart-2: #eb6834;
  --pchart-3: #1baf7a;
  --pchart-4: #eda100;
  --pchart-5: #e87ba4;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(20,22,40,.06), 0 4px 12px rgba(20,22,40,.04);
  /* Folosite pentru hover-uri/fundaluri de input — separate de --card-bg ca să poată fi altă
     nuanță decât cardurile în tema închisă (vezi mai jos), nu doar "alb" hardcodat ca înainte. */
  --hover-bg: #f8f9fb;
  --input-bg: #ffffff;
  /* Zebra discretă pe tabele lungi (ex: Marketing → Testare Produse) — mai stinsă decât --hover-bg,
     ca rândul cu adevărat sub cursor tot să iasă în evidență peste zebra. */
  --zebra-bg: #fafbfd;
}

/* Tema închisă — comutată din butonul de sub email (sidebar), vezi js/core/theme.js. Suprascriem
   DOAR variabilele de mai sus (nu regulile care le folosesc), deci orice element din restul
   fișierelor CSS care e deja construit cu var(--...) moștenește automat paleta închisă fără nicio
   altă modificare. Contrastul e gândit să rămână confortabil: fundaluri aproape-negre (nu negru
   pur, obosește ochii), text aproape-alb (nu alb pur, la fel), iar culorile semantice (verde/
   roșu/galben/albastru) sunt puțin mai deschise decât în tema clară ca să rămână lizibile pe
   fundal închis, cu fundalurile lor "-bg" ca tentă slabă (rgba) peste --card-bg în loc de pastel
   opac. */
:root[data-theme="dark"] {
  --bg: #14161f;
  --sidebar-bg: #0e1017;
  --sidebar-bg-2: #1c2030;
  --sidebar-text: #a9aec4;
  --sidebar-text-dim: #6b7290;
  --sidebar-active-bg: #323e6e;
  --sidebar-active-text: #ffffff;
  --card-bg: #1b1e2b;
  --border: #2e3244;
  --text: #e7e9f2;
  --text-muted: #9599b0;
  --accent: #6685ff;
  --accent-dark: #8aa0ff;
  --green: #34d399;
  --green-bg: rgba(52,211,153,.16);
  --yellow: #fbbf24;
  --yellow-bg: rgba(251,191,36,.16);
  --red: #f87171;
  --red-bg: rgba(248,113,113,.16);
  --gray: #a3a8bd;
  --gray-bg: rgba(163,168,189,.14);
  --blue: #60a5fa;
  --blue-bg: rgba(96,165,250,.16);
  --pchart-1: #5b9bef;
  --pchart-2: #ff8a5c;
  --pchart-3: #34d399;
  --pchart-4: #fbbf24;
  --pchart-5: #f2a1c2;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
  --hover-bg: #262b3c;
  --input-bg: #232739;
  --zebra-bg: #1f2230;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* html (nu doar body) ia și el fundalul temei — fără asta, "bounce"-ul de scroll pe iOS/macOS
   dincolo de capătul paginii (sau simplul viewport mai înalt decât conținutul) arată o dungă albă
   sub un body scurt, chiar și în tema închisă. */
html { background: var(--bg); }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* Tranziție scurtă la comutarea temei, ca schimbarea culorilor să pară intenționată (un fade),
   nu un "flash" brusc — dar SCOASĂ din prima randare (vezi js/core/theme.js + scriptul inline din
   <head>, care aplică tema înainte de orice paint), altfel chiar și acea primă aplicare ar anima
   vizibil. Elementele animate sunt cele care chiar schimbă culoare între teme (fundaluri/borduri/
   text), nu tot ce există (ar încetini inutil hover-urile rapide de pe butoane/rânduri). */
body, .sidebar, .card, .table-wrap, .modal, input, select, textarea, .theme-toggle-btn {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.layout { display: flex; min-height: 100vh; }

/* Main — plafonăm lățimea (centrată în spațiul rămas lângă sidebar) ca pe un monitor mare/ultra-wide
   conținutul (carduri KPI, tabele) să nu se întindă edge-to-edge cu goluri absurde între coloane;
   sub acest plafon (majoritatea ecranelor) max-width nu are niciun efect, .main ocupă tot spațiul
   rămas ca înainte. */
.main { flex: 1; max-width: 1600px; margin: 0 auto; padding: 28px 32px; min-width: 0; }

/* B. Laptop mic: sidebar-ul (240px) rămâne fix, dar recuperăm puțin spațiu din padding-ul lui
   .main, ca tabelele/rândurile late din componente să aibă șanse mai mari să încapă fără scroll
   orizontal — vezi și pragurile din finante.css care țin cont exact de acest padding. */
@media (max-width: 1180px) {
  .main { padding: 22px 22px; }
}

/* Tabletă / telefon în lat: sidebar devine bară orizontală sus — regulile pentru .sidebar
   însuși sunt în css/sidebar.css (nu aici), fiindcă acel fișier e încărcat după base.css în
   index.html și ar câștiga cascada oricum peste orice am pune aici cu aceeași specificitate;
   mai bine ținem toată logica responsive a sidebar-ului într-un singur loc. */
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  /* margin:0 (nu doar padding) — "margin:0 auto" de mai sus centrează .main pe AXA PRINCIPALĂ a
     unui .layout orizontal (desktop). Odată ce .layout devine flex-direction:column, acea axă
     devine verticală, iar auto-marginile orizontale trec pe axa TRANSVERSALĂ — ceea ce anulează
     stretch-ul implicit (align-items:stretch) și micșorează .main la lățimea conținutului lui în
     loc să-l umple pe 100%, lăsând copiii lați (ex: tabelul cu min-width) să împingă întreaga
     pagină în lateral. Fără acest reset, orice element lat de pe orice pagină deschide scroll
     orizontal pe TOATĂ pagina pe telefon, nu doar în interiorul lui. */
  .main { padding: 18px; margin: 0; }
}

/* Telefon îngust: și mai puțin padding, ca conținutul să nu se simtă înghesuit lângă margini. */
@media (max-width: 480px) {
  .main { padding: 14px 12px; }
}