/* Palette de couleurs OGC - Design moderne 2026 */

:root {
    /* Couleurs principales du logo OGC */
    --ogc-orange: #FF6B35;        /* Orange chaud */
    --ogc-teal: #0D7377;          /* Teal profond */
    --ogc-red-orange: #FF8C42;    /* Rouge-orange */
    --ogc-orange-light: #FFA07A;  /* Orange clair pour accents */
    --ogc-teal-light: #14A085;    /* Teal clair pour accents */
    
    /* Couleurs neutres modernes */
    --ogc-gray-50: #FAFAFA;
    --ogc-gray-100: #F5F5F5;
    --ogc-gray-200: #EEEEEE;
    --ogc-gray-300: #E0E0E0;
    --ogc-gray-400: #BDBDBD;
    --ogc-gray-500: #9E9E9E;
    --ogc-gray-600: #757575;
    --ogc-gray-700: #616161;
    --ogc-gray-800: #424242;
    --ogc-gray-900: #212121;
}

/* Override des couleurs Filament avec la palette OGC */
[data-theme="light"] {
    --primary-50: #f0fdfa;
    --primary-100: #ccfbf1;
    --primary-200: #99f6e4;
    --primary-300: #5eead4;
    --primary-400: #2dd4bf;
    --primary-500: #14b8a6;
    --primary-600: #0d7377; /* Teal profond du logo */
    --primary-700: #0d7377;
    --primary-800: #0a5d61;
    --primary-900: #064e4b;
    --primary-950: #022c22;
}

/* Amélioration du branding OGC */
.fi-sidebar-header {
    background: white !important;
    padding: 0.75rem 1rem !important;
    overflow: hidden !important;
    min-height: 4rem !important;
    height: 4rem !important;
    max-height: 4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Override de la hauteur fixe h-16 de Filament */
.fi-sidebar-header.flex.h-16 {
    height: 4rem !important;
    min-height: 4rem !important;
    max-height: 4rem !important;
}

.fi-sidebar-header .fi-brand {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Style pour l'image du logo */
.fi-sidebar-header .fi-brand img,
.fi-sidebar-header img,
.fi-logo img {
    max-height: 2.5rem !important;
    height: 2.5rem !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Conteneur du logo */
.fi-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
}

/* S'assurer que le conteneur parent ne coupe pas le logo */
.fi-sidebar {
    overflow: visible !important;
}

.fi-sidebar > div:first-child {
    overflow: visible !important;
}

/* Conteneur du header */
.fi-sidebar-header > div {
    overflow: visible !important;
    height: auto !important;
}

/* Amélioration des badges et statuts */
.fi-badge {
    border-radius: 0.5rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;
}

.fi-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Sections avec ombre subtile */
.fi-section {
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.fi-section:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Boutons avec gradient moderne */
.fi-btn-primary {
    background: linear-gradient(135deg, var(--ogc-teal) 0%, var(--ogc-teal-light) 100%);
    border: none;
    transition: all 0.3s ease;
}

.fi-btn-primary:hover {
    background: linear-gradient(135deg, var(--ogc-teal-light) 0%, var(--ogc-teal) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 115, 119, 0.3);
}

/* Navigation sidebar moderne */
.fi-sidebar-nav {
    padding: 0.5rem;
}

.fi-sidebar-nav-item {
    border-radius: 0.5rem;
    margin: 0.25rem 0;
    transition: all 0.2s ease;
}

.fi-sidebar-nav-item:hover {
    background: linear-gradient(90deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 140, 66, 0.05) 100%);
    transform: translateX(4px);
}

.fi-sidebar-nav-item-active {
    background: linear-gradient(90deg, var(--ogc-teal) 0%, var(--ogc-teal-light) 100%);
    color: white;
    font-weight: 600;
}

/* Tableaux avec design épuré */
.fi-ta-table {
    border-radius: 0.5rem;
    overflow: hidden;
}

.fi-ta-header-cell {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--ogc-gray-700);
    background: var(--ogc-gray-50);
}

/* Inputs avec focus moderne */
.fi-input:focus,
.fi-select:focus {
    border-color: var(--ogc-teal);
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.1);
    outline: none;
}

/* Cards avec effet de profondeur */
.fi-card {
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.fi-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Badges de statut avec couleurs OGC */
.fi-badge-color-primary {
    background: linear-gradient(135deg, var(--ogc-teal) 0%, var(--ogc-teal-light) 100%);
    color: white;
}

.fi-badge-color-success {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    color: white;
}

.fi-badge-color-warning {
    background: linear-gradient(135deg, var(--ogc-orange) 0%, var(--ogc-red-orange) 100%);
    color: white;
}

/* Animations subtiles */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fi-section {
    animation: fadeIn 0.3s ease-out;
}

/* Amélioration de la typographie */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -0.01em;
}

/* Scrollbar moderne */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--ogc-gray-100);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--ogc-teal) 0%, var(--ogc-teal-light) 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--ogc-teal-light) 0%, var(--ogc-orange) 100%);
}