/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   Ajustements pour le thème clair - utilise [data-theme="light"]
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   LIBRARY SECTION - Mode Toggle (Triple Segmented Control)
   Classes: .mode-toggle-triple .toggle-container-triple, .toggle-btn, .toggle-text
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container principal du sélecteur triple */
[data-theme="light"] .mode-toggle-triple .toggle-container-triple {
  background: linear-gradient(135deg,
    rgba(241, 245, 249, 0.95) 0%,
    rgba(255, 255, 255, 0.98) 100%
  ) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

[data-theme="light"] .mode-toggle-triple .toggle-container-triple:hover {
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Texte des boutons - plus lisible en mode clair */
[data-theme="light"] .mode-toggle-triple .toggle-text {
  color: rgba(15, 23, 42, 0.65) !important;
}

[data-theme="light"] .mode-toggle-triple .toggle-btn:hover:not(.active) .toggle-text {
  color: rgba(15, 23, 42, 0.85) !important;
}

[data-theme="light"] .mode-toggle-triple .toggle-btn.active .toggle-text {
  color: #ffffff !important;
}

/* Hover state des boutons inactifs */
[data-theme="light"] .mode-toggle-triple .toggle-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* Badge inactif */
[data-theme="light"] .mode-toggle-triple .toggle-btn:not(.active) .toggle-badge {
  background: rgba(99, 102, 241, 0.12) !important;
  color: rgba(99, 102, 241, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
}

/* Server Cards */
[data-theme="light"] .server-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .server-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Theme Cards in Library */
[data-theme="light"] .theme-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .theme-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME SECTION - Cards & Input Fields
   Classes: .meta-card-v3, .meta-input-v3, .builder-section
   ═══════════════════════════════════════════════════════════════════════════ */

/* Builder Section Cards */
[data-theme="light"] .builder-section {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Meta Cards V3 (ThemeSection) */
[data-theme="light"] .meta-card-v3 {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .meta-card-v3:hover {
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

/* Meta Input V3 (ThemeSection inputs) */
[data-theme="light"] .meta-input-v3,
[data-theme="light"] .meta-input-v3 input,
[data-theme="light"] .meta-input-v3 textarea {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .meta-input-v3:focus,
[data-theme="light"] .meta-input-v3 input:focus,
[data-theme="light"] .meta-input-v3 textarea:focus,
[data-theme="light"] .meta-input-v3:focus-within {
  border-color: var(--primary) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Section Header */
[data-theme="light"] .section-header-fancy {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
}

/* Generic Input Fields */
[data-theme="light"] .theme-input,
[data-theme="light"] .form-control,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="url"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .theme-input:focus,
[data-theme="light"] .form-control:focus,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: var(--primary) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="light"] .theme-input::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94A3B8 !important;
}

/* Info Banner */
[data-theme="light"] .info-banner,
[data-theme="light"] .roles-info-banner {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.06));
  border-color: rgba(99, 102, 241, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRAPS SECTION - Trap Cards
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .trap-card-v2 {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .trap-card-v2:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="light"] .trap-card-header {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.04));
}

[data-theme="light"] .trap-card-body {
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DISCORD EMBED PREVIEW
   Note: On garde les couleurs Discord pour la preview (fidèle à Discord)
   Mais on ajoute un contour fort pour mieux ressortir sur fond clair
   Classes: .discord-preview-container, .discord-embed, .discord-message
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container principal Discord - bordure et ombre forte */
[data-theme="light"] .discord-preview-container {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.1) !important;
  border: 2px solid rgba(49, 51, 56, 0.4) !important;
  border-radius: 12px !important;
}

/* Wrapper autour de la preview - fond BLANC pur avec bordure visible */
[data-theme="light"] .discord-preview-section-v5,
[data-theme="light"] .discord-preview-wrapper,
[data-theme="light"] .embed-preview-section {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Label "APERÇU DISCORD" - plus visible */
[data-theme="light"] .preview-label,
[data-theme="light"] .preview-title,
[data-theme="light"] .preview-divider-text {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* Divider lines */
[data-theme="light"] .preview-divider::before,
[data-theme="light"] .preview-divider::after {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.15), transparent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTION BAR
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .action-bar-v2 {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .action-bar-v2 .ab-drag-handle {
  color: #94A3B8;
}

[data-theme="light"] .action-bar-v2:hover .ab-drag-handle {
  color: #64748B;
}

[data-theme="light"] .action-bar-v2 .ab-status-badge.status-saved {
  background: rgba(16, 185, 129, 0.1);
}

[data-theme="light"] .action-bar-v2 .ab-status-badge.status-modified {
  background: rgba(245, 158, 11, 0.1);
}

[data-theme="light"] .action-bar-v2 .ab-status-badge.status-saving {
  background: rgba(99, 102, 241, 0.1);
}

[data-theme="light"] .action-bar-v2 .ab-btn-save {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text-primary);
}

[data-theme="light"] .action-bar-v2 .ab-btn-save:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .action-bar-v2 .ab-btn-reset {
  background: rgba(0, 0, 0, 0.03);
  color: #64748B;
}

[data-theme="light"] .action-bar-v2 .ab-btn-reset:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMPLATES SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .template-card-v2 {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .template-card-v2:hover {
  border-color: color-mix(in srgb, var(--category-color, #6366F1) 30%, transparent);
}

[data-theme="light"] .template-card-v2.expanded {
  background: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .template-card-header {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--category-color, #6366F1) 8%, transparent),
    color-mix(in srgb, var(--category-color, #6366F1) 4%, transparent)
  );
}

[data-theme="light"] .template-input-wrap textarea,
[data-theme="light"] .template-input-wrap input {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .template-actions {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Category Headers */
[data-theme="light"] .templates-category-header {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(139, 92, 246, 0.04));
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .toast:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .toast.success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(255, 255, 255, 0.95) 50%);
  border-color: rgba(16, 185, 129, 0.2);
}

[data-theme="light"] .toast.error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(255, 255, 255, 0.95) 50%);
  border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="light"] .toast.warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(255, 255, 255, 0.95) 50%);
  border-color: rgba(245, 158, 11, 0.2);
}

[data-theme="light"] .toast.info {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(255, 255, 255, 0.95) 50%);
  border-color: rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .toast-close {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .toast-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLLECTIBLES SECTION - Cards
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .collectible-card,
[data-theme="light"] .collectible-card-v2 {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .collectible-card:hover,
[data-theme="light"] .collectible-card-v2:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSIONS SECTION - Cards
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .mission-card-v2 {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mission-card-v2:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .mission-category-v2 .category-header-v2 {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(139, 92, 246, 0.04));
}

/* Type Chips */
[data-theme="light"] .type-chip-v2 {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .type-chip-v2.active {
  background: var(--primary);
  color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MYSTERY BOX SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .mysterybox-preview-v2 {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(249, 115, 22, 0.06));
  border-color: rgba(251, 191, 36, 0.2);
}

[data-theme="light"] .mysterybox-preview-v2 .preview-image-container {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(251, 191, 36, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROLES SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .roles-timeline-v2 {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .timeline-track {
  background: rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.95);
  border-right-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sidebar-nav-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .sidebar-nav-item.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .modal-content,
[data-theme="light"] .modal-v2 {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .modal-header {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(139, 92, 246, 0.04));
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .modal-footer {
  background: rgba(248, 250, 252, 0.9);
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .empty-state-v2 {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(139, 92, 246, 0.02));
  border-color: rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS EFFECTS - General Override
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .glass-panel,
[data-theme="light"] [class*="glass-"] {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAT PILLS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .stat-pill {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS - Secondary/Outline variants
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text-primary);
}

[data-theme="light"] .btn-outline:hover,
[data-theme="light"] .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DROPDOWNS & SELECT MENUS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .dropdown-menu,
[data-theme="light"] .select-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] ::-webkit-scrollbar-track {
  background: #F1F5F9;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}