/* ============================================================
   SuivIT CMDB — Design System v3.0 (Dark Theme Override)
   Clean · Elegant · Minimal
   ============================================================ */

[data-theme="dark"] {
  /* ── Palette Primaire ── */
  --color-primary:        #6366f1;
  --color-primary-hover:  #818cf8;
  --color-primary-light:  rgba(99, 102, 241, 0.1);
  --color-primary-muted:  #4338ca;
  --color-primary-glow:   rgba(99, 102, 241, 0.2);

  /* ── Accent ── */
  --color-accent:         #a78bfa;
  --color-accent-light:   rgba(167, 139, 250, 0.1);

  /* ── Neutrals ── */
  --color-bg:             #0f0f13;
  --color-surface:        #18181b;
  --color-surface-alt:    #1f1f24;
  --color-surface-raised: #27272a;
  --color-border:         #27272a;
  --color-border-light:   #1f1f24;
  --color-border-strong:  #3f3f46;

  /* ── Texte ── */
  --color-text:           #e4e4e7;
  --color-text-muted:     #71717a;
  --color-text-light:     #3f3f46;
  --color-text-inv:       #ffffff;

  /* ── Statuts ── */
  --color-success:        #34d399;
  --color-success-light:  rgba(52, 211, 153, 0.1);
  --color-warning:        #fbbf24;
  --color-warning-light:  rgba(251, 191, 36, 0.1);
  --color-danger:         #f87171;
  --color-danger-light:   rgba(248, 113, 113, 0.1);
  --color-info:           #60a5fa;
  --color-info-light:     rgba(96, 165, 250, 0.1);
  --color-purple:         #a78bfa;
  --color-purple-light:   rgba(167, 139, 250, 0.1);

  /* ── Sidebar ── */
  --sidebar-bg:           #0c0c10;
  --sidebar-border:       rgba(255,255,255,0.05);
  --sidebar-text:         #52525b;
  --sidebar-text-hover:   #d4d4d8;
  --sidebar-active-bg:    rgba(99, 102, 241, 0.12);
  --sidebar-active-text:  #a5b4fc;
  --sidebar-hover:        rgba(255,255,255,0.04);

  /* ── Ombres ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow:    0 2px 8px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 3px var(--color-primary-glow);
}

/* ── Topbar dark ── */
[data-theme="dark"] .topbar {
  background: rgba(24, 24, 27, 0.85);
  border-bottom-color: var(--color-border);
}

/* ── Badges dark ── */
[data-theme="dark"] .badge-success  { background: rgba(52, 211, 153, 0.12);  color: #6ee7b7; }
[data-theme="dark"] .badge-warning  { background: rgba(251, 191, 36, 0.12);  color: #fde68a; }
[data-theme="dark"] .badge-danger   { background: rgba(248, 113, 113, 0.12); color: #fca5a5; }
[data-theme="dark"] .badge-info     { background: rgba(96, 165, 250, 0.12);  color: #93c5fd; }
[data-theme="dark"] .badge-neutral  { background: #27272a; color: #a1a1aa; }
[data-theme="dark"] .badge-purple   { background: rgba(167, 139, 250, 0.12); color: #c4b5fd; }

/* ── Inputs dark ── */
[data-theme="dark"] .cell-input {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-primary);
}

[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

/* ── Modal dark ── */
[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .modal {
  border-color: var(--color-border-strong);
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}

/* ── Table dark ── */
[data-theme="dark"] .table-main tbody tr:hover {
  background: rgba(99, 102, 241, 0.05);
}

[data-theme="dark"] .table-main tbody tr.selected {
  background: rgba(99, 102, 241, 0.08);
}

[data-theme="dark"] .table-main thead {
  background: var(--color-surface-alt);
}

/* ── Stat cards dark ── */
[data-theme="dark"] .stat-icon-blue   { background: rgba(96, 165, 250, 0.1);  color: #60a5fa; }
[data-theme="dark"] .stat-icon-green  { background: rgba(52, 211, 153, 0.1);  color: #34d399; }
[data-theme="dark"] .stat-icon-orange { background: rgba(251, 191, 36, 0.1);  color: #fbbf24; }
[data-theme="dark"] .stat-icon-purple { background: rgba(167, 139, 250, 0.1); color: #a78bfa; }
[data-theme="dark"] .stat-icon-red    { background: rgba(248, 113, 113, 0.1); color: #f87171; }

/* ── Group header dark ── */
[data-theme="dark"] .group-header {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}

/* ── Filter bar dark ── */
[data-theme="dark"] .filter-bar {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
}

/* ── Boutons dark ── */
[data-theme="dark"] .btn-secondary {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  box-shadow: none;
}
[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-raised);
  border-color: var(--color-border-strong);
}

[data-theme="dark"] .btn-ghost:hover:not(:disabled) {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* ── Dark toggle dark ── */
[data-theme="dark"] .dark-toggle {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}
[data-theme="dark"] .dark-toggle:hover {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

/* ── Alerts dark ── */
[data-theme="dark"] .alert-error   { background: rgba(248,113,113,0.1); color: #fca5a5; border-color: rgba(248,113,113,0.2); }
[data-theme="dark"] .alert-success { background: rgba(52,211,153,0.1);  color: #6ee7b7; border-color: rgba(52,211,153,0.2); }
[data-theme="dark"] .alert-warning { background: rgba(251,191,36,0.1);  color: #fde68a; border-color: rgba(251,191,36,0.2); }
[data-theme="dark"] .alert-info    { background: rgba(96,165,250,0.1);  color: #93c5fd; border-color: rgba(96,165,250,0.2); }

/* ── Toast dark ── */
[data-theme="dark"] .toast {
  background: var(--color-surface-raised);
  border-color: var(--color-border-strong);
}

/* ── Pagination dark ── */
[data-theme="dark"] .page-btn {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}
[data-theme="dark"] .page-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Modal close dark ── */
[data-theme="dark"] .modal-close {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] .modal-close:hover {
  background: var(--color-border-strong);
}

/* ── Sidebar tooltip (collapsed) dark ── */
[data-theme="dark"] .sidebar.collapsed .sidebar-link::after {
  background: var(--sidebar-bg);
  border-color: rgba(255,255,255,0.08);
}