/* ============================================================
   mail-override.css — DRONE ECOCLEAN CRM
   Chargé EN DERNIER dans index.html. Ecrase tout fond dark.
   NE PAS modifier ce fichier sans raison valable.
   ============================================================ */

/* =============================================================
   1. RESET GLOBAL — Toute la page messagerie en blanc
   ============================================================= */
#mail-page {
  background:    #f3f4f6 !important;
  color:         #1F2937 !important;
}

/* =============================================================
   1b. CONTENEURS PARENTS — chaîne flex sans scroll global
   ============================================================= */

/* pageContent en mode mail (padding supprimé par JS) */
#pageContent:has(#mail-page),
#pageContent:has(#my-mailbox-page) {
  padding:        0             !important;
  overflow:       hidden        !important;
}

/* Wrapper mail-page */
#mail-page {
  display:        flex          !important;
  flex-direction: column        !important;
  flex:           1             !important;
  height:         100%          !important;
  min-height:     0             !important;
  overflow:       hidden        !important;
}

/* Conteneur principal mail-page-container */
#mail-page-container {
  display:        flex          !important;
  flex-direction: column        !important;
  flex:           1             !important;
  min-height:     0             !important;
  overflow:       hidden        !important;
}

/* =============================================================
   2. LAYOUT PRINCIPAL — Prend tout l'espace restant après topbar
   ============================================================= */
.mail-layout,
.mail-validation-layout,
.mail-history-layout,
#mail-layout {
  display:        flex          !important;
  flex-direction: row           !important;
  flex:           1             !important;
  height:         100%          !important;
  min-height:     0             !important;
  overflow:       hidden        !important;
  background:     #f3f4f6       !important;
  color:          #1F2937       !important;
}

/* =============================================================
   3. COLONNE GAUCHE — Hauteur fixe + scroll interne
   ============================================================= */
.mail-list-panel,
.mail-sidebar,
#mail-list-panel {
  width:          340px         !important;
  min-width:      280px         !important;
  max-width:      400px         !important;
  height:         100%          !important;
  display:        flex          !important;
  flex-direction: column        !important;
  overflow:       hidden        !important;
  background:     #ffffff       !important;
  border-right:   1px solid #E5E7EB !important;
  color:          #1F2937       !important;
}

/* En-tete de la colonne gauche (fixe, ne scrolle pas) */
.mail-list-header,
#mail-list-header {
  flex-shrink:    0             !important;
  background:     #ffffff       !important;
  color:          #1F2937       !important;
  border-bottom:  1px solid #E5E7EB !important;
}

/* ===== LA LISTE DES MAILS — SCROLL INTERNE UNIQUEMENT ===== */
.mail-list-items,
#mail-list-items,
.mail-items-container {
  flex:           1             !important;
  height:         0             !important; /* ASTUCE : force flex à respecter overflow */
  overflow-y:     auto          !important;
  overflow-x:     hidden        !important;
  background:     #F8FAFC       !important;
  color:          #1F2937       !important;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

/* =============================================================
   4. COLONNE DROITE — Detail mail + editeur
   ============================================================= */
.mail-detail-panel,
#mail-detail-panel,
#logs-detail-panel {
  flex:           1             !important;
  height:         100%          !important;
  display:        flex          !important;
  flex-direction: column        !important;
  overflow:       hidden        !important;
  background:     #f3f4f6       !important;
  color:          #1F2937       !important;
}

/* Zone du mail original recu */
.mail-original-zone,
.mail-original-content,
#mail-original-zone {
  flex:           1             !important;
  overflow-y:     auto          !important;
  background:     #ffffff       !important;
  color:          #1F2937       !important;
  border-bottom:  2px solid #E5E7EB !important;
  padding:        20px          !important;
}

/* Zone de réponse — conteneur flex contraint (boutons toujours visibles) */
.mail-reply-zone,
#mail-reply-zone {
  display:        flex          !important;
  flex-direction: column        !important;
  flex-shrink:    0             !important;
  min-height:     0             !important;
  overflow:       hidden        !important;
  background:     #f8fafc       !important;
  color:          #1F2937       !important;
}

