/* ═══════════════════════════════════════════════════════════════════════════
   GLASSMORPHISM THEME — overlay appliqué par-dessus style.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables light (glassmorphism) ─────────────────────────────────────── */
:root {
  --bg:        rgba(235,237,255,0.55);
  --surface:   rgba(255,255,255,0.70);
  --surface2:  rgba(248,249,252,0.55);
  --border:    rgba(210,215,240,0.55);
  --shadow:    0 4px 24px rgba(99,102,241,.10), 0 1px 4px rgba(0,0,0,.06);
  --accent:    #6366f1;
  --accent-bg: rgba(99,102,241,.10);
  --glass-blur: blur(18px);
  --app-gradient: linear-gradient(135deg, #c4b5fd 0%, #818cf8 30%, #60a5fa 70%, #34d399 100%);
}

/* ── Fond dégradé global ─────────────────────────────────────────────────── */
body {
  background: var(--app-gradient);
  background-attachment: fixed;
}

/* ── Sidebar verre dépoli ────────────────────────────────────────────────── */
#sidebar {
  background: rgba(255,255,255,0.68) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid rgba(255,255,255,0.45) !important;
}

/* ── Topbar verre ────────────────────────────────────────────────────────── */
.topbar {
  background: rgba(255,255,255,0.70) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255,255,255,0.40) !important;
}

/* ── Cartes & panneaux ───────────────────────────────────────────────────── */
.stat-card,
.panel,
.task-card,
.project-card,
.team-card,
.client-card,
.ce-panel,
.ce-hero,
.field-card,
.admin-kpi,
.admin-team-card,
.admin-users-table,
.list-table-wrap,
.calendar-wrap,
.kanban-col,
.ce-kpi,
.billing-kpi,
.cpc-card,
.admin-tab.active,
.notif-panel,
.search-box,
.export-dropdown {
  background: rgba(255,255,255,0.68) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
}

.list-table thead tr,
.kanban-col .col-count,
.ce-panel-header,
.admin-users-table thead tr { background: rgba(248,249,255,0.55) !important; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-box {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.50) !important;
}
.modal-backdrop {
  background: rgba(79,70,229,0.22) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Login box ───────────────────────────────────────────────────────────── */
.login-box {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.50) !important;
}

/* ── Hover états plus visibles sur fond coloré ───────────────────────────── */
.nav-item:hover  { background: rgba(255,255,255,0.40) !important; }
.nav-item.active { background: rgba(99,102,241,0.15) !important; }
.list-row:hover  { background: rgba(248,250,255,0.70) !important; }
.admin-user-row:hover { background: rgba(248,250,255,0.70) !important; }

/* ── Inputs sur fond verre ───────────────────────────────────────────────── */
input, select, textarea,
.form-group input, .form-group select, .form-group textarea,
.list-filters input, .list-filters select,
.admin-search, .gantt-filter-bar select {
  background: rgba(255,255,255,0.70) !important;
  border-color: rgba(210,215,240,0.65) !important;
}

/* ── Bouton toggle dark mode ─────────────────────────────────────────────── */
.dark-toggle-btn {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,0.30);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 8px; padding: .38rem .75rem;
  cursor: pointer; color: var(--text-muted);
  font-size: .82rem; font-weight: 500; font-family: inherit;
  transition: all .15s; width: 100%; margin-top: .5rem;
  justify-content: flex-start;
}
.dark-toggle-btn:hover { background: rgba(255,255,255,0.50); color: var(--text); }
.dark-toggle-btn svg   { width: 14px; height: 14px; flex-shrink: 0; }
.dark-toggle-label     { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE GLASSMORPHISM
   ═══════════════════════════════════════════════════════════════════════════ */

body.dark {
  --bg:       rgba(15,18,40,0.65);
  --surface:  rgba(30,41,59,0.75);
  --surface2: rgba(22,32,54,0.70);
  --border:   rgba(71,85,105,0.40);
  --text:     #e2e8f0;
  --text-muted: #94a3b8;
  --shadow:   0 4px 24px rgba(0,0,0,.30), 0 1px 4px rgba(0,0,0,.20);
  --accent-bg: rgba(99,102,241,.15);
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 45%, #0c1a35 100%) fixed;
}

body.dark #sidebar {
  background: rgba(15,23,42,0.82) !important;
  border-right: 1px solid rgba(71,85,105,0.30) !important;
}
body.dark .topbar {
  background: rgba(15,23,42,0.82) !important;
  border-bottom: 1px solid rgba(71,85,105,0.30) !important;
}

