/**
 * ==========================================================================
 * ULK VISUAL REFRESH - Style Google/Ringover
 * ==========================================================================
 * 
 * Fichier CSS d'override pour l'espace de travail ULK
 * Inspiré de l'interface Ringover : propre, aérée, ultra-lisible
 * 
 * RÈGLES : 
 * - Override uniquement, aucune modification structurelle
 * - Conserve les classes existantes
 * - Ajoute des règles par-dessus l'existant
 * 
 * ==========================================================================
 */

/* ==========================================================================
   1. IMPORTS & FONTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');

/* ==========================================================================
   2. CSS VARIABLES - Palette Google/Ringover
   ========================================================================== */

:root {
    /* Couleurs principales */
    --ulk-bg-primary: #FFFFFF;
    --ulk-bg-secondary: #F8F9FA;
    --ulk-bg-tertiary: #F1F3F4;
    
    /* Texte */
    --ulk-text-primary: #202124;
    --ulk-text-secondary: #5F6368;
    --ulk-text-muted: #80868B;
    
    /* Accent ULK - Vert assagi */
    --ulk-accent: #00C851;
    --ulk-accent-hover: #00A844;
    --ulk-accent-light: rgba(0, 200, 81, 0.1);
    --ulk-accent-ring: rgba(0, 200, 81, 0.3);
    
    /* Bordures & séparateurs */
    --ulk-border: #E8EAED;
    --ulk-border-light: #F1F3F4;
    
    /* Ombres Material Design */
    --ulk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ulk-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --ulk-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --ulk-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    
    /* Couleurs membres (conservées mais adoucies) */
    --ulk-member-eddy: #EF5350;
    --ulk-member-sullivan: #42A5F5;
    --ulk-member-lucas: #66BB6A;
    --ulk-member-anthony: #FFA726;
    
    /* Couleurs statut */
    --ulk-status-success: #34A853;
    --ulk-status-warning: #FBBC04;
    --ulk-status-error: #EA4335;
    --ulk-status-info: #4285F4;
    
    /* Spacing */
    --ulk-spacing-xs: 8px;
    --ulk-spacing-sm: 12px;
    --ulk-spacing-md: 16px;
    --ulk-spacing-lg: 24px;
    --ulk-spacing-xl: 32px;
    
    /* Border radius */
    --ulk-radius-sm: 6px;
    --ulk-radius: 8px;
    --ulk-radius-lg: 12px;
    --ulk-radius-xl: 16px;
    --ulk-radius-full: 9999px;
}

/* ==========================================================================
   3. BASE STYLES - Reset fond sombre vers clair
   ========================================================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: var(--ulk-bg-secondary) !important;
    color: var(--ulk-text-primary) !important;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override Tailwind dark backgrounds */
.bg-ulk-dark {
    background-color: var(--ulk-bg-secondary) !important;
}

.bg-ulk-gray {
    background-color: var(--ulk-bg-primary) !important;
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

/* Titres de marque - Bebas Neue */
h1.font-bold,
.text-3xl.font-bold,
.text-2xl.font-bold {
    font-family: 'Bebas Neue', 'Inter', sans-serif !important;
    letter-spacing: 0.5px;
}

/* Texte courant */
h1, h2, h3, h4, h5, h6 {
    color: var(--ulk-text-primary) !important;
    font-weight: 600;
}

.text-white {
    color: var(--ulk-text-primary) !important;
}

.text-gray-400,
.text-gray-500 {
    color: var(--ulk-text-secondary) !important;
}

/* Labels et petits textes */
.text-xs,
.text-sm {
    font-weight: 400;
}

.uppercase.tracking-wider {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ulk-text-muted) !important;
    letter-spacing: 0.05em !important;
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */

#main-header,
header.fixed {
    background-color: var(--ulk-bg-primary) !important;
    border-bottom: 1px solid var(--ulk-border) !important;
    backdrop-filter: blur(10px);
    box-shadow: var(--ulk-shadow-sm);
}

#main-header .bg-ulk-dark\/50 {
    background-color: var(--ulk-bg-secondary) !important;
    border: 1px solid var(--ulk-border);
    border-radius: var(--ulk-radius-lg);
}

/* Logo et titre header */
#main-header span.text-white {
    color: var(--ulk-text-primary) !important;
}

#main-header .text-ulk-green {
    color: var(--ulk-accent) !important;
}

/* ==========================================================================
   6. SIDEBAR / NAVIGATION
   ========================================================================== */

