/* ============================================================
   TANCUL Design System — NON-NEGOCIABIL
   Creat: 2026-04-13 | TC676 | Versiune: 1.0
   NU modifica valorile fara aprobare Ovidiu.
   ============================================================ */

/* 1. CSS Variables */
:root {
  accent-color: var(--brand-red); /* override browser blue în checkboxes, selects, range, progress */
  color-scheme: dark; /* default dark — theme.js setează light pe body */
  /* ─── Brand TopoTanc (MapDesign #bb272d) ─── */
  --brand-red:        #bb272d;
  --brand-red-l:      #d93535;
  --brand-red-bg:     rgba(187,39,45,0.10);
  --brand-yellow:     #ffc300;
  --brand-yellow-bg:  rgba(255,195,0,0.10);
  --brand-navy:       #3d52c4;
  --brand-navy-bg:    rgba(61,82,196,0.10);
  --brand-green:      #29a870;
  --brand-green-bg:   rgba(41,168,112,0.10);
  --brand-purple:     #b84e8e;
  --brand-purple-bg:  rgba(184,78,142,0.10);

  /* Background — ORIGINAL (nu schimba, contrastul e validat) */
  --bg-body:    #0a0e1a;
  --bg-card:    #0f1117;
  --bg-sidebar: #1a1f2e;
  --bg-topbar:  #161b27;
  --bg-surface: #1e2433;

  /* Borders — ORIGINAL */
  --border:       #2a3040;
  --border-light: #374151;

  /* Text — ORIGINAL */
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-subtle:    #4a5568;

  /* Colors — ORIGINAL (semantic, pentru componente existente) */
  --blue:        #378ADD;
  --blue-light:  #85b7eb;
  --blue-bg:     #1a3a5c;

  --green:       #1D9E75;
  --green-light: #34d399;
  --green-bg:    #1a2e1a;

  --orange:      #EF9F27;
  --orange-dark: #BA7517;
  --orange-bg:   #2d1f0a;

  --red:         #E24B4A;
  --red-light:   #f87171;
  --red-bg:      #2d1a1a;

  --violet:      #7F77DD;
  --violet-bg:   #1e1a3a;

  /* Spacing */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;

  --shadow-card: 0 4px 20px rgba(0,0,0,0.4);
}

/* ─── LIGHT THEME ─── */
body.light {
  color-scheme: light; /* forțează browser să folosească light pentru selects, scrollbars, inputs */
  --bg-body:    #f0f2f7;
  --bg-card:    #ffffff;
  --bg-sidebar: #ffffff;
  --bg-topbar:  #ffffff;
  --bg-surface: #f4f5f8;

  --border:       #dde1ea;
  --border-light: #c5cad5;

  --text-primary:   #0f1117;
  --text-secondary: #4a5568;
  --text-muted:     #718096;
  --text-subtle:    #a0aec0;

  /* Semantic colors adaptat light */
  --blue-bg:   rgba(55,138,221,0.08);
  --green-bg:  rgba(29,158,117,0.08);
  --orange-bg: rgba(239,159,39,0.08);
  --red-bg:    rgba(187,39,45,0.08);
  --violet-bg: rgba(127,119,221,0.08);

  --shadow-card: 0 2px 12px rgba(0,0,0,0.08);
}

/* ─── Tailwind bg overrides — always apply Design System palette ─── */
.bg-background-dark { background-color: var(--bg-body) !important; }
.bg-surface-dark    { background-color: var(--bg-surface) !important; }

/* ─── Login modal — always fully opaque (app skeleton must NOT show through) ─── */
#login-modal { background: rgba(10,14,26,0.97) !important; z-index: 9999 !important; }
#login-modal > div {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
#login-modal input {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

/* ─── Sidebar + header Tailwind overrides (light mode) ─── */
body.light .glass-navigation {
  background: rgba(255,255,255,0.98) !important;
  border-right: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 2px 0 12px rgba(0,0,0,0.06) !important;
}
body.light header {
  background: rgba(255,255,255,0.98) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}

/* Sidebar menu items — light mode text + active state */
body.light .menu-item {
  color: #1e293b !important;
}
body.light .menu-item span.font-bold,
body.light .menu-item span.material-symbols-outlined {
  color: #1e293b !important;
}
body.light .menu-item.active {
  background: rgba(0,0,0,0.06) !important;
  color: #0f1117 !important;
}
body.light .menu-item.active span {
  color: #0f1117 !important;
}
body.light .menu-item:hover { background: rgba(0,0,0,0.04) !important; }

