/**
 * Styles personnalisés pour le panneau client Avegott
 */

/* Police Arial pour tout le panneau client */
body[style*="font-family: Arial"], 
body[data-panel="client"] {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* Assurer que tous les éléments héritent de la police dans le panneau client */
[data-panel="client"] * {
    font-family: inherit;
}

/* Cibler spécifiquement le panneau client par son URL */
body:has(a[href*="/client"]) {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* Personnalisation des titres */
[data-panel="client"] h1, 
[data-panel="client"] h2, 
[data-panel="client"] h3, 
[data-panel="client"] h4, 
[data-panel="client"] h5, 
[data-panel="client"] h6,
[data-panel="client"] .fi-header-heading {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    font-weight: 600;
}

/* Personnalisation des boutons */
[data-panel="client"] .fi-btn {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* Personnalisation des formulaires */
[data-panel="client"] .fi-input,
[data-panel="client"] .fi-select,
[data-panel="client"] .fi-textarea {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* Personnalisation des tableaux */
[data-panel="client"] .fi-table {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* Personnalisation des notifications */
[data-panel="client"] .fi-notification {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* Cibler spécifiquement la page de connexion client */
body:has(form[action*="/client/login"]) {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

body:has(form[action*="/client/login"]) * {
    font-family: inherit;
}

/* Couleur primaire personnalisée pour le panel client */
[data-panel="client"] {
    --primary-50: 239, 246, 255;
    --primary-100: 219, 234, 254;
    --primary-200: 191, 219, 254;
    --primary-300: 147, 197, 253;
    --primary-400: 96, 165, 250;
    --primary-500: 0, 80, 255;
    --primary-600: 0, 72, 230;
    --primary-700: 0, 64, 204;
    --primary-800: 0, 51, 163;
    --primary-900: 0, 42, 133;
    --primary-950: 0, 26, 82;
}

/* Boutons primaires avec la nouvelle couleur */
[data-panel="client"] .fi-btn-primary {
    background-color: rgb(0, 80, 255) !important;
    border-color: rgb(0, 80, 255) !important;
}

[data-panel="client"] .fi-btn-primary:hover {
    background-color: rgb(0, 72, 230) !important;
    border-color: rgb(0, 72, 230) !important;
}

/* Links avec la nouvelle couleur */
[data-panel="client"] .fi-link {
    color: rgb(0, 80, 255) !important;
}

[data-panel="client"] .fi-link:hover {
    color: rgb(0, 72, 230) !important;
}

/* Navigation active */
[data-panel="client"] .fi-sidebar-nav-item.fi-active {
    background-color: rgb(239, 246, 255) !important;
    color: rgb(0, 80, 255) !important;
}

/* Focus states */
[data-panel="client"] .fi-input:focus,
[data-panel="client"] .fi-select:focus,
[data-panel="client"] .fi-textarea:focus {
    border-color: rgb(0, 80, 255) !important;
    box-shadow: 0 0 0 1px rgb(0, 80, 255) !important;
}

/* Corrections pour le mode sombre - Libellés et textes */
[data-panel="client"] .dark .fi-fo-field-wrp-label,
[data-panel="client"] .dark .fi-fo-field-wrp-label label,
[data-panel="client"] .dark .fi-fo-field-label,
[data-panel="client"] .dark .fi-section-header-heading,
[data-panel="client"] .dark .fi-section-header-description,
[data-panel="client"] .dark .fi-ta-text,
[data-panel="client"] .dark .fi-ta-header-cell,
[data-panel="client"] .dark .fi-badge,
[data-panel="client"] .dark .fi-dropdown-list-item,
[data-panel="client"] .dark .fi-sidebar-nav-item-label,
[data-panel="client"] .dark .fi-breadcrumbs-item,
[data-panel="client"] .dark .fi-header-heading,
[data-panel="client"] .dark .fi-page-heading,
[data-panel="client"] .dark p,
[data-panel="client"] .dark span:not(.fi-icon),
[data-panel="client"] .dark div:not(.fi-icon) {
    color: rgb(229, 231, 235) !important; /* text-gray-200 */
}

/* Textes spécifiques en mode sombre */
[data-panel="client"] .dark .fi-fo-field-wrp-hint,
[data-panel="client"] .dark .fi-fo-field-wrp-hint-text,
[data-panel="client"] .dark .fi-fo-help-text {
    color: rgb(156, 163, 175) !important; /* text-gray-400 */
}

/* Liens en mode sombre */
[data-panel="client"] .dark .fi-link,
[data-panel="client"] .dark a {
    color: rgb(96, 165, 250) !important; /* blue-400 pour meilleur contraste */
}

[data-panel="client"] .dark .fi-link:hover,
[data-panel="client"] .dark a:hover {
    color: rgb(147, 197, 253) !important; /* blue-300 */
}

/* Boutons en mode sombre */
[data-panel="client"] .dark .fi-btn-secondary {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
    color: rgb(229, 231, 235) !important; /* text-gray-200 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* Champs de formulaire en mode sombre */
[data-panel="client"] .dark .fi-input,
[data-panel="client"] .dark .fi-select,
[data-panel="client"] .dark .fi-textarea {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
    color: rgb(229, 231, 235) !important; /* text-gray-200 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* Placeholder en mode sombre */
[data-panel="client"] .dark .fi-input::placeholder,
[data-panel="client"] .dark .fi-select::placeholder,
[data-panel="client"] .dark .fi-textarea::placeholder {
    color: rgb(156, 163, 175) !important; /* text-gray-400 */
}

/* Cartes et panneaux en mode sombre */
[data-panel="client"] .dark .fi-section,
[data-panel="client"] .dark .fi-card,
[data-panel="client"] .dark .fi-widget {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
    border-color: rgb(55, 65, 81) !important; /* gray-700 */
}

/* Tableaux en mode sombre */
[data-panel="client"] .dark .fi-ta-row,
[data-panel="client"] .dark .fi-ta-cell {
    border-color: rgb(55, 65, 81) !important; /* gray-700 */
}

[data-panel="client"] .dark .fi-ta-row:hover {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

/* Navigation en mode sombre */
[data-panel="client"] .dark .fi-sidebar-nav-item:hover {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

[data-panel="client"] .dark .fi-sidebar-nav-item.fi-active {
    background-color: rgb(30, 58, 138) !important; /* blue-900 */
    color: rgb(147, 197, 253) !important; /* blue-300 */
}

/* Actions rapides - styles pour le mode sombre */
.dark .quick-action-card {
    /* Force l'affichage des gradients en mode sombre */
    background: var(--tw-gradient-stops) !important;
    color: white !important;
}

.dark .quick-action-card h3,
.dark .quick-action-card p {
    color: white !important;
}

/* Styles spécifiques pour chaque couleur d'action rapide */
.dark a[href="/phone-reprise"] .quick-action-card,
.dark a[href="/phone-reprise"] {
    background: linear-gradient(to right, rgb(59, 130, 246), rgb(37, 99, 235)) !important;
}

.dark a[href*="cotations"] .quick-action-card,
.dark a[href*="cotations"] {
    background: linear-gradient(to right, rgb(34, 197, 94), rgb(22, 163, 74)) !important;
}

.dark a[href*="shipments"] .quick-action-card,
.dark a[href*="shipments"] {
    background: linear-gradient(to right, rgb(168, 85, 247), rgb(147, 51, 234)) !important;
}

.dark a[href*="mon-compte"] .quick-action-card,
.dark a[href*="mon-compte"] {
    background: linear-gradient(to right, rgb(249, 115, 22), rgb(234, 88, 12)) !important;
}

/* Titre de la section Actions rapides en mode sombre */
.dark h2 {
    color: rgb(229, 231, 235) !important; /* text-gray-200 */
}