#sidebar,
.sidebar-wrapper,
aside.fixed {
    background-color: var(--ulk-bg-primary) !important;
    border-right: 1px solid var(--ulk-border) !important;
    box-shadow: var(--ulk-shadow);
}

/* Liens sidebar */
.sidebar-link {
    color: var(--ulk-text-secondary) !important;
    border-radius: var(--ulk-radius) !important;
    padding: 10px 16px !important;
    margin-bottom: 4px;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
}

.sidebar-link:hover {
    background-color: var(--ulk-bg-secondary) !important;
    color: var(--ulk-text-primary) !important;
}

.sidebar-link.active {
    background-color: var(--ulk-accent-light) !important;
    border-left: 3px solid var(--ulk-accent) !important;
    color: var(--ulk-accent) !important;
}

.sidebar-link.active i {
    color: var(--ulk-accent) !important;
}

/* Icônes sidebar */
.sidebar-link i {
    color: var(--ulk-text-muted) !important;
    width: 20px;
    text-align: center;
}

.sidebar-link:hover i {
    color: var(--ulk-text-secondary) !important;
}

/* Sections sidebar */
.border-t.border-white\/10 {
    border-color: var(--ulk-border) !important;
}

/* Toggle sidebar */
#sidebar-toggle,
.sidebar-toggle {
    background-color: var(--ulk-bg-primary) !important;
    border: 1px solid var(--ulk-border) !important;
    color: var(--ulk-text-secondary) !important;
    box-shadow: var(--ulk-shadow);
}

#sidebar-toggle:hover {
    background-color: var(--ulk-bg-secondary) !important;
    color: var(--ulk-accent) !important;
}

/* ==========================================================================
   7. MAIN CONTENT AREA
   ========================================================================== */

#main-content,
.main-content,
main {
    background-color: var(--ulk-bg-secondary) !important;
}

/* ==========================================================================
   8. CARDS & CONTAINERS
   ========================================================================== */

/* Cards génériques */
.bg-ulk-gray.rounded-xl,
.bg-ulk-gray.rounded-2xl,
.rounded-xl.bg-ulk-gray,
.rounded-2xl.bg-ulk-gray,
section .bg-ulk-gray {
    background-color: var(--ulk-bg-primary) !important;
    border: 1px solid var(--ulk-border) !important;
    border-radius: var(--ulk-radius-lg) !important;
    box-shadow: var(--ulk-shadow) !important;
    padding: 20px !important;
}

/* Cards avec padding généreux */
.p-4.bg-ulk-gray,
.p-6.bg-ulk-gray,
.p-8.bg-ulk-gray {
    padding: var(--ulk-spacing-lg) !important;
}

/* Sections content */
.section-content {
    padding: var(--ulk-spacing-lg);
}

/* ==========================================================================
   9. BUTTONS
   ========================================================================== */

/* Bouton principal (vert ULK) */
.bg-ulk-green,
button.bg-ulk-green,
a.bg-ulk-green {
    background-color: var(--ulk-accent) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--ulk-radius) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease !important;
    box-shadow: var(--ulk-shadow-sm);
}

.bg-ulk-green:hover,
button.bg-ulk-green:hover,
a.bg-ulk-green:hover {
    background-color: var(--ulk-accent-hover) !important;
    box-shadow: var(--ulk-shadow);
    transform: translateY(-1px);
}

/* Boutons secondaires */
.bg-ulk-gray.text-white,
button.bg-ulk-gray {
    background-color: var(--ulk-bg-secondary) !important;
    color: var(--ulk-text-primary) !important;
    border: 1px solid var(--ulk-border) !important;
    border-radius: var(--ulk-radius) !important;
}

.bg-ulk-gray.text-white:hover,
button.bg-ulk-gray:hover {
    background-color: var(--ulk-bg-tertiary) !important;
    border-color: var(--ulk-border) !important;
}

/* Bouton danger */
.bg-red-600,
.bg-red-600\/80 {
    background-color: var(--ulk-status-error) !important;
    border-radius: var(--ulk-radius) !important;
}

/* Boutons export */
.bg-green-600 {
    background-color: var(--ulk-status-success) !important;
    border-radius: var(--ulk-radius) !important;
}

