/* Custom Theme Colors */
:root {
    /* Couleurs principales */
    --theme-primary: #FF6B6B;
    --theme-secondary: #FFD700;
    --theme-success: #00E676;  /* Vert pur */
    --theme-success-dark: #00B248;  /* Version plus foncée pour le dégradé */
    --theme-info: #0091FF;  /* Bleu pur */
    --theme-info-dark: #0066CC;  /* Version plus foncée pour le dégradé */
    --theme-warning: #FFA500;
    --theme-danger: #E3000E;  /* Rouge vif de la charte */
    --theme-danger-dark: #B30000;

    /* Couleurs de fond claires */
    --theme-light-primary: #FFF3E0;
    --theme-light-secondary: #FFFDE7;
    --theme-light-success: #E8F5E9;
    --theme-light-info: #E8F5E9;
    --theme-light-warning: #FFF3E0;
    --theme-light-danger: #FBE9E7;

    /* Couleurs de bordure */
    --theme-border-primary: #FF8C00;
    --theme-border-focus: #E67E00;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    --gradient-primary-hover: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-primary) 100%);
    --gradient-danger: linear-gradient(135deg, var(--theme-danger) 0%, var(--theme-danger-dark) 100%);
    --gradient-success: linear-gradient(135deg, var(--theme-success) 0%, var(--theme-success-dark) 100%);
    --gradient-warning: linear-gradient(135deg, var(--theme-warning) 0%, #FF8C00 100%);
    --gradient-info: linear-gradient(135deg, var(--theme-info) 0%, var(--theme-info-dark) 100%);
    --gradient-light: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --gradient-dark: linear-gradient(135deg, #343a40 0%, #23272b 100%);
    --gradient-shadow: rgba(0, 0, 0, 0.1);

    /* Couleurs douces pour les chips */
    --chip-primary: rgba(255, 107, 107, 0.15);
    --chip-secondary: rgba(255, 215, 0, 0.15);
    --chip-success: rgba(0, 230, 118, 0.15);
    --chip-danger: rgba(227, 0, 14, 0.15);
    --chip-warning: rgba(255, 165, 0, 0.15);
    --chip-info: rgba(0, 145, 255, 0.15);
}

/* Header styles */
.app-header {
    background: var(--gradient-light);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
}

.navbar-light {
    .nav-link {
        color: var(--theme-primary) !important;
        
        &:hover {
            color: var(--theme-secondary) !important;
        }
        
        &.nav-icon-hover {
            background: transparent;
            transition: all 0.3s ease;
            
            &:hover {
                background: var(--gradient-primary);
                color: white !important;
                transform: translateY(-2px);
            }
        }
    }
}

/* Notification badge */
.notification {
    background: var(--gradient-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}

/* Styles communs pour boutons et badges */
.btn,
.badge {
    transition: all 0.3s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

/* Primary */
.btn-primary,
.bg-primary,
.badge-primary {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 5px var(--gradient-shadow);
}

.btn-primary:hover,
.bg-primary:hover,
.badge-primary:hover {
    background: var(--gradient-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--gradient-shadow);
}

/* Danger */
.btn-danger,
.bg-danger,
.badge-danger,
.text-bg-danger {
    background: var(--gradient-danger) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 5px rgba(227, 0, 14, 0.2);
}

.btn-danger:hover,
.bg-danger:hover,
.badge-danger:hover,
.text-bg-danger:hover {
    background: var(--gradient-danger) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(227, 0, 14, 0.3);
}

/* Success */
.btn-success,
.bg-success,
.badge-success {
    background: var(--gradient-success) !important;
    color: white !important;
}

/* Warning */
.btn-warning,
.bg-warning,
.badge-warning {
    background: var(--gradient-warning) !important;
    color: var(--theme-primary) !important;
}

/* Info */
.btn-info,
.bg-info,
.badge-info {
    background: var(--gradient-info) !important;
    color: white !important;
}

/* Light */
.btn-light,
.bg-light,
.badge-light {
    background: var(--gradient-light) !important;
    color: var(--theme-primary) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Dark */
.btn-dark,
.bg-dark,
.badge-dark {
    background: var(--gradient-dark) !important;
    color: white !important;
}

/* Outline buttons */
[class*="btn-outline-"] {
    background: transparent !important;
    border-width: 1px !important;
    font-weight: 500;
}

.btn-outline-primary {
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    &:hover {
        background: var(--gradient-primary) !important;
        color: white !important;
    }
}

.btn-outline-success {
    color: var(--theme-success) !important;
    border-color: var(--theme-success) !important;
    &:hover {
        background: var(--gradient-success) !important;
        color: white !important;
    }
}

.btn-outline-danger {
    color: var(--theme-danger) !important;
    border-color: var(--theme-danger) !important;
    &:hover {
        background: var(--gradient-danger) !important;
        color: white !important;
    }
}

.btn-outline-warning {
    color: var(--theme-warning) !important;
    border-color: var(--theme-warning) !important;
    &:hover {
        background: var(--gradient-warning) !important;
        color: white !important;
    }
}

.btn-outline-info {
    color: var(--theme-info) !important;
    border-color: var(--theme-info) !important;
    &:hover {
        background: var(--gradient-info) !important;
        color: white !important;
    }
}

/* Hover effects communs pour les boutons outlined */
[class*="btn-outline-"]:hover {
    border-color: transparent !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Hover effects communs */
.btn:hover,
.badge[href]:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--gradient-shadow);
}

/* Dropdown styles */
.dropdown-menu {
    border: none;
    background: var(--gradient-light);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.dropdown-item {
    transition: all 0.3s ease;
    
    &:hover {
        background: var(--gradient-primary);
        color: white;
    }
}

/* Active states for navigation */
.nav-link.active,
.dropdown-item.active {
    background: var(--gradient-primary) !important;
    color: white !important;
}

/* Boutons */
.btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: var(--theme-light-primary) !important;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--gradient-primary-hover) !important;
    box-shadow: 0 5px 15px var(--gradient-shadow) !important;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--theme-secondary) !important;
    border-color: var(--theme-secondary) !important;
    color: #333 !important;
}

.btn-secondary:hover {
    background-color: #E6C200 !important;
    border-color: #E6C200 !important;
}

/* Badges et étiquettes */
.badge.bg-primary {
    background-color: var(--theme-primary) !important;
}

.badge.bg-secondary {
    background-color: var(--theme-secondary) !important;
    color: #333 !important;
}

/* Textes colorés */
.text-primary {
    color: var(--theme-primary) !important;
}

.text-secondary {
    color: var(--theme-secondary) !important;
}

/* Fonds */
.bg-primary {
    background-color: var(--theme-primary) !important;
}

.bg-secondary {
    background-color: var(--theme-secondary) !important;
}

/* Dégradés */
.gradient-primary {
    background: linear-gradient(45deg, var(--theme-primary) 0%, var(--theme-secondary) 100%) !important;
}

/* Spinners et loaders */
.spinner-border.text-primary {
    color: var(--theme-primary) !important;
}

/* Alertes et notifications */
.alert-primary {
    background-color: var(--theme-light-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

/* Bordures */
.border-primary {
    border-color: var(--theme-primary) !important;
}

/* Hover effects */
.hover-primary:hover {
    color: var(--theme-primary) !important;
}

/* Cards */
.card-header.bg-primary {
    background-color: var(--theme-primary) !important;
    color: white !important;
}

/* Modal headers */
.modal-header.bg-primary {
    background-color: var(--theme-primary) !important;
    color: white !important;
}

/* Navigation active states */
.nav-link.active {
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* Custom styles for specific components */
.notification.bg-primary {
    background-color: var(--theme-primary) !important;
}

.fixed-profile {
    background-color: var(--theme-light-secondary) !important;
}

/* Éléments de formulaire */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-range:focus {
    border-color: var(--theme-border-primary) !important;
    /* box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.25) !important; */
}

/* Input text, textarea, select */
.form-control,
.form-select {
    border-color: #ced4da;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--theme-border-primary);
}

/* Checkbox et Radio */
.form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.form-check-input:hover {
    border-color: var(--theme-border-primary);
}

/* Switch */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 140, 0, 1%29'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Range input */
.form-range::-webkit-slider-thumb {
    background: var(--theme-primary) !important;
}

.form-range::-moz-range-thumb {
    background: var(--theme-primary) !important;
}

/* Input groups */
.input-group-text {
    border-color: #ced4da;
}

.input-group:focus-within .input-group-text {
    border-color: var(--theme-border-primary) !important;
}

/* Validation states */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--theme-success) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--theme-danger) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23FF6347'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23FF6347' stroke='none'/%3e%3c/svg%3e") !important;
}

/* Select2 customization si utilisé */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--theme-border-primary) !important;
    /* box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.25) !important; */
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--theme-primary) !important;
}

