/* 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);
}

* { box-sizing: border-box; }

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

.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; }
}