/* ==========================================================================
   10. FORM INPUTS
   ========================================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
textarea,
select {
    background-color: var(--ulk-bg-secondary) !important;
    border: 1px solid var(--ulk-border) !important;
    border-radius: var(--ulk-radius) !important;
    color: var(--ulk-text-primary) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    height: auto;
    min-height: 40px;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--ulk-accent) !important;
    box-shadow: 0 0 0 3px var(--ulk-accent-ring) !important;
    background-color: var(--ulk-bg-primary) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--ulk-text-muted) !important;
}

/* Labels */
label {
    color: var(--ulk-text-primary) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin-bottom: 6px;
}

/* Checkboxes */
input[type="checkbox"] {
    accent-color: var(--ulk-accent);
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 !important;
}

/* ==========================================================================
   11. TABLES
   ========================================================================== */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--ulk-bg-primary);
    border-radius: var(--ulk-radius-lg);
    overflow: hidden;
    box-shadow: var(--ulk-shadow);
}

thead,
table thead,
.bg-ulk-dark thead {
    background-color: var(--ulk-bg-tertiary) !important;
}

thead th,
table th {
    color: var(--ulk-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px !important;
    text-align: left;
    border-bottom: 1px solid var(--ulk-border);
}

tbody tr {
    background-color: var(--ulk-bg-primary);
    transition: background-color 0.15s ease;
}

tbody tr:nth-child(even) {
    background-color: var(--ulk-bg-secondary);
}

tbody tr:hover {
    background-color: var(--ulk-accent-light) !important;
}

tbody td {
    color: var(--ulk-text-primary) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--ulk-border-light);
    font-size: 14px;
}

/* ==========================================================================
   12. BADGES & TAGS
   ========================================================================== */

/* Badges génériques */
.rounded-full.text-xs,
.px-2.py-0\.5.rounded-full,
span.rounded-full {
    border-radius: var(--ulk-radius-full) !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
}

/* Badge notification */
.notification-badge,
#notif-badge {
    background-color: var(--ulk-status-error) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Badges membres - couleurs pastels */
.bg-member-eddy\/30 { background-color: rgba(239, 83, 80, 0.15) !important; }
.bg-member-sullivan\/30 { background-color: rgba(66, 165, 245, 0.15) !important; }
.bg-member-lucas\/30 { background-color: rgba(102, 187, 106, 0.15) !important; }
.bg-member-anthony\/30 { background-color: rgba(255, 167, 38, 0.15) !important; }

.text-member-eddy { color: var(--ulk-member-eddy) !important; }
.text-member-sullivan { color: var(--ulk-member-sullivan) !important; }
.text-member-lucas { color: var(--ulk-member-lucas) !important; }
.text-member-anthony { color: var(--ulk-member-anthony) !important; }

/* Badges statut */
.bg-red-500\/30 { background-color: rgba(234, 67, 53, 0.12) !important; }
.bg-orange-500\/30 { background-color: rgba(251, 188, 4, 0.12) !important; }
.bg-green-500\/30 { background-color: rgba(52, 168, 83, 0.12) !important; }
.bg-blue-500\/30 { background-color: rgba(66, 133, 244, 0.12) !important; }
.bg-purple-500\/30 { background-color: rgba(156, 39, 176, 0.12) !important; }
.bg-teal-500\/30 { background-color: rgba(0, 150, 136, 0.12) !important; }
.bg-indigo-500\/30 { background-color: rgba(63, 81, 181, 0.12) !important; }
.bg-pink-500\/30 { background-color: rgba(233, 30, 99, 0.12) !important; }
.bg-emerald-500\/30 { background-color: rgba(16, 185, 129, 0.12) !important; }

/* Badge IA */
.bg-purple-500.animate-pulse {
    background: linear-gradient(135deg, #9C27B0, #673AB7) !important;
    animation: pulse-soft 2s infinite !important;
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ==========================================================================
   13. CALENDAR
   ========================================================================== */

/* Container calendrier */
#calendar-grid {
    background-color: var(--ulk-bg-primary);
    border-radius: 0 0 var(--ulk-radius-lg) var(--ulk-radius-lg);
}

/* Header jours */
.grid-cols-7 .p-3.text-center {
    background-color: var(--ulk-bg-tertiary) !important;
    color: var(--ulk-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase;
}

/* Cellules calendrier */
#calendar-grid > div {
    background-color: var(--ulk-bg-primary);
    border: 1px solid var(--ulk-border-light);
    min-height: 100px;
    padding: 8px;
    transition: background-color 0.15s ease;
}

#calendar-grid > div:hover {
    background-color: var(--ulk-bg-secondary);
}

/* Jour actuel */
#calendar-grid > div.today,
#calendar-grid > div[class*="bg-ulk-green"] {
    background-color: var(--ulk-accent-light) !important;
    border-color: var(--ulk-accent) !important;
}