/* Datepicker customization si utilisé */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: var(--theme-primary) !important;
    background-image: none !important;
}

/* File input */
.form-control[type="file"]:not(:disabled):not([readonly]):focus {
    border-color: var(--theme-border-primary) !important;
    /* box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.25) !important; */
}

/* Placeholder text */
::placeholder {
    color: #6c757d !important;
    opacity: 0.8 !important;
}

/* Focus outline pour l'accessibilité */
*:focus {
    outline-color: var(--theme-border-primary) !important;
}

/* Flatpickr customization */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    /* box-shadow: -10px 0 0 var(--theme-primary) !important; */
}

.flatpickr-day.week.selected {
    /* box-shadow: -5px 0 0 var(--theme-primary), 5px 0 0 var(--theme-primary) !important; */
}

/* FullCalendar customization */
.fc .fc-button-primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.fc .fc-button-primary:hover {
    background-color: var(--theme-border-focus) !important;
    border-color: var(--theme-border-focus) !important;
}

.fc .fc-button-primary:disabled {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    opacity: 0.65;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--theme-light-primary) !important;
}

.fc .fc-highlight {
    background: var(--theme-light-primary) !important;
}


/* Chosen (Select) customization */
.chosen-container .chosen-results li.highlighted {
    background-color: var(--theme-primary) !important;
    background-image: none !important;
}