body.dark .stat-card,
body.dark .panel,
body.dark .task-card,
body.dark .project-card,
body.dark .team-card,
body.dark .client-card,
body.dark .ce-panel,
body.dark .ce-hero,
body.dark .field-card,
body.dark .admin-kpi,
body.dark .admin-team-card,
body.dark .admin-users-table,
body.dark .list-table-wrap,
body.dark .calendar-wrap,
body.dark .kanban-col,
body.dark .ce-kpi,
body.dark .billing-kpi,
body.dark .cpc-card,
body.dark .notif-panel,
body.dark .search-box,
body.dark .export-dropdown {
  background: rgba(30,41,59,0.78) !important;
  border: 1px solid rgba(71,85,105,0.30) !important;
}

body.dark .modal-box {
  background: rgba(15,23,42,0.93) !important;
  border: 1px solid rgba(71,85,105,0.35) !important;
}
body.dark .modal-backdrop {
  background: rgba(0,0,0,0.55) !important;
}

body.dark .list-table thead tr,
body.dark .kanban-col .col-count,
body.dark .ce-panel-header,
body.dark .admin-users-table thead tr { background: rgba(22,32,54,0.70) !important; }

body.dark .nav-item:hover  { background: rgba(255,255,255,0.08) !important; }
body.dark .nav-item.active { background: rgba(99,102,241,0.22) !important; }
body.dark .list-row:hover  { background: rgba(255,255,255,0.05) !important; }
body.dark .admin-user-row:hover { background: rgba(255,255,255,0.05) !important; }

body.dark input, body.dark select, body.dark textarea,
body.dark .form-group input, body.dark .form-group select, body.dark .form-group textarea,
body.dark .list-filters input, body.dark .list-filters select,
body.dark .admin-search, body.dark .gantt-filter-bar select {
  background: rgba(15,23,42,0.70) !important;
  border-color: rgba(71,85,105,0.50) !important;
  color: var(--text) !important;
}

body.dark .dark-toggle-btn {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
}
body.dark .dark-toggle-btn:hover { background: rgba(255,255,255,0.12); }

body.dark .sidebar-logo { border-bottom-color: rgba(71,85,105,0.35) !important; }
body.dark .sidebar-bottom { border-top-color: rgba(71,85,105,0.35) !important; }
body.dark .sidebar-section-title { color: #64748b; }

body.dark .btn-ghost {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #94a3b8;
}
body.dark .btn-ghost:hover { background: rgba(255,255,255,0.12); }

body.dark .chip-todo     { background: rgba(71,85,105,0.40); color: #94a3b8; }
body.dark .chip-progress { background: rgba(29,78,216,0.30); color: #93c5fd; }
body.dark .chip-done     { background: rgba(22,101,52,0.30); color: #86efac; }
body.dark .chip-blocked  { background: rgba(153,27,27,0.30); color: #fca5a5; }

body.dark .admin-tab.active {
  background: rgba(30,41,59,0.85) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
body.dark .admin-tabs { background: rgba(15,23,42,0.55); }

body.dark .ce-alerts-panel { background: rgba(30,27,5,0.65); border-color: rgba(253,230,138,0.25); }
body.dark .ce-alerts-header { background: rgba(30,27,5,0.80); }

body.dark .gantt-labels,
body.dark .gantt-corner,
body.dark .gantt-timeline-hdr,
body.dark .gantt-group-strip { background: rgba(15,23,42,0.85) !important; }

/* ── Icônes toggle lune/soleil via CSS pur ───────────────────────────────── */
.icon-sun  { display: none; }
.icon-moon { display: block; }
body.dark .icon-moon { display: none; }
body.dark .icon-sun  { display: block; }