/* ==========================================================================
   14. MODALS
   ========================================================================== */

/* Overlay modal */
.fixed.inset-0.z-50,
.fixed.inset-0[class*="bg-black"] {
    background-color: rgba(32, 33, 36, 0.6) !important;
    backdrop-filter: blur(4px);
}

/* Container modal */
.fixed.inset-0 .bg-ulk-gray,
.fixed.inset-0 .rounded-2xl {
    background-color: var(--ulk-bg-primary) !important;
    border: 1px solid var(--ulk-border) !important;
    border-radius: var(--ulk-radius-xl) !important;
    box-shadow: var(--ulk-shadow-lg) !important;
}

/* ==========================================================================
   15. LOGIN SCREEN
   ========================================================================== */

#login-screen {
    background: linear-gradient(135deg, var(--ulk-bg-secondary) 0%, var(--ulk-bg-primary) 100%) !important;
}

#login-screen .bg-ulk-gray {
    background-color: var(--ulk-bg-primary) !important;
    border: 1px solid var(--ulk-border) !important;
    box-shadow: var(--ulk-shadow-lg) !important;
}

#login-screen .bg-ulk-dark {
    background-color: var(--ulk-bg-secondary) !important;
}

#login-screen h1,
#login-screen h2 {
    color: var(--ulk-text-primary) !important;
}

#login-screen .text-ulk-green {
    color: var(--ulk-accent) !important;
}

#login-screen input {
    background-color: var(--ulk-bg-secondary) !important;
    border: 1px solid var(--ulk-border) !important;
    color: var(--ulk-text-primary) !important;
}

/* ==========================================================================
   16. CHAT
   ========================================================================== */

.chat-message {
    background-color: var(--ulk-bg-secondary) !important;
    border-radius: var(--ulk-radius-lg) !important;
    padding: var(--ulk-spacing-md) !important;
    margin-bottom: var(--ulk-spacing-sm);
    border: 1px solid var(--ulk-border-light);
}

/* ==========================================================================
   17. NOTIFICATIONS LIST
   ========================================================================== */

#notifications-list > div,
#archives-list > div,
#tasks-list > div {
    background-color: var(--ulk-bg-primary) !important;
    border: 1px solid var(--ulk-border) !important;
    border-radius: var(--ulk-radius-lg) !important;
    padding: var(--ulk-spacing-md) !important;
    margin-bottom: var(--ulk-spacing-sm);
    transition: all 0.2s ease;
}

#notifications-list > div:hover,
#archives-list > div:hover,
#tasks-list > div:hover {
    box-shadow: var(--ulk-shadow);
    border-color: var(--ulk-accent-ring);
}

/* ==========================================================================
   18. MEMBERS AVATARS
   ========================================================================== */

/* Avatars membres */
.rounded-full.bg-member-eddy,
.rounded-full.bg-member-sullivan,
.rounded-full.bg-member-lucas,
.rounded-full.bg-member-anthony {
    box-shadow: var(--ulk-shadow-sm);
    border: 2px solid var(--ulk-bg-primary);
}

/* Status online indicator */
.bg-green-500.rounded-full {
    background-color: var(--ulk-status-success) !important;
    box-shadow: 0 0 0 2px var(--ulk-bg-primary);
}

/* ==========================================================================
   19. SCROLLBAR STYLING
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--ulk-bg-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--ulk-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ulk-text-muted);
}

/* ==========================================================================
   20. UTILITY OVERRIDES
   ========================================================================== */

/* Bordures */
.border-white\/10,
.border-white\/20 {
    border-color: var(--ulk-border) !important;
}

/* Backgrounds transparents */
.bg-white\/10,
.hover\:bg-white\/10:hover {
    background-color: var(--ulk-bg-secondary) !important;
}

/* Text ulk-green */
.text-ulk-green {
    color: var(--ulk-accent) !important;
}

/* Gradients */
.bg-gradient-to-r.from-purple-500\/20.to-blue-500\/20 {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.08), rgba(66, 133, 244, 0.08)) !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
}

/* ==========================================================================
   21. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .sidebar-wrapper {
        box-shadow: var(--ulk-shadow-lg);
    }
    
    .section-content {
        padding: var(--ulk-spacing-md);
    }
    
    .bg-ulk-gray.rounded-xl {
        padding: var(--ulk-spacing-md) !important;
    }
}

/* ==========================================================================
   22. ANIMATIONS & TRANSITIONS
   ========================================================================== */