.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single {
    border-color: var(--theme-primary) !important;
    /* box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.25) !important; */
}

/* Summernote customization */
.note-editor.note-frame {
    border-color: #ced4da !important;
}

.note-editor.note-frame.focus {
    border-color: var(--theme-primary) !important;
    /* box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.25) !important; */
}

.note-btn.active,
.note-btn.focus,
.note-btn:focus,
.note-btn:hover {
    background-color: var(--theme-light-primary) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--theme-border-focus);
}

/* Multiselect customization */
.multiselect__tag {
    background: var(--theme-primary) !important;
}

.multiselect__option--highlight {
    background: var(--theme-primary) !important;
}

.multiselect__option--selected.multiselect__option--highlight {
    background: var(--theme-danger) !important;
}

/* Table customization */
.table > thead {
    background-color: var(--theme-light-primary) !important;
}

.table > tbody > tr:hover {
    background-color: var(--theme-light-primary) !important;
}

/* Pagination customization */
.page-item.active .page-link {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.page-link {
    color: var(--theme-primary) !important;
}

.page-link:hover {
    background-color: var(--theme-light-primary) !important;
}

/* Card customization */
.card {
    border-color: rgba(0,0,0,.125) !important;
}

.card:hover {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.1) !important;
}

/* Dropdown customization */
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item:active i,
.dropdown-item:focus i,
.dropdown-item:hover i {
    
    background: var(--gradient-primary) !important;
    color: white !important;
}

