/* ════════════════════════════════════════════════════════════════════════
   CRM MISTRAL — PATCH SIDEBAR + TOPBAR + LIGHT MODE (v3)
   À charger APRÈS crm.css existant
   Date : 5 mai 2026
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   1. NOUVELLES VARIABLES
   ─────────────────────────────────────────────────────────────────── */
:root {
  --sb-w: 220px;
  --sb-w-min: 64px;
  --margin: 14px;
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-bg-hover: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  --toggle-bg: #fff;
  --toggle-border: #e2e2de;
  --toggle-icon: #111;
}

[data-theme="dark"] {
  --glass-bg: rgba(28, 28, 28, 0.55);
  --glass-bg-hover: rgba(38, 38, 38, 0.75);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  --toggle-bg: #1c1c1c;
  --toggle-border: #2a2a28;
  --toggle-icon: #e5e5e5;
}

/* ───────────────────────────────────────────────────────────────────
   2. APP LAYOUT — sidebar rétractable
   ─────────────────────────────────────────────────────────────────── */
.app {
  grid-template-columns: var(--sb-w) 1fr !important;
  transition: grid-template-columns 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.app.collapsed {
  grid-template-columns: var(--sb-w-min) 1fr !important;
}

/* ───────────────────────────────────────────────────────────────────
   3. SIDEBAR
   ─────────────────────────────────────────────────────────────────── */
.sb {
  border-radius: 16px;
  overflow: visible !important;
  position: relative;
  min-width: 0;
  height: calc(100vh - 28px);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sb-logo {
  position: relative;
  min-width: 0;
  padding: 18px 16px 14px;
  transition: padding 0.25s, gap 0.25s;
}
.collapsed .sb-logo {
  justify-content: center;
  padding: 18px 8px 14px;
  gap: 0;
}

.sb-brand {
  flex: 1;
  min-width: 0;
  opacity: 1;
  overflow: hidden;
  transition: opacity 0.2s, flex 0.25s, max-width 0.25s;
  max-width: 200px;
}
.collapsed .sb-brand {
  opacity: 0;
  pointer-events: none;
  flex: 0 0 0;
  max-width: 0;
}

/* Bouton collapse */
.sb-toggle {
  position: absolute;
  top: 24px;
  right: -13px;
  width: 26px;
  height: 26px;
  background: var(--toggle-bg);
  border: 1.5px solid var(--toggle-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: all 0.15s;
  color: var(--toggle-icon);
}
.sb-toggle:hover {
  border-color: var(--ac);
  color: var(--ac);
}
.sb-toggle svg {
  width: 13px;
  height: 13px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.collapsed .sb-toggle svg {
  transform: rotate(180deg);
}

/* NAV */
.sb-nav {
  overflow-x: visible !important;
  transition: padding 0.25s;
}
.collapsed .sb-nav {
  padding: 14px 0;             /* zéro padding latéral en collapsed */
}

.sb-sec {
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s, height 0.2s, padding 0.2s, margin 0.2s;
}
.collapsed .sb-sec {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

/* ───────────────────────────────────────────────────────────────────
   4. ITEMS NAV — centrage parfait via boîte fixe 40x40
   ─────────────────────────────────────────────────────────────────── */
.sb-it {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  min-height: 38px;
  border-left: none !important;
  transition: background 0.15s, color 0.15s, padding 0.15s;
}

/* Barre verte d'item actif — visible dans les 2 modes */
.sb-it.on::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ac);
}
.collapsed .sb-it.on::before {
  left: 0;
  top: 6px;
  bottom: 6px;
}

.sb-it > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0 !important;
  flex-grow: 0;
  display: block;
}

.sbl {
  flex: 1;
  min-width: 0;
  opacity: 1;
  transition: opacity 0.15s;
}
.collapsed .sbl {
  opacity: 0;
  pointer-events: none;
  display: none;
}

.sb-badge {
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.15s;
}
.collapsed .sb-badge {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

/* MODE COLLAPSED — items en carré 40x40 centré, SVG centré dedans par flex */
.collapsed .sb-it {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 0;
  width: 40px;
  height: 40px;
  margin: 2px auto;
  border-radius: 10px;
}

/* Forcer le SVG à se centrer dans le carré 40x40 — pas de margin parasite */
/* Et ajouter contain:strict pour que les viewBox mal centrés ne débordent pas */
.collapsed .sb-it > svg {
  margin: 0 !important;
  display: block;
  width: 18px !important;
  height: 18px !important;
  /* Force le SVG à respecter exactement la boîte 18x18, peu importe son
     viewBox interne. Les éléments visuels qui débordaient seront clippés. */
  overflow: visible;
  /* IMPORTANT : si le contenu visuel d'un SVG est mal centré dans son
     viewBox, on peut forcer un transform pour le compenser. Mais la
     solution propre est plutôt de centrer le wrapper. */
  position: relative;
  left: 0;
  right: 0;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Tooltip au hover */
.collapsed .sb-it::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 18px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.collapsed .sb-it:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ───────────────────────────────────────────────────────────────────
   5. FOOTER USER
   ─────────────────────────────────────────────────────────────────── */
.sb-user {
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.sb-user:hover {
  background: #1c1c1c;
}
.sb-user-info {
  flex: 1;
  min-width: 0;
  opacity: 1;
  transition: opacity 0.15s;
}
.collapsed .sb-user-info {
  opacity: 0;
  pointer-events: none;
  display: none;
}
.collapsed .sb-user {
  justify-content: center;
  padding: 6px 0;
}

/* ───────────────────────────────────────────────────────────────────
   6. TOPBAR — fondue dans le fond
   ─────────────────────────────────────────────────────────────────── */
.topbar {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 6px 12px 14px !important;
  margin: 0 !important;
  flex-wrap: wrap;
}

.page-h {
  font-size: 22px !important;
  letter-spacing: -0.5px !important;
}

.today-badge {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1.5px solid var(--glass-border) !important;
  color: var(--ac) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  border-radius: 24px !important;
  box-shadow: var(--glass-shadow);
  display: flex;
  align-items: center;
  gap: 6px;
}
.today-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 8px var(--ac);
}

.btn-tb {
  border-radius: 22px !important;
  padding: 9px 16px !important;
}
.btn-tb-teal {
  box-shadow: 0 4px 14px rgba(0, 194, 169, 0.35);
}
.btn-tb-teal:hover { transform: translateY(-1px); }
.btn-tb-dark {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.btn-tb-dark:hover { transform: translateY(-1px); }
.btn-tb-light {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid var(--glass-border) !important;
}
.btn-tb-light:hover {
  border-color: var(--ac) !important;
  color: var(--ac) !important;
}

/* ───────────────────────────────────────────────────────────────────
   7. BOUTONS ICÔNES TOPBAR (cloche, dark mode toggle)
   ─────────────────────────────────────────────────────────────────── */
.tb-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1.5px solid var(--glass-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--g500);
  box-shadow: var(--glass-shadow);
  flex-shrink: 0;
}
.tb-icon-btn:hover {
  background: var(--glass-bg-hover);
  color: var(--ac);
  transform: translateY(-1px);
}
.tb-icon-btn svg {
  width: 16px;
  height: 16px;
}
.tb-icon-btn .badge-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--wh);
}

.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

.bell-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1.5px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
.bell-btn:hover {
  background: var(--glass-bg-hover) !important;
  color: var(--ac) !important;
  transform: translateY(-1px);
}

/* ───────────────────────────────────────────────────────────────────
   8. CONNEXIONS GOOGLE — Calendar + Sheets
   ─────────────────────────────────────────────────────────────────── */
.tb-conn-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1.5px solid var(--glass-border);
  border-radius: 24px;
  padding: 4px 6px 4px 4px;
  box-shadow: var(--glass-shadow);
}

.tb-conn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 8px;
  border-radius: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--g500);
  transition: all 0.15s;
  white-space: nowrap;
}
.tb-conn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--bk);
}
[data-theme="dark"] .tb-conn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.tb-conn-ico {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.tb-conn-ico svg { width: 12px; height: 12px; }

.tb-conn-ico.cal {
  background: rgba(66, 133, 244, 0.12);
  color: #4285F4;
}
.tb-conn-ico.sheet {
  background: rgba(15, 157, 88, 0.12);
  color: #0F9D58;
}
[data-theme="dark"] .tb-conn-ico.cal { background: rgba(66, 133, 244, 0.2); }
[data-theme="dark"] .tb-conn-ico.sheet { background: rgba(15, 157, 88, 0.2); }

.tb-conn-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g300);
  border: 1.5px solid var(--wh);
  transition: background 0.2s;
}
.tb-conn-status.ok {
  background: #16a34a;
  box-shadow: 0 0 6px #16a34a;
}
.tb-conn-status.loading {
  background: #f59e0b;
  animation: pulse 1s ease-in-out infinite;
}
.tb-conn-status.err { background: #e24b4a; }

.tb-conn-lbl {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  align-items: flex-start;
}
.tb-conn-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--bk);
}
.tb-conn-state {
  font-size: 9px;
  color: var(--g400);
  font-weight: 500;
}