/* Zone montage éditeur — flex colonne contrainte */
.mail-editor-zone,
#mail-editor-zone,
#mail-reply-editor-mount {
  flex:           1             !important;
  min-height:     0             !important;
  overflow:       hidden        !important;
  display:        flex          !important;
  flex-direction: column        !important;
  background:     #fff          !important;
  color:          #1F2937       !important;
}

/* MailEditor root — remplit son conteneur */
.me-root {
  flex:           1             !important;
  min-height:     0             !important;
  overflow:       hidden        !important;
  display:        flex          !important;
  flex-direction: column        !important;
}

/* Corps de l'éditeur — scroll interne uniquement */
.me-root [contenteditable] {
  flex:           1             !important;
  min-height:     0             !important;
  overflow-y:     auto          !important;
}

/* Barre d'actions MailEditor — toujours visible en bas */
.me-actions {
  flex-shrink:    0             !important;
  border-top:     1px solid #f3f4f6 !important;
  background:     #f9fafb       !important;
}

/* =============================================================
   5. ELEMENTS INTERIEURS — Jamais de fond dark
   ============================================================= */

/* Chaque item mail — carte visuelle */
.mail-item,
.mail-list-item {
  background:     #ffffff       !important;
  color:          #1F2937       !important;
  border-bottom:  none          !important;
  border:         1px solid #E2E8F0 !important;
  border-left:    3px solid transparent !important;
  border-radius:  10px          !important;
  margin:         4px 8px       !important;
  cursor:         pointer;
  transition:     all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
  box-shadow:     0 2px 4px rgba(0,0,0,.04), 0 2px 0 rgba(0,0,0,.02) !important;
}

