/**
 * ============================================
 * ADEX - Configuration des Styles
 * ============================================
 * Ce fichier contient toutes les variables CSS
 * centralisées pour le thème de l'application.
 * 
 * Modifiez ces valeurs pour personnaliser
 * l'apparence globale de l'application.
 * ============================================
 */

:root {
    /* ========================================
       COULEURS PRINCIPALES (BRANDING)
       ======================================== */
    
    /* Couleur principale du header */
    --brand-yellow: #b45d00;
    
    /* Couleur sombre (sidebar, textes) */
    --brand-dark: #1a1a2e;
    
    /* Couleur dorée (accents, boutons) */
    --brand-gold: #cc6a01;
    
    /* ========================================
       PALETTE DE COULEURS DORÉES
       ======================================== */
    --gold-50: #fefce8;
    --gold-100: #fef9c3;
    --gold-200: #fef08a;
    --gold-300: #fde047;
    --gold-400: #facc15;
    --gold-500: #C4A052;
    --gold-600: #814402;
    
    /* ========================================
       PALETTE DE GRIS
       ======================================== */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* ========================================
       PALETTE MARRON
       ======================================== */
    --brown-400: #a07d30;
    --brown-500: #8b6914;
    --brown-600: #78570d;
    
    /* ========================================
       COULEURS SÉMANTIQUES (STATUTS)
       ======================================== */
    
    /* Vert - Succès, Livré */
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    
    /* Rouge - Erreur, Retour */
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    
    /* Orange - Avertissement */
    --orange-50: #fff7ed;
    --orange-100: #ffedd5;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    
    /* Bleu - Information */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    
    /* Violet - Spécial */
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    
    /* Teal - Accent */
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    
    /* ========================================
       COULEURS DES HEADERS DE PAGES
       ======================================== */
    
    /* Dashboard - Couleur sombre/doré */
    --header-dashboard-start: var(--brand-dark);
    --header-dashboard-end: #16213e;
    
    /* Colis (index) - Gris foncé */
    --header-colis-start: var(--gray-800);
    --header-colis-end: var(--gray-700);
    
    /* Colis Livrés - Vert */
    --header-livre-start: var(--green-600);
    --header-livre-end: var(--green-700);
    
    /* Colis Retours - Rouge */
    --header-retour-start: var(--red-600);
    --header-retour-end: var(--red-700);
    
    /* Activités récentes - Indigo/Purple */
    --header-activites-start: var(--indigo-500);
    --header-activites-end: var(--purple-500);
    
    /* Manifests - Teal */
    --header-manifest-start: var(--teal-500);
    --header-manifest-end: var(--teal-600);
    
    /* Échanges - Orange */
    --header-echange-start: var(--orange-500);
    --header-echange-end: var(--orange-600);
    
    /* Paiements - Violet */
    --header-paiement-start: var(--purple-500);
    --header-paiement-end: var(--purple-600);
    
    /* Réclamations/Tickets - Teal */
    --header-ticket-start: var(--teal-500);
    --header-ticket-end: var(--teal-600);
    
    /* Bons de retour - Rouge */
    --header-bonretour-start: var(--red-500);
    --header-bonretour-end: var(--red-600);
    
    /* Chèques - Indigo */
    --indigo-50: #eef2ff;
    --indigo-100: #e0e7ff;
    --indigo-200: #c7d2fe;
    --indigo-300: #a5b4fc;
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-700: #4338ca;
    --header-cheques-start: var(--indigo-500);
    --header-cheques-end: var(--indigo-600);
    
    /* Modification de prix - Cyan */
    --cyan-500: #06b6d4;
    --cyan-600: #0891b2;
    --header-modifprix-start: var(--cyan-500);
    --header-modifprix-end: var(--cyan-600);
    
    /* Création de colis - Gris foncé */
    --header-create-start: var(--gray-800);
    --header-create-end: var(--gray-600);
    
    /* Détail colis - Marron */
    --brown-600: #6b4423;
    --brown-800: #3d2820;
    --header-show-start: var(--brown-800);
    --header-show-end: var(--brown-600);
    
    /* ========================================
       COULEURS DES STATUTS DE COLIS
       ======================================== */
    --status-attente: #727b86;
    --status-ramasse: #ffa159;
    --status-depot: #ff6f00;
    --status-reporte: #808080;
    --status-enlivre: #989874;
    --status-livre: #00c17f;
    --status-retour: #e85862;
    --status-annule: #dc2626;
    --status-echange: #f59e0b;
    
    /* ========================================
       SIDEBAR
       ======================================== */
    --sidebar-bg: var(--brand-dark);
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-active-start: var(--brand-gold);
    --sidebar-active-end: #b8943e;
    --sidebar-text: rgba(255, 255, 255, 0.7);
    --sidebar-text-hover: #fff;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 80px;
    
    /* ========================================
       HEADER
       ======================================== */
    --header-height: 65px;
    --header-bg: var(--brand-yellow);
    
    /* ========================================
       BOUTONS
       ======================================== */
    --btn-primary-start: var(--brand-gold);
    --btn-primary-end: var(--gold-600);
    --btn-primary-hover-start: #b8943e;
    --btn-primary-hover-end: #a07d30;
    
    --btn-success-start: var(--green-500);
    --btn-success-end: var(--green-600);
    
    --btn-danger-start: var(--red-500);
    --btn-danger-end: var(--red-600);
    
    --btn-secondary-bg: var(--gray-100);
    --btn-secondary-text: var(--gray-700);
    
    /* ========================================
       FORMULAIRES
       ======================================== */
    --input-border: var(--gray-300);
    --input-focus-border: var(--brand-gold);
    --input-focus-shadow: rgba(196, 160, 82, 0.1);
    
    /* ========================================
       CARTES ET TABLEAUX
       ======================================== */
    --card-bg: #ffffff;
    --card-border: var(--gray-200);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --card-radius: 16px;
    
    --table-header-bg: var(--gray-50);
    --table-hover-bg: var(--gold-50);
    --table-border: var(--gray-200);
    
    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ========================================
       OMBRES
       ======================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    
    /* ========================================
       ESPACEMENTS
       ======================================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;
}

/* ============================================
   CLASSES UTILITAIRES
   ============================================ */

/* Gradient pour bouton primaire */
.gradient-primary {
    background: linear-gradient(135deg, var(--btn-primary-start), var(--btn-primary-end));
}

/* Gradient pour bouton success */
.gradient-success {
    background: linear-gradient(135deg, var(--btn-success-start), var(--btn-success-end));
}

/* Gradient pour bouton danger */
.gradient-danger {
    background: linear-gradient(135deg, var(--btn-danger-start), var(--btn-danger-end));
}

/* Classes de couleurs de header de page */
.page-header-dashboard {
    background: linear-gradient(135deg, var(--header-dashboard-start), var(--header-dashboard-end));
}

.page-header-colis {
    background: linear-gradient(135deg, var(--header-colis-start), var(--header-colis-end));
}

.page-header-livre {
    background: linear-gradient(135deg, var(--header-livre-start), var(--header-livre-end));
}

.page-header-retour {
    background: linear-gradient(135deg, var(--header-retour-start), var(--header-retour-end));
}

.page-header-manifest {
    background: linear-gradient(135deg, var(--header-manifest-start), var(--header-manifest-end));
}

.page-header-echange {
    background: linear-gradient(135deg, var(--header-echange-start), var(--header-echange-end));
}

.page-header-paiement {
    background: linear-gradient(135deg, var(--header-paiement-start), var(--header-paiement-end));
}

.page-header-ticket {
    background: linear-gradient(135deg, var(--header-ticket-start), var(--header-ticket-end));
}

/* Classes pour les badges de statut */
.status-attente { background: var(--status-attente); color: #fff; }
.status-ramasse { background: var(--status-ramasse); color: #fff; }
.status-depot { background: var(--status-depot); color: #fff; }
.status-reporte { background: var(--status-reporte); color: #fff; }
.status-enlivre { background: var(--status-enlivre); color: #fff; }
.status-livre { background: var(--status-livre); color: #fff; }
.status-retour { background: var(--status-retour); color: #fff; }
.status-annule { background: var(--status-annule); color: #fff; }
.status-echange { background: var(--status-echange); color: #fff; }