.tb-conn-divider {
  width: 1px;
  height: 22px;
  background: rgba(127, 127, 127, 0.2);
  margin: 0 2px;
}

.tb-conn-sync {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g500);
  transition: all 0.15s;
  flex-shrink: 0;
}
[data-theme="dark"] .tb-conn-sync { background: rgba(255, 255, 255, 0.05); }
.tb-conn-sync:hover {
  background: var(--ac);
  color: #fff;
  transform: rotate(180deg);
}
.tb-conn-sync svg { width: 13px; height: 13px; }
.tb-conn-sync.syncing svg { animation: spin 1s linear infinite; }
@keyframes spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

/* Avatar topbar */
.tb-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ac), #0891b2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  border: 2.5px solid var(--glass-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.tb-avatar:hover { transform: scale(1.05); }

/* ───────────────────────────────────────────────────────────────────
   9. CONTENT
   ─────────────────────────────────────────────────────────────────── */
.content {
  background: transparent !important;
}

/* ───────────────────────────────────────────────────────────────────
   10. MESH BACKGROUND ANIMÉ
   ─────────────────────────────────────────────────────────────────── */
body {
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 35% at 12% 18%, rgba(0, 194, 169, 0.18), transparent 55%),
    radial-gradient(ellipse 45% 32% at 88% 22%, rgba(167, 139, 250, 0.15), transparent 55%),
    radial-gradient(ellipse 48% 35% at 75% 78%, rgba(34, 211, 238, 0.13), transparent 55%),
    radial-gradient(ellipse 40% 30% at 22% 85%, rgba(240, 171, 252, 0.10), transparent 55%),
    radial-gradient(ellipse 38% 28% at 50% 50%, rgba(94, 234, 212, 0.10), transparent 55%);
  background-size: 100% 100%;
  animation: mesh-drift-light 28s ease-in-out infinite;
}
@keyframes mesh-drift-light {
  0%, 100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%; }
  25%      { background-position: 5% 8%, 92% 5%, 95% 95%, 8% 92%, 55% 48%; }
  50%      { background-position: 8% 12%, 88% 12%, 92% 88%, 12% 88%, 48% 52%; }
  75%      { background-position: 4% 4%, 96% 8%, 96% 92%, 4% 96%, 52% 50%; }
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 50% 35% at 15% 20%, rgba(0, 212, 184, 0.20), transparent 50%),
    radial-gradient(ellipse 40% 30% at 85% 25%, rgba(99, 102, 241, 0.18), transparent 50%),
    radial-gradient(ellipse 45% 35% at 75% 75%, rgba(168, 85, 247, 0.18), transparent 50%),
    radial-gradient(ellipse 40% 30% at 20% 85%, rgba(0, 212, 184, 0.13), transparent 50%),
    radial-gradient(ellipse 35% 25% at 50% 50%, rgba(56, 189, 248, 0.12), transparent 50%);
}