/* Smooth transitions globales */
* {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

/* Désactiver pour les éléments qui ont leurs propres transitions */
.sidebar-wrapper,
.main-content,
.sidebar-toggle,
button,
a,
input,
select,
textarea {
    transition-property: all;
}

/* ==========================================================================
   23. PRINT STYLES
   ========================================================================== */

@media print {
    body {
        background-color: #FFFFFF !important;
    }
    
    #sidebar,
    .sidebar-wrapper,
    #main-header,
    .sidebar-toggle {
        display: none !important;
    }
    
    #main-content,
    .main-content {
        margin-left: 0 !important;
        padding: 20px !important;
    }
}

/* ==========================================================================
   24. ICÔNES CATÉGORIES - Couleurs vives et modernes
   ========================================================================== */

/* Icônes sidebar avec fond coloré moderne */
.sidebar-link i {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--ulk-radius) !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

/* Calendrier - Bleu vif */
#nav-calendar i.fa-calendar-alt,
.fa-calendar-alt {
    background: linear-gradient(135deg, #4285F4, #1A73E8) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.4);
}

/* Notifications - Jaune/Orange */
#nav-notifications i.fa-bell,
.sidebar-link i.fa-bell {
    background: linear-gradient(135deg, #FBBC04, #F9A825) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(251, 188, 4, 0.4);
}

/* Archives - Violet */
#nav-archives i.fa-archive,
.fa-archive {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.4);
}

/* Tableau de bord - Cyan */
#nav-dashboard i.fa-chart-bar,
.fa-chart-bar {
    background: linear-gradient(135deg, #00BCD4, #0097A7) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.4);
}

/* Rappels - Rose */
#nav-reminders i.fa-list-check,
.fa-list-check {
    background: linear-gradient(135deg, #E91E63, #C2185B) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(233, 30, 99, 0.4);
}

/* Tâches - Clipboard */
.fa-clipboard-list {
    background: linear-gradient(135deg, #FF7043, #E64A19) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(255, 112, 67, 0.4);
}

/* Dossiers Vente - Orange */
#nav-sales i.fa-file-invoice-dollar,
.sidebar-link i.fa-file-invoice-dollar {
    background: linear-gradient(135deg, #FF9800, #F57C00) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4);
}

/* Techniciens - Indigo */
#nav-techniciens i,
.fa-user-hard-hat,
.fa-hard-hat {
    background: linear-gradient(135deg, #3F51B5, #303F9F) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(63, 81, 181, 0.4);
}

/* SAV - Rouge */
#nav-sav i.fa-tools,
.fa-tools {
    background: linear-gradient(135deg, #F44336, #D32F2F) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
}

/* Clients - Teal */
#nav-clients i.fa-users,
.fa-users {
    background: linear-gradient(135deg, #009688, #00796B) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 150, 136, 0.4);
}

/* Démarchage - Vert émeraude */
#nav-demarchage i.fa-phone-volume,
.fa-phone-volume {
    background: linear-gradient(135deg, #4CAF50, #388E3C) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

/* Mailing - Violet clair */
#nav-mailing i.fa-envelope-open-text,
.fa-envelope-open-text {
    background: linear-gradient(135deg, #7C4DFF, #651FFF) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(124, 77, 255, 0.4);
}

/* Bibliothèque - Ambre */
#nav-bibliotheque i.fa-folder-open,
.fa-folder-open {
    background: linear-gradient(135deg, #FFB300, #FFA000) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(255, 179, 0, 0.4);
}

/* Catalogue - Orange foncé */
#nav-catalogue i.fa-boxes,
.fa-boxes {
    background: linear-gradient(135deg, #FF5722, #E64A19) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.4);
}

/* Devis - Vert */
#nav-devis i.fa-file-invoice-dollar {
    background: linear-gradient(135deg, #00C851, #00A844) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 200, 81, 0.4);
}

/* Assistant IA - Gradient violet/bleu */
#nav-assistant i.fa-robot,
.fa-robot {
    background: linear-gradient(135deg, #9C27B0, #2196F3) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.4);
    animation: glow-pulse 2s infinite;
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(156, 39, 176, 0.4); }
    50% { box-shadow: 0 4px 16px rgba(156, 39, 176, 0.6); }
}

/* Dossiers personnels - Folders colorés */
.fa-folder {
    background: linear-gradient(135deg, #78909C, #546E7A) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(120, 144, 156, 0.4);
}

#nav-folder-eddy i.fa-folder {
    background: linear-gradient(135deg, #EF5350, #E53935) !important;
    box-shadow: 0 2px 8px rgba(239, 83, 80, 0.4);
}

#nav-folder-sullivan i.fa-folder {
    background: linear-gradient(135deg, #42A5F5, #1E88E5) !important;
    box-shadow: 0 2px 8px rgba(66, 165, 245, 0.4);
}

#nav-folder-lucas i.fa-folder {
    background: linear-gradient(135deg, #66BB6A, #43A047) !important;
    box-shadow: 0 2px 8px rgba(102, 187, 106, 0.4);
}

#nav-folder-anthony i.fa-folder {
    background: linear-gradient(135deg, #FFA726, #FB8C00) !important;
    box-shadow: 0 2px 8px rgba(255, 167, 38, 0.4);
}

/* Chat - Bleu */
#nav-chat i.fa-comments,
.fa-comments {
    background: linear-gradient(135deg, #2196F3, #1976D2) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4);
}

/* Hover effect sur icônes */
.sidebar-link:hover i {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* ==========================================================================
   25. TYPOGRAPHIE RENFORCÉE - Textes plus lisibles
   ========================================================================== */

/* Texte principal plus foncé et plus gros */
body,
.text-white,
p,
span,
div {
    color: #1A1A1A !important;
    font-weight: 400;
}

/* Titres plus impactants */
h1, h2, h3, h4, h5, h6,
.text-2xl,
.text-xl,
.text-lg {
    color: #0D0D0D !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

h1, .text-2xl {
    font-size: 26px !important;
    line-height: 1.3 !important;
}

h2, .text-xl {
    font-size: 20px !important;
    line-height: 1.4 !important;
}

h3, .text-lg {
    font-size: 17px !important;
    line-height: 1.4 !important;
}

/* Texte body plus lisible */
.text-sm {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #2D2D2D !important;
}

.text-xs {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #4A4A4A !important;
}

/* Labels de formulaires */
label,
.font-medium {
    color: #1A1A1A !important;
    font-weight: 600 !important;
}

/* Texte secondaire plus contrasté */
.text-gray-400,
.text-gray-500,
.text-gray-600 {
    color: #4A4A4A !important;
}

/* Texte dans les inputs */
input,
textarea,
select,
input::placeholder,
textarea::placeholder {
    font-size: 15px !important;
    font-weight: 400 !important;
}

input,
textarea,
select {
    color: #1A1A1A !important;
}

input::placeholder,
textarea::placeholder {
    color: #9E9E9E !important;
}

/* Boutons avec texte plus lisible */
button,
.btn,
a.bg-ulk-green,
a.rounded-lg {
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em;
}

/* Badges et tags */
.rounded-full,
span.text-xs.rounded-full {
    font-weight: 600 !important;
}

/* Liens sidebar */
.sidebar-link span {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #2D2D2D !important;
}

.sidebar-link.active span {
    color: var(--ulk-accent) !important;
    font-weight: 600 !important;
}

/* Sections titles dans sidebar */
.uppercase.tracking-wider,
.text-xs.uppercase {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #6B6B6B !important;
    letter-spacing: 0.08em !important;
}

/* Amélioration contraste tableaux */
table td,
table th {
    color: #1A1A1A !important;
}

table th {
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: 0.05em;
}

/* Cards content */
.bg-ulk-gray p,
.bg-ulk-gray span,
.rounded-xl p,
.rounded-xl span {
    color: #2D2D2D !important;
}

/* Notifications et alertes */
.text-red-400,
.text-red-500 {
    color: #D32F2F !important;
    font-weight: 500 !important;
}

.text-green-400,
.text-green-500,
.text-ulk-green {
    color: #00A844 !important;
}

/* Header user info */
#user-name {
    font-weight: 600 !important;
    color: #1A1A1A !important;
}

#user-role {
    font-weight: 500 !important;
    color: var(--ulk-accent) !important;
}

/* ==========================================================================
   26. ICÔNES HEADER COLORÉES
   ========================================================================== */

/* Icône notification header */
header .fa-bell {
    color: #FBBC04 !important;
    font-size: 20px !important;
}

/* Icône déconnexion */
header .fa-sign-out-alt {
    color: #FFFFFF !important;
}

/* Icône retour */
header .fa-arrow-left {
    color: #FFFFFF !important;
}
/* Force rebuild Mon Mar 16 17:22:53 CET 2026 */