/* ============================================ */
/* PADEL Theme - Professional Green Design */
/* ============================================ */

/* Variables de couleurs PADEL */
:root {
    --padel-green-dark: rgb(45, 122, 62);
    --padel-green-medium: rgb(124, 179, 66);
    --padel-green-light: rgb(139, 195, 74);
    --padel-green-lighter: rgb(197, 225, 165);
    --padel-green-lightest: rgb(220, 237, 200);
    --padel-gradient: linear-gradient(135deg, var(--padel-green-dark) 0%, var(--padel-green-medium) 50%, var(--padel-green-light) 100%);
    --padel-gradient-reverse: linear-gradient(135deg, var(--padel-green-light) 0%, var(--padel-green-medium) 50%, var(--padel-green-dark) 100%);
    --padel-shadow: 0 4px 20px rgba(45, 122, 62, 0.15);
    --padel-shadow-hover: 0 8px 30px rgba(45, 122, 62, 0.25);
}

/* ============================================ */
/* Animations professionnelles */
/* ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ============================================ */
/* Header / Topbar avec gradient animé */
/* ============================================ */

.fi-topbar {
    background: var(--padel-gradient) !important;
    background-size: 200% 200% !important;
    animation: gradientMove 8s ease infinite !important;
    box-shadow: var(--padel-shadow) !important;
    transition: all 0.3s ease !important;
}

.fi-topbar:hover {
    box-shadow: var(--padel-shadow-hover) !important;
}

/* ============================================ */
/* Sidebar avec effets professionnels */
/* ============================================ */

.fi-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fdf9 100%) !important;
    border-right: 2px solid var(--padel-green-lightest) !important;
    box-shadow: 2px 0 10px rgba(45, 122, 62, 0.05) !important;
    transition: all 0.3s ease !important;
}

.fi-sidebar-nav {
    scroll-behavior: smooth;
    overflow-y: auto !important;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 4rem);
}

/* Navigation items avec animation */
.fi-sidebar-item,
.fi-sidebar-item-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: slideInRight 0.4s ease-out !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
}

/* Style spécifique pour les SÉPARATEURS de sous-menus (href="#") */
.fi-sidebar-item-button[href="#"] {
    cursor: default !important;
    background: rgba(45, 122, 62, 0.08) !important;
    /* Fond légèrement plus visible */
    color: var(--padel-green-dark) !important;
    font-weight: 800 !important;
    border-left: 4px solid var(--padel-green-medium) !important;
    margin-top: 20px !important;
    margin-bottom: 8px !important;
    padding: 10px 12px !important;
    font-size: 0.7rem !important;
    pointer-events: none !important;
    text-align: center !important;
    /* Centrer le titre puisqu'il n'y a plus d'icône */
    justify-content: center !important;
    white-space: normal !important;
    /* Permettre le retour à la ligne si vraiment trop long */
    line-height: 1.2 !important;
}

.fi-sidebar-item-button[href="#"] span {
    color: var(--padel-green-dark) !important;
    width: 100% !important;
}

/* Cacher le slot d'icône vide pour gagner de la place */
.fi-sidebar-item-button[href="#"] .fi-sidebar-item-icon {
    display: none !important;
}

/* Indentation des éléments sous un séparateur (enfants) */
/* (On ne peut pas cibler les frères en CSS pur après un lien sans sélecteur complexe,
   mais on peut appliquer une indentation légère à TOUS les items qui ne sont pas des séparateurs) */
.fi-sidebar-group .fi-sidebar-item:not(:has(a[href="#"])) {
    margin-left: 20px !important;
}

.fi-sidebar-item-button:hover {
    background: var(--padel-green-lightest) !important;
    transform: translateX(5px) !important;
    box-shadow: 0 2px 8px rgba(45, 122, 62, 0.1) !important;
}

.fi-sidebar-item-button.fi-active {
    background: var(--padel-gradient) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: var(--padel-shadow) !important;
}

.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon {
    color: white !important;
}

/* Groupes de navigation */
.fi-sidebar-group {
    transition: all 0.3s ease-in-out !important;
    animation: fadeIn 0.5s ease-out !important;
}

.fi-sidebar-group-label {
    color: var(--padel-green-dark) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 16px 8px !important;
}

/* ============================================ */
/* Boutons avec effets PADEL */
/* ============================================ */

