/* 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ă. */

: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 */
.main { flex: 1; padding: 28px 32px; min-width: 0; }

/* 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; }
  .main { padding: 18px; }
}

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