/* Dynamic colors generated from admin settings */
:root {
  --token-color-primary: #1E3A8A;
  --token-color-secondary: #3B65C4;
  --token-color-accent: #FF7F50;
  --token-bg: #ffffff;
  --token-text: #222222;
  --token-button-text: #ffffff;
  --token-button-hover: #2556D4;
  --token-success: #4CAF50;
  --token-warning: #FFC107;
  --token-error: #FF6347;
  --token-text-muted: #666666;
  --token-surface: #ffffff;

  /* short aliases for backward compatibility */
  --color-primary: var(--token-color-primary);
  --color-secondary: var(--token-color-secondary);
  --color-accent: var(--token-color-accent);
  --button-text-color: var(--token-button-text);
  --content-text-color: var(--token-text);
  --button-hover-color: var(--token-button-hover);
  --gradient-primary: linear-gradient(90deg, var(--token-color-primary), var(--token-color-secondary));
}

/* buttons & states */
button, input[type="button"], input[type="submit"], [role="button"], .btn, .btn-primary, .primary, .cta {
  background: linear-gradient(90deg, var(--token-color-primary), var(--token-color-secondary)) !important;
  color: var(--token-button-text) !important;
  border-color: var(--token-color-primary) !important;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover, [role="button"]:hover,
.btn:hover, .btn-primary:hover, .primary:hover, .cta:hover {
  background: var(--token-button-hover) !important;
  border-color: var(--token-button-hover) !important;
}

button:active, .btn:active, .btn.active, .primary:active, .primary.active, .cta:active {
  background: var(--token-color-accent) !important;
  border-color: var(--token-color-accent) !important;
  color: var(--token-button-text) !important;
}

nav, .navbar, .nav {
  background: linear-gradient(90deg, var(--token-color-primary), var(--token-color-secondary)) !important;
  color: var(--token-button-text) !important;
}

.bg-primary { background-color: var(--token-color-primary) !important; }
.bg-secondary { background-color: var(--token-color-secondary) !important; }
.text-primary { color: var(--token-color-primary) !important; }
.text-secondary { color: var(--token-color-secondary) !important; }

/* MEGA MENU - Couleurs fixes (non affectées par admin_settings) */
/* Fond blanc pour le mega menu */
.user-menu-content {
  background: white !important;
}

/* Texte noir pour les liens utilisateur et navigation */
.user-menu-links a:not([style*="color: #FF6347"]) {
  color: #1E3A8A !important;
}

.user-menu-links a:not([style*="color: #FF6347"]):hover {
  background: #e8f0ff !important;
  color: #1E3A8A !important;
}

/* Titres des sections en bleu foncé (sauf administration) */
.user-menu-section-title:not([style*="color: #FF6347"]) {
  color: #1E3A8A !important;
}

/* Section Administration en orange */
.user-menu-links a[style*="color: #FF6347"],
.user-menu-section-title[style*="color: #FF6347"] {
  color: #FF6347 !important;
}

.user-menu-links a[style*="color: #FF6347"]:hover {
  background: #fff5f3 !important;
  color: #FF6347 !important;
}

/* Détails des items du panier */
.cart-item-details p:first-child {
  color: #1E3A8A !important;
}

.cart-item-details p:last-child {
  color: #666 !important;
}

/* Panier vide */
.cart-preview p[style*="color:#666"] {
  color: #666 !important;
}

/* ========== BUG #6 FIX: HARMONISATION ADMIN TEMPLATE ========== */

/* FOOTER - Utiliser les couleurs admin_settings */
.site-footer {
  background-color: var(--token-color-primary) !important;
}

.footer-links ul li a:hover {
  color: var(--token-color-accent) !important;
}

/* ========== TEXTES DE CONTENU - Utiliser content_text_color ========== */
/* Appliquer la couleur "Texte de contenu" depuis admin_settings */

/* Body et texte général */
body {
  color: var(--token-text) !important;
}

/* Titres de sections, h1, h2, h3 (sauf ceux déjà stylés avec primary_color) */
h1:not(.admin-panel h1):not(.panel-header h1):not(.form-header h1),
h2:not(.admin-panel h2):not(.panel-header h2):not(.form-header h2):not(.cart-header h2),
h3:not(.admin-panel h3):not(.panel-header h3):not(.form-header h3):not(.order-info h3):not(.painting-info h3):not(.form-info h3):not(.footer-about h3),
h4:not(.footer-links h4):not(.footer-contact h4),
h5, h6 {
  color: var(--token-text) !important;
}

/* Paragraphes, textes généraux */
p, span:not(.stat-number):not(.preview-price):not(.price):not(.badge-dot),
.hero-description,
.section-subtitle,
.advantage-description,
.step-description,
.pricing-note p,
.form-disclaimer,
.form-hint,
article,
.description,
.bio,
.about-text {
  color: var(--token-text) !important;
}

/* Titres spécifiques des sections */
.section-title,
.hero-title,
.advantage-title,
.step-title,
.pricing-plan,
.form-title {
  color: var(--token-text) !important;
}

/* Labels de formulaires */
label:not(.file-label) {
  color: var(--token-text) !important;
}

/* Footer - Titres et textes (sauf admin qui garde primary_color) */
.footer-about h3,
.footer-links h4,
.footer-contact h4,
.footer-about p,
.footer-contact p,
.footer-bottom {
  color: var(--button-text-color) !important;
}

/* Textes des cartes et éléments de produits */
.product-card .product-name,
.product-card .product-description,
.painting-card .painting-title,
.painting-card .painting-price,
.card-title,
.card-text {
  color: var(--token-text) !important;
}

/* Listes */
ul li, ol li {
  color: var(--token-text) !important;
}

/* Navigation - Le texte reste blanc (button-text-color) pour contraster avec le gradient */
nav, nav a, .navbar, .navbar a, .nav-link {
  color: var(--token-button-text) !important;
}

/* ADMIN DASHBOARD - Header */
.admin-header {
  background: linear-gradient(135deg, var(--token-color-primary) 0%, var(--token-color-secondary) 100%) !important;
}

/* ADMIN TABLES - Utiliser accent_color au lieu de orange hardcodé */
.admin-table thead {
  background: var(--token-color-accent) !important;
}

/* STAT CARDS - Hover shadow uses primary color */
.stat-card:hover {
  box-shadow: 0 8px 20px rgba(30, 58, 138, 0.15) !important;
}

/* Tous les textes primary_color dans admin */
.stat-number,
.admin-panel h2,
.admin-table th,
.panel-header h2,
.form-header h2,
.nav-btn.active,
.btn-overlay,
h3, h4 /* titres généraux */ {
  color: var(--token-color-primary) !important;
}

/* Boutons et liens - Utiliser gradient primary/secondary */
.btn-link,
.validate-btn,
.checkout-form button,
.form-group button,
.qty-btn,
.product-card button {
  background: linear-gradient(90deg, var(--token-color-primary), var(--token-color-secondary)) !important;
}

.btn-link:hover,
.validate-btn:hover,
.checkout-form button:hover,
.form-group button:hover,
.qty-btn:hover,
.product-card button:hover {
  background: linear-gradient(90deg, var(--token-color-secondary), var(--token-color-primary)) !important;
}

/* PANIER - Total et éléments */
.total-price,
.cart-header h2,
.checkout-info .name,
.checkout-total {
  color: var(--token-color-primary) !important;
}

/* Focus states */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--token-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1) !important;
}

/* File upload wrapper */
.file-input-wrapper {
  border-color: var(--token-color-primary) !important;
}

.file-input-wrapper:hover {
  border-color: var(--token-color-secondary) !important;
}

.file-label {
  color: var(--token-color-primary) !important;
}

/* Status links */
.status-link {
  color: var(--token-color-primary) !important;
  background: rgba(30, 58, 138, 0.1) !important;
}

.status-link:hover {
  background: var(--token-color-primary) !important;
}

/* Form info boxes */
.form-info {
  border-left-color: var(--token-color-primary) !important;
}

.form-info h3 {
  color: var(--token-color-primary) !important;
}

/* COMMANDES - Order items */
.order-item:hover {
  border-color: var(--token-color-primary) !important;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.1) !important;
}

.order-info h3,
.painting-info h3,
.amount,
.item-name,
.item-total,
.detail-row .label,
.items-header,
.status-dropdown strong {
  color: var(--token-color-primary) !important;
}