.fi-btn-primary,
button[type="submit"]:not(.fi-btn-outlined) {
    background: var(--padel-gradient) !important;
    background-size: 200% 200% !important;
    border: none !important;
    box-shadow: var(--padel-shadow) !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

.fi-btn-primary:hover,
button[type="submit"]:not(.fi-btn-outlined):hover {
    animation: gradientMove 2s ease infinite !important;
    box-shadow: var(--padel-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

.fi-btn-primary:active,
button[type="submit"]:not(.fi-btn-outlined):active {
    transform: translateY(0) !important;
}

/* Boutons secondaires */
.fi-btn:not(.fi-btn-primary) {
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
}

.fi-btn:not(.fi-btn-primary):hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================ */
/* Cards et Sections avec animations */
/* ============================================ */

.fi-section,
.fi-card,
.fi-fo-field-wrp-wrapper {
    animation: fadeIn 0.5s ease-out !important;
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
    border: 1px solid var(--padel-green-lightest) !important;
}

.fi-section:hover,
.fi-card:hover {
    box-shadow: var(--padel-shadow) !important;
    border-color: var(--padel-green-light) !important;
}

/* En-têtes de sections */
.fi-section-header,
.fi-section-header-heading {
    color: var(--padel-green-dark) !important;
    font-weight: 600 !important;
}

/* ============================================ */
/* Tables avec style PADEL */
/* ============================================ */

.fi-ta-header {
    background: linear-gradient(135deg, var(--padel-green-lightest) 0%, #ffffff 100%) !important;
    border-bottom: 2px solid var(--padel-green-light) !important;
}

.fi-ta-header-cell {
    color: var(--padel-green-dark) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
}

.fi-ta-row {
    transition: all 0.3s ease !important;
    animation: fadeIn 0.4s ease-out !important;
}

.fi-ta-row:hover {
    background: var(--padel-green-lightest) !important;
    transform: scale(1.01) !important;
    box-shadow: 0 2px 8px rgba(45, 122, 62, 0.08) !important;
}

/* ============================================ */
/* Badges et Tags */
/* ============================================ */

.fi-badge {
    animation: pulse 2s ease-in-out infinite !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

.fi-badge-success {
    background: var(--padel-green-light) !important;
    color: white !important;
}

/* ============================================ */
/* Formulaires */
/* ============================================ */

.fi-input,
.fi-select,
.fi-textarea {
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
    border: 1.5px solid #e0e0e0 !important;
}

.fi-input:focus,
.fi-select:focus,
.fi-textarea:focus {
    border-color: var(--padel-green-light) !important;
    box-shadow: 0 0 0 3px rgba(45, 122, 62, 0.1) !important;
    outline: none !important;
}

.fi-fo-field-wrp-label {
    color: var(--padel-green-dark) !important;
    font-weight: 500 !important;
}

/* ============================================ */
/* Modales */
/* ============================================ */

.fi-modal-window {
    animation: fadeIn 0.4s ease-out !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(45, 122, 62, 0.2) !important;
    overflow-y: auto !important;
}

.fi-modal-header {
    background: var(--padel-gradient) !important;
    color: white !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 24px !important;
}

.fi-modal-heading {
    color: white !important;
    font-weight: 600 !important;
}

/* Customisation du bouton de fermeture de la modale en ROUGE */
.fi-modal-close-btn {
    color: rgb(220 38 38) !important;
    /* text-red-600 */
    background-color: rgb(254 226 226) !important;
    /* bg-red-100 */
    border-radius: 9999px;
    padding: 4px;
}

.fi-modal-close-btn:hover {
    background-color: rgb(254 202 202) !important;
    /* bg-red-200 */
}

/* ============================================ */
/* Scrollbar personnalisée */
/* ============================================ */

.fi-sidebar::-webkit-scrollbar,
.fi-sidebar-nav::-webkit-scrollbar,
.fi-modal-window::-webkit-scrollbar {
    width: 8px;
}

.fi-sidebar::-webkit-scrollbar-track,
.fi-sidebar-nav::-webkit-scrollbar-track,
.fi-modal-window::-webkit-scrollbar-track {
    background: var(--padel-green-lightest);
    border-radius: 10px;
}

.fi-sidebar::-webkit-scrollbar-thumb,
.fi-sidebar-nav::-webkit-scrollbar-thumb,
.fi-modal-window::-webkit-scrollbar-thumb {
    background: var(--padel-green-light);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.fi-sidebar::-webkit-scrollbar-thumb:hover,
.fi-sidebar-nav::-webkit-scrollbar-thumb:hover,
.fi-modal-window::-webkit-scrollbar-thumb:hover {
    background: var(--padel-green-medium);
}

/* Pour Firefox */
.fi-sidebar,
.fi-sidebar-nav,
.fi-modal-window {
    scrollbar-width: thin;
    scrollbar-color: var(--padel-green-light) var(--padel-green-lightest);
}

/* ============================================ */
/* Notifications */
/* ============================================ */

.fi-no {
    animation: slideInRight 0.5s ease-out !important;
    border-radius: 12px !important;
    box-shadow: var(--padel-shadow-hover) !important;
}

.fi-no-success {
    border-left: 4px solid var(--padel-green-medium) !important;
}

/* ============================================ */
/* Loading states avec shimmer */
/* ============================================ */

.fi-loading,
.fi-ta-loading {
    background: linear-gradient(90deg, #f0f0f0 0%, var(--padel-green-lightest) 50%, #f0f0f0 100%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* ============================================ */
/* Tabs */
/* ============================================ */

.fi-tabs-item {
    transition: all 0.3s ease !important;
    border-radius: 8px 8px 0 0 !important;
}

.fi-tabs-item[aria-selected="true"] {
    background: var(--padel-gradient) !important;
    color: white !important;
    font-weight: 600 !important;
}

.fi-tabs-item:hover:not([aria-selected="true"]) {
    background: var(--padel-green-lightest) !important;
}

/* ============================================ */
/* Stats / Widgets */
/* ============================================ */

.fi-wi-stats-overview-stat {
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
    border: 1px solid var(--padel-green-lightest) !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--padel-shadow-hover) !important;
    border-color: var(--padel-green-light) !important;
}

.fi-wi-stats-overview-stat-value {
    color: var(--padel-green-dark) !important;
    font-weight: 700 !important;
}

/* ============================================ */
/* Gestion du viewport */
/* ============================================ */

html {
    overflow-y: scroll;
    overflow-x: hidden;
}

body.fi-body {
    overflow-y: scroll !important;
}

body.fi-body[style*="overflow: hidden"] {
    overflow-y: scroll !important;
    padding-right: 0 !important;
}

@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable;
        overflow-y: auto;
    }
}

/* ============================================ */
/* Responsive animations */
/* ============================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================ */
/* Brand logo animation */
/* ============================================ */

.fi-logo {
    transition: all 0.3s ease !important;
}

.fi-logo:hover {
    transform: scale(1.05) !important;
    filter: drop-shadow(0 4px 8px rgba(45, 122, 62, 0.3)) !important;
}

/* ============================================ */
/* Pagination */
/* ============================================ */

.fi-pagination-item {
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
}

.fi-pagination-item[aria-current="page"] {
    background: var(--padel-gradient) !important;
    color: white !important;
}

.fi-pagination-item:hover:not([aria-current="page"]) {
    background: var(--padel-green-lightest) !important;
    transform: scale(1.1) !important;
}

/* ============================================ */
/* Styles pour les repeaters - Collapse en vert */
/* ============================================ */

.fi-fo-repeater-item {
    border: 2px solid rgb(34 197 94) !important;
    /* Bordure verte épaisse */
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.1) !important;
    transition: all 0.3s ease !important;
    overflow: visible !important;
    /* Allow dropdowns to overflow */
}

.fi-fo-repeater-item-header {
    background-color: rgb(34 197 94) !important;
    /* Fond vert */
    border-color: rgb(34 197 94) !important;
    border-radius: 6px 6px 0 0 !important;
    transition: all 0.3s ease !important;
}

.fi-fo-repeater-item-header .fi-fo-repeater-item-label {
    color: white !important;
    /* Texte blanc pour contraste */
    font-weight: 600 !important;
}

.fi-fo-repeater-item-header button,
.fi-fo-repeater-item-header .fi-icon {
    color: white !important;
    /* Icônes et boutons en blanc */
}

.fi-fo-repeater-item-header:hover {
    background-color: rgb(22 163 74) !important;
    /* Vert plus foncé au survol */
}

/* Contenu du repeater déplié */
.fi-fo-repeater-item-content {
    border-top: 2px solid rgb(34 197 94) !important;
    padding: 16px !important;
    background-color: rgba(34, 197, 94, 0.02) !important;
    overflow: visible !important;
    /* Allow dropdowns to overflow */
}


/* ============================================ */
/* FIX: Dropdown visibility in tables */
/* ============================================ */

/* Assurer que le dropdown des actions ne soit pas caché par le header du tableau */
.fi-ta-header-cell {
    z-index: 5 !important;
}

/* Forcer le conteneur d'en-tête (recherche/filtres) à avoir un z-index faible */
.fi-ta-ctn header,
.fi-ta-header {
    z-index: 5 !important;
}

/* Le panel du dropdown doit être au-dessus de tout */
.fi-dropdown-panel {
    z-index: 9999 !important;
}

/* Éviter que les conteneurs du tableau ne coupent les dropdowns */
/* Éviter que les conteneurs du tableau ne coupent les dropdowns sans casser le scroll */
.fi-ta-cell,
.fi-ta-cell-content,
.fi-ta-row {
    overflow: visible !important;
}

/* Restaurer le scroll horizontal des tableaux tout en évitant de couper les menus */
.fi-ta-content,
.fi-ta-table-ctn {
    overflow-x: auto !important;
    /* On garde auto pour le scroll */
    padding-bottom: 100px !important;
    /* Espace pour les menus déroulants en bas */
    margin-bottom: -100px !important;
    /* Compenser l'espace pour ne pas décaler le reste du layout */
}

/* S'assurer que le conteneur du tableau permet l'affichage des menus */
.fi-ta-table {
    overflow: visible !important;
}

/* Spécifique pour Filament 3 - Conteneur d'en-tête de la table */
.fi-ta-header {
    position: relative !important;
    z-index: 5 !important;
}