/* Bordure gauche selon statut/lecture */
.mail-item[data-read="0"]                  { border-left: 3px solid #3B82F6 !important; background: #f8fbff !important; }
.mail-item[data-status="sent"]             { border-left: 3px solid #34D399 !important; }
.mail-item[data-status="archived"]         { border-left: 3px solid #8B5CF6 !important; }
.mail-item[data-status="pending_approval"] { border-left: 3px solid #F59E0B !important; }
.mail-item[data-status="spam"]             { border-left: 3px solid #EF4444 !important; }

/* Texte non-lu en gras */
.mail-item.is-unread .mail-subject,
.mail-item.is-unread .mail-sender { font-weight: 700 !important; color: #1e3a5f !important; }
.mail-item.is-read   .mail-subject,
.mail-item.is-read   .mail-sender { font-weight: 400 !important; color: #374151 !important; }

/* Hover lift */
.mail-item:hover {
  transform:   translateY(-2px) !important;
  box-shadow:  0 5px 14px rgba(0,0,0,.08), 0 2px 0 rgba(0,0,0,.04) !important;
  background:  #fafcff !important;
}

/* Sélectionné */
.mail-item.selected                                 { background: linear-gradient(90deg, rgba(37,99,235,.06), #fff)    !important; border-left: 4px solid #2563EB !important; box-shadow: 0 3px 10px rgba(37,99,235,.10) !important; }
.mail-item.selected[data-status="pending_approval"] { background: linear-gradient(90deg, rgba(245,158,11,.07), #fff)  !important; border-left-color: #F59E0B !important; }
.mail-item.selected[data-status="sent"]             { background: linear-gradient(90deg, rgba(52,211,153,.07), #fff)  !important; border-left-color: #34D399 !important; }
.mail-item.selected[data-status="archived"]         { background: linear-gradient(90deg, rgba(139,92,246,.07), #fff)  !important; border-left-color: #8B5CF6 !important; }

/* En-tete detail mail */
.mail-detail-header,
#mail-detail-header {
  background:     #f8fafc       !important;
  color:          #1F2937       !important;
  border-bottom:  1px solid #E5E7EB !important;
  border-top:     3px solid #3B82F6 !important;
  flex-shrink:    0             !important;
}

/* Toolbar de l'editeur riche */
.mail-editor-toolbar,
.MailEditor-toolbar,
#mail-editor-toolbar {
  background:     #ffffff       !important;
  border:         1px solid #E5E7EB !important;
  border-radius:  6px           !important;
  color:          #1F2937       !important;
}

/* Zone de redaction contenteditable */
[contenteditable],
.mail-editor-body,
.MailEditor-body {
  background:     #ffffff       !important;
  color:          #1F2937       !important;
  border:         1px solid #D1D5DB !important;
  border-radius:  6px           !important;
  min-height:     150px         !important;
  padding:        14px          !important;
}

/* Barre d'actions */
.mail-action-bar,
#mail-action-bar {
  background:     #ffffff       !important;
  border-top:     1px solid #E5E7EB !important;
  flex-shrink:    0             !important;
  color:          #1F2937       !important;
}

/* Empty state */
.mail-empty-state,
#mail-empty-state {
  background:     #f3f4f6       !important;
  color:          #6B7280       !important;
}

/* =============================================================
   6. DOSSIERS IMAP (colonne gauche Historique)
   ============================================================= */
.folder-tree,
#folder-tree {
  background:     #ffffff       !important;
  color:          #1F2937       !important;
  border-bottom:  1px solid #E5E7EB !important;
  flex-shrink:    0             !important;
}
.folder-item {
  display:        flex          !important;
  align-items:    center        !important;
  gap:            8px           !important;
  padding:        7px 12px      !important;
  cursor:         pointer;
  background:     transparent   !important;
  color:          #475569       !important;
  font-size:      12px          !important;
  border-left:    2.5px solid transparent !important;
  border-radius:  8px           !important;
  margin:         1px 4px       !important;
  transition:     all 0.18s ease !important;
}
.folder-item:hover {
  background:    #F1F5F9        !important;
  transform:     translateX(3px) !important;
}
.folder-item.active {
  background:    linear-gradient(90deg, rgba(52,211,153,.12), rgba(52,211,153,.03)) !important;
  border-left:   2.5px solid #34D399 !important;
  color:         #065F46        !important;
  font-weight:   600            !important;
}

/* =============================================================
   7. MENU CONTEXTUEL — Fond blanc
   ============================================================= */
.context-menu, #ctx-menu {
  background:     #ffffff       !important;
  color:          #1F2937       !important;
  border:         1px solid #E5E7EB !important;
  box-shadow:     0 8px 24px rgba(0,0,0,0.12) !important;
}
.ctx-item { color: #374151 !important; }
.ctx-item.danger { color: #DC2626 !important; }
.ctx-item:hover  { background: #F3F4F6 !important; }

/* =============================================================
   8. OVERRIDE TAILWIND — Force light theme dans #mail-page
   Les classes Tailwind dark sont écrasées dans ce contexte.
   ============================================================= */

/* Backgrounds sombres → clair */
#mail-page .bg-gray-900,
#mail-page #mail-tab-content   { background-color: #f3f4f6 !important; }
#mail-page .bg-gray-800        { background-color: #ffffff !important; }

/* Tailwind opacity variants (slash notation) */
#mail-page [class~="bg-gray-800/40"],
#mail-page [class~="bg-gray-800/30"],
#mail-page [class~="bg-gray-800/50"] { background-color: #f8fafc !important; }

/* Bordures sombres → claires */
#mail-page .border-gray-700    { border-color: #e5e7eb !important; }
#mail-page .border-gray-800    { border-color: #f3f4f6 !important; }

/* Texte blanc → sombre */
#mail-page .text-white         { color: #111827 !important; }
#mail-page .text-gray-300      { color: #374151 !important; }
#mail-page .text-gray-400      { color: #6b7280 !important; }
#mail-page .text-gray-500      { color: #9ca3af !important; }
#mail-page .text-gray-600      { color: #9ca3af !important; }

/* EXCEPTIONS : garder le texte blanc sur les boutons colorés */
#mail-page .bg-blue-600.text-white,
#mail-page .bg-blue-500.text-white,
#mail-page .bg-orange-600.text-white,
#mail-page .bg-orange-500.text-white,
#mail-page .bg-red-600.text-white,
#mail-page .bg-green-600.text-white { color: #ffffff !important; }

/* Boutons filter non-actifs */
#mail-page .bg-gray-700        { background-color: #f1f5f9 !important; }
#mail-page .bg-gray-700.text-gray-300 { color: #475569 !important; }

/* Inputs et selects */
#mail-page input[type="text"],
#mail-page input[type="date"],
#mail-page select {
  background-color: #ffffff     !important;
  color: #1f2937                !important;
  border-color: #d1d5db         !important;
}
#mail-page input::placeholder   { color: #9ca3af !important; }

/* Scroll interne propre */
#mail-page ::-webkit-scrollbar        { width: 6px; }
#mail-page ::-webkit-scrollbar-track  { background: transparent; }
#mail-page ::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 3px; }

/* =============================================================
   9. PARAMÈTRES > MESSAGERIE — Comptes mail (correction 1.4)
   ============================================================= */
#mail-accounts-container [id^="acc-card-"],
#mail-accounts-container .bg-gray-800 {
  background: #ffffff !important;
  color:      #1F2937 !important;
  border:     1px solid #E5E7EB !important;
}
#mail-accounts-container .bg-gray-900,
#mail-accounts-container .bg-dark {
  background: #F9FAFB !important;
}
#mail-accounts-container input,
#mail-accounts-container textarea,
#mail-accounts-container select {
  background: #F9FAFB !important;
  color:      #1F2937 !important;
  border:     1px solid #D1D5DB !important;
}
#mail-accounts-container input::placeholder { color: #9CA3AF !important; }
#mail-accounts-container label,
#mail-accounts-container .text-gray-400 { color: #6B7280 !important; }
#mail-accounts-container .text-white     { color: #111827 !important; }
#mail-accounts-container .text-gray-300  { color: #374151 !important; }
#mail-accounts-container .border-gray-600,
#mail-accounts-container .border-gray-700 { border-color: #E5E7EB !important; }
/* Boutons dans les cartes */
#mail-accounts-container .bg-gray-700 { background: #F3F4F6 !important; color: #374151 !important; }
/* Status badge actif */
#mail-accounts-container .bg-green-900 { background: #DCFCE7 !important; }
#mail-accounts-container .text-green-300 { color: #166534 !important; }
/* Template email */
#mail-template-container,
#mail-template-container * {
  background: revert;
  color:      revert;
}
#mail-template-container .bg-gray-800  { background: #ffffff !important; }
#mail-template-container .bg-gray-900  { background: #f9fafb !important; }
#mail-template-container .text-white   { color: #111827 !important; }
#mail-template-container .text-gray-300{ color: #374151 !important; }
#mail-template-container .border-gray-700 { border-color: #e5e7eb !important; }
#mail-template-container textarea      { background: #f8fafc !important; color: #1F2937 !important;
                                         font-family: 'Courier New', monospace; font-size: 13px; }

/* =============================================================
   10. TOPBAR MAIL — Filter pills
   ============================================================= */
.mail-topbar {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       10px 16px;
  background:    #ffffff;
  border-bottom: 1px solid #E5E7EB;
  border-top:    3px solid #3B82F6;
  flex-shrink:   0;
}
.mail-filter-pills { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.mail-pill {
  padding:       5px 14px;
  border-radius: 20px;
  border:        1px solid #E2E8F0;
  background:    #F8FAFC;
  cursor:        pointer;
  font-size:     12px;
  font-weight:   500;
  white-space:   nowrap;
  transition:    all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  color:         #64748B;
  box-shadow:    0 2px 0 rgba(0,0,0,.06);
}
.mail-pill:hover {
  transform:     translateY(-2px);
  box-shadow:    0 4px 10px rgba(0,0,0,.10);
}
/* Couleurs actives par filtre */
.mail-pill.active[data-filter="pending"]  { background: #FFF7ED; color: #C2410C; border-color: rgba(245,158,11,.4); box-shadow: 0 3px 0 rgba(245,158,11,.25); }
.mail-pill.active[data-filter="all"]      { background: #EFF6FF; color: #1D4ED8; border-color: rgba(59,130,246,.3);  box-shadow: 0 3px 0 rgba(59,130,246,.2); }
.mail-pill.active[data-filter="sent"]     { background: #F0FDF9; color: #065F46; border-color: rgba(52,211,153,.3);  box-shadow: 0 3px 0 rgba(52,211,153,.2); }
.mail-pill.active[data-filter="archived"] { background: #F8FAFC; color: #475569; border-color: #CBD5E1; }
.mail-pill.active[data-filter="starred"]  { background: #FFFBEB; color: #92400E; border-color: rgba(245,158,11,.3);  box-shadow: 0 3px 0 rgba(245,158,11,.2); }
/* Fallback si data-filter absent */
.mail-pill.active { background: #EFF6FF; color: #1D4ED8; border-color: rgba(59,130,246,.3); box-shadow: 0 3px 0 rgba(59,130,246,.2); }
.mail-pill .pill-badge {
  margin-left:   5px;
  background:    #EF4444;
  color:         #fff;
  border-radius: 10px;
  padding:       1px 5px;
  font-size:     9px;
  font-weight:   700;
}
.mail-topbar-search {
  flex: 1;
  max-width: 280px;
  padding:   6px 12px;
  border:    1px solid #D1D5DB;
  border-radius: 20px;
  font-size: 13px;
  color:     #1F2937;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mail-topbar-search:focus {
  outline: none;
  border-color: #93C5FD;
  box-shadow:   0 0 0 3px rgba(59,130,246,.1);
}
.mail-topbar-config {
  margin-left: auto;
  font-size:   12px;
  color:       #6B7280;
  white-space: nowrap;
  cursor:      pointer;
}
.mail-topbar-config:hover { color: #2563EB; text-decoration: underline; }

/* =============================================================
   11. SPLITTER vertical redimensionnable (correction 3.1)
   ============================================================= */
.mail-splitter {
  height:      6px;
  background:  #E5E7EB;
  cursor:      row-resize;
  flex-shrink: 0;
  position:    relative;
  transition:  background 0.2s;
  user-select: none;
}
.mail-splitter:hover,
.mail-splitter.is-dragging { background: #2563EB; }
/* Zone cliquable élargie */
.mail-splitter::before {
  content:  '';
  position: absolute;
  top: -6px; bottom: -6px; left: 0; right: 0;
  cursor: row-resize;
}
/* Zones original/reply */
.mail-original-zone {
  flex-basis:  50%;
  flex-shrink: 0;
  flex-grow:   0;
  min-height:  20%;
  overflow-y:  auto;
  background:  #ffffff;
}
.mail-reply-zone {
  /* Remplacé par les règles !important en haut du fichier */
  background:  #F8FAFC;
  display:     flex;
  flex-direction: column;
}
/* Séparateur label */
.mail-splitter-label {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     6px 16px;
  background:  #F3F4F6;
  border-top:  1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
  font-size:   12px;
  color:       #6B7280;
}

/* Context menu dossiers (correction 4) */
.ctx-sep { height: 1px; background: #F3F4F6; margin: 3px 0; }

/* Context menus Ma Messagerie (Chantier 37) */
.mmb-ctx-menu {
  background:     #ffffff       !important;
  color:          #374151       !important;
  border:         1px solid #E2E8F0 !important;
  border-radius:  10px          !important;
  box-shadow:     0 8px 24px rgba(0,0,0,0.12) !important;
  min-width:      200px;
  padding:        4px 0;
  font-size:      13px;
}

/* Barre de statut Ma Messagerie (Chantier 37) */
#mmb-statusbar {
  position:       sticky        !important;
  bottom:         0             !important;
  background:     #F1F5F9       !important;
  border-top:     1px solid #E2E8F0 !important;
  z-index:        10;
}

/* =============================================================
   12. ONGLETS DYNAMIQUES PAR BOÎTE (Chantier 1)
   ============================================================= */
/* Pill d'un compte spécifique — style "boite" distinct */
.mail-pill[data-account-id] {
  background:   #F0F9FF;
  color:        #0369A1;
  border-color: rgba(14,165,233,.25);
  font-size:    11px;
  padding:      4px 11px;
}
.mail-pill[data-account-id]:hover {
  background:   #E0F2FE;
  border-color: rgba(14,165,233,.4);
}
.mail-pill.active[data-account-id] {
  background:   #0369A1;
  color:        #ffffff;
  border-color: #0284C7;
  box-shadow:   0 3px 0 rgba(3,105,161,.35);
}

/* =============================================================
   13. SÉPARATEURS GROUPES TEMPORELS (Chantier 3)
   ============================================================= */
.mail-group-sep {
  position:     sticky;
  top:          0;
  z-index:      2;
  transition:   background 0.15s;
}
.mail-group-sep:hover {
  background: #F1F5F9 !important;
}