/* Sidebar category labels */
body.light .text-slate-500 { color: #64748b !important; }
body.light p.text-slate-500,
body.light span.text-slate-500 { color: #64748b !important; }

/* General Tailwind text overrides for light mode */
body.light .text-slate-100,
body.light .text-white  { color: var(--text-primary) !important; }
body.light .text-slate-400 { color: var(--text-secondary) !important; }

/* Card / surface backgrounds — light mode */
body.light .bg-background-dark,
body.light .bg-slate-900,
body.light .bg-background-dark\/80,
body.light .bg-slate-800 { background: var(--bg-card) !important; }
body.light .bg-surface-dark { background: var(--bg-surface) !important; }

/* Borders */
body.light .border-slate-800,
body.light .border-slate-700 { border-color: var(--border) !important; }

/* Login modal — light mode overrides */
body.light #login-modal { background: rgba(220,224,232,0.98) !important; }
body.light #login-modal > div {
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
}
body.light #login-modal h2 { color: var(--text-primary) !important; }
body.light #login-modal p  { color: var(--text-secondary) !important; }
body.light #login-modal label { color: var(--text-muted) !important; }
body.light #login-modal input {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

body.light .hover\:bg-white\/5:hover { background: rgba(0,0,0,0.04) !important; }

/* ─── LIGHT MODE — Comprehensive dark slate override ─── */
/* Backgrounds: solid classes */
body.light .bg-slate-950 { background-color: var(--bg-body)    !important; }
body.light .bg-slate-900 { background-color: var(--bg-card)    !important; }
body.light .bg-slate-800 { background-color: #ffffff           !important; }
body.light .bg-slate-700 { background-color: var(--bg-surface) !important; }
body.light .bg-slate-600 { background-color: #e4e8f0           !important; }
body.light .bg-slate-500 { background-color: #d1d8e4           !important; }

/* Filter buttons & tab toggles — în light mode nu dispar în fundal */
body.light button.bg-slate-800,
body.light button.bg-slate-700 {
  background-color: #e2e8f0 !important; /* slate-200 — vizibil pe fond alb */
  color: #475569 !important;
}
body.light button.bg-slate-800:hover,
body.light button.bg-slate-700:hover {
  background-color: #cbd5e1 !important; /* slate-300 la hover */
}
/* Container-ele "pill" de taburi (bg-slate-800 wrapper) să arate ca panel */
body.light div.bg-slate-800.rounded-lg { background-color: #f1f5f9 !important; }

/* Backgrounds: opacity modifier variants (bg-slate-800/50 etc.) */
body.light .bg-slate-950\/80,
body.light .bg-slate-900\/95,
body.light .bg-slate-900\/90,
body.light .bg-slate-900\/80,
body.light .bg-slate-900\/60,
body.light .bg-slate-900\/50,
body.light .bg-slate-900\/40,
body.light .bg-slate-900\/30,
body.light .bg-slate-800\/80,
body.light .bg-slate-800\/70,
body.light .bg-slate-800\/60,
body.light .bg-slate-800\/50,
body.light .bg-slate-800\/30,
body.light .bg-slate-800\/20 { background-color: var(--bg-card) !important; }

body.light .bg-slate-700\/50,
body.light .bg-slate-700\/30,
body.light .bg-slate-600\/50,
body.light .bg-slate-600\/30,
body.light .bg-slate-600\/20,
body.light .bg-slate-600\/10,
body.light .bg-slate-500\/20 { background-color: var(--bg-surface) !important; }

/* Borders: solid */
body.light .border-slate-900 { border-color: var(--border) !important; }
body.light .border-slate-700 { border-color: var(--border) !important; }
body.light .border-slate-600 { border-color: var(--border-light) !important; }

/* Borders: opacity modifier variants */
body.light .border-slate-800\/60,
body.light .border-slate-800\/50,
body.light .border-slate-800\/30 { border-color: var(--border) !important; }
body.light .border-slate-700\/50,
body.light .border-slate-700\/30 { border-color: var(--border) !important; }
body.light .border-slate-600\/20 { border-color: var(--border-light) !important; }
body.light .border-slate-500\/30 { border-color: var(--border-light) !important; }

/* Text: near-white → readable dark */
body.light .text-white   { color: var(--text-primary)   !important; }
body.light .text-slate-100,
body.light .text-slate-200,
body.light .text-slate-300 { color: var(--text-secondary) !important; }
body.light .text-slate-400 { color: var(--text-secondary) !important; }
/* text-slate-500/600/700 are readable in light mode — leave them */

/* Pastel *-300 text → vibrant equivalents in light mode */
body.light .text-blue-300   { color: #1e40af !important; }
body.light .text-blue-400   { color: #1d4ed8 !important; }
body.light .text-amber-300  { color: #b45309 !important; }
body.light .text-amber-400  { color: #d97706 !important; }
body.light .text-green-300  { color: #15803d !important; }
body.light .text-green-400  { color: #16a34a !important; }
body.light .text-emerald-300 { color: #065f46 !important; }
body.light .text-emerald-400 { color: #059669 !important; }
body.light .text-purple-300 { color: #6d28d9 !important; }
body.light .text-purple-400 { color: #7c3aed !important; }
body.light .text-violet-300 { color: #5b21b6 !important; }
body.light .text-violet-400 { color: #6d28d9 !important; }
body.light .text-cyan-300   { color: #0e7490 !important; }
body.light .text-cyan-400   { color: #0891b2 !important; }
body.light .text-yellow-300 { color: #b45309 !important; }
body.light .text-yellow-400 { color: #d97706 !important; }
body.light .text-yellow-500 { color: #92400e !important; }
body.light .text-red-300    { color: #b91c1c !important; }
body.light .text-red-400    { color: #dc2626 !important; }
body.light .text-pink-300   { color: #be185d !important; }
body.light .text-pink-400   { color: #db2777 !important; }
body.light .text-indigo-300 { color: #3730a3 !important; }
body.light .text-indigo-400 { color: #4338ca !important; }
body.light .text-teal-300   { color: #0f766e !important; }
body.light .text-teal-400   { color: #0d9488 !important; }
body.light .text-sky-300    { color: #0369a1 !important; }
body.light .text-sky-400    { color: #0284c7 !important; }
body.light .text-pink-300   { color: #be185d !important; }
body.light .text-red-300    { color: #b91c1c !important; }
body.light .text-red-400    { color: #dc2626 !important; }

/* Gradient cards cu dark from/to → light mode background */
body.light [class*="from-blue-900"],
body.light [class*="from-slate-900"],
body.light [class*="from-gray-900"]  { --tw-gradient-from: #dbeafe !important; }
body.light [class*="from-amber-900"] { --tw-gradient-from: #fef3c7 !important; }
body.light [class*="from-green-900"],
body.light [class*="from-emerald-900"] { --tw-gradient-from: #d1fae5 !important; }
body.light [class*="from-purple-900"],
body.light [class*="from-violet-900"] { --tw-gradient-from: #ede9fe !important; }
body.light [class*="to-blue-800"],
body.light [class*="to-slate-800"]   { --tw-gradient-to: #eff6ff !important; }
body.light [class*="to-amber-800"]   { --tw-gradient-to: #fffbeb !important; }
body.light [class*="to-green-800"],
body.light [class*="to-emerald-800"] { --tw-gradient-to: #ecfdf5 !important; }
body.light [class*="to-purple-800"],
body.light [class*="to-violet-800"]  { --tw-gradient-to: #f5f3ff !important; }

/* Exception: colored buttons keep white text (same element has both classes) */
body.light .bg-blue-600.text-white,
body.light .bg-blue-500.text-white,
body.light .bg-blue-700.text-white,
body.light .bg-red-500.text-white,
body.light .bg-red-600.text-white,
body.light .bg-green-500.text-white,
body.light .bg-green-600.text-white,
body.light .bg-amber-500.text-white,
body.light .bg-amber-600.text-white,
body.light .bg-violet-500.text-white,
body.light .bg-violet-600.text-white,
body.light .bg-purple-500.text-white,
body.light .bg-purple-600.text-white,
body.light .bg-emerald-600.text-white,
body.light .bg-primary.text-white { color: #ffffff !important; }

/* Buttons with colored bg — also keep descendant text white */
body.light .bg-blue-600 .text-white,
body.light .bg-blue-500 .text-white,
body.light .bg-red-500 .text-white,
body.light .bg-red-600 .text-white,
body.light .bg-green-500 .text-white,
body.light .bg-green-600 .text-white,
body.light .bg-amber-600 .text-white,
body.light .bg-violet-500 .text-white,
body.light .bg-violet-600 .text-white,
body.light .bg-emerald-600 .text-white { color: #ffffff !important; }

/* ============================================================
   2. TANCUL CARD — widget container standard
   ============================================================ */
.tancul-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tancul-card .card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
}

.tancul-card .card-icon {
  font-size: 16px;
  line-height: 1;
}

.tancul-card .card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
}

.tancul-card .card-body {
  padding: 12px 16px;
}

.tancul-card .card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-topbar);
}

/* ============================================================
   3. BADGE — status indicator inline
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-blue   { background: var(--blue-bg);   color: var(--blue-light); }
.badge-green  { background: var(--green-bg);  color: var(--green);      }
.badge-orange { background: var(--orange-bg); color: var(--orange);     }
.badge-red    { background: var(--red-bg);    color: var(--red-light);  }
.badge-violet { background: var(--violet-bg); color: var(--violet);     }
.badge-gray   { background: var(--bg-surface); color: var(--text-muted); }

/* ============================================================
   4. STAT-BOX — KPI cifra mare + label
   ============================================================ */
.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
}

.stat-box .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-box .stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-box .stat-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ============================================================
   5. BAR-ROW — progress bar cu label si procent
   ============================================================ */
.bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.bar-row .bar-label {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 80px;
  white-space: nowrap;
}

.bar-row .bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-surface);
  border-radius: 999px;
  overflow: hidden;
}

.bar-row .bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.bar-fill-blue   { background: var(--blue);   }
.bar-fill-green  { background: var(--green);  }
.bar-fill-orange { background: var(--orange); }
.bar-fill-red    { background: var(--red);    }
.bar-fill-violet { background: var(--violet); }

.bar-row .bar-pct {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 32px;
  text-align: right;
}

/* ============================================================
   6. LIST-ITEM — rand lista cu dot colorat
   ============================================================ */
.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.list-item:last-child {
  border-bottom: none;
}

.list-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-blue   { background: var(--blue);   }
.dot-green  { background: var(--green);  }
.dot-orange { background: var(--orange); }
.dot-red    { background: var(--red);    }
.dot-violet { background: var(--violet); }
.dot-gray   { background: var(--text-muted); }

.list-item .list-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item .list-value {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ============================================================
   7. STATE CLASSES — loading / error / success / empty
   ============================================================ */
.state-loading,
.state-error,
.state-success,
.state-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  font-size: 13px;
  border-radius: var(--radius-md);
}

.state-loading {
  color: var(--text-muted);
  background: transparent;
}

.state-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-light);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: tancul-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes tancul-spin {
  to { transform: rotate(360deg); }
}

.state-error {
  color: var(--red-light);
  background: var(--red-bg);
}

.state-success {
  color: var(--green);
  background: var(--green-bg);
}

.state-empty {
  color: var(--text-muted);
  background: transparent;
}

/* ============================================================
   8. OUTDOOR MODE — contrast sporit pentru teren
   ============================================================ */
body.outdoor-mode {
  --bg-body:    #000000;
  --bg-card:    #0a0a0a;
  --bg-topbar:  #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #d0d0d0;
  --blue:    #5ba8ff;
  --green:   #2ecc71;
  --orange:  #f39c12;
  --red:     #e74c3c;
}

/* ============================================================
   9. PRINT CSS — aspect decent la Ctrl+P
   ============================================================ */
@media print {
  .sidebar,
  .topbar,
  .tancul-btn,
  button,
  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .tancul-card {
    border: 1px solid #ccc !important;
    background: white !important;
  }

  .tancul-card .card-header {
    background: #f5f5f5 !important;
    color: black !important;
  }
}

/* ==================== TOOLTIP GLOBAL (TC677) ==================== */

.tancul-tooltip {
  position: fixed;
  z-index: 99999;
  background: var(--bg-card, #0f1117);
  color: var(--text-secondary, #94a3b8);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 5px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  max-width: 220px;
  pointer-events: none;
  white-space: normal;
  letter-spacing: 0.01em;
}

/* ==================== DASHBOARD V2 — SECȚIUNI (TC677) ==================== */

.dash-edit-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}

.dash-edit-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-card, #0f1117);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  color: var(--text-secondary, #94a3b8);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-edit-btn:hover {
  border-color: var(--accent-blue, #378ADD);
  color: var(--accent-blue, #378ADD);
  transform: none;
  box-shadow: none;
}

.dash-edit-btn.active {
  background: rgba(55,138,221,0.12);
  border-color: var(--accent-blue, #378ADD);
  color: var(--accent-blue, #378ADD);
}

.dash-section {
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  background: var(--bg-card, #0f1117);
}

.dash-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  transition: background 0.15s ease;
}

.dash-section-header:hover {
  background: rgba(255,255,255,0.03);
}

.dash-section-chevron {
  font-size: 16px;
  color: var(--text-secondary, #94a3b8);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
  flex-shrink: 0;
}

.dash-section.collapsed .dash-section-chevron {
  transform: rotate(-90deg);
}

.dash-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #94a3b8);
  flex: 1;
}

.dash-section-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary, #94a3b8);
}

.dash-section-body {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  transition: max-height 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease, padding 0.25s ease;
  max-height: 800px;
  overflow: hidden;
}

.dash-section.collapsed .dash-section-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* Card individual în dashboard */
.dash-card {
  position: relative;
  min-height: 80px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 8px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.dash-card:hover {
  border-color: rgba(255,255,255,0.12);
}

.dash-card.hidden-card {
  opacity: 0.3;
}

/* ==================== DASHBOARD V2b — TC748 ==================== */
/* ==================== DASHBOARD V2b — HERO LAYOUT (TC677b) ==================== */

/* KPI HERO ROW — 4 carduri egale */
.dash-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.dash-hc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.dash-hc:hover { border-color: var(--border-light); }
.dash-hc::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
}
.dash-hc-yellow::after { background: var(--brand-yellow); }
.dash-hc-red::after    { background: var(--brand-red); }
.dash-hc-green::after  { background: var(--brand-green); }
.dash-hc-purple::after { background: var(--brand-purple); }

.dash-hc-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); margin-bottom: 9px;
}
.dash-hc-val {
  font-size: 38px; font-weight: 900;
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 9px;
}
.dash-hc-yellow .dash-hc-val { color: var(--brand-yellow); }
.dash-hc-red    .dash-hc-val { color: var(--brand-red-l); }
.dash-hc-green  .dash-hc-val { color: var(--brand-green); }
.dash-hc-purple .dash-hc-val { color: var(--brand-purple); }

.dash-hc-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.dash-hc-nav {
  position: absolute; top: 11px; right: 12px;
  font-size: 10px; font-weight: 700;
  color: var(--text-muted); opacity: 0; transition: opacity 0.2s;
}
.dash-hc:hover .dash-hc-nav { opacity: 1; color: var(--brand-red-l); }

/* Donut inner layout pentru cardul Lăpușnicu */
.dash-hc-donut-inner {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 10px;
}
.dash-hc-sub { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
.dash-hc-stages {
  display: flex; gap: 9px; font-size: 10px;
  color: var(--text-secondary); flex-wrap: wrap;
}
.dash-donut { position: relative; width: 62px; height: 62px; flex-shrink: 0; }
.dash-donut-n {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--brand-purple);
}

/* ALERT STRIP */
.dash-alert-strip {
  display: flex; align-items: center; gap: 8px;
  background: var(--brand-red-bg);
  border: 1px solid rgba(187,39,45,0.35);
  border-left: 3px solid var(--brand-red);
  border-radius: var(--radius-md);
  padding: 9px 14px; margin-bottom: 10px;
  font-size: 11px; font-weight: 600; color: var(--brand-red-l);
}
.dash-alert-sep { color: rgba(187,39,45,0.35); }

/* METRIC ROW — 4 mini-carduri egale */
.dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 10px;
}
.dash-met {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.dash-met:hover { border-color: var(--border-light); }
.dash-met-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 4px;
}
.dash-met-val { font-size: 22px; font-weight: 800; line-height: 1.1; margin: 2px 0; }
.dash-met-sub { font-size: 10px; color: var(--text-secondary); }
.dash-sparkline { margin-top: 6px; }

/* BOTTOM GRID — 3 carduri egale */
.dash-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.dash-blk {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: background 0.2s;
}
.dash-blk-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dash-blk-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-secondary); flex: 1;
}
.dash-blk-link {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  cursor: pointer; padding: 3px 8px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-surface);
  transition: color 0.15s, border-color 0.15s; text-decoration: none;
}
.dash-blk-link:hover { color: var(--brand-red-l); border-color: rgba(187,39,45,0.4); }
.dash-blk-body { padding: 14px; flex: 1; }

/* Tag badges reutilizabile */
.tt-tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
}
.tt-tag-red    { background: rgba(187,39,45,0.12);  color: var(--brand-red-l); }
.tt-tag-yellow { background: rgba(255,195,0,0.12);  color: var(--brand-yellow); }
.tt-tag-green  { background: rgba(41,168,112,0.12); color: var(--brand-green); }
.tt-tag-purple { background: rgba(184,78,142,0.12); color: var(--brand-purple); }
.tt-tag-gray   { background: var(--bg-surface); color: var(--text-secondary); }

/* Topbar brand logo */
.tt-logo {
  display: flex; align-items: center; gap: 0;
  font-size: 16px; font-weight: 900; letter-spacing: -0.025em;
  user-select: none; text-decoration: none;
}
.tt-logo .tl-r { color: var(--brand-red); }
.tt-logo .tl-w { color: var(--text-primary); }
.tt-logo .tl-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-yellow); margin-left: 2px;
  margin-bottom: 9px; flex-shrink: 0;
}

/* Theme toggle button */
.tt-theme-btn {
  font-family: inherit; font-size: 14px; line-height: 1;
  background: var(--bg-surface); border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 6px;
  padding: 5px 9px; cursor: pointer; transition: all 0.15s;
}
.tt-theme-btn:hover { border-color: var(--border-light); color: var(--text-primary); }

/* Light mode: invert Leaflet tiles */
body:not(.light) .leaflet-tile-pane {
  filter: invert(1) hue-rotate(200deg) saturate(0.5) brightness(0.7);
}

/* Edit mode overlay pe card */
.dash-card-hide-btn {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  color: var(--text-secondary, #94a3b8);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s ease;
  z-index: 2;
}

.dash-card-hide-btn:hover {
  background: rgba(226,75,74,0.3);
  color: var(--accent-red, #E24B4A);
  border-color: var(--accent-red, #E24B4A);
  transform: none;
  box-shadow: none;
}

body.dash-edit-mode .dash-card-hide-btn {
  display: block;
}

body.dash-edit-mode .dash-card.hidden-card .dash-card-hide-btn {
  color: var(--accent-green, #1D9E75);
  border-color: var(--accent-green, #1D9E75);
}

/* Card label + valoare */
.dash-card-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #94a3b8);
}

.dash-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
  line-height: 1.1;
}

.dash-card-sub {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-card-sub span {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Drag handle în edit mode */
body.dash-edit-mode .dash-section-header {
  cursor: grab;
}

body.dash-edit-mode .dash-section-header:active {
  cursor: grabbing;
}

.dash-section.drag-over {
  border-color: var(--accent-blue, #378ADD);
  background: rgba(55,138,221,0.05);
}

/* ==================== TC758 LIGHT THEME COMPLETION ==================== */
/* Generated: 2026-04-15 | Audit: scripts/audit_light_theme.py */
/* Regulă: NU modifica culorile de brand */

/* ── design_system.css gaps ── */
body.light .tancul-card .card-header,
body.light .tancul-card .card-footer {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border);
}

body.light .tancul-tooltip {
  background: #ffffff;
  color: var(--text-secondary);
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

body.light .dash-edit-btn {
  background: var(--bg-card);
  color: var(--text-secondary);
  border-color: var(--border);
}

body.light .dash-section {
  background: var(--bg-card);
  border-color: var(--border);
}

body.light .dash-hc,
body.light .dash-met,
body.light .dash-blk {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* ── premium_vars.css gaps ── */
body.light ::-webkit-scrollbar-track {
  background: var(--bg-surface);
}

/* ── dashboard.css gaps ── */
body.light .page-title {
  color: var(--text-primary) !important;
}

body.light .kpi-value {
  color: var(--text-primary) !important;
}

body.light .btn-icon {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-primary);
}

body.light .btn-icon:hover {
  background: var(--bg-card);
  border-color: var(--border-light);
}

body.light .chart-card {
  background: var(--bg-card);
  border-color: var(--border);
}

body.light .chart-title {
  color: var(--text-primary) !important;
}

/* Section cards în dashboard */
body.light .section-title {
  color: var(--text-primary) !important;
}

body.light .section-icon {
  color: var(--brand-yellow);
}

body.light .section-link {
  color: var(--brand-navy);
}

body.light .data-table tbody td {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}

/* Badge-uri dashboard — light mode semantic */
body.light .view-container .badge-blue {
  background: rgba(55,138,221,0.12);
  color: #1e40af;
}

body.light .view-container .badge-yellow {
  background: rgba(255,195,0,0.15);
  color: #92400e;
}

body.light .view-container .badge-green {
  background: rgba(41,168,112,0.12);
  color: #065f46;
}

body.light .view-container .badge-red {
  background: rgba(187,39,45,0.12);
  color: #991b1b;
}

body.light .view-container .badge-danger {
  background: rgba(187,39,45,0.12);
  color: #991b1b;
}

/* btn-small în dashboard */
body.light .btn-small {
  background: var(--brand-navy);
  color: #ffffff;
  border: none;
}

body.light .btn-small:hover {
  background: #2d3da3;
}

/* Activity și action labels */
body.light .activity-client {
  color: var(--text-primary) !important;
}

body.light .action-label,
body.light .action-title {
  color: var(--text-primary) !important;
}

body.light .primary-btn-text {
  color: #ffffff !important;
}

/* Quick action buttons */
body.light .quick-action-btn,
body.light .action-card {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}

body.light .quick-action-btn:hover,
body.light .action-card:hover {
  border-color: var(--brand-red);
  background: var(--bg-surface);
}

/* Sidebar badges */
body.light .sidebar .badge.urgent {
  background: rgba(187,39,45,0.15);
  color: #991b1b;
}

body.light .sidebar .badge.warning {
  background: rgba(255,195,0,0.15);
  color: #92400e;
}

/* Menu item hover în sidebar */
body.light .menu-item:hover {
  background: rgba(0,0,0,0.04) !important;
}

/* Iframe preview */
body.light #global-preview-iframe {
  background: #ffffff;
}

/* ── document_generator.css gaps ── */
body.light .docgen-container {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text-primary);
}

body.light .docgen-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

body.light .docgen-header-left h2 {
  color: var(--text-primary) !important;
}

body.light .docgen-left {
  background: var(--bg-card);
  border-right-color: var(--border);
  color: var(--text-primary);
}

body.light .docgen-right {
  background: var(--bg-surface);
  color: var(--text-primary);
}

body.light .docgen-section-header {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

body.light .docgen-field input,
body.light .docgen-field textarea,
body.light .docgen-field select {
  background: #ffffff;
  border-color: var(--border-light);
  color: var(--text-primary);
}

body.light .docgen-field input:focus,
body.light .docgen-field textarea:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 2px rgba(187,39,45,0.15);
}

body.light .docgen-line-header {
  color: var(--text-secondary);
  background: var(--bg-surface);
}

body.light .docgen-badge-info {
  background: rgba(245,158,11,0.12);
  color: #92400e;
}

body.light .docgen-cost-row strong {
  color: var(--text-primary) !important;
}

body.light .docgen-cost-total span,
body.light .docgen-cost-total strong {
  color: var(--brand-red) !important;
}

body.light .docgen-btn {
  background: var(--bg-surface);
  border-color: var(--border-light);
  color: var(--text-primary);
}

body.light .docgen-btn-primary {
  background: linear-gradient(135deg, var(--brand-red), #9e1f24);
  border-color: var(--brand-red);
  color: #ffffff;
}

body.light .docgen-btn-close {
  background: rgba(187,39,45,0.08);
  border-color: rgba(187,39,45,0.2);
  color: var(--brand-red);
}

/* ── work_progress.css gaps ── */
body.light .work-progress-title {
  color: var(--text-primary) !important;
}

body.light .work-progress-percentage {
  color: var(--brand-red) !important;
}

body.light .eta-value {
  color: var(--brand-red) !important;
}

/* Stage icons — rămân colorate (semantic), deja pe fundal colorat cu text alb = OK WCAG */
/* stage-active, stage-completed, stage-error icons nu necesită override în light mode */

body.light .stage-active .stage-label {
  color: var(--brand-red) !important;
}

/* ── WCAG AA note pentru brand colors ──
   brand-red #bb272d  on white = 5.40:1  ✓ WCAG AA
   brand-navy #3d52c4 on white = 6.80:1  ✓ WCAG AA
   brand-green #29a870 on white = 3.03:1 — folosit CA BACKGROUND cu text dark, nu ca text pe alb
   brand-yellow #ffc300 — folosit CA BACKGROUND cu text dark (#1a1f2e → ratio 12+:1) ✓
*/

/* ==================== END TC758 ==================== */

/* ==================== TC753 UI GUIDE PAGE ==================== */
#view-ui-guide { max-width: 1100px; margin: 0 auto; padding: 24px; }
.ui-guide-header { margin-bottom: 20px; }
.ui-guide-header h1 { font-size: 28px; margin-bottom: 8px; color: var(--text-primary); }
.ui-guide-sub { color: var(--text-secondary); font-size: 14px; margin-bottom: 4px; }
.ui-guide-nav { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); margin-bottom: 32px; flex-wrap: wrap; }
.ui-guide-nav a { color: var(--text-secondary); text-decoration: none; font-size: 14px; padding: 4px 8px; border-radius: 4px; transition: all 0.15s; }
.ui-guide-nav a:hover { background: var(--bg-surface); color: var(--text-primary); }
#view-ui-guide section { margin-bottom: 48px; }
#view-ui-guide section h2 { font-size: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; color: var(--text-primary); }
#view-ui-guide section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 20px 0 12px; }
.sg-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.sg-desc code { background: var(--bg-surface); padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 12px; color: var(--blue-light); }
/* Tokens grid */
.tokens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 8px; }
.token-swatch { padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); transition: border-color 0.15s; }
.token-swatch:hover { border-color: var(--border-light); }
.token-swatch-color { height: 36px; border-radius: 4px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.08); }
.token-swatch-label { font-size: 10px; font-family: monospace; color: var(--text-secondary); word-break: break-all; line-height: 1.4; }
.token-swatch-value { font-size: 10px; color: var(--text-muted); margin-top: 2px; font-family: monospace; }
/* Demo area */
.demo-row { display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border); }
.demo-code { background: var(--bg-surface); padding: 16px; border-radius: 8px; margin-top: 12px; overflow-x: auto; font-size: 12px; font-family: monospace; border: 1px solid var(--border); white-space: pre-wrap; color: var(--text-secondary); line-height: 1.6; }
body.light .demo-code { background: #f1f5f9; color: #374151; }
body.light .token-swatch-color { border: 1px solid rgba(0,0,0,0.1); }
/* ==================== END TC753 ==================== */

/* ==================== TC768 LAPUSNICU BOARD ==================== */
.lapusnicu-header { margin-bottom: 24px; }
.lapusnicu-header h1 { font-size: 22px; margin-bottom: 12px; }
.lapusnicu-stats { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.lapusnicu-stats .stat-box { min-width: 100px; }
.lapusnicu-progressbar-wrap { background: var(--bg-surface); border-radius: 4px; overflow: hidden; }
.lapusnicu-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .lapusnicu-kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .lapusnicu-kanban { grid-template-columns: 1fr; } }
.kanban-col { background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border); padding: 12px; min-height: 200px; }
.kanban-col h3 { font-size: 14px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.kanban-count { background: var(--bg-surface); border-radius: 12px; padding: 2px 8px; font-size: 12px; color: var(--text-secondary); }
.kanban-items { display: flex; flex-direction: column; gap: 8px; }
.kanban-item { background: var(--bg-surface); border-radius: 6px; padding: 10px 12px; border: 1px solid var(--border); cursor: default; }
.kanban-item:hover { border-color: var(--brand-navy); }
.kanban-item-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.kanban-item-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
body.light .kanban-col { background: #ffffff; }
body.light .kanban-item { background: #f8fafc; }
/* ==================== END TC768 ==================== */

/* ============================================================
   10. GLOBAL BUTTON VARIANTS — TC754
   (.btn-primary/.btn-secondary/.btn-ghost/.btn-danger folosite
    global în hubs — anterior definite doar local în admin.html)
   ============================================================ */

.btn-primary {
  background: linear-gradient(135deg, var(--blue), #1e6cc8);
  color: #ffffff;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 14px;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(55,138,221,0.35);
}

.btn-primary:active {
  transform: translateY(0);
  opacity: 1;
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.btn-secondary:hover {
  background: var(--border);
  color: var(--text-primary);
  border-color: var(--border-light);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.btn-ghost:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-danger {
  background: var(--red-bg);
  color: var(--red-light);
  border: 1px solid rgba(226,75,74,0.3);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.btn-danger:hover {
  background: var(--red);
  color: #ffffff;
  border-color: var(--red);
}

/* Size modifiers */
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }

/* Light mode: ensure colored buttons keep white text */
body.light .btn-primary { color: #ffffff !important; }
body.light .btn-danger:hover { color: #ffffff !important; }

/* ==================== END TC754 ==================== */