/* ========================================
   MODERN UI SHAPES - VIOLET GRADIENT THEME
   Formes modernes pour tous les éléments UI
   ======================================== */

/* ========================================
   FORM ELEMENTS - Inputs, Select, Textarea
   ======================================== */

/* Inputs et Textareas */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
    border-radius: 12px !important;
    border: 2px solid #e5e7eb !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background: #ffffff !important;
}

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1) !important;
    outline: none !important;
}

/* Input Groups */
.input-group {
    border-radius: 12px !important;
}

.input-group .form-control {
    border-radius: 0 !important;
}

.input-group .form-control:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

.input-group .form-control:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.input-group-text {
    border-radius: 12px !important;
    background: #f3f4f6 !important;
    border: 2px solid #e5e7eb !important;
    color: #6b7280 !important;
}

/* Select2 Dropdown */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 12px !important;
    border: 2px solid #e5e7eb !important;
    padding: 8px 12px !important;
    min-height: 46px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1) !important;
}

.select2-dropdown {
    border-radius: 12px !important;
    border: 2px solid #e5e7eb !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
}

/* ========================================
   CARDS - Cartes et Conteneurs
   ======================================== */

.card {
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

.card-header {
    border-radius: 16px 16px 0 0 !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 20px 24px !important;
}

.card-body {
    padding: 24px !important;
}

.card-footer {
    border-radius: 0 0 16px 16px !important;
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 16px 24px !important;
}

/* Card avec gradient violet */
.card-gradient-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    color: white !important;
    border: none !important;
}

.card-gradient-primary .card-header,
.card-gradient-primary .card-footer {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ========================================
   MODALS - Fenêtres modales
   ======================================== */

.modal-content {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

.modal-header {
    border-radius: 20px 20px 0 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 24px 28px !important;
}

.modal-body {
    padding: 28px !important;
}

.modal-footer {
    border-radius: 0 0 20px 20px !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 20px 28px !important;
}

/* ========================================
   ALERTS - Alertes
   ======================================== */

.alert {
    border-radius: 14px !important;
    border: none !important;
    padding: 16px 20px !important;
    font-weight: 500 !important;
}

.alert-primary {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #7c3aed !important;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #2563eb !important;
}

/* ========================================
   BADGES - Étiquettes
   ======================================== */

.badge {
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

.badge-lg {
    padding: 8px 16px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
}

/* ========================================
   DROPDOWNS - Menus déroulants
   ======================================== */

.dropdown-menu {
    border-radius: 14px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
}

.dropdown-item {
    border-radius: 10px !important;
    padding: 10px 16px !important;
    margin: 2px 0 !important;
    transition: all 0.2s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #7c3aed !important;
}

.dropdown-item.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    color: white !important;
}

/* ========================================
   PAGINATION - Navigation pages
   ======================================== */

.pagination {
    gap: 6px !important;
}

.page-link {
    border-radius: 10px !important;
    border: 2px solid #e5e7eb !important;
    padding: 8px 14px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

.page-link:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    border-color: #8b5cf6 !important;
    color: #7c3aed !important;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

/* ========================================
   TABLES - Tableaux
   ======================================== */

.table {
    border-radius: 14px !important;
    overflow: hidden !important;
}

.table thead th {
    background: #f9fafb !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding: 14px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #6b7280 !important;
}

.table tbody tr {
    transition: all 0.2s ease !important;
}

.table tbody tr:hover {
    background: #f9fafb !important;
}

.table tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

/* Table avec bordures arrondies */
.table-rounded {
    border-radius: 14px !important;
    border: 1px solid #e5e7eb !important;
}

/* ========================================
   PROGRESS BARS - Barres de progression
   ======================================== */

.progress {
    border-radius: 10px !important;
    height: 10px !important;
    background: #f3f4f6 !important;
}

.progress-bar {
    border-radius: 10px !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
}

/* ========================================
   TABS - Onglets
   ======================================== */

.nav-tabs {
    border-bottom: 2px solid #e5e7eb !important;
}

.nav-tabs .nav-link {
    border-radius: 12px 12px 0 0 !important;
    border: none !important;
    padding: 12px 20px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.nav-tabs .nav-link:hover {
    background: rgba(139, 92, 246, 0.05) !important;
    color: #7c3aed !important;
}

.nav-tabs .nav-link.active {
    background: white !important;
    color: #8b5cf6 !important;
    border-bottom: 3px solid #8b5cf6 !important;
    font-weight: 600 !important;
}

/* Pills */
.nav-pills .nav-link {
    border-radius: 12px !important;
    padding: 10px 18px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.nav-pills .nav-link:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #7c3aed !important;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

/* ========================================
   TOOLTIPS - Info-bulles
   ======================================== */

.tooltip-inner {
    border-radius: 10px !important;
    padding: 8px 14px !important;
    background: #1f2937 !important;
    font-size: 13px !important;
}

/* ========================================
   POPOVERS - Bulles d'information
   ======================================== */

.popover {
    border-radius: 14px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.popover-header {
    border-radius: 14px 14px 0 0 !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
}

.popover-body {
    padding: 16px !important;
}

/* ========================================
   BREADCRUMBS - Fil d'Ariane
   ======================================== */

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
}

.breadcrumb-item {
    font-size: 14px !important;
}

.breadcrumb-item a {
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.breadcrumb-item a:hover {
    color: #8b5cf6 !important;
}

.breadcrumb-item.active {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

/* ========================================
   LIST GROUPS - Listes groupées
   ======================================== */

.list-group {
    border-radius: 14px !important;
}

.list-group-item {
    border: 1px solid #e5e7eb !important;
    padding: 14px 18px !important;
    transition: all 0.2s ease !important;
}

.list-group-item:first-child {
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
}

.list-group-item:last-child {
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
}

.list-group-item:hover {
    background: #f9fafb !important;
}

.list-group-item.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    border-color: transparent !important;
    color: white !important;
}

/* ========================================
   SWITCHES - Interrupteurs
   ======================================== */

.custom-switch .custom-control-label::before {
    border-radius: 20px !important;
    background: #e5e7eb !important;
    border: none !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
}

/* ========================================
   CHECKBOXES & RADIOS - Cases et Boutons radio
   ======================================== */

.custom-checkbox .custom-control-label::before,
.custom-radio .custom-control-label::before {
    border-radius: 6px !important;
    border: 2px solid #e5e7eb !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    border-color: transparent !important;
}

.custom-radio .custom-control-label::before {
    border-radius: 50% !important;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    border-color: transparent !important;
}