html, body { background: #f1f5f3 !important; }
[data-theme="dark"] html,
[data-theme="dark"] body { background: #0a0f0e !important; }

.app {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

@media (max-width: 768px) {
  body::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   11. LIGHT MODE — CARDS LISIBLES (FIX CRITIQUE)
   En light, on garde les cards en BLANC OPAQUE pour la lisibilité.
   Le glass ne s'applique qu'en dark.
   ════════════════════════════════════════════════════════════════════ */

/* MODE LIGHT (par défaut) : cards et panels BLANC OPAQUE */
html:not([data-theme="dark"]) .t-card {
  background: #ffffff !important;
  border: 1.5px solid var(--g200) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not([data-theme="dark"]) .panel {
  background: #ffffff !important;
  border: 1.5px solid var(--g200) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* MODE DARK : effet glass préservé */
[data-theme="dark"] .t-card {
  background: rgba(28, 28, 28, 0.55) !important;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .panel {
  background: rgba(28, 28, 28, 0.55) !important;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Pas de double scroll */
html, body {
  height: 100vh;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   12. NEUTRALISATION DES RÈGLES CASSÉES en light mode
   Le crm.css existant a des règles glass/dark hardcodées qui rendent
   le light mode illisible. On les neutralise EXPLICITEMENT pour
   light mode uniquement.
   ════════════════════════════════════════════════════════════════════ */

/* SIDEBAR : doit rester NOIRE dans les 2 modes (cohérence marque) */
html:not([data-theme="dark"]) .sb {
  background: #111 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .sb {
  background: rgba(20, 20, 20, 0.55) !important;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* TOPBAR : transparente dans les 2 modes */
html:not([data-theme="dark"]) .topbar,
[data-theme="dark"] .topbar {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* PANELS et task-groups : LISIBLES en light mode */
html:not([data-theme="dark"]) .task-group-client,
html:not([data-theme="dark"]) .task-group-name,
html:not([data-theme="dark"]) .task-group-content,
html:not([data-theme="dark"]) .task-group-projet,
html:not([data-theme="dark"]) .task-input-wrap {
  background: #ffffff !important;
  color: #111 !important;
}

html:not([data-theme="dark"]) .task-group-name {
  background: #f7f7f5 !important;     /* var(--g50) */
  color: #111 !important;
}

html:not([data-theme="dark"]) .task-group-name:hover {
  background: #f0f0ed !important;
}

html:not([data-theme="dark"]) .task-sec-lbl {
  background: transparent !important;
  color: #6e6e66 !important;
}

html:not([data-theme="dark"]) .task-item {
  background: #ffffff !important;
}

/* Header de panel : fond blanc, texte sombre */
html:not([data-theme="dark"]) .ph {
  background: transparent !important;
  border-bottom: 1.5px solid #f0f0ed !important;
}
html:not([data-theme="dark"]) .ph-title {
  color: #111 !important;
}

/* Inputs en light mode */
html:not([data-theme="dark"]) .task-input-wrap input,
html:not([data-theme="dark"]) .task-input-wrap select {
  background: #ffffff !important;
  color: #111 !important;
  border-color: #e2e2de !important;
}

/* Labels EN RETARD / COMPLÉTÉES en light mode */
html:not([data-theme="dark"]) .task-sec-lbl.red {
  color: #e24b4a !important;
}

/* Calendrier de droite (Mai 2026) en light mode */
html:not([data-theme="dark"]) .cal-nav {
  background: transparent !important;
  border-bottom: 1.5px solid #f0f0ed !important;
}
html:not([data-theme="dark"]) .cal-month,
html:not([data-theme="dark"]) .cal-num {
  color: #111 !important;
}
html:not([data-theme="dark"]) .cal-day-lbl {
  color: #9a9a92 !important;
}
html:not([data-theme="dark"]) .cal-cell:hover {
  background: #f0f0ed !important;
}

/* Section "Prochains RDV" */
html:not([data-theme="dark"]) .panel .pb {
  color: #111 !important;
}

/* Bouton "+ Ajouter" doit rester teal */
html:not([data-theme="dark"]) .btn-save,
html:not([data-theme="dark"]) .btn-add {
  background: var(--ac) !important;
  color: #fff !important;
}

/* "À facturer ce mois" panel */
html:not([data-theme="dark"]) .fac-row {
  background: transparent !important;
}
html:not([data-theme="dark"]) .fac-row:hover {
  background: #fff8e6 !important;
}
html:not([data-theme="dark"]) .fac-name {
  color: #111 !important;
}

/* FIN DU PATCH */