/* ═══════════════════════════════════════════════════════════════
   LOPANGO DESIGN SYSTEM — Composants & Layout
   Tokens : définis dans app.css (:root) — source de vérité unique
   Ce fichier consomme uniquement des var() — zéro valeur hardcodée
   ═══════════════════════════════════════════════════════════════ */


.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: #94A3B8;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}
.sidebar-nav-item:hover,
.sidebar-nav-item.active {
  background-color: rgba(50,140,193,0.15);
  color: var(--color-secondary);
}

/* ── Topbar ───────────────────────────────────────────────── */
.dashboard-header {
  height: var(--topbar-height);
  background-color: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  justify-content: space-between;
}

/* ── Main Content ─────────────────────────────────────────── */

.dashboard-main {
  flex: 1;
  padding: var(--space-5);
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.card-interactive {
  cursor: pointer;
  transition: border-color var(--duration-fast);
}
.card-interactive:hover {
  border-color: rgba(50,140,193,0.35);
}

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS (KPIs)
   ═══════════════════════════════════════════════════════════════ */
.stat-card { padding: var(--space-4) var(--space-5); }
.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text);
}
.stat-label {
  font-size: var(--font-size-sm);
  color: #94A3B8;
  margin-top: var(--space-1);
}
.stat-trend {
  font-size: var(--font-size-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
}
.stat-trend.up   { color: var(--color-success); }
.stat-trend.down { color: var(--color-danger); }

/* ═══════════════════════════════════════════════════════════════
   STATUS SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.status-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
}
.status-dot.critical { background: var(--color-danger); }
.status-dot.warning  { background: var(--color-warning); }
.status-dot.healthy  { background: var(--color-success); }
.status-dot.info     { background: var(--color-accent); }
.status-dot.neutral  { background: #64748b; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.badge-success { background: rgba(39,174,96,0.12);  color: var(--color-success); }
.badge-warning { background: rgba(243,156,18,0.12); color: var(--color-warning); }
.badge-danger  { background: rgba(231,76,60,0.12);  color: var(--color-danger); }
.badge-info    { background: rgba(0,194,255,0.12);   color: var(--color-accent); }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-base);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-default);
}
.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-secondary:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
}
.btn-danger {
  background-color: var(--color-danger);
  color: #FFFFFF;
}
.btn-danger:hover { background-color: #c0392b; }

/* ═══════════════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════════════ */
.input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--panel);
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.input::placeholder { color: var(--text2); }
.input:focus {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-focus);
}

/* ═══════════════════════════════════════════════════════════════
   WIDGET STATES
   ═══════════════════════════════════════════════════════════════ */
.widget-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
  color: #94A3B8;
  gap: var(--space-3);
}
.spinner {
  width: 24px; height: 24px;
  border: 2px solid rgba(50,140,193,0.20);
  border-top-color: var(--color-secondary);
  border-radius: var(--radius-full);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.widget-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-7);
  gap: var(--space-4);
  color: #94A3B8;
  text-align: center;
}
.widget-empty-icon { font-size: 48px; opacity: 0.4; }
.widget-empty-title { font-weight: 600; color: var(--text); }
.widget-empty-desc { font-size: var(--font-size-sm); max-width: 300px; }

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */
.table-container { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.table th {
  text-align: left;
  padding: var(--space-2) var(--space-4);
  color: #94A3B8;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid rgba(51,65,85,0.5);
}
.table tr:hover td { background: rgba(255,255,255,0.02); }

/* ═══════════════════════════════════════════════════════════════
   TABS & FILTERS
   ═══════════════════════════════════════════════════════════════ */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}
.tab {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: none;
  cursor: pointer;
  color: #94A3B8;
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--duration-fast);
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0;
}
.filter-select {
  padding: var(--space-2) var(--space-4);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  min-width: 140px;
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */
.alert {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.alert-critical {
  background: rgba(231,76,60,0.10);
  color: var(--color-danger);
  border-left: 4px solid var(--color-danger);
}
.alert-warning {
  background: rgba(243,156,18,0.10);
  color: var(--color-warning);
  border-left: 4px solid var(--color-warning);
}
.alert-info {
  background: rgba(0,194,255,0.10);
  color: var(--color-accent);
  border-left: 4px solid var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════
   HEALTH BAR
   ═══════════════════════════════════════════════════════════════ */
.health-bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* ═══════════════════════════════════════════════════════════════
   GRID
   ═══════════════════════════════════════════════════════════════ */
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.col-span-2 { grid-column: span 2; }
.gap-sm { gap: var(--space-2); }
.gap-md { gap: var(--space-4); }
.gap-lg { gap: var(--space-6); }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS (lightweight only)
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 250ms var(--ease-default) forwards; }


/* ═══════════════════════════════════════════════════════════════
   TOPBAR ENRICHIE — Search, Notifications, Profil
   ═══════════════════════════════════════════════════════════════ */
.topbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  background-color: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
  gap: var(--space-4);
}
.topbar-left {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 480px;
}
.topbar-search {
  position: relative;
  width: 100%;
}
.topbar-search input {
  width: 100%;
  padding: 8px 16px 8px 38px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text);
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--duration-fast);
}
.topbar-search input::placeholder { color: #64748b; }
.topbar-search input:focus {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-focus);
}
.topbar-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 14px;
  pointer-events: none;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.topbar-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: #94A3B8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--duration-fast);
  position: relative;
}
.topbar-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.topbar-btn .badge-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
}
.topbar-profile {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 14px 4px 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.topbar-profile:hover { background: rgba(255,255,255,0.05); }
.topbar-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.topbar-profile-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text);
}

/* ── Dropdown Profil ─────────────────────────────────── */
.topbar-dropdown {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  min-width: 200px;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 150ms var(--ease-default) forwards;
}
.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  color: #94A3B8;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.topbar-dropdown-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.topbar-dropdown-item-danger:hover {
  background: rgba(231,76,60,0.1);
  color: var(--color-danger);
}
.topbar-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-1) 0;
}