/* Nav tabs customization */
.nav-tabs .nav-link.active {
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

.nav-tabs .nav-link:hover {
    border-color: var(--theme-light-primary) !important;
    color: var(--theme-primary) !important;
}

/* List group customization */
.list-group-item.active {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* Progress bar customization */
.progress-bar {
    background-color: var(--theme-primary) !important;
}

/* Toast customization */
.toast {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.toast-success {
    background: var(--gradient-success) !important;
    color: white;
}

.toast-danger {
    background: var(--gradient-danger) !important;
    color: white;
}

.toast-info {
    background: var(--gradient-info) !important;
    color: white;
}

/* Modal customization */
.modal-header {
    border-bottom-color: var(--theme-light-primary) !important;
}

.modal-footer {
    border-top-color: var(--theme-light-primary) !important;
}

/* Style override for all primary colored elements */
[class*="bg-primary"],
[class*="btn-primary"],
[class*="badge-primary"],
.nav-pills .nav-link.active,
.page-item.active .page-link,
.progress-bar-primary {
    background: var(--gradient-primary) !important;
    border: none;
}

/* Hover states */
[class*="btn-primary"]:hover,
.page-item:not(.disabled):hover .page-link,
.nav-pills .nav-link:hover {
    background: var(--gradient-primary-hover) !important;
    box-shadow: 0 5px 15px var(--gradient-shadow);
}

/* Text colors */
[class*="text-primary"] {
    color: var(--theme-primary) !important;
}

/* Border colors */
[class*="border-primary"] {
    border-color: var(--theme-primary) !important;
}

/* Badge styles */
.badge {
    padding: 0.5em 0.8em;
    font-weight: 500;
    letter-spacing: 0.3px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* Status badges */
.text-bg-success,
.badge-success,
.bg-success {
    background: var(--gradient-success) !important;
    color: white !important;
    border: none;
    box-shadow: 0 2px 5px var(--gradient-shadow);
}

.text-bg-danger,
.badge-danger,
.bg-danger {
    background: var(--gradient-danger) !important;
    color: white !important;
    border: none;
    box-shadow: 0 2px 5px rgba(255, 0, 0, 0.2);
}

.text-bg-danger:hover,
.badge-danger:hover,
.bg-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(255, 0, 0, 0.3);
}

.text-bg-primary,
.badge-primary,
.bg-primary {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none;
    box-shadow: 0 2px 5px var(--gradient-shadow);
}

.text-bg-secondary,
.badge-secondary,
.bg-secondary {
    background: var(--gradient-light) !important;
    color: var(--theme-primary) !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.text-bg-info,
.badge-info,
.bg-info {
    background: var(--gradient-info) !important;
    color: white !important;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 145, 255, 0.2);
}

.text-bg-warning,
.badge-warning,
.bg-warning {
    background: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-primary) 100%) !important;
    color: var(--theme-primary) !important;
}

.text-bg-light,
.badge-light,
.bg-light {
    background: var(--gradient-light) !important;
    color: var(--theme-primary) !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.text-bg-dark,
.badge-dark,
.bg-dark {
    background: linear-gradient(135deg, var(--theme-primary) 0%, #23272b 100%) !important;
    color: white !important;
}

/* Hover effects */
[class*="text-bg-"]:hover,
[class*="badge-"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--gradient-shadow);
}

/* Badge with icons */
.badge i {
    font-size: 0.85em;
    margin-right: 0.3em;
    vertical-align: -0.05em;
}

/* Notification badge */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 50%;
    background: var(--gradient-primary) !important;
    color: white;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px white;
}

/* Styles de base pour les chips */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 50px;
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: none;
}

.chip:not(.disabled):hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
}

.chip.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.chip i {
    font-size: 0.875rem;
    margin-right: 0.4rem;
}

.chip-success {
    background-color: var(--chip-success);
    color: var(--theme-success);
}

.chip-danger {
    background-color: var(--chip-danger);
    color: var(--theme-danger);
}

.cursor-pointer {
    cursor: pointer;
}

.bg-theme-subtle {
    background: linear-gradient(135deg, var(--theme-light-primary) 0%, var(--theme-light-secondary) 100%) !important;
    border: none !important;
}

.breadcrumb-wrapper {
    position: relative;
    overflow: hidden;
}

.breadcrumb-wrapper h4 {
    color: var(--theme-primary);
}

.breadcrumb-item a {
    color: var(--theme-primary) !important;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.breadcrumb-item a:hover {
    opacity: 1;
}

.breadcrumb-item.active {
    color: var(--theme-secondary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--theme-primary) !important;
    opacity: 0.5;
}