/*
 * Theme Name: Neo Elite Modern
 * Description: Ultra-modern design system with advanced layouts
 * Palette:
 *   #0F0F23 (Deep Navy)
 *   #1C1C3A (Dark Navy)
 *   #2C3E50 (Professional Slate)
 *   #34495E (Medium Slate)
 *   #5DADE2 (Professional Blue)
 *   #F8F9FA (Clean Light)
 *   #FFFFFF (Pure White)
*/

/* 1. FONT & ROOT VARIABLES
-------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
    /* --- Custom Palette --- */
    --neo-black: #0f0f23;
    --neo-dark-gray: #1c1c3a;
    --neo-dark-slate: #2c3e50;
    --neo-mid-slate: #34495e;
    --neo-mint: #5dade2;
    --neo-light: #ffffff;
    --neo-white: #ffffff;
    --neo-glass: rgba(255, 255, 255, 0.1);
    --neo-shadow: rgba(44, 62, 80, 0.1);
    --neo-shadow-lg: rgba(44, 62, 80, 0.2);
    --neo-success: #28a745;
    --neo-warning:rgb(173, 130, 0);
    --neo-danger: #dc3545;

    /* --- Theme Variables --- */
    --neo-bg: #ffffff;
    --neo-card-bg: transparent;
    --neo-text: #2c3e50;
    --neo-text-muted: #6c757d;
    --neo-border: #dee2e6;
    --neo-light-bg: #f8f9fa;
    --neo-input-bg: #ffffff;
    --neo-input-border: #ced4da;

    /* --- Bootstrap Overrides --- */
    --bs-primary: var(--neo-mint);
    --bs-secondary: var(--neo-mid-slate);
    --bs-dark: var(--neo-dark-slate);
    --bs-light: var(--neo-light);
    --bs-body-font-family: "Inter", sans-serif;
    --bs-body-color: var(--neo-dark-slate);
    --bs-body-bg: var(--neo-light);
    --bs-border-color: rgba(52, 73, 94, 0.1);
    --bs-link-color: var(--neo-dark-slate);
    --bs-link-hover-color: var(--neo-mid-slate);

    /* --- No Rounded Corners --- */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 0;

    /* --- Sidebar Variables --- */
    --sidebar-width: 17.5rem;
    --sidebar-collapsed-width: 80px;
    --navbar-height: 0px;

    /* --- Transitions --- */
    --neo-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --neo-transition-fast: all 0.15s ease;
}

/* 2. GLOBAL STYLES
-------------------------------------------------- */
* {
    box-sizing: border-box;
}

body {
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--neo-black);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

@media print {
    .neo-top-header {
      display: none !important;
    }
  }

/* Remove all default shadows */
.btn,
.form-control,
.form-select,
.dropdown-menu,
.card,
.modal-content,
.navbar,
.alert {
    box-shadow: none !important;
    border-radius: 6px !important;
}


.modal-content {
    z-index: 9999;
}


.btn-primary {
    background-color: var(--neo-mint);
    border-color: var(--neo-mint);
}

.btn-primary:hover {
    background-color: var(--neo-mint);
    border-color: var(--neo-mint);
}


.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    border-color: transparent !important;
}


/* CSS Abdoullah DEBUT*/

/* ================================
   TREE MANAGER UNIVERSAL STYLES
   ================================ */

/* Tree container base */
.neo-tree {
    font-family: var(--bs-body-font-family);
}

.neo-tree-item {
    margin-bottom: 8px;
}

.neo-tree-item-content {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--neo-card-bg);
    border: 1px solid var(--neo-border);
    border-radius: 8px;
    transition: var(--neo-transition-fast);
    box-shadow: 0 2px 4px var(--neo-shadow);
}

.neo-tree-item-content:hover {
    background: var(--neo-light-bg);
    border-color: var(--neo-mint);
    box-shadow: 0 4px 8px var(--neo-shadow-lg);
    transform: translateY(-1px);
}

.neo-tree-item-info {
    flex: 1;
    min-width: 0;
}

.neo-tree-item-name {
    font-weight: 600;
    color: var(--neo-text);
    margin-bottom: 4px;
    font-size: 1rem;
    line-height: 1.2;
}

.neo-tree-item-description {
    font-size: 0.875rem;
    color: var(--neo-text-muted);
    margin-bottom: 6px;
    line-height: 1.3;
}

.neo-tree-item-stats {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    flex-wrap: wrap;
}

.neo-tree-item-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--neo-text-muted);
    background: var(--neo-light-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.neo-tree-item-stat i {
    font-size: 0.75rem;
}

.neo-tree-item-actions {
    display: flex;
    gap: 6px;
    margin-left: 12px;
}

.neo-tree-children {
    margin-left: 28px;
    margin-top: 12px;
    position: relative;
}

.neo-tree-children::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--neo-mint), transparent);
    opacity: 0.3;
}

/* ================================
   MANAGEMENT PANEL STYLES
   ================================ */

/* Management items */
.neo-management-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--neo-border);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--neo-card-bg);
    transition: var(--neo-transition-fast);
}

.neo-management-item:hover {
    background: var(--neo-light-bg);
    border-color: var(--neo-mint);
    box-shadow: 0 2px 8px var(--neo-shadow);
}

.neo-management-item-info {
    flex: 1;
    min-width: 0;
}

.neo-management-item-name {
    font-weight: 600;
    color: var(--neo-text);
    margin-bottom: 2px;
    font-size: 0.925rem;
}

.neo-management-item-description {
    font-size: 0.8rem;
    color: var(--neo-text-muted);
    line-height: 1.3;
}

.neo-management-item-control {
    margin-left: 12px;
}

/* Toggle switches */
.neo-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.neo-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.neo-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--neo-border);
    transition: var(--neo-transition-fast);
    border-radius: 24px;
}

/* Top Header */
.neo-top-header {
    height: var(--header-height);
    background: var(--neo-card-bg);
    border-bottom: 1px solid var(--neo-border);
    padding: 0rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.neo-top-header-non-sticky {
    height: var(--header-height);
    background: var(--neo-card-bg);
    border-bottom: 1px solid var(--neo-border);
    padding: 0rem 1rem;
    position: relative;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Mobile toggle */
.neo-mobile-toggle {
    background: none;
    border: none;
    color: var(--neo-text);
    font-size: 1.5rem;
    padding: 0.5rem;
    margin-right: 1rem;
    border-radius: 8px;
    transition: var(--neo-transition-fast);
}

.neo-mobile-toggle:hover {
    background: var(--neo-light-bg);
    color: var(--neo-mint);
}

.neo-breadcrumb-container {
    background: var(--neo-light-bg);
    border: 1px solid var(--neo-border);
    border-radius: 8px;
    padding: 1rem;
}

.neo-breadcrumb-multi-level {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.neo-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.neo-breadcrumb-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--neo-card-bg);
    border: 1px solid var(--neo-border);
    border-radius: 6px;
    transition: var(--neo-transition-fast);
    position: relative;
}

.neo-breadcrumb-step:hover {
    background: var(--neo-light-bg);
    border-color: var(--status-color, var(--neo-mint));
    box-shadow: 0 2px 4px var(--neo-shadow);
}

.neo-breadcrumb-step-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.neo-breadcrumb-step-title {
    font-weight: 600;
    color: var(--neo-text);
    font-size: 0.875rem;
    line-height: 1.2;
}

.neo-breadcrumb-step-subtitle {
    font-size: 0.75rem;
    color: var(--neo-text-muted);
    font-family: "Courier New", monospace;
}

.neo-breadcrumb-step-count {
    margin-top: 0.25rem;
}

.neo-breadcrumb-step-count .badge {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
}

.neo-breadcrumb-separator {
    color: var(--neo-text-muted);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

.neo-breadcrumb-item.active .neo-breadcrumb-step {
    background: var(--status-color, var(--neo-mint));
    color: white;
    border-color: var(--status-color, var(--neo-mint));
}

.neo-breadcrumb-item.active .neo-breadcrumb-step-title,
.neo-breadcrumb-item.active .neo-breadcrumb-step-subtitle {
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .neo-breadcrumb-multi-level {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .neo-breadcrumb-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .neo-breadcrumb-separator {
        transform: rotate(90deg);
        align-self: center;
    }

    .neo-breadcrumb-step {
        justify-content: center;
        text-align: center;
    }
}
/* Breadcrumb */
.neo-breadcrumb {
    min-width: 0;
}

.neo-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--neo-text);
    margin: 0;
    line-height: 1.2;
}

.neo-page-description {
    font-size: 0.875rem;
    color: var(--neo-text-muted);
    margin: 0.25rem 0 0 0;
    line-height: 1.3;
}

/* Header Actions */
.neo-header-action {
    position: relative;
}

.neo-icon-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--neo-light-bg);
    color: var(--neo-text);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: var(--neo-transition-fast);
    position: relative;
}

.neo-icon-btn:hover {
    background: var(--neo-mint);
    color: var(--neo-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(93, 173, 226, 0.3);
}

.neo-notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid var(--neo-card-bg);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.neo-badge-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 12px 6px;
    border-radius: 20px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--neo-card-bg);
    animation: pulse-badge 2s infinite;
}

/* User Button */
.neo-user-btn {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 12px;
    transition: var(--neo-transition-fast);
    color: var(--neo-text);
}

.neo-user-btn:hover {
    background: var(--neo-light-bg);
}

.neo-user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--neo-mint) 0%, #4a90e2 100%);
    color: var(--neo-white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.neo-user-info {
    text-align: left;
    min-width: 0;
}

.neo-user-name {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--neo-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-user-role {
    display: block;
    font-size: 0.75rem;
    color: var(--neo-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User Dropdown */
.neo-user-dropdown {
    min-width: 280px;
    border: 1px solid var(--neo-border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 0;
    overflow: hidden;
}

.neo-user-dropdown-header {
    padding: 1rem;
    background: var(--neo-light-bg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.neo-user-dropdown .dropdown-item {
    padding: 0.75rem 1rem;
    color: var(--neo-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: var(--neo-transition-fast);
}

.neo-user-dropdown .dropdown-item:hover {
    background: var(--neo-light-bg);
    color: var(--neo-text);
}

.neo-user-dropdown .dropdown-item.text-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.neo-user-dropdown .dropdown-item i {
    font-size: 1rem;
    width: 20px;
}

/* Page Actions */
.neo-page-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Main content layout */
.neo-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: var(--neo-transition);
    background: var(--neo-bg);
}

.neo-main.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed-width);
}

/* Mobile responsive */
@media (max-width: 991.98px) {
    .neo-main {
        margin-left: 0;
    }

    .neo-main.sidebar-collapsed {
        margin-left: 0;
    }

    .neo-top-header {
        padding: 0.25rem;
    }

    .neo-main-content {
        padding: 0.25rem;
    }

    .neo-page-title {
        font-size: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .neo-user-info {
        display: none !important;
    }

    .neo-user-dropdown {
        min-width: 260px;
    }

    .neo-page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .neo-top-header {
        padding: 0.75rem;
    }

    .neo-page-title {
        font-size: 0.75rem;
    }
}

/* Animations */
@keyframes neo-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.neo-fade-in {
    animation: neo-fade-in 0.6s ease-out forwards;
}

.neo-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--neo-white);
    transition: var(--neo-transition-fast);
    border-radius: 50%;
    box-shadow: 0 2px 4px var(--neo-shadow);
}

input:checked + .neo-toggle-slider {
    background-color: #28a745;
}

input:checked + .neo-toggle-slider:before {
    transform: translateX(26px);
}

.form-check-input:focus {
    border-color: var(--neo-mint);
    box-shadow: 0 0 0 0.2rem rgba(93, 173, 226, 0.25);
}

/* ================================
   QUICK FORM STYLES
   ================================ */

.neo-quick-form {
    background: var(--neo-card-bg);
    padding: 0.25rem;
    margin-bottom: 1.5rem;
}

.neo-quick-form-header {
    color: var(--neo-text);
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.neo-quick-form-header i {
    color: var(--neo-mint);
    font-size: 1.25rem;
}

.neo-quick-form .form-control {
    border-color: var(--neo-input-border);
    background-color: var(--neo-input-bg);
    color: var(--neo-text);
    border-radius: 6px;
    transition: var(--neo-transition-fast);
}

.neo-quick-form .form-control:focus {
    border-color: var(--neo-mint);
    box-shadow: 0 0 0 0.2rem rgba(93, 173, 226, 0.25);
    background-color: var(--neo-card-bg);
}

.neo-quick-form .form-control.is-invalid {
    border-color: #dc3545;
    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='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.5 5.5 1 1m0 0 1 1m-1-1 1-1m-1 1-1 1'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.neo-quick-form .invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
}

.neo-quick-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}

/* ================================
   STATISTICS BADGES
   ================================ */

.neo-stats-badge {
    background: var(--neo-light-bg);
    color: var(--neo-text);
    font-weight: 600;
    padding: 0px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--neo-transition-fast);
    border: 1px solid var(--neo-border);
    white-space: nowrap;
}

.neo-stats-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--neo-shadow);
}

.neo-stats-badge.primary {
    background: rgba(93, 173, 226, 0.1);
    color: var(--neo-mint);
    border-color: rgba(93, 173, 226, 0.3);
}

.neo-stats-badge.success {
    background: rgba(40, 167, 69, 0.1);
    color:var(--neo-success);
    border-color: rgba(40, 167, 69, 0.3);
}

.neo-stats-badge.warning {
    background: rgba(255, 193, 7, 0.1);
    color:var(--neo-warning);
    border-color: rgba(255, 193, 7, 0.3);
}

.neo-stats-badge.info {
    background: rgba(23, 162, 184, 0.1);
    color:var(--neo-info);
    border-color: rgba(23, 162, 184, 0.3);
}

.neo-stats-badge.purple {
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
    border-color: rgba(111, 66, 193, 0.3);
}

.neo-stats-badge.secondary {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
    border-color: rgba(108, 117, 125, 0.3);
}

.neo-stats-badge i {
    font-size: 0.875rem;
}

/* ================================
   EMPTY STATES
   ================================ */

.neo-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--neo-text-muted);
}

.neo-empty-state i {
    font-size: 4rem;
    color: var(--neo-border);
    margin-bottom: 1rem;
    opacity: 0.7;
}

.neo-empty-state h6 {
    color: var(--neo-text-muted);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.neo-empty-state h5 {
    color: var(--neo-text-muted);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.neo-empty-state p {
    color: var(--neo-text-muted);
    opacity: 0.8;
}

/* ================================
   ACTION BADGES
   ================================ */


.badge.bg-primary,
.badge.outline-primary {
    color: var(--neo-mint) !important;
    border-color: var(--neo-mint) !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    border: 1px solid var(--neo-mint) !important;
}

.badge.bg-info,
.badge.outline-info {
    color: var(--neo-mint) !important;
    border-color: var(--neo-mint) !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    border: 1px solid var(--neo-mint) !important;
}


.badge.bg-secondary,
.badge.outline-secondary {
    color: var(--neo-mid-slate) !important;
    border-color: var(--neo-mid-slate) !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    border: 1px solid var(--neo-mid-slate) !important;
}

.badge.bg-warning,
.badge.outline-warning {
    color: var(--neo-warning) !important;
    border-color: var(--neo-warning) !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    border: 1px solid var(--neo-warning) !important;
}


.badge.bg-light,
.badge.outline-light {
    color: var(--neo-text) !important;
    border-color: var(--neo-text-muted) !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    border: 1px solid var(--neo-text-muted) !important;
}

.badge.bg-success,
.badge.outline-success {
    color: var(--neo-success) !important;
    border-color: var(--neo-success) !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    border: 1px solid var(--neo-success) !important;
}

.badge.bg-danger,
.badge.outline-danger {
    color: var(--neo-danger) !important;
    border-color: var(--neo-danger) !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    border: 1px solid var(--neo-danger) !important;
}

/* ================================
   ACTION BUTTONS
   ================================ */




.neo-action-btn {
    padding: 6px 12px;
    font-size: 0.875rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-weight: 500;
    transition: var(--neo-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.neo-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--neo-shadow);
}

.neo-action-btn.primary {
    background: var(--neo-mint);
    color: var(--neo-white);
    border-color: var(--neo-mint);
}

.neo-action-btn.primary:hover {
    background: var(--neo-dark-slate);
    border-color: var(--neo-dark-slate);
    color: var(--neo-white);
}
.neo-action-btn.outline-primary {
    color: var(--neo-mint);
    border-color: var(--neo-mint);
    background-color: transparent;
}


.neo-action-btn.success {
    background: var(--neo-success);
    color: var(--neo-white);
    border-color: var(--neo-success);
}

.neo-action-btn.success:hover {
    background: var(--neo-dark-slate);
    border-color: var(--neo-dark-slate);
    color: var(--neo-white);
}
.neo-action-btn.outline-success {
    color: var(--neo-success);
    border-color: var(--neo-success);
    background-color: transparent;
}

.neo-action-btn.outline-primary:hover {
    color: var(--neo-white);
    background-color: var(--neo-mint);
    border-color: var(--neo-mint);
}

.neo-action-btn.warning {
    background: #ffc107;
    color: var(--neo-white);
    border-color: #ffc107;
}

.neo-action-btn.warning:hover {
    background: var(--neo-dark-slate);
    border-color: var(--neo-dark-slate);
    color: var(--neo-white);
}

.neo-action-btn.outline-warning {
    color: var(--neo-mint);
    border-color: #ffc107;
    background-color: transparent;
}

.neo-action-btn.outline-warning:hover {
    color: var(--neo-dark-slate);
    background-color: #ffc107;
    border-color: #ffc107;
}

.neo-action-btn.danger {
    background: #dc3545;
    color: var(--neo-white);
    border-color: #dc3545;
}

.neo-action-btn.danger:hover {
    background: var(--neo-dark-slate);
    border-color: var(--neo-dark-slate);
    color: var(--neo-white);
}

.neo-action-btn.outline-danger {
    color: #dc3545;
    border-color: #dc3545;
    background-color: transparent;
}

.neo-action-btn.outline-danger:hover {
    color: var(--neo-white);
    background-color: #dc3545;
    border-color: #dc3545;
}

.neo-action-btn.secondary {
    background: var(--neo-mid-slate);
    color: var(--neo-white);
    border-color: var(--neo-mid-slate);
}

.neo-action-btn.secondary:hover {
    background: var(--neo-dark-slate);
    border-color: var(--neo-dark-slate);
}

.neo-action-btn i {
    font-size: 0.875rem;
}

/* ================================
   DISABLED BUTTON STYLES
   ================================ */

.neo-action-btn:disabled,
.neo-action-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

.neo-action-btn.primary:disabled,
.neo-action-btn.primary[disabled] {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

.neo-action-btn.warning:disabled,
.neo-action-btn.warning[disabled] {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

.neo-action-btn.danger:disabled,
.neo-action-btn.danger[disabled] {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

.neo-action-btn.secondary:disabled,
.neo-action-btn.secondary[disabled] {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

/* Outline buttons disabled state */
.neo-action-btn.outline-primary:disabled,
.neo-action-btn.outline-primary[disabled],
.neo-action-btn.outline-warning:disabled,
.neo-action-btn.outline-warning[disabled],
.neo-action-btn.outline-danger:disabled,
.neo-action-btn.outline-danger[disabled] {
    background-color: transparent !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

/* Dark theme disabled button styles */
[data-theme="dark"] .neo-action-btn:disabled,
[data-theme="dark"] .neo-action-btn[disabled] {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #adb5bd !important;
}

[data-theme="dark"] .neo-action-btn.primary:disabled,
[data-theme="dark"] .neo-action-btn.primary[disabled],
[data-theme="dark"] .neo-action-btn.warning:disabled,
[data-theme="dark"] .neo-action-btn.warning[disabled],
[data-theme="dark"] .neo-action-btn.danger:disabled,
[data-theme="dark"] .neo-action-btn.danger[disabled],
[data-theme="dark"] .neo-action-btn.secondary:disabled,
[data-theme="dark"] .neo-action-btn.secondary[disabled] {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #adb5bd !important;
}

[data-theme="dark"] .neo-action-btn.outline-primary:disabled,
[data-theme="dark"] .neo-action-btn.outline-primary[disabled],
[data-theme="dark"] .neo-action-btn.outline-warning:disabled,
[data-theme="dark"] .neo-action-btn.outline-warning[disabled],
[data-theme="dark"] .neo-action-btn.outline-danger:disabled,
[data-theme="dark"] .neo-action-btn.outline-danger[disabled] {
    background-color: transparent !important;
    border-color: #6c757d !important;
    color: #adb5bd !important;
}

/* ================================
   COLLAPSE STYLES FOR CATEGORIES
   ================================ */

/* Animation pour la rotation de l'icône chevron */
.transition-transform {
    transition: transform 0.2s ease-in-out;
}

.rotate-180 {
    transform: rotate(180deg);
}

/* Rotation de l'icône quand le collapse est ouvert */
[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

/* Style pour les en-têtes de catégorie cliquables */
.neo-management-category-header[data-bs-toggle="collapse"] {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    user-select: none;
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-management-category-header[data-bs-toggle="collapse"]:hover {
    background: rgba(var(--bs-primary-rgb), 0.15);
    box-shadow: 0 2px 8px var(--neo-shadow);
}

/* Contenu des catégories */
.neo-management-category-content {
    padding: 0.5rem;
    border: 1px solid rgba(var(--bs-border-color-translucent));
    border-radius: 0.375rem;
}

/* Style spécifique pour les collapses dans les permissions */
.neo-management-category .collapse {
    transition: all 0.3s ease;
}

.neo-management-category .collapsing {
    transition: height 0.3s ease;
}

/* Icône chevron dans les en-têtes */
.neo-management-category-header .bi-chevron-down {
    transition: transform 0.2s ease-in-out;
    font-size: 0.875rem;
    color: var(--neo-mint);
}

/* Style pour le contenu des permissions dans les collapses */
.neo-management-category-content .neo-management-item {
    margin-bottom: 0.5rem;
}

.neo-management-category-content .neo-management-item:last-child {
    margin-bottom: 0;
}


/* ================================
   TABLES AND LISTS CORRECTIONS
   ================================ */

/* Avatar corrections */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    background: linear-gradient(135deg, var(--neo-mint) 0%, #4a90e2 100%);
    color: var(--neo-white);
    border: 2px solid var(--neo-white);
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.15);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* Corrections pour les cellules de tableau */
.user-info-cell {
    vertical-align: middle !important;
    padding: 1rem 0.75rem;
}

.user-info-cell .neo-tree-item-content {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.user-info-cell .neo-tree-item-content:hover {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Corrections pour les badges dans les cellules */
.badge-cell {
    vertical-align: middle !important;
    text-align: center;
    padding: 1rem 0.75rem;
}

.badge-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    min-height: 40px;
}

/* Corrections pour les tableaux */
.table td {
    vertical-align: middle !important;
    padding: 1rem 0.75rem;
}

.table th {
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    background-color: #f8f9fa;
    vertical-align: middle;
    text-align: left;
}

/* Center align specific header columns */
.table th:first-child,
.table th:nth-child(5),
.table th:nth-child(6),
.table th:last-child {
    text-align: center;
}

/* Corrections pour les actions dans les tableaux */
.neo-tree-item-actions {
    justify-content: center;
    align-items: center;
}

/* Icônes spécialisées pour les listes */
.client-icon,
.category-icon,
.user-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    margin-right: 0.75rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.client-icon {
    background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);
    color: var(--neo-white);
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
}

.category-icon {
    background: linear-gradient(135deg, #20c997 0%, #198754 100%);
    color: var(--neo-white);
    box-shadow: 0 4px 15px rgba(32, 201, 151, 0.3);
}

.user-type-icon {
    background: linear-gradient(135deg, var(--neo-mint) 0%, #4a90e2 100%);
    color: var(--neo-white);
    box-shadow: 0 4px 15px rgba(93, 173, 226, 0.2);
}

.user-type-icon.client {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: var(--neo-white);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

/* ================================
   EXTENSIONS DES CLASSES UNIVERSELLES EXISTANTES
   ================================ */

/* Extensions pour les conteneurs avec scroll */
.neo-management-category.scrollable {
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Extension pour les en-têtes de sections avec actions */
.neo-management-category-header.with-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.neo-management-category-header.with-actions h6 {
    margin-bottom: 0;
    flex: 1;
}

/* Extension pour les formulaires rapides en ligne */
.neo-quick-form.inline-form .row {
    margin-left: -0.375rem;
    margin-right: -0.375rem;
}

.neo-quick-form.inline-form .row > * {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    margin-bottom: 0.5rem;
}

/* Extension pour les badges avec icônes spécialisées */
.neo-stats-badge.with-icon i {
    font-size: 0.75rem;
    margin-right: 2px;
}

/* Extension pour les conteneurs avec bordures colorées */
.neo-management-category.bordered {
    border: 2px solid var(--neo-border);
    border-radius: 12px;
    padding: 1rem;
    transition: var(--neo-transition-fast);
}

.neo-management-category.bordered:hover {
    border-color: var(--neo-mint);
    box-shadow: 0 4px 12px var(--neo-shadow-lg);
}

/* Extension pour les en-têtes avec séparateur */
.neo-management-category-header.with-separator {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--neo-border);
    margin-bottom: 0.75rem;
}

.neo-management-category-header.with-separator h6 {
    color: var(--neo-text);
    font-size: 1.1rem;
}

.neo-management-category-header.with-separator small {
    color: var(--neo-text-muted);
    font-size: 0.875rem;
}

/* ================================
   ULTRA MODERN SCROLLBAR SYSTEM
   ================================ */

/* Global scrollbar styles for all elements */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Webkit scrollbar styles (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: all 0.3s ease;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Show scrollbar on hover */
*:hover::-webkit-scrollbar-thumb {
    background: rgba(93, 173, 226, 0.4);
    background-clip: content-box;
}

*:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(93, 173, 226, 0.7);
    background-clip: content-box;
    width: 10px;
}

/* Active scrollbar (when scrolling) */
*::-webkit-scrollbar-thumb:active {
    background: rgba(93, 173, 226, 0.9);
    background-clip: content-box;
}

/* Specific scrollbar for body and html */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 8px;
    position: absolute;
    right: 0;
    z-index: 9999;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: transparent;
    position: absolute;
    right: 0;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html:hover::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb {
    background: rgba(93, 173, 226, 0.5);
    background-clip: content-box;
    box-shadow: 0 0 10px rgba(93, 173, 226, 0.3);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: rgba(93, 173, 226, 0.8);
    background-clip: content-box;
    box-shadow: 0 0 15px rgba(93, 173, 226, 0.5);
    transform: scaleX(1.2);
}

/* Modern scrollbar for specific containers */
.neo-scrollbar-container {
    position: relative;
    overflow: overlay;
}

.neo-scrollbar-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    position: absolute;
    right: 0;
}

.neo-scrollbar-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.neo-scrollbar-container::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neo-scrollbar-container:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(
        45deg,
        rgba(93, 173, 226, 0.6),
        rgba(74, 144, 226, 0.6)
    );
    box-shadow: 0 0 10px rgba(93, 173, 226, 0.3);
}

.neo-scrollbar-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        45deg,
        rgba(93, 173, 226, 0.9),
        rgba(74, 144, 226, 0.9)
    );
    box-shadow: 0 0 15px rgba(93, 173, 226, 0.5);
    transform: scaleX(1.3);
}

/* Specific styles for sidebar */
.neo-sidebar {
    overflow: overlay;
}

.neo-sidebar::-webkit-scrollbar {
    width: 6px;
    position: absolute;
    right: 0;
}

.neo-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.neo-sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neo-sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(93, 173, 226, 0.4);
    box-shadow: 0 0 8px rgba(93, 173, 226, 0.3);
}

.neo-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(93, 173, 226, 0.7);
    box-shadow: 0 0 12px rgba(93, 173, 226, 0.5);
}

/* Specific styles for navigation */
.neo-sidebar-nav {
    overflow: overlay;
}

.neo-sidebar-nav::-webkit-scrollbar {
    width: 4px;
    position: absolute;
    right: 2px;
}

.neo-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.neo-sidebar-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neo-sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(93, 173, 226, 0.3);
}

.neo-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(93, 173, 226, 0.6);
}

/* Extension pour les scrollbars personnalisées dans les conteneurs de gestion */
.neo-management-category.scrollable {
    overflow: overlay;
}

.neo-management-category.scrollable::-webkit-scrollbar {
    width: 6px;
    position: absolute;
    right: 0;
}

.neo-management-category.scrollable::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.neo-management-category.scrollable::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neo-management-category.scrollable:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(
        45deg,
        rgba(93, 173, 226, 0.5),
        rgba(74, 144, 226, 0.5)
    );
    box-shadow: 0 0 8px rgba(93, 173, 226, 0.3);
}

.neo-management-category.scrollable::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        45deg,
        rgba(93, 173, 226, 0.8),
        rgba(74, 144, 226, 0.8)
    );
    box-shadow: 0 0 12px rgba(93, 173, 226, 0.5);
    transform: scaleX(1.2);
}

/* Glowing effect for scrollbars */
@keyframes scrollbar-glow {
    0% {
        box-shadow: 0 0 5px rgba(93, 173, 226, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(93, 173, 226, 0.6);
    }
    100% {
        box-shadow: 0 0 5px rgba(93, 173, 226, 0.3);
    }
}

*::-webkit-scrollbar-thumb:active {
    animation: scrollbar-glow 0.5s ease-in-out;
}

*:hover {
    scrollbar-color: rgba(93, 173, 226, 0.4) transparent;
}

/* Extension pour les badges info avec variante purple */
.neo-stats-badge.info.purple {
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
    border-color: rgba(111, 66, 193, 0.3);
}

/* Extension pour les états vides dans des conteneurs spécifiques */
.neo-empty-state.in-section {
    padding: 2rem 1rem;
}

.neo-empty-state.in-section i {
    font-size: 3rem;
}

/* Espacement amélioré pour le header des types clients */
.neo-card-header .d-flex.justify-content-between {
    gap: 1rem;
}

.neo-card-header h5.flex-grow-1 {
    min-width: 0; /* Permet au titre de se rétrécir si nécessaire */
    margin-right: 1rem;
}

.neo-card-header .d-flex.gap-3 {
    flex-shrink: 0; /* Empêche les contrôles de se rétrécir */
}

/* ================================
   PERMISSION FORM SPECIFIC STYLES
   ================================ */

/* Styles pour la sélection des catégories */
.neo-management-item.selected {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--neo-shadow-lg) !important;
}

.neo-management-item:hover {
    cursor: pointer;
}

/* Icône de permission dans la liste */
.user-type-icon.permission {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: var(--neo-white);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

/* Badges d'utilisation empilés */
.badge-container .d-flex.flex-column {
    gap: 0.25rem;
}

.badge-container .d-flex.flex-column .neo-stats-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    white-space: nowrap;
}

/* Labels de formulaire avec icônes */
.neo-form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--neo-text);
    margin-bottom: 0.5rem;
}

.neo-form-label i {
    color: var(--neo-mint);
    font-size: 1rem;
}

/* Améliorations pour les filtres dans le header */
.neo-card-header .form-select {
    border-color: var(--neo-input-border);
    background-color: var(--neo-input-bg);
    color: var(--neo-text);
    transition: var(--neo-transition-fast);
}

.neo-card-header .form-select:focus {
    border-color: var(--neo-mint);
    box-shadow: 0 0 0 0.2rem rgba(93, 173, 226, 0.25);
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

@media (max-width: 768px) {
    .neo-tree-item-content {
        padding: 10px 12px;
    }

    .neo-tree-item-name {
        font-size: 0.925rem;
    }

    .neo-tree-item-description {
        font-size: 0.8rem;
    }

    .neo-tree-children {
        margin-left: 20px;
    }

    .neo-tree-item-stats {
        flex-direction: column;
        gap: 6px;
    }

    .neo-tree-item-actions {
        flex-direction: column;
        gap: 4px;
    }

    .neo-management-item {
        padding: 10px 12px;
    }

    .neo-stats-badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    .neo-quick-form {
        padding: 1rem;
    }

    .neo-quick-form-actions {
        flex-direction: column;
    }

    /* Responsive pour les avatars et icônes */
    .avatar,
    .client-icon,
    .category-icon,
    .user-type-icon {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
        margin-right: 0.5rem;
    }

    .table td {
        padding: 0.75rem 0.5rem;
    }

    .badge-container {
        gap: 0.125rem;
    }

    /* Responsive pour les collapses */
    .neo-management-category-header[data-bs-toggle="collapse"] {
        padding: 0.5rem 0.75rem;
    }

    .neo-management-category-content {
        padding: 0.375rem;
    }

    /* Extension responsive pour les en-têtes avec actions */
    .neo-management-category-header.with-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .neo-management-category-header.with-actions .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
        width: 100%;
    }

    .neo-management-category.scrollable {
        max-height: 60vh;
    }

    .neo-quick-form.inline-form .row {
        margin-left: 0;
        margin-right: 0;
    }

    .neo-quick-form.inline-form .row > * {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0.5rem;
    }

    /* Responsive pour les petits écrans */
    .neo-card-header .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .neo-card-header h5.flex-grow-1 {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .neo-card-header .d-flex.gap-3 {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.75rem !important;
    }

    .neo-card-header .form-select {
        width: auto !important;
        min-width: 150px;
        flex: 1;
    }


    /* Responsive pour les badges d'utilisation */
    .badge-container .d-flex.flex-column .neo-stats-badge {
        font-size: 0.6rem;
        padding: 1px 4px;
    }

    .neo-card-header .form-select {
        width: auto !important;
        min-width: 120px;
    }
}

@media (max-width: 576px) {
    .neo-tree-item-stats {
        font-size: 0.7rem;
    }

    .neo-tree-item-description {
        line-height: 1.2;
    }

    .neo-stats-badge {
        font-size: 0.65rem;
        padding: 3px 6px;
    }

    .neo-management-category {
        padding: 0.25rem;
    }

    .neo-management-item-name {
        font-size: 0.875rem;
    }

    .neo-management-item-description {
        font-size: 0.75rem;
    }

    .neo-card-header .d-flex.gap-3 {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ================================
   DARK MODE SUPPORT
   ================================ */

[data-theme="dark"] .neo-tree-item-content {
    background: var(--neo-dark-gray);
    border-color: var(--neo-mid-slate);
}
[data-theme="dark"] .neo-tree-item-name {
    color: var(--neo-light);
}

[data-theme="dark"] .neo-tree-item-description,
[data-theme="dark"] .neo-tree-item-stat {
    color: #adb5bd;
}

[data-theme="dark"] .neo-management-category {
    background: var(--neo-dark-gray);
    border-left-color: var(--neo-mint);
}

[data-theme="dark"] .neo-management-item {
    background: var(--neo-dark-gray);
    border-color: var(--neo-mid-slate);
}

[data-theme="dark"] .neo-management-item:hover {
    background: var(--neo-dark-slate);
    border-color: var(--neo-mint);
}

[data-theme="dark"] .neo-management-item-name {
    color: var(--neo-light);
}

[data-theme="dark"] .neo-management-item-description {
    color: #adb5bd;
}

[data-theme="dark"] .neo-quick-form {
    background: var(--neo-dark-gray);
    border-color: var(--neo-mint);
}

[data-theme="dark"] .neo-quick-form-header {
    color: var(--neo-light);
}

[data-theme="dark"] .neo-stats-badge {
    background: var(--neo-dark-slate);
    color: var(--neo-light);
    border-color: var(--neo-mid-slate);
}

[data-theme="dark"] .neo-stats-badge.primary {
    background: rgba(93, 173, 226, 0.2);
    color: var(--neo-mint);
    border-color: rgba(93, 173, 226, 0.4);
}

[data-theme="dark"] .neo-stats-badge.success {
    background: rgba(40, 167, 69, 0.2);
    color: #75b798;
    border-color: rgba(40, 167, 69, 0.4);
}

[data-theme="dark"] .neo-stats-badge.warning {
    background: rgba(255, 193, 7, 0.2);
    color: #ffd54f;
    border-color: rgba(255, 193, 7, 0.4);
}

[data-theme="dark"] .neo-stats-badge.info {
    background: rgba(23, 162, 184, 0.2);
    color: #5bc2d4;
    border-color: rgba(23, 162, 184, 0.4);
}

[data-theme="dark"] .neo-stats-badge.purple {
    background: rgba(111, 66, 193, 0.2);
    color: #bb86fc;
    border-color: rgba(111, 66, 193, 0.4);
}

[data-theme="dark"] .neo-stats-badge.secondary {
    background: rgba(108, 117, 125, 0.2);
    color: #adb5bd;
    border-color: rgba(108, 117, 125, 0.4);
}

[data-theme="dark"] .neo-empty-state {
    color: #6c757d;
}

[data-theme="dark"] .neo-empty-state i {
    color: var(--neo-mid-slate);
}

[data-theme="dark"] .neo-empty-state h6,
[data-theme="dark"] .neo-empty-state h5,
[data-theme="dark"] .neo-empty-state p {
    color: #adb5bd;
}

/* Mode sombre pour les collapses */
[data-theme="dark"] .neo-management-category-header[data-bs-toggle="collapse"] {
    background: rgba(184, 219, 217, 0.1);
    border-color: rgba(184, 219, 217, 0.2);
}

[data-theme="dark"]
    .neo-management-category-header[data-bs-toggle="collapse"]:hover {
    background: rgba(184, 219, 217, 0.15);
}

[data-theme="dark"] .neo-management-category-content {
    background: var(--neo-dark-gray);
    border-color: var(--neo-mid-slate);
}

[data-theme="dark"] .neo-management-category-header .bi-chevron-down {
    color: #b8dbda;
}

/* Mode sombre pour les avatars et tableaux */
[data-theme="dark"] .avatar {
    background: linear-gradient(135deg, #b8dbda 0%, #a8c8c7 100%);
    color: #1a1a1a;
    border-color: #495057;
}

[data-theme="dark"] .table th {
    background-color: #343a40 !important;
    color: #e9ecef !important;
    border-bottom-color: #495057;
}

[data-theme="dark"] .table td {
    border-color: #495057 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .client-icon {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3) !important;
}

[data-theme="dark"] .category-icon {
    background: linear-gradient(135deg, #20c997 0%, #198754 100%) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 15px rgba(32, 201, 151, 0.3) !important;
}

[data-theme="dark"] .user-type-icon {
    background: linear-gradient(135deg, #b8dbda 0%, #a8c8c7 100%) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 15px rgba(184, 219, 217, 0.3) !important;
}

[data-theme="dark"] .user-type-icon.client {
    background: linear-gradient(135deg, #75b798 0%, #65a085 100%) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 15px rgba(117, 183, 152, 0.3) !important;
}

/* Extensions mode sombre */
[data-theme="dark"] .neo-management-category.bordered {
    background: var(--neo-dark-gray);
    border-color: var(--neo-mid-slate);
}

[data-theme="dark"] .neo-management-category.bordered:hover {
    border-color: var(--neo-mint);
}

[data-theme="dark"] .neo-management-category-header.with-separator {
    border-bottom-color: var(--neo-mid-slate);
}

[data-theme="dark"] .neo-management-category-header.with-separator h6 {
    color: var(--neo-light);
}

[data-theme="dark"] .neo-management-category-header.with-separator small {
    color: #adb5bd;
}

[data-theme="dark"] .neo-stats-badge.info.purple {
    background: rgba(155, 89, 182, 0.2);
    color: #bb86fc;
    border-color: rgba(155, 89, 182, 0.4);
}

/* ================================
   DARK THEME SCROLLBAR SUPPORT
   ================================ */

/* Dark theme global scrollbar */
[data-theme="dark"] *:hover::-webkit-scrollbar-thumb {
    background: rgba(184, 219, 217, 0.4);
    background-clip: content-box;
}

[data-theme="dark"] *:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 219, 217, 0.7);
    background-clip: content-box;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:active {
    background: rgba(184, 219, 217, 0.9);
    background-clip: content-box;
}

/* Dark theme body scrollbar */
[data-theme="dark"] html:hover::-webkit-scrollbar-thumb,
[data-theme="dark"] body:hover::-webkit-scrollbar-thumb {
    background: rgba(184, 219, 217, 0.5);
    background-clip: content-box;
    box-shadow: 0 0 10px rgba(184, 219, 217, 0.3);
}

[data-theme="dark"] html::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] body::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 219, 217, 0.8);
    background-clip: content-box;
    box-shadow: 0 0 15px rgba(184, 219, 217, 0.5);
    transform: scaleX(1.2);
}

/* Dark theme container scrollbar */
[data-theme="dark"] .neo-scrollbar-container:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(
        45deg,
        rgba(184, 219, 217, 0.6),
        rgba(168, 200, 199, 0.6)
    );
    box-shadow: 0 0 10px rgba(184, 219, 217, 0.3);
}

[data-theme="dark"] .neo-scrollbar-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        45deg,
        rgba(184, 219, 217, 0.9),
        rgba(168, 200, 199, 0.9)
    );
    box-shadow: 0 0 15px rgba(184, 219, 217, 0.5);
    transform: scaleX(1.3);
}

/* Dark theme sidebar scrollbar */
[data-theme="dark"] .neo-sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(184, 219, 217, 0.4);
    box-shadow: 0 0 8px rgba(184, 219, 217, 0.3);
}

[data-theme="dark"] .neo-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 219, 217, 0.7);
    box-shadow: 0 0 12px rgba(184, 219, 217, 0.5);
}

/* Dark theme navigation scrollbar */
[data-theme="dark"] .neo-sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(184, 219, 217, 0.3);
}

[data-theme="dark"] .neo-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 219, 217, 0.6);
}

/* Dark theme management category scrollbar */
[data-theme="dark"]
    .neo-management-category.scrollable:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(
        45deg,
        rgba(184, 219, 217, 0.5),
        rgba(168, 200, 199, 0.5)
    );
    box-shadow: 0 0 8px rgba(184, 219, 217, 0.3);
}

[data-theme="dark"]
    .neo-management-category.scrollable::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        45deg,
        rgba(184, 219, 217, 0.8),
        rgba(168, 200, 199, 0.8)
    );
    box-shadow: 0 0 12px rgba(184, 219, 217, 0.5);
    transform: scaleX(1.2);
}

/* Dark theme glowing effect */
[data-theme="dark"] @keyframes scrollbar-glow {
    0% {
        box-shadow: 0 0 5px rgba(184, 219, 217, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(184, 219, 217, 0.6);
    }
    100% {
        box-shadow: 0 0 5px rgba(184, 219, 217, 0.3);
    }
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:active {
    animation: scrollbar-glow 0.5s ease-in-out;
}

/* Dark theme Firefox scrollbar */
[data-theme="dark"] * {
    scrollbar-color: transparent transparent;
}

[data-theme="dark"] *:hover {
    scrollbar-color: rgba(184, 219, 217, 0.4) transparent;
}

/* Pulsing effect for active scrollbars in dark mode */
@keyframes dark-scrollbar-pulse {
    0% {
        background: rgba(184, 219, 217, 0.3);
        box-shadow: 0 0 5px rgba(184, 219, 217, 0.2);
    }
    50% {
        background: rgba(184, 219, 217, 0.6);
        box-shadow: 0 0 15px rgba(184, 219, 217, 0.4);
    }
    100% {
        background: rgba(184, 219, 217, 0.3);
        box-shadow: 0 0 5px rgba(184, 219, 217, 0.2);
    }
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:active {
    animation: dark-scrollbar-pulse 0.8s ease-in-out infinite;
}

/* Mode sombre pour les éléments de permissions */
[data-theme="dark"] .user-type-icon.permission {
    background: linear-gradient(135deg, #75b798 0%, #65a085 100%) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 15px rgba(117, 183, 152, 0.3) !important;
}

[data-theme="dark"] .neo-form-label {
    color: var(--neo-light);
}

[data-theme="dark"] .neo-management-item.selected {
    background: rgba(93, 173, 226, 0.2) !important;
    border-color: var(--neo-mint) !important;
}

[data-theme="dark"] .neo-card-header .form-select {
    color: var(--neo-light);
}

[data-theme="dark"] .neo-card-header .form-select:focus {
    background-color: var(--neo-dark-slate);
    border-color: var(--neo-mint);
}

/* ================================
   SIDEBAR STYLES
   ================================ */

/* Sidebar Container */
.neo-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    z-index: 1020;
    background: var(--neo-card-bg);
    border-right: 1px solid var(--neo-border);
    transform: translateX(0);
    transition: var(--neo-transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

.neo-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Sidebar Toggle Button */
.neo-sidebar-toggle {
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: var(--neo-card-bg);
    border: 1px solid var(--neo-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--neo-transition-fast);
    color: var(--neo-text-muted);
    z-index: 1021;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.neo-sidebar-toggle:hover {
    background: var(--neo-mint);
    color: var(--neo-white);
    transform: translateY(-50%) scale(1.1);
}

.neo-sidebar.collapsed .neo-sidebar-toggle i {
    transform: rotate(180deg);
}

/* Sidebar Header */
.neo-sidebar-header {
    padding: 0.75rem;
    border-bottom: 1px solid var(--neo-border);
    flex-shrink: 0;
}

/* Logo dans la sidebar */
.neo-header-logo {
    cursor: pointer;
}

.neo-logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: linear-gradient(
        135deg,
        var(--neo-light) 0%,
        var(--neo-white) 100%
    );
    border-radius: 12px;
    border: 1px solid var(--neo-border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.neo-logo-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(93, 173, 226, 0.1),
        transparent
    );
    transition: left 0.6s ease;
}

.neo-logo-container:hover::before {
    left: 100%;
}

.neo-logo-container:hover {
    box-shadow: 0 8px 25px rgba(93, 173, 226, 0.15);
    border-color: rgba(93, 173, 226, 0.3);
}

.neo-logo-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--neo-mint) 0%, #4a90e2 100%);
    color: var(--neo-white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(93, 173, 226, 0.3);
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.neo-logo-container:hover .neo-logo-icon {
    box-shadow: 0 6px 16px rgba(93, 173, 226, 0.4);
}

.neo-logo-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.neo-logo-brand {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--neo-text);
    line-height: 1.1;
    background: linear-gradient(
        135deg,
        var(--neo-dark-slate) 0%,
        var(--neo-mint) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.neo-logo-subtitle {
    font-size: 0.7rem;
    color: var(--neo-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

/* Sidebar Navigation */
.neo-sidebar-nav {
    flex: 1;
    padding: 0rem 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.neo-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.neo-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.neo-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--neo-border);
    border-radius: 2px;
}

.neo-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: var(--neo-text-muted);
}

.nav-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 1.5rem 0.5rem 1.5rem;
    margin-bottom: 0.5rem;
}

/* Navigation Links */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: var(--neo-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: var(--neo-transition-fast);
    position: relative;
    border: none;
    background: none;
}

.nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--neo-mint);
    transform: scaleY(0);
    transition: var(--neo-transition-fast);
}

.nav-link:hover {
    background: var(--neo-light-bg);
    color: var(--neo-mint);
    text-decoration: none;
}

.nav-link.active {
    background: linear-gradient(
        90deg,
        rgba(93, 173, 226, 0.1) 0%,
        transparent 100%
    );
    color: var(--neo-mint);
}

.nav-link.active::before {
    transform: scaleY(1);
}

.nav-link i {
    font-size: 1.125rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.nav-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Navigation Badges */
.nav-badge {
    background: var(--neo-mint);
    color: var(--neo-white);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-link:hover .nav-badge {
    background: var(--neo-white);
    color: var(--neo-mint);
}

/* Sidebar Footer */
.neo-sidebar-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--neo-border);
    flex-shrink: 0;
}

.neo-user-info-sidebar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: var(--neo-transition-fast);
}

.neo-user-info-sidebar:hover {
    background: var(--neo-light-bg);
}

.neo-user-avatar-small {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--neo-mint) 0%, #4a90e2 100%);
    color: var(--neo-white);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    flex-shrink: 0;
}

.neo-user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.neo-user-name-small {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--neo-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-user-role-small {
    font-size: 0.7rem;
    color: var(--neo-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar Collapsed State */
.neo-sidebar.collapsed .neo-logo-text,
.neo-sidebar.collapsed .nav-text,
.neo-sidebar.collapsed .nav-badge,
.neo-sidebar.collapsed .nav-section-title,
.neo-sidebar.collapsed .neo-user-details,
.neo-sidebar.collapsed .neo-header-logo {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

.neo-sidebar.collapsed .neo-sidebar-header {
    padding: 0.75rem;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neo-sidebar.collapsed .neo-logo-container {
    padding: 0.5rem;
    gap: 0;
    justify-content: center;
    width: 0;
    height: 0;
    min-height: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.neo-sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 0.75rem;
    gap: 0;
}

.neo-sidebar.collapsed .nav-link i {
    margin: 0;
    width: auto;
}

.neo-sidebar.collapsed .neo-user-info-sidebar {
    justify-content: center;
    gap: 0;
}

/* Transitions pour le collapse */
.neo-sidebar .neo-logo-text,
.neo-sidebar .nav-text,
.neo-sidebar .nav-badge,
.neo-sidebar .neo-user-details,
.neo-sidebar .neo-header-logo {
    transition: all 0.3s ease;
}

.neo-sidebar .neo-sidebar-header {
    transition: all 0.3s ease;
}

.neo-sidebar .neo-logo-container {
    transition: all 0.3s ease;
}

.neo-sidebar .nav-link {
    transition: all 0.3s ease, background-color 0.2s ease;
}

.neo-sidebar .nav-link i {
    transition: all 0.3s ease;
}

/* Mobile Sidebar Overlay */
.neo-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1019;
    opacity: 0;
    visibility: hidden;
    transition: var(--neo-transition-fast);
}

.neo-sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Mobile Responsive */
@media (max-width: 991.98px) {
    .neo-sidebar {
        transform: translateX(-100%);
        z-index: 1021;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    }

    .neo-sidebar.show {
        transform: translateX(0);
    }

    .neo-sidebar-toggle {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .neo-sidebar-header {
        padding: 1rem;
    }

    .neo-logo-text {
        display: none !important;
    }

    .neo-logo-container {
        padding: 0.5rem;
        gap: 0;
        justify-content: center;
    }

    .neo-logo-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* Dark Theme Support pour la Sidebar */
[data-theme="dark"] .neo-logo-container {
    background: linear-gradient(135deg, #343a40 0%, #2d2d2d 100%);
    border-color: #495057;
}

[data-theme="dark"] .neo-logo-container:hover {
    border-color: rgba(184, 219, 217, 0.3);
    box-shadow: 0 8px 25px rgba(184, 219, 217, 0.15);
}

[data-theme="dark"] .neo-logo-brand {
    background: linear-gradient(135deg, #e9ecef 0%, #b8dbda 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .neo-logo-subtitle {
    color: #adb5bd;
}

/* ===== CLASSES CSS POUR LE PANNEAU DE LOGS AMÉLIORÉ ===== */

/* Informations utilisateur */
.neo-user-info-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.neo-user-avatar {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 3px 6px rgba(0,123,255,0.3);
}

.neo-user-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.neo-user-email {
    color: #6c757d;
    font-size: 0.9rem;
}

.neo-user-status {
    margin-left: auto;
}

/* Filtres */
.neo-filters-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.neo-form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    display: block;
}

/* Cards de statistiques */
.neo-stats-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    align-items: center;
}

.neo-stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.neo-stats-primary {
    border-left: 4px solid #007bff;
}

.neo-stats-success {
    border-left: 4px solid #28a745;
}

.neo-stats-danger {
    border-left: 4px solid #dc3545;
}

.neo-stats-info {
    border-left: 4px solid #17a2b8;
}

.neo-stats-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.25rem;
}

.neo-stats-primary .neo-stats-icon {
    background: rgba(0,123,255,0.1);
    color: #007bff;
}

.neo-stats-success .neo-stats-icon {
    background: rgba(40,167,69,0.1);
    color: #28a745;
}

.neo-stats-danger .neo-stats-icon {
    background: rgba(220,53,69,0.1);
    color: #dc3545;
}

.neo-stats-info .neo-stats-icon {
    background: rgba(23,162,184,0.1);
    color: #17a2b8;
}

.neo-stats-content {
    flex: 1;
}

.neo-stats-number {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #2c3e50;
}

.neo-stats-label {
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Liste des logs simplifiée */
.neo-logs-container {
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #007bff transparent;
}

.neo-logs-container::-webkit-scrollbar {
    width: 6px;
}

.neo-logs-container::-webkit-scrollbar-track {
    background: transparent;
}

.neo-logs-container::-webkit-scrollbar-thumb {
    background: #007bff;
    border-radius: 3px;
}

.neo-log-item {
    margin-bottom: 0.75rem;
}

.neo-log-content {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.neo-log-content:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.neo-log-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f8f9fa;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.neo-log-header:hover {
    background-color: #f8f9fa;
}

.neo-log-main-info {
    flex: 1;
}

.neo-log-action {
    margin-bottom: 0.25rem;
}

.neo-log-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 0.5rem;
}

.neo-log-badge-secondary {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.neo-log-entity {
    color: #6c757d;
    font-size: 0.8rem;
    font-weight: 500;
}

.neo-log-time {
    color: #6c757d;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
}

.neo-log-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.neo-log-status-success {
    color: #28a745;
    font-size: 1rem;
}

.neo-log-status-error {
    color: #dc3545;
    font-size: 1rem;
}

.neo-log-expand-icon {
    color: #6c757d;
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.neo-log-header[aria-expanded="true"] .neo-log-expand-icon {
    transform: rotate(180deg);
}

.neo-log-details {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0 0 8px 8px;
}

.neo-log-detail-item {
    margin-bottom: 0.75rem;
}

.neo-log-detail-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.neo-log-detail-value {
    font-size: 0.85rem;
    color: #495057;
    font-weight: 500;
}

.neo-log-user-type {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #dee2e6;
    font-size: 0.85rem;
    color: #6c757d;
}

/* Pagination */
.neo-pagination-container {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.neo-pagination-info {
    color: #6c757d;
    font-size: 0.9rem;
}

.neo-pagination-links .pagination {
    margin-bottom: 0;
}

/* Charts */
.neo-chart-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden;
}

.neo-chart-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

.neo-chart-title {
    margin: 0;
    font-weight: 600;
    color: #2c3e50;
    font-size: 1rem;
}

.neo-chart-content {
    padding: 1.25rem;
}

/* Action stats */
.neo-action-stat {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.neo-action-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.neo-action-stat-header {
    margin-bottom: 0.75rem;
}

.neo-action-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.neo-action-stat-percentage {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
}

/* Activity chart */
.neo-activity-chart {
    display: flex;
    align-items: end;
    gap: 0.5rem;
    padding: 1rem 0;
    min-height: 120px;
}

.neo-activity-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.neo-activity-bar {
    width: 100%;
    height: 80px;
    background: #f8f9fa;
    border-radius: 4px 4px 0 0;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
}

.neo-activity-success {
    background: linear-gradient(to top, #28a745, #20c997);
    transition: height 0.3s ease;
}

.neo-activity-failed {
    background: linear-gradient(to top, #dc3545, #fd7e14);
    transition: height 0.3s ease;
}

.neo-activity-label {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 500;
}

.neo-activity-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
}

/* Browser/OS stats */
.neo-browser-stat {
    margin-bottom: 1rem;
}

.neo-browser-info {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #495057;
}

.neo-browser-count {
    margin-left: auto;
}

.neo-browser-progress {
    display: flex;
    height: 6px;
    background: var(--neo-light-bg);
    border-radius:5px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.neo-browser-progress-bar {
    height: 100%;
    border-radius:5px;
    transition: width 0.5s ease;
    background:var(--neo-mint);
}

.neo-browser-progress-bar.bg-success {
    background: var(--neo-success);
}

.neo-browser-progress-bar.bg-danger {
    background: var(--neo-danger);
}

.neo-browser-progress-bar.bg-warning {
    background: var(--neo-warning);
}

/* Hourly chart */
.neo-hourly-chart {
    display: flex;
    align-items: end;
    gap: 0.25rem;
    padding: 1rem 0;
    min-height: 100px;
}

.neo-hourly-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.neo-hourly-bar {
    width: 100%;
    height: 60px;
    background: #f8f9fa;
    border-radius: 3px 3px 0 0;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
}

.neo-hourly-fill {
    background: linear-gradient(to top, #007bff, #17a2b8);
    transition: height 0.3s ease;
    border-radius: 3px 3px 0 0;
}

.neo-hourly-label {
    font-size: 0.65rem;
    color: #6c757d;
    font-weight: 500;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* États vides */
.neo-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.neo-empty-icon {
    font-size: 3rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.neo-empty-title {
    color: #495057;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.neo-empty-description {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .neo-user-info-card {
        padding: 1rem;
    }

    .neo-user-avatar {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .neo-stats-card {
        padding: 1rem;
    }

    .neo-stats-number {
        font-size: 1.5rem;
    }

    .neo-log-header {
        padding: 0.5rem 0.75rem;
    }

    .neo-log-details {
        padding: 0.75rem;
    }

    .neo-activity-chart {
        gap: 0.25rem;
    }

    .neo-hourly-chart {
        gap: 0.125rem;
    }
}

.neo-action-btn.notification-custom {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

.neo-action-btn.notification-custom:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ===================================================================
   NOTIFICATION CENTER STYLES
   =================================================================== */

/* Container principal */
.neo-notification-center {
    position: relative;
    z-index: 100020;
}

/* Dropdown des notifications */
.neo-notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 100030;
    width: 420px;
    max-height: 600px;
    background: var(--neo-card-bg);
    border: 1px solid var(--neo-border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    overflow: hidden;
}

/* Header du dropdown */
.neo-notification-header {
    padding: 1rem 1.25rem;
    background: var(--neo-light-bg);
    border-bottom: 1px solid var(--neo-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Liste des notifications */
.neo-notification-list {
    max-height: 480px;
    overflow-y: auto;
}

/* Scrollbar personnalisée pour la liste */
.neo-notification-list::-webkit-scrollbar {
    width: 6px;
}

.neo-notification-list::-webkit-scrollbar-track {
    background: var(--neo-light-bg);
}

.neo-notification-list::-webkit-scrollbar-thumb {
    background: var(--neo-border);
    border-radius: 3px;
}

.neo-notification-list::-webkit-scrollbar-thumb:hover {
    background: var(--neo-text-muted);
}

/* Item de notification */
.neo-notification-item {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--neo-border);
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    position: relative;
    transition: var(--neo-transition-fast);
    background: var(--neo-light-bg);

}

.neo-notification-item:hover {
    background: var(--neo-light-bg);
}

.neo-notification-item.unread {
    background: var(--neo-light-bg);
    border-left: 4px solid var(--neo-mint);
    z-index: 1000;
}

.neo-notification-item:last-child {
    border-bottom: none;
}

/* Indicateur de notification non lue */
.neo-notification-indicator {
    width: 8px;
    height: 8px;
    background: var(--neo-mint);
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

/* Contenu de la notification */
.neo-notification-content {
    flex: 1;
    min-width: 0;
}

.neo-notification-title {
    font-weight: 600;
    color: var(--neo-text);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.neo-notification-text {
    color: var(--neo-text);
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
}

.neo-notification-footer {
    color: var(--neo-text-muted);
    font-size: 0.75rem;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.neo-notification-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--neo-text-muted);
    font-size: 0.75rem;
    flex-wrap: wrap;
}

.neo-notification-sender {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Actions de notification */
.neo-notification-actions {
    flex-shrink: 0;
}

/* Bouton "Charger plus" */
.neo-notification-load-more {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--neo-border);
}

/* État vide */
.neo-notification-empty {
    padding: 2rem 1.25rem;
    background: var(--neo-light-bg);

}
/* Animation du badge */
@keyframes pulse-badge {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .neo-notification-dropdown {
        width: 380px;
    }
}

/* Responsive - Mobile */
@media (max-width: 575.98px) {
    .neo-notification-dropdown {
        width: calc(100vw - 2rem);
        right: -200px;
        max-width: 380px;
    }

    .neo-notification-item {
        padding: 0.75rem 1rem;
    }

    .neo-notification-header {
        padding: 0.75rem 1rem;
    }

    .neo-notification-time {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* Responsive - Très petit mobile */
@media (max-width: 430px) {
    .neo-notification-dropdown {
        right: -180px;
        width: calc(100vw - 1.5rem);
    }
}

/* États de hover pour les boutons */
.neo-notification-header .btn:hover {
    transform: translateY(-1px);
}

.neo-notification-actions .btn:hover {
    transform: scale(1.05);
}

/* Animation d'entrée pour les nouvelles notifications */
@keyframes notification-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.neo-notification-item.new {
    animation: notification-slide-in 0.3s ease-out;
}

/* Focus states pour l'accessibilité */
.neo-notification-content:focus {
    outline: 2px solid var(--neo-mint);
    outline-offset: 2px;
    border-radius: 4px;
}

.neo-notification-header .btn:focus,
.neo-notification-actions .btn:focus {
    box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.3);
}

/* Dark mode support (si vous l'utilisez) */
@media (prefers-color-scheme: dark) {
    .neo-notification-dropdown {
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }
}

/* ========================================
   EMAIL MANAGER STYLES
   ======================================== */

/* Variables CSS pour la cohérence */
:root {
    --email-primary: #3b82f6;
    --email-primary-dark: #2563eb;
    --email-secondary: #6b7280;
    --email-success: #10b981;
    --email-warning: #f59e0b;
    --email-error: #ef4444;
    --email-bg-main: #f9fafb;
    --email-bg-card: #ffffff;
    --email-border: #e5e7eb;
    --email-border-light: #f3f4f6;
    --email-text-primary: #111827;
    --email-text-secondary: #6b7280;
    --email-text-muted: #9ca3af;
    --email-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --email-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --email-transition: all 0.2s ease-in-out;
}

/* ========================================
   DASHBOARD PRINCIPAL
   ======================================== */

.email-dashboard {
    display: flex;
    min-height: 100vh;
    background-color: var(--email-bg-main);
    position: relative;
}

/* ========================================
   SIDEBAR EMAIL
   ======================================== */

.email-sidebar {
    background: var(--email-bg-card);
    box-shadow: var(--email-shadow-lg);
    transition: var(--email-transition);
    width: 320px;
    display: flex;
    flex-direction: column;
}

.email-sidebar.collapsed {
    width: 64px;
}

/* Header Sidebar */
.sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--email-border);
}

.sidebar-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-title {
    display: flex;
    align-items: center;
}

.sidebar-title h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--email-text-primary);
    margin: 0;
}

.status-indicator {
    margin-left: 0.75rem;
    display: flex;
    align-items: center;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.25rem;
}

.status-dot.syncing {
    background-color: var(--email-primary);
    animation: pulse 2s infinite;
}

.status-dot.success {
    background-color: var(--email-success);
}

.status-dot.error {
    background-color: var(--email-error);
}

.status-dot.paused {
    background-color: var(--email-warning);
}

.status-dot.auto {
    background-color: var(--email-secondary);
    animation: pulse 2s infinite;
}

.status-text {
    font-size: 0.75rem;
}

.status-text.syncing { color: var(--email-primary); }
.status-text.success { color: var(--email-success); }
.status-text.error { color: var(--email-error); }
.status-text.paused { color: var(--email-warning); }
.status-text.auto { color: var(--email-secondary); }

.sidebar-toggle {
    padding: 0.5rem;
    border: none;
    background: none;
    border-radius: 0.5rem;
    color: var(--email-text-secondary);
    cursor: pointer;
    transition: var(--email-transition);
}

.sidebar-toggle:hover {
    background-color: var(--email-border-light);
}

/* Comptes Section */
.accounts-section {
    padding: 1rem;
    border-bottom: 1px solid var(--email-border);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.section-header h2 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--email-text-secondary);
    text-transform: uppercase;
    margin: 0;
}

.add-account-btn {
    border: none;
    background: none;
    color: var(--email-primary);
    cursor: pointer;
    transition: var(--email-transition);
}

.add-account-btn:hover {
    color: var(--email-primary-dark);
}

.accounts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--email-transition);
}

.account-item:hover {
    background-color: var(--email-border-light);
}

.account-item.active {
    background-color: rgb(219 234 254);
    border-left: 4px solid var(--email-primary);
}

.account-avatar {
    width: 32px;
    height: 32px;
    background-color: var(--email-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.account-info {
    margin-left: 0.75rem;
    flex: 1;
    min-width: 0;
}

.account-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--email-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-email {
    font-size: 0.75rem;
    color: var(--email-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-status {
    flex-shrink: 0;
}

.sync-icon {
    color: var(--email-primary);
    animation: spin 1s linear infinite;
}

/* Dossiers Section */
.folders-section {
    padding: 1rem;
    flex: 1;
}

.section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--email-text-secondary);
    text-transform: uppercase;
    margin: 0 0 0.75rem 0;
}

.folders-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.folder-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--email-transition);
    color: var(--email-text-secondary);
}

.folder-item:hover {
    background-color: var(--email-border-light);
}

.folder-item.active {
    background-color: rgb(219 234 254);
    color: var(--email-primary);
}

.folder-item i {
    margin-right: 0.75rem;
    width: 16px;
}

.folder-name {
    flex: 1;
}

.unread-badge {
    background-color: var(--email-primary);
    color: white;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
}

/* Actions Section */
.actions-section {
    padding: 1rem;
    border-top: 1px solid var(--email-border);
}

.compose-btn {
    width: 100%;
    background-color: var(--email-primary);
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--email-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.compose-btn:hover {
    background-color: var(--email-primary-dark);
}

.sync-info {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--email-text-muted);
    text-align: center;
}

/* ========================================
   CONTENU PRINCIPAL
   ======================================== */

.email-main-content {
    flex: 1;
    display: flex;
    min-height: 100vh;
}

.email-list-section {
    transition: var(--email-transition);
    display: flex;
    flex-direction: column;
}

.email-list-section.full-view {
    width: 100%;
}

.email-list-section.split-view {
    width: 50%;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--email-text-muted);
    background: var(--email-bg-card);
    box-shadow: var(--email-shadow);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--email-border);
}

.empty-state h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--email-text-secondary);
    margin: 0 0 0.5rem 0;
}

.empty-state p {
    font-size: 0.875rem;
    margin: 0;
}

/* ========================================
   LISTE DES EMAILS
   ======================================== */

.email-list-container {
    display: flex;
    flex-direction: column;
    background: var(--email-bg-card);
    box-shadow: var(--email-shadow);
    transition: var(--email-transition);
    height: 100vh;
    overflow: hidden;
}

.shimmer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: var(--email-bg-card);
}

/* Header Liste */
.list-header {
    background: var(--email-bg-card);
    border-bottom: 1px solid var(--email-border);
    padding: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.folder-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--email-text-primary);
    margin: 0;
}

.folder-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--email-text-muted);
}

.unread-count {
    background-color: rgb(219 234 254);
    color: var(--email-primary);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.per-page-select,
.filter-select {
    font-size: 0.875rem;
    border: 1px solid var(--email-border);
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--email-bg-card);
    color: var(--email-text-primary);
}

.filter-btn {
    padding: 0.5rem;
    border: none;
    background: none;
    border-radius: 0.5rem;
    color: var(--email-text-secondary);
    cursor: pointer;
    transition: var(--email-transition);
}

.filter-btn:hover {
    background-color: var(--email-border-light);
}

.filter-btn.active {
    color: var(--email-warning);
}

.sync-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sync-dot.syncing {
    background-color: var(--email-primary);
    animation: pulse 2s infinite;
}

.sync-dot.paused {
    background-color: var(--email-warning);
}

.sync-dot.auto {
    background-color: var(--email-success);
}

.sync-text {
    font-size: 0.75rem;
}

.sync-text.syncing { color: var(--email-primary); }
.sync-text.paused { color: var(--email-warning); }
.sync-text.auto { color: var(--email-success); }

.close-panel-btn {
    padding: 0.5rem;
    border: none;
    background: none;
    border-radius: 0.5rem;
    color: var(--email-text-secondary);
    cursor: pointer;
    transition: var(--email-transition);
}

.close-panel-btn:hover {
    background-color: var(--email-border-light);
}

/* Barre de recherche */
.search-section {
    padding: 1rem;
    border-bottom: 1px solid var(--email-border);
}

.search-wrapper {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--email-text-secondary);
}

.search-input {
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 2.5rem;
    border: 1px solid var(--email-border);
    border-radius: 0.5rem;
    background: var(--email-bg-card);
    color: var(--email-text-primary);
    transition: var(--email-transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--email-primary);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

/* Conteneur des emails */
.emails-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.emails-list {
    flex: 1;
    overflow-y: auto;
}

.email-item {
    border-bottom: 1px solid var(--email-border-light);
    padding: 1rem;
    cursor: pointer;
    transition: var(--email-transition);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.email-item:hover {
    background-color: var(--email-border-light);
}

.email-item.selected {
    background-color: rgb(219 234 254);
    border-left: 4px solid var(--email-primary);
}

.email-item.unread {
    background-color: rgb(239 246 255);
}

.email-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--email-primary), #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.email-content {
    flex: 1;
    min-width: 0;
}

.email-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.sender-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--email-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--email-text-muted);
}

.priority-high {
    color: var(--email-error);
}

.email-date {
    white-space: nowrap;
}

.email-subject {
    font-size: 0.875rem;
    color: var(--email-text-primary);
    margin: 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-subject.unread {
    font-weight: 600;
}

.email-preview {
    font-size: 0.875rem;
    color: var(--email-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-indicators {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

.flagged {
    color: var(--email-warning);
}

.unread-indicator {
    width: 12px;
    height: 12px;
    background-color: var(--email-primary);
    border-radius: 50%;
}

/* État vide des emails */
.empty-emails-state {
    padding: 2rem;
    text-align: center;
    color: var(--email-text-muted);
}

.empty-emails-state .empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--email-border);
}

.empty-emails-state .empty-icon.syncing {
    color: var(--email-primary);
    animation: spin 2s linear infinite;
}

.empty-emails-state .empty-icon.paused {
    color: var(--email-warning);
}

.empty-emails-state h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--email-text-secondary);
    margin: 0 0 0.5rem 0;
}

.empty-emails-state p {
    font-size: 0.875rem;
    margin: 0;
}

/* Pagination */
.pagination-section {
    border-top: 1px solid var(--email-border);
    padding: 1rem;
    background: var(--email-bg-card);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--email-text-secondary);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-btn {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--email-border);
    border-radius: 0.5rem;
    background: var(--email-bg-card);
    color: var(--email-text-secondary);
    cursor: pointer;
    transition: var(--email-transition);
    font-size: 0.875rem;
}

.pagination-btn:hover:not(.disabled) {
    background-color: var(--email-border-light);
}

.pagination-btn.disabled {
    color: var(--email-text-muted);
    cursor: not-allowed;
}

.pagination-current {
    font-size: 0.875rem;
    color: var(--email-text-secondary);
    padding: 0 0.5rem;
}

/* ========================================
   PANNEAU DE LECTURE
   ======================================== */

.email-reader-panel {
    width: 50%;
    background: var(--email-bg-card);
    box-shadow: var(--email-shadow);
    border-left: 1px solid var(--email-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Header du panneau */
.reader-header {
    border-bottom: 1px solid var(--email-border);
    padding: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reader-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reader-title h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--email-text-primary);
    margin: 0;
}

.unread-label {
    background-color: rgb(219 234 254);
    color: var(--email-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.reader-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-btn {
    padding: 0.5rem;
    border: none;
    background: none;
    border-radius: 0.5rem;
    color: var(--email-text-secondary);
    cursor: pointer;
    transition: var(--email-transition);
}

.action-btn:hover {
    background-color: var(--email-border-light);
}

.action-btn.flagged {
    color: var(--email-warning);
}

.action-btn.delete {
    color: var(--email-error);
}

/* Contenu du panneau */
.reader-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.email-headers {
    margin-bottom: 1.5rem;
}

.email-subject {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--email-text-primary);
    margin: 0 0 0.75rem 0;
}

.email-meta {
    background-color: var(--email-border-light);
    border-radius: 0.5rem;
    padding: 1rem;
}

.meta-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.meta-row:last-child {
    margin-bottom: 0;
}

.meta-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--email-text-secondary);
    width: 4rem;
    flex-shrink: 0;
}

.meta-value {
    font-size: 0.875rem;
    color: var(--email-text-primary);
}

.sender-name {
    font-weight: 500;
}

.sender-email {
    color: var(--email-text-secondary);
}

.priority-high {
    background-color: rgb(254 226 226);
    color: var(--email-error);
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Pièces jointes */
.attachments-section {
    margin-bottom: 1.5rem;
}

.attachments-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--email-text-secondary);
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.attachments-list {
    background-color: var(--email-border-light);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--email-bg-card);
    border-radius: 0.375rem;
    border: 1px solid var(--email-border);
    transition: var(--email-transition);
    margin-bottom: 0.5rem;
}

.attachment-item:last-child {
    margin-bottom: 0;
}

.attachment-item:hover {
    box-shadow: var(--email-shadow);
}

.attachment-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.attachment-info i {
    color: var(--email-text-muted);
    font-size: 1.125rem;
}

.attachment-details {
    display: flex;
    flex-direction: column;
}

.attachment-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.attachment-meta {
    font-size: 0.75rem;
    color: var(--email-text-muted);
    margin: 0;
}

.download-btn {
    padding: 0.5rem;
    border: none;
    background: none;
    border-radius: 0.375rem;
    color: var(--email-text-muted);
    cursor: pointer;
    transition: var(--email-transition);
}

.download-btn:hover {
    background-color: var(--email-border-light);
}

/* Corps de l'email */
.email-body {
    max-width: none;
}

.email-html-content,
.email-text-content {
    background: var(--email-bg-card);
    border-radius: 0.5rem;
    border: 1px solid var(--email-border);
    padding: 1rem;
}

.email-text-content pre {
    white-space: pre-wrap;
    font-size: 0.875rem;
    color: var(--email-text-primary);
    font-family: inherit;
    margin: 0;
}

.email-empty-content {
    background-color: var(--email-border-light);
    border-radius: 0.5rem;
    border: 1px solid var(--email-border);
    padding: 1rem;
    text-align: center;
    color: var(--email-text-muted);
}

.email-empty-content i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.email-empty-content p {
    font-size: 0.875rem;
    margin: 0;
}

/* ========================================
   MODALS
   ======================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 1rem;
}

.modal-container {
    background: var(--email-bg-card);
    border-radius: 0.5rem;
    box-shadow: var(--email-shadow-lg);
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-container.large {
    max-width: 64rem;
    height: 85vh;
}

.modal-container.medium {
    max-width: 28rem;
}

/* ========================================
   COMPOSEUR D'EMAIL
   ======================================== */

.email-composer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header du composeur */
.composer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--email-border);
    background-color: var(--email-border-light);
}

.composer-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--email-text-primary);
    margin: 0;
}

.composer-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.editor-mode-toggle {
    display: flex;
    background: var(--email-bg-card);
    border-radius: 0.5rem;
    border: 1px solid var(--email-border);
    overflow: hidden;
}

.mode-btn {
    padding: 0.25rem 0.75rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--email-transition);
    color: var(--email-text-secondary);
}

.mode-btn.active {
    background-color: var(--email-primary);
    color: white;
}

.close-btn {
    padding: 0.5rem;
    border: none;
    background: none;
    border-radius: 0.5rem;
    color: var(--email-text-secondary);
    cursor: pointer;
    transition: var(--email-transition);
}

.close-btn:hover {
    background-color: var(--email-border);
}

/* Formulaire du composeur */
.composer-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.composer-content {
    flex: 1;
    overflow-y: auto;
}

.composer-fields {
    padding: 1rem;
    border-bottom: 1px solid var(--email-border);
}

.field-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.field-row:last-child {
    margin-bottom: 0;
}

.sender-field {
    font-size: 0.875rem;
    color: var(--email-text-secondary);
}

.field-label {
    width: 4rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--email-text-secondary);
    flex-shrink: 0;
}

.sender-info {
    flex: 1;
}

.field-input-wrapper {
    flex: 1;
}

.field-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--email-border);
    border-radius: 0.5rem;
    background: var(--email-bg-card);
    color: var(--email-text-primary);
    transition: var(--email-transition);
}

.field-input:focus {
    outline: none;
    border-color: var(--email-primary);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.field-input.error {
    border-color: var(--email-error);
}

.field-error {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--email-error);
    margin-bottom: 0;
}

.field-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

.field-toggle {
    border: none;
    background: none;
    font-size: 0.875rem;
    color: var(--email-text-muted);
    cursor: pointer;
    transition: var(--email-transition);
}

.field-toggle:hover,
.field-toggle.active {
    color: var(--email-primary);
}

.field-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--email-border);
    border-radius: 0.5rem;
    background: var(--email-bg-card);
    color: var(--email-text-primary);
    transition: var(--email-transition);
}

.field-select:focus {
    outline: none;
    border-color: var(--email-primary);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

/* Pièces jointes dans le composeur */
.attachments-section {
    padding: 1rem;
    border-bottom: 1px solid var(--email-border);
    background-color: var(--email-border-light);
}

.attachments-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--email-text-secondary);
    margin: 0 0 0.5rem 0;
}

.attachments-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background: var(--email-bg-card);
    border-radius: 0.375rem;
    border: 1px solid var(--email-border);
}

.attachment-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.attachment-info i {
    color: var(--email-text-muted);
}

.attachment-name {
    font-size: 0.875rem;
    color: var(--email-text-primary);
}

.attachment-size {
    font-size: 0.75rem;
    color: var(--email-text-muted);
    margin-left: 0.5rem;
}

.remove-attachment-btn {
    border: none;
    background: none;
    color: var(--email-error);
    cursor: pointer;
    transition: var(--email-transition);
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.remove-attachment-btn:hover {
    background-color: rgb(254 226 226);
}

/* Corps du message */
.message-body-section {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.body-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--email-text-secondary);
    margin-bottom: 0.5rem;
}

.html-editor-wrapper {
    height: 16rem;
    display: flex;
    flex-direction: column;
}

.html-editor {
    border: 1px solid var(--email-border);
    border-radius: 0.5rem;
    height: 200px;
}

.hidden-textarea {
    display: none;
}

.text-editor-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.text-editor {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--email-border);
    border-radius: 0.5rem;
    background: var(--email-bg-card);
    color: var(--email-text-primary);
    resize: none;
    flex: 1;
    min-height: 12rem;
    transition: var(--email-transition);
}

.text-editor:focus {
    outline: none;
    border-color: var(--email-primary);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.text-editor.error {
    border-color: var(--email-error);
}

/* Footer du composeur */
.composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid var(--email-border);
    background-color: var(--email-border-light);
    flex-shrink: 0;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.file-upload-wrapper {
    position: relative;
}

.file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--email-border);
    border-radius: 0.5rem;
    background: var(--email-bg-card);
    color: var(--email-text-secondary);
    cursor: pointer;
    transition: var(--email-transition);
    font-size: 0.875rem;
}

.file-upload-btn:hover {
    background-color: var(--email-border-light);
}

.upload-status {
    font-size: 0.875rem;
    color: var(--email-primary);
}

.draft-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    color: var(--email-text-secondary);
    cursor: pointer;
    transition: var(--email-transition);
    font-size: 0.875rem;
}

.draft-btn:hover {
    color: var(--email-text-primary);
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cancel-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    color: var(--email-text-secondary);
    cursor: pointer;
    transition: var(--email-transition);
    font-size: 0.875rem;
}

.cancel-btn:hover {
    color: var(--email-text-primary);
}

.send-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--email-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--email-transition);
    font-size: 0.875rem;
}

.send-btn:hover:not(:disabled) {
    background-color: var(--email-primary-dark);
}

.send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.send-content,
.send-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.send-loading i {
    animation: spin 1s linear infinite;
}

/* Notifications d'erreur */
.error-notification {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background-color: var(--email-error);
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: var(--email-shadow-lg);
    z-index: 50;
}

.error-notification ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.error-notification li {
    font-size: 0.875rem;
}

/* ========================================
   CONFIGURATION DE COMPTE
   ======================================== */

.account-setup {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* Header de configuration */
.setup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--email-border);
}

.setup-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--email-text-primary);
    margin: 0;
}

.close-btn {
    color: var(--email-text-secondary);
    cursor: pointer;
    transition: var(--email-transition);
    border: none;
    background: none;
    padding: 0.25rem;
}

.close-btn:hover {
    color: var(--email-text-primary);
}

/* Barre de progression */
.setup-progress {
    padding: 1rem 1.5rem;
    background-color: var(--email-border-light);
    border-bottom: 1px solid var(--email-border);
}

.progress-steps {
    display: flex;
    align-items: center;
}

.progress-step {
    display: flex;
    align-items: center;
}

.progress-step.with-connector {
    flex: 1;
}

.step-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--email-border);
    color: var(--email-text-secondary);
    font-weight: 500;
    transition: var(--email-transition);
}

.step-circle.active {
    background-color: var(--email-primary);
    color: white;
}

.step-label {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: var(--email-text-muted);
    transition: var(--email-transition);
}

.step-label.active {
    color: var(--email-primary);
}

.step-connector {
    flex: 1;
    height: 2px;
    margin: 0 1rem;
    background-color: var(--email-border);
    transition: var(--email-transition);
}

.step-connector.active {
    background-color: var(--email-primary);
}

/* Contenu de configuration */
.setup-content {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
}

.step-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--email-text-primary);
    margin: 0 0 1rem 0;
}

/* Grille des fournisseurs */
.providers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.provider-card {
    padding: 1rem;
    border: 2px solid var(--email-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--email-transition);
}

.provider-card:hover {
    border-color: var(--email-primary);
    background-color: rgb(239 246 255);
}

.provider-content {
    display: flex;
    align-items: center;
}

.provider-icon {
    font-size: 2rem;
    margin-right: 0.75rem;
}

.provider-icon.gmail {
    color: #ea4335;
}

.provider-icon.outlook {
    color: #0078d4;
}

.provider-icon.yahoo {
    color: #7b68ee;
}

.provider-icon.imap {
    color: var(--email-text-muted);
}

.provider-info h4 {
    font-weight: 500;
    color: var(--email-text-primary);
    margin: 0;
}

.provider-info p {
    font-size: 0.875rem;
    color: var(--email-text-muted);
    margin: 0;
}

/* Champs de configuration */
.config-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.field-group {
    display: flex;
    flex-direction: column;
}

.field-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--email-text-secondary);
    margin-bottom: 0.25rem;
}

.field-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--email-border);
    border-radius: 0.5rem;
    background: var(--email-bg-card);
    color: var(--email-text-primary);
    transition: var(--email-transition);
}

.field-input:focus {
    outline: none;
    border-color: var(--email-primary);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.field-input.error {
    border-color: var(--email-error);
}

.field-error {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--email-error);
}

.field-hint {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--email-warning);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.field-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--email-border);
    border-radius: 0.5rem;
    background: var(--email-bg-card);
    color: var(--email-text-primary);
    transition: var(--email-transition);
}

.field-select:focus {
    outline: none;
    border-color: var(--email-primary);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

/* Configuration manuelle */
.manual-config {
    border-top: 1px solid var(--email-border);
    padding-top: 1rem;
    margin-top: 1rem;
}

.config-section-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--email-text-primary);
    margin: 0 0 0.75rem 0;
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.config-grid .field-group:last-child {
    grid-column: span 1;
}

/* Checkbox */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-input {
    width: 16px;
    height: 16px;
    color: var(--email-primary);
    border: 1px solid var(--email-border);
    border-radius: 0.25rem;
    transition: var(--email-transition);
}

.checkbox-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.checkbox-label {
    font-size: 0.875rem;
    color: var(--email-text-secondary);
    cursor: pointer;
}

/* Actions des étapes */
.step-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--email-border);
}

.test-actions {
    display: flex;
    gap: 0.5rem;
}

.step-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--email-border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--email-transition);
}

.step-btn.secondary {
    background: var(--email-bg-card);
    color: var(--email-text-secondary);
}

.step-btn.secondary:hover:not(:disabled) {
    background-color: var(--email-border-light);
}

.step-btn.primary {
    background-color: var(--email-primary);
    color: white;
    border-color: var(--email-primary);
}

.step-btn.primary:hover:not(:disabled) {
    background-color: var(--email-primary-dark);
}

.step-btn.success {
    background-color: var(--email-success);
    color: white;
    border-color: var(--email-success);
}

.step-btn.success:hover:not(:disabled) {
    background-color: #059669;
}

.step-btn:disabled,
.step-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinning {
    animation: spin 1s linear infinite;
}

/* Résumé de connexion */
.connection-summary {
    background-color: var(--email-border-light);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.connection-summary h4 {
    font-weight: 500;
    color: var(--email-text-primary);
    margin: 0 0 0.5rem 0;
}

.summary-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-row {
    font-size: 0.875rem;
    color: var(--email-text-secondary);
}

.detail-row strong {
    color: var(--email-text-primary);
}

/* Résultat du test */
.test-result {
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.test-result.success {
    background-color: rgb(220 252 231);
    border: 1px solid rgb(187 247 208);
}

.test-result.error {
    background-color: rgb(254 226 226);
    border: 1px solid rgb(252 165 165);
}

.result-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.test-result.success .result-header {
    color: var(--email-success);
}

.test-result.error .result-header {
    color: var(--email-error);
}

.result-header span {
    font-weight: 500;
}

.result-message {
    font-size: 0.875rem;
    margin: 0;
}

.test-result.success .result-message {
    color: #047857;
}

.test-result.error .result-message {
    color: #b91c1c;
}

/* Messages d'erreur et flash */
.error-messages,
.flash-message {
    margin: 0 1.5rem 1rem 1.5rem;
}

.error-content,
.flash-content {
    border-radius: 0.5rem;
    padding: 1rem;
}

.error-messages .error-content {
    background-color: rgb(254 226 226);
    border: 1px solid rgb(252 165 165);
}

.flash-message.success .flash-content {
    background-color: rgb(220 252 231);
    border: 1px solid rgb(187 247 208);
}

.flash-message.error .flash-content {
    background-color: rgb(254 226 226);
    border: 1px solid rgb(252 165 165);
}

.error-header,
.flash-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-messages .error-header {
    color: var(--email-error);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.flash-message.success .flash-content {
    color: var(--email-success);
}

.flash-message.error .flash-content {
    color: var(--email-error);
}

.error-list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #b91c1c;
}

.error-list li {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.error-list li:last-child {
    margin-bottom: 0;
}

/* ========================================
   SHIMMER ANIMATIONS
   ======================================== */

.shimmer-container {
    display: flex;
    flex-direction: column;
    background: var(--email-bg-card);
    box-shadow: var(--email-shadow);
    transition: var(--email-transition);
    height: 100vh;
    overflow: hidden;
}

.shimmer-element {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.25rem;
}

.shimmer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--email-border);
}

.shimmer-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.shimmer-element.title-large {
    width: 180px;
    height: 1.5em;
}

.shimmer-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shimmer-element.text-medium {
    width: 100px;
    height: 1.2em;
}

.shimmer-element.badge {
    width: 50px;
    height: 1.5em;
    border-radius: 12px;
}

.shimmer-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shimmer-element.select-small {
    width: 60px;
    height: 32px;
    border-radius: 6px;
}

.shimmer-element.select-medium {
    width: 80px;
    height: 32px;
    border-radius: 6px;
}

.shimmer-element.button-square {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.shimmer-sync {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.shimmer-element.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.shimmer-element.text-small {
    width: 70px;
    height: 0.9em;
}

.shimmer-search {
    padding: 1rem;
    border-bottom: 1px solid var(--email-border);
}

.shimmer-element.search-bar {
    width: 100%;
    height: 40px;
    border-radius: 6px;
}

.shimmer-emails {
    flex: 1;
    overflow-y: auto;
}

.shimmer-email-item {
    border-bottom: 1px solid var(--email-border-light);
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.shimmer-element.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.shimmer-email-content {
    flex: 1;
    min-width: 0;
}

.shimmer-email-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.shimmer-element.sender-name {
    height: 1.2em;
}

.shimmer-email-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shimmer-element.icon-small {
    width: 16px;
    height: 12px;
}

.shimmer-element.date-text {
    width: 60px;
    height: 0.9em;
}

.shimmer-element.subject-text {
    height: 1.2em;
    margin: 0.25rem 0;
}

.shimmer-element.subject-text.bold {
    height: 1.3em;
}

.shimmer-element.preview-text {
    height: 1em;
}

.shimmer-indicators {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

.shimmer-pagination {
    border-top: 1px solid var(--email-border);
    padding: 1rem;
    background: var(--email-bg-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shimmer-element.pagination-info {
    width: 220px;
    height: 1.2em;
}

.shimmer-pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shimmer-element.pagination-button {
    width: 80px;
    height: 32px;
    border-radius: 6px;
}

.shimmer-element.pagination-text {
    width: 120px;
    height: 1.2em;
}

.shimmer-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.shimmer-loading-card {
    background: rgb(255 255 255 / 0.9);
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: var(--email-shadow-lg);
    border: 1px solid var(--email-border);
}

.shimmer-loading-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.shimmer-element.loading-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    animation: shimmer 1.5s infinite, pulse 2s infinite;
}

.shimmer-loading-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.shimmer-element.loading-title {
    width: 180px;
    height: 1.2em;
}

.shimmer-element.loading-subtitle {
    width: 240px;
    height: 1em;
}

.shimmer-progress-bar {
    width: 100%;
    background-color: var(--email-border);
    border-radius: 9999px;
    height: 6px;
    overflow: hidden;
}

.shimmer-progress {
    background-color: var(--email-primary);
    height: 100%;
    border-radius: 9999px;
    width: 65%;
    animation: shimmer 1.5s infinite, progress 2s infinite;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes progress {
    0% { width: 20%; }
    50% { width: 65%; }
    100% { width: 85%; }
}

/* Variations pour plus de naturel */
.shimmer-element:nth-child(2n) { animation-delay: 0.1s; }
.shimmer-element:nth-child(3n) { animation-delay: 0.2s; }
.shimmer-element:nth-child(5n) { animation-delay: 0.3s; }

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .email-sidebar {
        width: 280px;
    }

    .email-sidebar.collapsed {
        width: 60px;
    }

    .email-list-section.split-view,
    .email-reader-panel {
        width: 50%;
    }

    .modal-container.large {
        max-width: 90vw;
        height: 90vh;
    }
}

@media (max-width: 768px) {
    .email-dashboard {
        flex-direction: column;
    }

    .email-sidebar {
        width: 100%;
        height: auto;
        max-height: 200px;
    }

    .email-sidebar.collapsed {
        width: 100%;
        height: 60px;
    }

    .email-main-content {
        flex-direction: column;
    }

    .email-list-section.split-view,
    .email-reader-panel {
        width: 100%;
        height: 50vh;
    }

    .providers-grid {
        grid-template-columns: 1fr;
    }

    .config-grid {
        grid-template-columns: 1fr;
    }

    .modal-container {
        margin: 0.5rem;
        max-height: 95vh;
    }

    .step-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .test-actions {
        width: 100%;
        justify-content: space-between;
    }
}


/* ========================================
   EMAIL ACCOUNTS MANAGEMENT STYLES
   ======================================== */

/* Provider Cards */
.providers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.provider-card {
    padding: 1rem;
    border: 2px solid var(--neo-border);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--neo-transition-fast);
    background: var(--neo-card-bg);
}

.provider-card:hover {
    border-color: var(--neo-mint);
    background-color: rgba(93, 173, 226, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--neo-shadow-lg);
}

.provider-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.provider-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.provider-icon.gmail {
    color: #ea4335;
}

.provider-icon.outlook {
    color: #0078d4;
}

.provider-icon.yahoo {
    color: #7b68ee;
}

.provider-icon.imap {
    color: var(--neo-text-muted);
}

.provider-info {
    flex: 1;
}

.provider-info h6 {
    font-weight: 600;
    color: var(--neo-text);
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
}

.provider-info small {
    color: var(--neo-text-muted);
    font-size: 0.75rem;
}

/* Connection Summary */
.connection-summary {
    background: var(--neo-light-bg);
    border-radius: 6px;
    padding: 0.75rem;
    border: 1px solid var(--neo-border);
}

/* Mail Management Section dans Sidebar */
.mail-management-section {
    padding: 0.5rem 0;
    border-top: 1px solid rgba(93, 173, 226, 0.1);
    margin-top: 0.5rem;
}

.mail-management-link,
.mail-setup-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    text-decoration: none;
    color: var(--neo-text);
    transition: var(--neo-transition-fast);
    font-weight: 500;
    font-size: 0.875rem;
    gap: 0.75rem;
}

.mail-management-link:hover,
.mail-setup-link:hover {
    background: rgba(93, 173, 226, 0.08);
    color: var(--neo-mint);
    text-decoration: none;
}

.mail-management-link i,
.mail-setup-link i {
    width: 20px;
    font-size: 1.125rem;
    color: var(--neo-text-muted);
    transition: color 0.3s ease;
    text-align: center;
}

.mail-management-link:hover i,
.mail-setup-link:hover i {
    color: var(--neo-mint);
}

/* Account Row Styles */
.account-row {
    transition: var(--neo-transition-fast);
}

.account-row:hover {
    background-color: rgba(93, 173, 226, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Avatar avec icônes de fournisseur */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
    transition: var(--neo-transition-fast);
}

.avatar.bg-primary {
    background: linear-gradient(135deg, var(--neo-mint) 0%, #4a90e2 100%);
    color: var(--neo-white);
    border: 2px solid var(--neo-white);
    box-shadow: 0 2px 8px rgba(93, 173, 226, 0.3);
}

.avatar i {
    font-size: 1.125rem;
}

/* Badge Container amélioré */
.badge-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    min-height: 40px;
}

/* Styles spécifiques pour les badges de fournisseur */
.neo-stats-badge.warning {
    background: rgba(255, 193, 7, 0.1);
    color:var(--neo-warning);
    border-color: rgba(255, 193, 7, 0.3);
}


.neo-stats-badge.danger {
    background: rgba(255, 81, 7, 0.1);
    color:var(--neo-danger);
    border-color: rgba(255, 193, 7, 0.3);
}
/* Actions spécifiques aux comptes */
.neo-tree-item-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.neo-action-btn.outline-primary {
    border-color: var(--neo-mint);
    color: var(--neo-mint);
    background-color: transparent;
}

.neo-action-btn.outline-primary:hover {
    background-color: var(--neo-mint);
    color: var(--neo-white);
}

/* Responsive pour les providers */
@media (max-width: 768px) {
    .providers-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .provider-card {
        padding: 0.75rem;
    }

    .provider-icon {
        font-size: 1.25rem;
    }

    .provider-info h6 {
        font-size: 0.8rem;
    }

    .provider-info small {
        font-size: 0.7rem;
    }

    .mail-management-link,
    .mail-setup-link {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
    }

    .account-row .neo-tree-item-actions {
        flex-direction: column;
        gap: 0.125rem;
    }

}

/* Sidebar collapsed state pour la gestion */
.neo-sidebar.collapsed .mail-management-section {
    padding: 0.25rem 0;
}

.neo-sidebar.collapsed .mail-management-link,
.neo-sidebar.collapsed .mail-setup-link {
    justify-content: center;
    padding: 0.75rem;
    gap: 0;
}

.neo-sidebar.collapsed .mail-management-link .nav-text,
.neo-sidebar.collapsed .mail-setup-link .nav-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: var(--neo-transition);
}

.neo-sidebar.collapsed .mail-management-link i,
.neo-sidebar.collapsed .mail-setup-link i {
    margin: 0;
}

/* Dark Theme Support */
[data-theme="dark"] .provider-card {
    background: var(--neo-dark-gray);
    border-color: var(--neo-mid-slate);
}

[data-theme="dark"] .provider-card:hover {
    background-color: rgba(184, 219, 217, 0.05);
    border-color: var(--neo-mint);
}

[data-theme="dark"] .provider-info h6 {
    color: var(--neo-light);
}

[data-theme="dark"] .provider-info small {
    color: #adb5bd;
}

[data-theme="dark"] .connection-summary {
    background: var(--neo-dark-slate);
    border-color: var(--neo-mid-slate);
    color: var(--neo-light);
}

[data-theme="dark"] .mail-management-link:hover,
[data-theme="dark"] .mail-setup-link:hover {
    background: rgba(184, 219, 217, 0.08);
    color: var(--neo-mint);
}

[data-theme="dark"] .mail-management-link:hover i,
[data-theme="dark"] .mail-setup-link:hover i {
    color: var(--neo-mint);
}

[data-theme="dark"] .account-row:hover {
    background-color: rgba(184, 219, 217, 0.05);
}

[data-theme="dark"] .avatar.bg-primary {
    background: linear-gradient(135deg, var(--neo-mint) 0%, #a8c8c7 100%);
    color: #1a1a1a;
    border-color: #495057;
    box-shadow: 0 2px 8px rgba(184, 219, 217, 0.3);
}

[data-theme="dark"] .neo-stats-badge.warning {
    background: rgba(255, 193, 7, 0.2);
    color: #ffd54f;
    border-color: rgba(255, 193, 7, 0.4);
}

.collapse.show {
    visibility: visible !important;
  }


  /* CSS pour le bouton de réponse - à ajouter dans votre fichier CSS */
.reader-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.reply-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.other-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.action-btn.reply {
    background: var(--primary-color, #007bff);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-btn.reply:hover {
    background: var(--primary-dark, #0056b3);
    transform: translateY(-1px);
}

/* Responsive design */
@media (max-width: 768px) {
    .reader-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .reply-actions,
    .other-actions {
        justify-content: center;
    }

    .action-btn.reply span {
        display: none;
    }
}

.main-content {
    min-height: calc(100vh - 60px);
    background: var(--neo-light);
}

 /* Assurer que le mail manager prend toute la hauteur disponible */
 .mail-manager-wrapper {
    height: calc(100vh - 60px);
    /* Ajuster selon votre header */
    overflow: hidden;
}

.email-dashboard {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Masquer la sidebar du dashboard mail quand on utilise la vraie sidebar */
.email-dashboard .email-sidebar {
    display: none;
}

/* Ajuster le contenu principal pour occuper toute la largeur */
.email-dashboard .email-main-content {
    flex: 1;
    width: 100%;
    margin-left: 0;
}

/* ====================================
   CHAT INTERFACE - WhatsApp Style
   ==================================== */

   .chat-container {
    height: calc(100vh - 120px);
    min-height: 600px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    background: #f0f2f5;
}

.chat-container .row {
    margin: 0;
    height: 100%;
}

.chat-container .col-md-4,
.chat-container .col-md-8 {
    padding: 0;
    height: 100%;
}

/* ====================================
   PANNEAU DE CONVERSATIONS (GAUCHE)
   ==================================== */

.conversations-panel {
    background: #ffffff;
    border-right: 1px solid #e9ecef;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.conversations-header {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.conversations-search {
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    flex-shrink: 0;
}

.conversations-search .form-control {
    border-radius: 20px;
    border: 1px solid #ddd;
    padding: 10px 40px 10px 15px;
    background: #f5f6f7;
}

.conversations-search .input-group-text {
    border: none;
    background: transparent;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #718096;
}

.conversations-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.conversations-list::-webkit-scrollbar {
    width: 6px;
}

.conversations-list::-webkit-scrollbar-track {
    background: transparent;
}

.conversations-list::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.conversation-item {
    padding: 15px 20px;
    border-bottom: 1px solid #f1f3f4;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
}

.conversation-item:hover {
    background: #f5f6f7;
}

.conversation-item.active {
    background: #e3f2fd;
    border-right: 3px solid #007bff;
}

.conversation-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    margin-right: 15px;
    flex-shrink: 0;
}

.conversation-avatar.group {
    background: linear-gradient(135deg, #28a745 0%, #198754 100%);
    font-size: 16px;
}

.conversation-info {
    flex: 1;
    min-width: 0;
}

.conversation-name {
    font-weight: 600;
    font-size: 16px;
    color: #1a202c;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-last-message {
    font-size: 14px;
    color: #718096;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.conversation-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.conversation-time {
    font-size: 12px;
    color: #a0aec0;
    white-space: nowrap;
}

.conversation-unread {
    background: #007bff;
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

/* ====================================
   MODALS - CORRECTIONS
   ==================================== */

.modal.fade.show.d-block {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10050 !important;
    overflow-y: auto !important;
}

.modal .modal-dialog {
    margin: auto !important;
    width: 90% !important;
}

.modal .modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
}

.group-creation-modal {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.group-creation-modal .modal-header {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.group-creation-modal .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.group-creation-modal .modal-header h5 {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.group-creation-modal .modal-header .btn-close {
    padding: 0;
    margin: 0;
}

.selected-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.participant-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 8px 12px;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.participant-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.participant-info span {
    font-size: 14px;
    color: #2d3748;
    font-weight: 500;
}

.btn-remove-participant {
    background: none;
    border: none;
    color: #8696a0;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.btn-remove-participant:hover {
    background: #f0f2f5;
    color: #dc3545;
}

.btn-remove-participant i {
    font-size: 16px;
}

.available-users {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 5px;
}

.available-users .list-group-item {
    border: none;
    border-radius: 8px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.available-users .list-group-item:hover {
    background: #f8f9fa;
    transform: translateX(5px);
}

.group-creation-modal .form-label {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    font-size: 14px;
}

.group-creation-modal .form-control {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 10px 15px;
    font-size: 14px;
}

.group-creation-modal .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    outline: none;
}

.group-creation-modal textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.group-creation-modal .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
}

.group-creation-modal .btn-primary {
    background: #007bff;
    border-color: #007bff;
}

.group-creation-modal .btn-primary:hover:not(:disabled) {
    background: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.group-creation-modal .btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
}

.group-creation-modal .btn-outline-secondary:hover {
    background: #6c757d;
    border-color: #6c757d;
    color: white;
}

.group-creation-modal .btn-success {
    background: #28a745;
    border-color: #28a745;
}

.group-creation-modal .btn-success:hover:not(:disabled) {
    background: #218838;
    border-color: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.group-creation-modal .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.selected-participants::-webkit-scrollbar,
.available-users::-webkit-scrollbar {
    width: 6px;
}

.selected-participants::-webkit-scrollbar-track,
.available-users::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.selected-participants::-webkit-scrollbar-thumb,
.available-users::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.selected-participants::-webkit-scrollbar-thumb:hover,
.available-users::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* ====================================
   PANNEAU DE CHAT (DROITE)
   ==================================== */

.chat-panel {
    background: #ffffff;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.chat-header {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 70px;
    z-index: 10;
    flex-shrink: 0;
}

.chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

.chat-header-avatar.group {
    background: linear-gradient(135deg, #28a745 0%, #198754 100%);
}

.chat-header-info {
    flex: 1;
}

.chat-header-name {
    font-weight: 600;
    font-size: 16px;
    color: #1a202c;
    margin-bottom: 2px;
}

.chat-header-status {
    font-size: 13px;
    color: #718096;
}

.chat-header-actions {
    display: flex;
    gap: 10px;
}

.chat-header-action {
    width: 35px;
    height: 35px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-header-action:hover {
    background: #e2e8f0;
    color: #2d3748;
}

/* ====================================
   ZONE DES MESSAGES
   ==================================== */

.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background: #efeae2;
    background-image:
        radial-gradient(circle at 10px 10px, rgba(255,255,255,0.1) 1px, transparent 0),
        radial-gradient(circle at 25px 25px, rgba(255,255,255,0.05) 1px, transparent 0);
    background-size: 35px 35px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

.message-date {
    text-align: center;
    margin: 20px 0;
}

.message-date span {
    background: rgba(255, 255, 255, 0.8);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    color: #718096;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message-wrapper {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: flex-end;
    position: relative;

}

.message-wrapper.sent {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.message-wrapper.received {
    flex-direction: row;
    justify-content: flex-start;
}

.message-checkbox {
    display: flex;
    align-items: center;
    padding: 5px;
}

.message-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #007bff;
}

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.message-avatar:hover {
    transform: scale(1.1);
}

.message {
    max-width: 85%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    animation: messageSlideIn 0.3s ease-out;
    position: relative;
}

.message.sent {
    align-self: flex-end;
    align-items: flex-end;
}

.message.received {
    align-self: flex-start;
    align-items: flex-start;
}

.message-content {
    padding: 10px 12px 8px 12px;
    border-radius: 18px;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: default;
}

.message.received .message-content {
    background: #ffffff;
    color: #000000;
    max-width: 300%;
    min-width: 100px;
    display: inline-block;
    word-break: break-word;
    white-space: normal;
    padding: 8px 12px;
    border-radius: 12px;
}

.message.sent .message-content {
    background: #dcf8c6;
    color: #000000;
    max-width: 300%;
    min-width: 100px;
    display: inline-block;
    word-break: break-word;
    white-space: normal;
    padding: 8px 12px;
    border-radius: 12px;
}

.message-sender-name {
    font-size: 11px;
    color: #007bff;
    margin-bottom: 4px;
    font-weight: 600;
}

.message-text {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 6px 0;
}

.deleted-message {
    opacity: 0.6;
    font-style: italic;
    color: #6c757d !important;
}

/* ====================================
   CITATIONS DE RÉPONSE
   ==================================== */

.message-reply-quote {
    display: block;
    border-left: 4px solid #128c7e;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.08);
    animation: replyQuoteSlideIn 0.2s ease-out;
}

.message.received .message-reply-quote {
    background: rgba(0, 123, 184, 0.12);
    border-left-color: #06cf9c;
}

.message-reply-quote:hover {
    background: rgba(0, 0, 0, 0.12);
}

.message.received .message-reply-quote:hover {
    background: rgba(0, 123, 184, 0.2);
}

.reply-quote-content {
    display: block;
    width: 100%;
}

.reply-quote-sender {
    font-size: 12px;
    font-weight: 700;
    color: #128c7e;
    margin-bottom: 3px;
    line-height: 1.2;
    display: block;
}

.message.received .reply-quote-sender {
    color: #06cf9c;
}

.reply-quote-text {
    font-size: 13px;
    color: #667781;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    opacity: 0.85;
    display: block;
}

@keyframes replyQuoteSlideIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================================
   MÉTADONNÉES DU MESSAGE
   ==================================== */

.message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.7;
}

.message-time {
    font-size: 11px;
    color: #667781;
}

.message-status {
    display: flex;
    align-items: center;
    margin-left: 4px;
}

.message-status i {
    font-size: 14px;
    font-weight: bold;
}

.message-status .status-sent,
.message-status .status-delivered {
    color: #8696a0;
}

.message-status .status-read {
    color: #53bdeb;
}

/* ====================================
   MENU CONTEXTUEL
   ==================================== */

.context-menu {
    display: none;
    position: fixed;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 8px 0;
    z-index: 100000;
    min-width: 200px;
    animation: contextMenuSlideIn 0.15s ease-out;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.1s ease;
}

@keyframes contextMenuSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 14px;
    color: #2d3748;
    user-select: none;
}

.context-menu-item i {
    width: 20px;
    font-size: 16px;
}

.context-menu-item:hover {
    background: #f7fafc;
}

.context-menu-delete {
    color: #dc3545;
}

.context-menu-delete:hover {
    background: #fff5f5;
}

.context-menu-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 0;
}

/* ====================================
   BARRE DE SÉLECTION
   ==================================== */

.selection-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #128c7e;
    color: white;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.selection-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
}

.selection-info .btn {
    color: white;
    border-color: white;
}

.selection-info .btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.selection-actions {
    display: flex;
    gap: 8px;
}

.selection-actions .btn {
    color: white;
    border-color: white;
}

.selection-actions .btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.selection-actions .btn-danger {
    background: #dc3545;
    border-color: #dc3545;
}

.selection-actions .btn-danger:hover {
    background: #c82333;
}

.selection-bar .btn i {
    color: #212529 !important;
}

.selection-bar .btn.btn-light {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.selection-bar .btn.btn-danger i {
    color: #fff !important;
}

/* ====================================
   ZONE DE SAISIE
   ==================================== */

.chat-input {
    padding: 15px;
    border-top: 1px solid #e9ecef;
    background: #f0f2f5;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-left: 4px solid #06cf9c;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: replyQuoteSlideIn 0.2s ease-out;
}

.reply-preview-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.reply-preview-info {
    flex: 1;
    min-width: 0;
}

.reply-preview-sender {
    font-size: 13px;
    font-weight: 700;
    color: #06cf9c;
    margin-bottom: 3px;
    line-height: 1.2;
}

.reply-preview-text {
    font-size: 13px;
    color: #667781;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    opacity: 0.9;
}

.btn-close-reply {
    background: none;
    border: none;
    color: #8696a0;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.btn-close-reply:hover {
    background: #f0f2f5;
    color: #54656f;
}

.btn-close-reply i {
    font-size: 18px;
}

.message-input-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.message-input-form {
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.message-input-container .input-group {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

.attachment-btn {
    border: none;
    padding: 8px 12px;
    border-radius: 50%;
    background: transparent;
    color: #54656f;
    transition: all 0.2s ease;
    flex-shrink: 0;
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-btn:hover {
    background: #e9ecef;
    color: #3b4a54;
}

.message-textarea {
    flex: 1;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    resize: none;
    min-height: 44px;
    max-height: 120px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.4;
    background: white;
}

.message-textarea:focus {
    outline: none;
    box-shadow: none;
}

.send-btn {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: white;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.send-btn:disabled {
    background: #8696a0;
    cursor: not-allowed;
    transform: none;
}

.send-btn:not(:disabled) {
    background: #25d366;
}

.send-btn:hover:not(:disabled) {
    background: #20ba5a;
    transform: scale(1.05);
}

/* ====================================
   ÉTAT VIDE
   ==================================== */

.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    background: #f8f9fa;
}

.chat-empty-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #128c7e 0%, #075e54 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    margin-bottom: 20px;
}

.chat-empty h4 {
    color: #2d3748;
    margin-bottom: 10px;
}

.chat-empty p {
    color: #718096;
    margin: 0;
}

/* ====================================
   PIÈCES JOINTES
   ==================================== */

.message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    max-width: 100%;
}

.message-attachments .attachment-image {
    position: relative;
    display: inline-block;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    max-width: 100%;
    background: #f0f0f0;
}

.message-attachments .attachment-image:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.message-attachments .attachment-image img {
    display: block;
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

.message-attachments .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    border-radius: 12px;
    pointer-events: none;
}

.message-attachments .attachment-image:hover .image-overlay {
    background: rgba(0, 0, 0, 0.3);
}

.message-attachments .image-overlay i {
    color: white;
    font-size: 32px;
    opacity: 0;
    transition: opacity 0.2s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.message-attachments .attachment-image:hover .image-overlay i {
    opacity: 1;
}

.message-attachments .attachment-pdf {
    position: relative;
    display: inline-block;
    margin: 8px 4px 4px 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    max-width: 300px;
    background: #f8f9fa;
}

.message-attachments .attachment-pdf:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.message-attachments .attachment-pdf .pdf-thumbnail {
    display: block;
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

.message-attachments .attachment-pdf .pdf-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 80px;
}

.message-attachments .attachment-pdf .pdf-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
}

.message-attachments .attachment-pdf .pdf-name {
    padding: 8px 12px;
    background: white;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.message-attachments .attachment-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 350px;
    cursor: pointer;
}

.message.sent .attachment-file {
    background: rgba(255, 255, 255, 0.5);
}

.message-attachments .attachment-file:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.attachment-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

.attachment-info {
    flex: 1;
    min-width: 0;
}

.attachment-info h6 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-info small {
    font-size: 12px;
    color: #718096;
}

.attachment-download {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #54656f;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.message-attachments .attachment-file:hover .attachment-download {
    background: #e9ecef;
    color: #2d3748;
}

.attachment-preview-wrapper {
    padding: 10px 0;
    margin-bottom: 10px;
}

.attachment-preview-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 5px 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.attachment-preview-scroll::-webkit-scrollbar {
    height: 6px;
}

.attachment-preview-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.attachment-preview-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 8px 12px;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: attachmentSlideIn 0.3s ease-out;
}

.attachment-name {
    font-size: 13px;
    color: #2d3748;
}

.btn-remove-attachment {
    background: none;
    border: none;
    color: #8696a0;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.btn-remove-attachment:hover {
    background: #f0f2f5;
    color: #dc3545;
}

.upload-progress {
    padding: 8px 12px;
    background: white;
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ====================================
   RÉACTIONS
   ==================================== */

.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.message-reaction {
    position: relative;
    cursor: pointer;
    transition: transform 0.1s ease;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-reaction:hover {
    transform: scale(1.1);
}

.message-reaction.user-reacted {
    background: #dcf8c6;
    font-weight: 600;
}

.message-reaction .reaction-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
    z-index: 2;
    white-space: nowrap;
    max-width: 260px;
}

.message-reaction:hover .reaction-tooltip {
    opacity: 1;
    visibility: visible;
}

.message-reactions-menu {
    display: inline-flex;
    gap: 4px;
}

.message .message-read-by {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
    z-index: 2;
    white-space: nowrap;
}

.message:hover .message-read-by {
    opacity: 1;
    visibility: visible;
}

.message .message-read-by .read-by-title {
    font-weight: 600;
    margin-right: 6px;
    display: inline;
}

.message .message-read-by .read-by-user {
    margin-right: 6px;
}

/* ====================================
   ANIMATIONS
   ==================================== */

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes attachmentSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.message-attachments .attachment-image,
.message-attachments .attachment-file {
    animation: attachmentSlideIn 0.3s ease-out;
}

/* ====================================
   BARRE DE RECHERCHE INLINE (WhatsApp style)
   ==================================== */

.search-bar-inline {
    background: #f0f2f5;
    border-bottom: 1px solid #e9ecef;
    padding: 12px 20px;
    animation: slideDown 0.2s ease-out;
}

.search-bar-content {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border-radius: 20px;
    padding: 8px 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-bar-icon {
    color: #718096;
    font-size: 16px;
    flex-shrink: 0;
}

.search-bar-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 0;
    background: transparent;
}

.search-bar-counter {
    color: #718096;
    font-size: 13px;
    font-weight: 500;
    padding: 0 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.search-bar-navigation {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.search-nav-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.search-nav-btn:hover {
    background: #f0f2f5;
    color: #2d3748;
}

.search-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.search-bar-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.search-bar-close:hover {
    background: #f0f2f5;
    color: #dc3545;
}

.search-bar-close i {
    font-size: 20px;
}

.message-wrapper.search-highlight {
    animation: searchHighlight 1.5s ease-out;
}

@keyframes searchHighlight {
    0%, 100% {
        background: transparent;
    }
    50% {
        background: rgba(255, 193, 7, 0.3);
    }
}

/* ====================================
   MODAL DE TRANSFERT
   ==================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.forward-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.forward-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
}

.forward-modal-header h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.btn-close-modal {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.btn-close-modal:hover {
    background: #f0f0f0;
}

.forward-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.message-preview {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
}

.message-preview-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
}

.message-preview-content {
    font-size: 14px;
}

.message-preview-content strong {
    color: #25d366;
    display: block;
    margin-bottom: 4px;
}

.message-preview-content p {
    margin: 0;
    color: #333;
}

.user-search {
    margin-bottom: 16px;
}

.user-search input {
    border-radius: 20px;
    padding: 10px 16px;
    border: 1px solid #ddd;
}

.user-search input:focus {
    border-color: #25d366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
    outline: none;
}

.users-list {
    max-height: 300px;
    overflow-y: auto;
}

.user-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    gap: 12px;
}

.user-item:hover {
    background: #f0f0f0;
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #25d366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.user-avatar.group-avatar {
    background: #0088cc;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.user-email {
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-action {
    color: #25d366;
    font-size: 24px;
    flex-shrink: 0;
}

.users-list::-webkit-scrollbar {
    width: 6px;
}

.users-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.users-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.users-list::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ====================================
   DROPDOWN OPTIONS GROUPE
   ==================================== */

.group-options-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    margin-top: 8px;
    animation: dropdownSlideIn 0.2s ease-out;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
    color: #2d3748;
}

.dropdown-item:hover {
    background: #f7fafc;
}

.dropdown-item.text-danger {
    color: #dc3545;
}

.dropdown-item.text-danger:hover {
    background: #fff5f5;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================================
   MODAL DE DÉPART
   ==================================== */

.leave-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.leave-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leave-modal .modal-body {
    padding: 20px;
}

.transfer-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

/* ====================================
   MODAL D'AJOUT DE MEMBRE
   ==================================== */

.add-member-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideDown 0.3s ease-out;
}

.add-member-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
}

.add-member-modal-header h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.add-member-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.members-list {
    max-height: 400px;
    overflow-y: auto;
}

.members-list::-webkit-scrollbar {
    width: 6px;
}

.members-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.members-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.member-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    gap: 12px;
    margin-bottom: 8px;
}

.member-item:hover {
    background: #f0f0f0;
}

.member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.member-info {
    flex: 1;
    min-width: 0;
}

.member-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.member-email {
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-action {
    color: #25d366;
    font-size: 24px;
    flex-shrink: 0;
}

.member-item:hover .member-action {
    transform: scale(1.1);
    transition: transform 0.2s;
}

/* ====================================
   MESSAGES SYSTÈME
   ==================================== */

.message.system-message .message-content {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 8px 16px;
    border-radius: 12px;
}

/* ====================================
   RESPONSIVE
   ==================================== */

@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 80px);
        border-radius: 0;
    }

    .message {
        max-width: 90%;
    }

    .message-reply-quote,
    .reply-preview {
        padding: 6px 8px;
    }

    .reply-quote-sender {
        font-size: 11px;
    }

    .reply-quote-text {
        font-size: 12px;
    }

    .message-attachments .attachment-image img {
        max-width: 250px;
        max-height: 250px;
    }

    .message-attachments .attachment-file {
        max-width: 100%;
    }

    .modal .modal-dialog,
    .modal .modal-dialog.modal-lg {
        width: 95% !important;
        max-width: 95% !important;
        margin: 20px auto !important;
    }

    .group-creation-modal .modal-body {
        padding: 15px;
    }

    .selected-participants {
        max-height: 150px;
    }

    .available-users {
        max-height: 250px;
    }

    .search-bar-inline {
        padding: 8px 15px;
    }

    .search-bar-counter {
        font-size: 12px;
        padding: 0 5px;
    }

    .search-nav-btn, .search-bar-close {
        width: 24px;
        height: 24px;
    }

    .add-member-modal {
        width: 95%;
        max-height: 80vh;
    }

    .add-member-modal-body {
        padding: 15px;
    }
}

/* ====================================
   CHEVRON D'OPTIONS MESSAGE
   ==================================== */

   .message-options-trigger {
    position: absolute;
    top: -12px; /* Au-dessus de la bulle */
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e9ecef;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.message:hover .message-options-trigger {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Pour les messages envoyés : chevron à gauche */
.message.sent .message-options-trigger {
    left: 0;
}

/* Pour les messages reçus : chevron à droite */
.message.received .message-options-trigger {
    right: 0;
}

.message-options-trigger:hover {
    background: white;
    border-color: #007bff;
    transform: scale(1.15);
}

.message-options-trigger i {
    color: #718096;
    font-size: 14px;
}

.message-options-trigger:hover i {
    color: #007bff;
}

.message.system-message .message-options-trigger {
    display: none !important;
}

/* ====================================
   message pannel
   ==================================== */

   .message-panel-wrapper {
    position: relative;
}

.message-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1049;
    animation: fadeIn 0.2s ease-out;
}

.message-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-height: 600px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    animation: slideDown 0.2s ease-out;
}

.message-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-panel-header h5 {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.message-panel-search {
    padding: 12px 20px;
    border-bottom: 1px solid #e9ecef;
}

.message-panel-search .input-group-text {
    color: #718096;
}

.message-panel-list {
    flex: 1;
    overflow-y: auto;
    max-height: 450px;
}

.message-panel-list::-webkit-scrollbar {
    width: 6px;
}

.message-panel-list::-webkit-scrollbar-track {
    background: transparent;
}

.message-panel-list::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.message-panel-item {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f3f4;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.message-panel-item:hover {
    background: #f8f9fa;
}

.message-panel-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.message-panel-avatar.group {
    background: linear-gradient(135deg, #28a745 0%, #198754 100%);
}

.message-panel-content {
    flex: 1;
    min-width: 0;
}

.message-panel-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.message-panel-name {
    font-weight: 600;
    font-size: 14px;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-panel-time {
    font-size: 12px;
    color: #a0aec0;
    flex-shrink: 0;
}

.message-panel-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.message-panel-text {
    font-size: 13px;
    color: #718096;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.message-panel-badge {
    background: #007bff;
    color: white;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.message-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.message-panel-footer {
    padding: 12px 20px;
    border-top: 1px solid #e9ecef;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

@media (max-width: 768px) {
    .message-panel {
        width: calc(100vw - 40px);
        right: -20px;
    }
}

/* ====================================
   FIN CHAT INTERFACE - WhatsApp Style
   ==================================== */


/* CSS Abdoullah FIN*/

/* 3. MODERN NAVBAR
-------------------------------------------------- */
.neo-navbar {
    height: var(--navbar-height);
    position: relative;
    z-index: 100020;
    background: linear-gradient(
        135deg,
        var(--neo-dark-slate) 0%,
        var(--neo-black) 100%
    );
    border-bottom: 1px solid rgba(93, 173, 226, 0.1);
    backdrop-filter: blur(20px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 0;
}

.neo-navbar .navbar-brand {
    color: var(--neo-mint) !important;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    text-decoration: none;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    height: var(--navbar-height);
}

.neo-navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500;
    padding: 0.75rem 1.25rem !important;
    transition: var(--neo-transition-fast);
    position: relative;
}

.neo-navbar .navbar-nav .nav-link:hover,
.neo-navbar .navbar-nav .nav-link.active {
    color: var(--neo-mint) !important;
    background: rgba(93, 173, 226, 0.1);
}

.neo-navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--neo-mint);
    transition: var(--neo-transition-fast);
    transform: translateX(-50%);
}

.neo-navbar .navbar-nav .nav-link:hover::after,
.neo-navbar .navbar-nav .nav-link.active::after {
    width: 80%;
}

/* User dropdown */
.neo-user-dropdown .dropdown-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(93, 173, 226, 0.3);
    color: var(--neo-white);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: var(--neo-transition-fast);
}

.neo-user-dropdown .dropdown-toggle:hover {
    background: rgba(93, 173, 226, 0.2);
    border-color: var(--neo-mint);
}

.neo-user-dropdown .dropdown-menu {
    position: absolute;
    border: 1px solid rgba(52, 73, 94, 0.1);
    box-shadow: 0 10px 30px rgba(44, 62, 80, 0.15);
    background: var(--neo-white);
    padding: 0.5rem 0;
    min-width: 200px;
    z-index: 100030;
}

.neo-user-dropdown .dropdown-item {
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    color: var(--neo-dark-slate);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: var(--neo-transition-fast);
}

.neo-user-dropdown .dropdown-item:hover {
    background: var(--neo-light);
    color: var(--neo-dark-slate);
}

/* 4. MODERN SIDEBAR
-------------------------------------------------- */
.neo-sidebar {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--navbar-height));
    background: linear-gradient(
        180deg,
        var(--neo-white) 0%,
        var(--neo-light) 100%
    );
    border-right: 1px solid var(--bs-border-color);
    z-index: 1020;
    transform: translateX(0);
    transition: var(--neo-transition);
    overflow-y: auto;
    overflow-x: hidden;
}

.neo-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.neo-sidebar::-webkit-scrollbar {
    width: 4px;
}

.neo-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.neo-sidebar::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 2px;
}

/* Sidebar Header */
.neo-sidebar-header {
    padding: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--neo-white);
}

.neo-sidebar-header h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--neo-dark-slate);
    margin: 0;
    transition: var(--neo-transition);
}

.neo-sidebar.collapsed .neo-sidebar-header h4 {
    opacity: 0;
    transform: scale(0.8);
}

/* Sidebar Navigation */
.neo-sidebar-nav {
    padding: 1rem 0;
}

.neo-sidebar-nav .nav-section {
    margin-bottom: 0.5rem;
}

.neo-sidebar-nav .nav-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--neo-mid-slate);
    padding: 0 1.5rem 0.25rem;
    opacity: 0.8;
    transition: var(--neo-transition);
}

.neo-sidebar.collapsed .nav-section-title {
    opacity: 0;
    transform: scale(0.8);
}

.neo-sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: var(--neo-dark-slate);
    text-decoration: none;
    font-weight: 500;
    transition: var(--neo-transition-fast);
    position: relative;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.neo-sidebar-nav .nav-link i {
    width: 20px;
    margin-right: 0.875rem;
    font-size: 1.125rem;
    transition: var(--neo-transition);
}

.neo-sidebar.collapsed .nav-link i {
    margin-right: 0;
}

.collapse {
    visibility: visible !important;
}


.neo-log-details {
    visibility: visible !important;
}


.neo-sidebar-nav .nav-link .nav-text {
    transition: var(--neo-transition);
    flex: 1;
}

.neo-sidebar.collapsed .nav-text {
    opacity: 0;
    transform: translateX(-10px);
}

.neo-sidebar-nav .nav-link .nav-badge {
    background: var(--neo-mint);
    color: var(--neo-white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--neo-transition);
}

.neo-card-body {
  visibility: visible !important;
}


.neo-sidebar.collapsed .nav-badge {
    opacity: 0;
    transform: scale(0.8);
}

.neo-sidebar-nav .nav-link:hover {
    background: rgba(93, 173, 226, 0.08);
    color: var(--neo-dark-slate);
}

.neo-sidebar-nav .nav-link.active {
    background: linear-gradient(
        90deg,
        var(--neo-mint) 0%,
        rgba(93, 173, 226, 0.1) 100%
    );
    color: var(--neo-dark-slate);
    font-weight: 600;
}

.neo-sidebar-nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--neo-dark-slate);
}

/* Nested Sub-menu Groups */
.neo-sidebar-nav .nav-item-group {
    margin: 0;
}

.neo-sidebar-nav .nav-item-group > .nav-link {
    font-size: 0.8125rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    color: var(--neo-dark-slate);
    opacity: 0.9;
}

.neo-sidebar-nav .nav-item-group > .nav-link:hover {
    opacity: 1;
}

/* Nested children: tighter spacing & smaller text */
.neo-sidebar-nav .nav-item-group .nav-item-group > .nav-link,
.neo-sidebar-nav .nav-item-group > div > a.nav-link {
    font-size: 0.8rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.neo-sidebar-nav .nav-item-group .nav-item-group > .nav-link i,
.neo-sidebar-nav .nav-item-group > div > a.nav-link i {
    font-size: 0.95rem;
    width: 18px;
}

/* Sidebar Toggle */
.neo-sidebar-toggle {
    position: absolute;
    top: 1rem;
    right: -15px;
    width: 30px;
    height: 30px;
    background: var(--neo-white);
    border: 1px solid var(--bs-border-color);
    color: var(--neo-dark-slate);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--neo-transition-fast);
    z-index: 1021;
}

.neo-sidebar-toggle:hover {
    background: var(--neo-mint);
    color: var(--neo-white);
}

/* 5. MAIN CONTENT AREA
-------------------------------------------------- */
.neo-main {
    margin-left: var(--sidebar-width);
    margin-top: var(--navbar-height);
    min-height: calc(100vh - var(--navbar-height));
    transition: var(--neo-transition);
    background: var(--neo-light);
}

.neo-main.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed-width);
}

.neo-main-content {
    padding: 0.25rem;
}

/* 6. MODERN CARDS
-------------------------------------------------- */
.neo-card {
    border: 1px solid var(--bs-border-color);
    transition: var(--neo-transition-fast);
    overflow: hidden;
    border-radius: 1rem;
    padding: 0.5rem;
}

.neo-card.rapport-container {
    overflow: visible;
}

.neo-card-header {
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: between;
}

.neo-card-body {
    padding: 0.75rem;
}

.neo-card-footer {
    background: var(--neo-light);
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
}

/* 7. MODERN BUTTONS
-------------------------------------------------- */
.neo-btn {
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    transition: var(--neo-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.neo-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: var(--neo-transition);
}

.neo-btn:hover::before {
    left: 100%;
}

.neo-btn-primary {
    background: linear-gradient(135deg, var(--neo-mint) 0%, #4a90e2 100%);
    color: var(--neo-white);
    border-color: var(--neo-mint);
}

.neo-btn-primary:hover {
    background: linear-gradient(135deg, #4a90e2 0%, var(--neo-mint) 100%);
    box-shadow: 0 8px 25px rgba(93, 173, 226, 0.3);
    color: var(--neo-white);
}

.neo-btn-secondary {
    background: var(--neo-mid-slate);
    color: var(--neo-white);
    border-color: var(--neo-mid-slate);
}

.neo-btn-secondary:hover {
    background: var(--neo-dark-slate);
    color: var(--neo-white);
}

.btn-outline-secondary
.neo-btn-outline {
    background: transparent;
    color: var(--neo-dark-slate);
    border-color: var(--bs-border-color);
}
.btn-outline-secondary:hover
.neo-btn-outline:hover {
    background: var(--neo-dark-slate);
    color: var(--neo-white);
    border-color: var(--neo-dark-slate);
}

/* 8. MODERN FORMS
-------------------------------------------------- */
.neo-form-control {
    border: 2px solid var(--bs-border-color);
    padding: 0.75rem 0.75rem;
    font-weight: 500;
    transition: var(--neo-transition-fast);
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.neo-form-control:focus {
    border-color: var(--neo-mint);
    box-shadow: 0 0 0 4px rgba(93, 173, 226, 0.15);
    background: var(--neo-white);
}

/* Allow textareas to use their rows attribute instead of fixed height */
textarea.neo-form-control {
    height: auto;
}

.neo-form-label {
    font-weight: 600;
    color: var(--neo-dark-slate);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Custom Slider Styling */
.neo-slider-container {
    padding: 0.5rem 0;
}

.neo-slider {
    width: 100%;
    height: 6px;
    background: var(--bs-border-color);
    border-radius: 3px;
    outline: none;
    transition: var(--neo-transition-fast);
}

.neo-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--neo-mint) 0%, #4a90e2 100%);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--neo-transition-fast);
    border: 2px solid var(--neo-white);
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.15);
}

.neo-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 4px 15px rgba(93, 173, 226, 0.3);
}

.neo-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--neo-mint) 0%, #4a90e2 100%);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--neo-white);
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.15);
    transition: var(--neo-transition-fast);
}

.neo-slider::-moz-range-thumb:hover {
    box-shadow: 0 4px 15px rgba(93, 173, 226, 0.3);
}

/* Radio Button Custom Styling */
.form-check-input:checked {
    background-color: var(--neo-mint);
    border-color: var(--neo-mint);
}

.form-check-input:focus {
    border-color: var(--neo-mint);
    box-shadow: 0 0 0 0.25rem rgba(93, 173, 226, 0.25);
}

/* 9. UTILITY CLASSES
-------------------------------------------------- */
.neo-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(93, 173, 226, 0.2);
}

.neo-shadow {
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.1);
}

.neo-shadow-lg {
    box-shadow: 0 10px 30px rgba(44, 62, 80, 0.15);
}

.neo-gradient-bg {
    background: linear-gradient(
        135deg,
        var(--neo-dark-slate) 0%,
        var(--neo-black) 100%
    );
}

.neo-text-gradient {
    background: linear-gradient(
        135deg,
        var(--neo-dark-slate) 0%,
        var(--neo-mint) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 10. RESPONSIVE DESIGN
-------------------------------------------------- */
@media (max-width: 991.98px) {
    .neo-sidebar {
        transform: translateX(-100%);
    }

    .neo-sidebar.show {
        transform: translateX(0);
    }

    .neo-main {
        margin-left: 0;
    }

    .neo-main.sidebar-collapsed {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .neo-main-content {
        padding: 0.25rem;
    }

    .neo-card-header,
    .neo-card-body {
        padding: 0.25rem;
    }
}

/* 11. LOADING & ANIMATIONS
-------------------------------------------------- */
.neo-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(93, 173, 226, 0.2);
    border-radius: 50%;
    border-top-color: var(--neo-mint);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.neo-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

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

/* 12. STAT CARDS
-------------------------------------------------- */
.neo-stat-card {
    background: var(--neo-white);
    border: 1px solid var(--bs-border-color);
    padding: 1.5rem;
    transition: var(--neo-transition-fast);
    position: relative;
    overflow: hidden;
}

.neo-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--neo-mint) 0%, #4a90e2 100%);
}

.neo-stat-card:hover {
    box-shadow: 0 8px 25px rgba(44, 62, 80, 0.1);
}

.neo-stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--neo-mint) 0%, #4a90e2 100%);
    color: var(--neo-white);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.neo-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--neo-black);
    margin-bottom: 0.5rem;
}

.neo-stat-label {
    font-weight: 600;
    color: var(--neo-mid-slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

.neo-stat-change {
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.neo-stat-change.positive {
    color: #22c55e;
}

.neo-stat-change.negative {
    color: #ef4444;
}

/* Bootstrap overrides */
.btn-primary {
    @extend .neo-btn, .neo-btn-primary;
}

.btn-secondary {
    @extend .neo-btn, .neo-btn-secondary;
}

.btn-outline-primary {
    @extend .neo-btn, .neo-btn-outline;
}

.card {
    @extend .neo-card;
}

.form-control {
    @extend .neo-form-control;
}

.form-label {
    @extend .neo-form-label;
}

/* 13. DARK THEME SYSTEM
-------------------------------------------------- */

/* Dark theme variables */
[data-theme="dark"] {
    --neo-bg: #1a1a1a;
    --neo-card-bg: #2d2d2d;
    --neo-text: #e9ecef;
    --neo-text-muted: #adb5bd;
    --neo-border: #495057;
    --neo-light-bg: #343a40;
    --neo-input-bg: #495057;
    --neo-input-border: #6c757d;
    --neo-dark-slate: #b8dbda;
    --neo-mid-slate: #a8c8c7;
    --neo-mint: #2c3e50;
    --neo-white: #1a1a1a;
}

/* Auto theme detection */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --neo-bg: #1a1a1a;
        --neo-card-bg: #2d2d2d;
        --neo-text: #e9ecef;
        --neo-text-muted: #adb5bd;
        --neo-border: #495057;
        --neo-light-bg: #343a40;
        --neo-input-bg: #495057;
        --neo-input-border: #6c757d;
        --neo-dark-slate: #b8dbda;
        --neo-mid-slate: #a8c8c7;
        --neo-mint: #2c3e50;
        --neo-white: #1a1a1a;
    }
}

/* Global theme application */
html,
body {
    background-color: var(--neo-bg) !important;
    color: var(--neo-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] body,
[data-theme="dark"] html {
    background-color: #1a1a1a !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .container-fluid,
[data-theme="dark"] .container,
[data-theme="dark"] main {
    background-color: #1a1a1a !important;
    color: #e9ecef !important;
}

/* Cards and panels */
.neo-card,
.card {
    background-color: var(--neo-card-bg) !important;
    border-color: var(--neo-border) !important;
    color: var(--neo-text) !important;
}

[data-theme="dark"] .neo-card,
[data-theme="dark"] .card {
    background-color: #2d2d2d !important;
    border-color: #495057 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .neo-card-header,
[data-theme="dark"] .card-header {
    background-color: #343a40 !important;
    border-bottom-color: #495057 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .neo-card-body,
[data-theme="dark"] .card-body {
    background-color: #2d2d2d !important;
    color: #e9ecef !important;
}

/* Form elements */
.neo-form-control,
.form-control,
.form-select {
    background-color: var(--neo-input-bg) !important;
    border-color: var(--neo-input-border) !important;
    color: var(--neo-text) !important;
}

[data-theme="dark"] .neo-form-control,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .neo-form-control:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #495057 !important;
    border-color: #b8dbda !important;
    color: #e9ecef !important;
    box-shadow: 0 0 0 0.25rem rgba(184, 219, 217, 0.25) !important;
}

[data-theme="dark"] .neo-form-control::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: #adb5bd !important;
}

/* Text colors */
.text-muted {
    color: var(--neo-text-muted) !important;
}

[data-theme="dark"] .text-muted {
    color: #adb5bd !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #e9ecef !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div {
    color: #e9ecef !important;
}

[data-theme="dark"] .neo-form-label,
[data-theme="dark"] .form-label,
[data-theme="dark"] label {
    color: #e9ecef !important;
}

/* Sidebar fixes for dark mode */
[data-theme="dark"] .neo-sidebar {
    background: #2d2d2d !important;
    border-right-color: #495057 !important;
}

[data-theme="dark"] .neo-sidebar-header {
    background-color: #2d2d2d !important;
    color: #e9ecef !important;
    border-bottom-color: #495057 !important;
}

[data-theme="dark"] .neo-sidebar-nav {
    background-color: #2d2d2d !important;
}

[data-theme="dark"] .neo-sidebar .nav-section {
    background-color: #2d2d2d !important;
}

[data-theme="dark"] .neo-sidebar .nav-section-title {
    color: #adb5bd !important;
    background-color: #2d2d2d !important;
}

[data-theme="dark"] .neo-sidebar .nav-link {
    color: #e9ecef !important;
    background-color: #2d2d2d !important;
}

[data-theme="dark"] .neo-sidebar .nav-link:hover {
    background-color: #343a40 !important;
    color: #b8dbda !important;
}

[data-theme="dark"] .neo-sidebar .nav-link.active {
    background: linear-gradient(135deg, #b8dbda 0%, #a8c8c7 100%) !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] .neo-sidebar .nav-badge {
    background-color: #b8dbda !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] .neo-sidebar-toggle {
    background-color: #2d2d2d !important;
    color: #e9ecef !important;
    border-color: #495057 !important;
}

[data-theme="dark"] .neo-sidebar-toggle:hover {
    background-color: #343a40 !important;
    color: #b8dbda !important;
}

/* Navbar fixes for dark mode */
[data-theme="dark"] .neo-navbar {
    background: linear-gradient(90deg, #343a40 0%, #495057 100%) !important;
    border-bottom: 2px solid #6c757d !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .neo-navbar .navbar-brand {
    color: #f8f9fa !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .neo-navbar .navbar-nav .nav-link {
    color: #e9ecef !important;
}

[data-theme="dark"] .neo-navbar .navbar-nav .nav-link:hover {
    color: #b8dbda !important;
}

[data-theme="dark"] .neo-navbar .btn-link {
    color: #e9ecef !important;
}

[data-theme="dark"] .neo-navbar .btn-link:hover {
    color: #b8dbda !important;
}

[data-theme="dark"] .dropdown-menu {
    background-color: #2d2d2d !important;
    border-color: #495057 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .dropdown-item {
    color: #e9ecef !important;
    background-color: transparent !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: #343a40 !important;
    color: #b8dbda !important;
}

[data-theme="dark"] .dropdown-divider {
    border-color: #495057 !important;
}

/* Buttons */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .neo-btn-primary {
    background: linear-gradient(135deg, #b8dbda 0%, #a8c8c7 100%) !important;
    border-color: #b8dbda !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .neo-btn-primary:hover {
    background: linear-gradient(135deg, #a8c8c7 0%, #b8dbda 100%) !important;
    box-shadow: 0 8px 25px rgba(184, 219, 217, 0.3) !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] .btn-outline-primary {
    border-color: #b8dbda !important;
    color: #b8dbda !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #b8dbda !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .neo-btn-secondary {
    background-color: #495057 !important;
    border-color: #495057 !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .neo-btn-outline {
    border-color: #6c757d !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .neo-btn-outline:hover {
    background-color: #6c757d !important;
    color: #e9ecef !important;
}

/* Badges */
[data-theme="dark"] .badge {
    background-color: #495057 !important;
    color: #e9ecef !important;
    border: 1px solid #6c757d !important;
}

[data-theme="dark"] .badge.bg-success {
    background-color: #198754 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .badge.bg-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #1a1a1a !important;
}

/* Form check elements */
[data-theme="dark"] .form-check-label {
    color: #e9ecef !important;
}

[data-theme="dark"] .form-check-input {
    background-color: #495057 !important;
    border-color: #6c757d !important;
}

[data-theme="dark"] .form-check-input:checked {
    background-color: #b8dbda;
    border-color: #b8dbda;
}

[data-theme="dark"] .form-check-input:focus {
    border-color: #b8dbda !important;
    box-shadow: 0 0 0 0.25rem rgba(184, 219, 217, 0.25) !important;
}

/* Alerts */
[data-theme="dark"] .alert {
    border-color: #495057 !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.2) !important;
    border-color: #198754 !important;
    color: #75b798 !important;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-color: #dc3545 !important;
    color: #ea868f !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    border-color: #ffc107 !important;
    color: #ffda6a !important;
}

/* Tables */
[data-theme="dark"] .table {
    color: #e9ecef !important;
}

[data-theme="dark"] .table th {
    border-color: #495057 !important;
    background-color: #343a40 !important;
}

[data-theme="dark"] .table td {
    border-color: #495057 !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Additional elements */
[data-theme="dark"] hr {
    border-color: #495057 !important;
    opacity: 0.3;
}

[data-theme="dark"] .border {
    border-color: #495057 !important;
}

[data-theme="dark"] small {
    color: #adb5bd !important;
}

[data-theme="dark"] strong {
    color: #f8f9fa !important;
}

/* Navigation pills */
[data-theme="dark"] .nav-pills .nav-link {
    color: #e9ecef !important;
    background: transparent !important;
}

[data-theme="dark"] .nav-pills .nav-link:hover {
    background: #343a40 !important;
    border-color: #b8dbda !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #b8dbda 0%, #a8c8c7 100%) !important;
    border-color: #b8dbda !important;
    color: #1a1a1a !important;
}

/* Tab content */
[data-theme="dark"] .tab-content {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .tab-pane {
    background-color: #1a1a1a !important;
    color: #e9ecef !important;
}

/* Theme notification */
.theme-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--neo-card-bg);
    color: var(--neo-text);
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid var(--neo-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
    font-weight: 500;
}

.theme-notification.show {
    transform: translateX(0);
    opacity: 1;
}

/* Settings page specific */
[data-theme="dark"] .nav-pills .nav-link {
    border-radius: 0;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    color: #e9ecef !important;
    background: transparent !important;
}

[data-theme="dark"] .nav-pills .nav-link:hover {
    background: #343a40 !important;
    border-color: #b8dbda !important;
    color: #e9ecef !important;
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #b8dbda 0%, #a8c8c7 100%) !important;
    border-color: #b8dbda !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] .session-list {
    background-color: #2d2d2d !important;
}

[data-theme="dark"] .session-item {
    color: #e9ecef !important;
    border-color: #495057 !important;
}

[data-theme="dark"] .notification-group {
    color: #e9ecef !important;
}

[data-theme="dark"] .security-section {
    color: #e9ecef !important;
    border-color: #495057 !important;
}

[data-theme="dark"] .privacy-section {
    color: #e9ecef !important;
    border-color: #495057 !important;
}

[data-theme="dark"] .strength-meter {
    background: #495057 !important;
}

[data-theme="dark"] .strength-bar {
    background: linear-gradient(
        90deg,
        #dc3545 0%,
        #ffc107 50%,
        #28a745 100%
    ) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .theme-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        transform: translateY(-100%);
    }

    .theme-notification.show {
        transform: translateY(0);
    }
}

/* Utility classes */
.neo-italic {
    font-style: italic;
}

.neo-hover-card {
    transition: all 0.2s ease;
}

.neo-hover-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Styles pour les cartes de sélection de catégorie */
.neo-category-card {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.neo-category-card:hover {
    border-color: var(--neo-mint);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--neo-shadow-lg);
}

/* Email Dashboard Styles */
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

.toast-enter {
    animation: slideIn 0.3s ease-out;
}

.toast-leave {
    animation: slideOut 0.3s ease-out;
}

/* Styles pour la navigation au clavier */
.keyboard-nav button:focus,
.keyboard-nav input:focus,
.keyboard-nav select:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Amélioration de la lisibilité */
.email-content {
    line-height: 1.6;
}

.email-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Indicateur de chargement personnalisé */
.loading-spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hover effects améliorés */
.email-row:hover {
    background-color: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        height: 100vh;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        background-color: #1a1a1a;
        color: #e5e5e5;
    }

    .dark-mode .bg-white {
        background-color: #2d2d2d;
    }

    .dark-mode .text-gray-900 {
        color: #e5e5e5;
    }

    .dark-mode .border-gray-200 {
        border-color: #404040;
    }
}

[data-theme="dark"] .dark-mode .border-gray-200 {
    border-color: #374151; /* gray-700 */
}

.fixed-bottom-slider {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* Ensure it's above most elements */
    background: white;
    border-top: 1px solid #dee2e6;
    padding: 1rem;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
 /* AJOUT PAR GEORGES */

 .container-fluid.section {
    margin-bottom: 4%;
    box-shadow: 0 2px 4px var(--neo-shadow);
    padding: 12px 16px;
    background: #9dd0ff12;
    border: 1px solid var(--neo-border);
    border-radius: 8px;
    transition: var(--neo-transition-fast);
}

input.form-control.neo-form-control::placeholder {
    font-style: italic;
    font-size: 13px;
    color: #9c9c9c;
}

/* Item radio personnalisé */
.custom-radio-item {
    position: relative;
    cursor: pointer;
    min-width: 20%;
}

/* Cache les inputs radio par défaut */
.custom-radio-item input[type="radio"] {
    display: none;
}
.custom-radio-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
    text-align: center;
    color: #495057;
    position: relative;
    padding: 5px;
    font-size: 0.8rem;
    --choice-color: #e9ecef; /* fallback */
}

/* Hover state */
.custom-radio-item:hover .custom-radio-button {
    background-color: var(--choice-color);
    filter: brightness(0.9);
    color: white!important;
}

/* Checked state */
.custom-radio-item input[type="radio"]:checked + .custom-radio-button {
    background-color: var(--choice-color);
    color: white!important;
    font-weight: 600;
}

/* Checkmark icon */
.custom-radio-item input[type="radio"]:checked + .custom-radio-button::after {
    content: '✓';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: white;
    color: var(--choice-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* Styles pour les états disabled (lecture seule) */
.opacity-50 .custom-radio-button {
    opacity: 0.6;
    cursor: not-allowed;
}


/* Responsive design */
@media (max-width: 576px) {
    .custom-radio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .custom-radio-button {
        min-height: 45px;
        padding: 10px 12px;
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .custom-radio-grid {
        grid-template-columns: 1fr;
    }
}

.section_title {
    font-weight: 800;
    width: 100%;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(500px);
    background: rgba(255, 255, 255, 0.6); /* optional, to help the blur */
}

.section_title::after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0) 100%
    );
}


.neo-action-btn.outline-success {
    color: var(--neo-success);
    border-color: var(--neo-success);
    background-color: transparent;
}

.neo-action-btn.outline-success:hover {
    color: var(--neo-white);
    background-color: var(--neo-success);
    border-color: var(--neo-success);
}

.neo-action-btn.outline-info {
    color: var(--neo-info);
    border-color: var(--neo-info);
    background-color: transparent;
    color: var(--neo-mid-slate) !important;
}

.neo-action-btn.outline-info:hover {
    color: var(--neo-white);
    background-color: var(--neo-info);
    border-color: var(--neo-info);
}

.neo-action-btn.warning {
    background: #ffc107;
    color: var(--neo-white);
    border-color: #ffc107;
}

/* ================================
   CHILD DOSSIER ACTIONS STYLES
   ================================ */

.child-dossier-container {
    position: relative;
}

.child-dossier-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    gap: 4px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.child-dossier-actions:hover {
    opacity: 1;
}

.child-dossier-container:hover .child-dossier-actions {
    opacity: 1;
}

.delete-child-btn:hover {
    z-index: 20;
}

.delete-child-btn:hover ~ * {
    pointer-events: none;
}

/* Highlight effect on hover */
.delete-child-btn:hover {
    position: relative;
}

.delete-child-btn:hover::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: rgba(220, 53, 69, 0.1);
    border: 2px solid rgba(220, 53, 69, 0.3);
    border-radius: 4px;
    pointer-events: none;
}

.child-dossier-container:has(.delete-child-btn:hover) {
    position: relative;
}

.child-dossier-container:has(.delete-child-btn:hover)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(220, 53, 69, 0.05);
    border: 2px solid rgba(220, 53, 69, 0.2);
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}

.child-dossier-container:has(.delete-child-btn:hover)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 10;
    pointer-events: none;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

/* ================================
   CUSTOM SELECT2 STYLES
   ================================ */

.select2-container {
    width: 100% !important;
    box-sizing: border-box;
}

.select2-container--default .select2-selection--single {
    background-color: var(--neo-light-bg);
    border: 1px solid var(--neo-border);
    border-radius: 6px !important;
    color: var(--neo-text);
    font-size: 0.9rem;
    font-weight: 500;
    height: calc(1.5em + 1.2rem + 2px);
    line-height: 1.5;
    padding: 0.6rem 1rem;
    transition: all 0.2s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--neo-text);
    line-height: 1.5;
    padding-left: 0;
    padding-right: 1.5rem; /* Space for the arrow */
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6c757d;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    position: absolute;
    top: 0;
    right: 1rem;
    width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--neo-text) transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--neo-text) transparent;
    border-width: 0 4px 5px 4px;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    background-color: #fff;
    border-color: var(--neo-primary);
    box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.2);
    outline: 0;
}

.select2-dropdown {
    background-color: var(--neo-light-bg);
    border: 1px solid var(--neo-border);
    border-radius: 6px !important;
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.1);
    margin-top: 2px;
    overflow: hidden;
    z-index: 9999;
}

.select2-search--dropdown {
    padding: 0.5rem;
}

.select2-search--dropdown .select2-search__field {
    background-color: #fff;
    border: 1px solid var(--neo-border);
    border-radius: 6px;
    color: var(--neo-text);
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    width: 100%;
    outline: none;
    box-sizing: border-box;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--neo-primary);
}

.select2-results__options {
    padding: 0;
    margin: 0;
    list-style: none;
}

.select2-results__option {
    padding: 0.6rem 1rem;
    transition: background-color 0.2s ease;
    color: var(--neo-text);
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--neo-primary-light);
    color: var(--neo-primary);
}

.select2-results__option[aria-selected=true] {
    background-color: #e9ecef;
}

.select2-results__message {
    color: #6c757d;
    padding: 0.6rem 1rem;
}

/* Dark theme styles for Select2 */
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--neo-dark-gray);
    border-color: var(--neo-mid-slate);
    color: var(--neo-light);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--neo-light);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6c757d;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--neo-light) transparent transparent transparent;
}

[data-theme="dark"].select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--neo-light) transparent;
}

[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--single:focus {
    background-color: var(--neo-dark-bg);
    border-color: var(--neo-mint);
    box-shadow: 0 0 0 3px rgba(184, 219, 217, 0.2);
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--neo-dark-bg);
    border-color: var(--neo-mid-slate);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--neo-dark-gray);
    border-color: var(--neo-mid-slate);
    color: var(--neo-light);
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--neo-mint);
}

[data-theme="dark"] .select2-results__option {
    color: var(--neo-light);
}

[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(184, 219, 217, 0.1);
    color: var(--neo-mint);
}

[data-theme="dark"] .select2-results__option[aria-selected=true] {
    background-color: var(--neo-dark-gray);
}

[data-theme="dark"] .select2-results__message {
    color: #adb5bd;
}

/* ================================
   BOOTSTRAP PAGINATION - NEO STYLE
   ================================ */

.pagination {
    gap: 0.25rem;
    margin-bottom: 0;
}

.pagination .page-item .page-link {
    border: 1px solid var(--neo-border);
    border-radius: 6px;
    background: var(--neo-light-bg);
    color: var(--neo-text);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    min-width: 36px;
    text-align: center;
    transition: var(--neo-transition-fast);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-item .page-link:hover {
    background: rgba(93, 173, 226, 0.1);
    border-color: rgba(93, 173, 226, 0.3);
    color: var(--neo-mint);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--neo-shadow);
}

.pagination .page-item .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(93, 173, 226, 0.25);
    outline: none;
}

.pagination .page-item.active .page-link {
    background: var(--neo-mint);
    border-color: var(--neo-mint);
    color: var(--neo-white);
    font-weight: 600;
}

.pagination .page-item.active .page-link:hover {
    background: var(--neo-dark-slate);
    border-color: var(--neo-dark-slate);
    transform: translateY(-1px);
}

.pagination .page-item.disabled .page-link {
    background: var(--neo-light-bg);
    border-color: var(--neo-border);
    color: var(--neo-text-muted);
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Navigation arrows (prev/next) */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    padding: 0.4rem 0.6rem;
}

/* Remove default Bootstrap border-radius overrides */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: 6px;
}

/* Dark theme pagination */
[data-theme="dark"] .pagination .page-item .page-link {
    background: var(--neo-dark-gray);
    border-color: var(--neo-mid-slate);
    color: var(--neo-light);
}

[data-theme="dark"] .pagination .page-item .page-link:hover {
    background: rgba(184, 219, 217, 0.1);
    border-color: var(--neo-mint);
    color: var(--neo-mint);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background: var(--neo-mint);
    border-color: var(--neo-mint);
    color: var(--neo-dark-slate);
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background: var(--neo-dark-gray);
    border-color: var(--neo-mid-slate);
    color: #6c757d;
    opacity: 0.5;
}

/* ==========================================================================
   ACHIEVEMENTS SYSTEM
   ========================================================================== */

/* Shared Tiers */
.achievement-tier-bronze { background: linear-gradient(135deg, #cd7f32 0%, #8b5a2b 100%); color: #fff; border: 1px solid rgba(205, 127, 50, 0.4); text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.achievement-tier-argent { background: linear-gradient(135deg, #e8e8e8 0%, #a0a0a0 100%); color: #333; border: 1px solid rgba(192, 192, 192, 0.4); }
.achievement-tier-or { background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%); color: #333; border: 1px solid rgba(255, 215, 0, 0.4); font-weight: 800; }
.achievement-tier-diamant { background: linear-gradient(135deg, #b9f2ff 0%, #4fc3f7 100%); color: #0d47a1; border: 1px solid rgba(79, 195, 247, 0.4); }
.achievement-tier-legendaire { background: linear-gradient(135deg, #e040fb 0%, #7c4dff 100%); color: #fff; border: 1px solid rgba(124, 77, 255, 0.4); }
.achievement-tier-unlocked { background: linear-gradient(135deg, #28a745, #20c997); color: #fff; }

/* 1. TOAST (Celebration) */
.ach-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: achOverlayIn 0.3s ease-out;
}
@keyframes achOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.ach-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.85) 0%, rgba(2, 6, 23, 0.95) 100%);
    backdrop-filter: blur(8px);
}

.ach-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

.ach-burst { position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: 0; }
.ach-burst-ray {
    position: absolute;
    top: 0; left: 0; width: 2px; height: 150vh;
    transform-origin: top center;
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.2) 0%, transparent 60%);
    animation: achBurstExpand 1.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes achBurstExpand { from { opacity: 0; height: 0; } 30% { opacity: 1; } to { opacity: 0; height: 150vh; } }

.ach-card {
    position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 60px 80px; max-width: 600px;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    animation: achCardIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0; animation-delay: 0.2s;
}
@keyframes achCardIn { from { opacity: 0; transform: scale(0.6) translateY(40px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.ach-card-glow {
    position: absolute; top: 50%; left: 50%; width: 400px; height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 215, 0, 0.12) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
    animation: achGlowPulse 4s ease-in-out infinite;
}
@keyframes achGlowPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; } }

.ach-label { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; animation: achLabelIn 0.6s ease-out forwards; opacity: 0; animation-delay: 0.6s; }
@keyframes achLabelIn { from { opacity: 0; letter-spacing: 8px; } to { opacity: 1; letter-spacing: 4px; } }
.ach-label-text { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 4px; color: #FFD700; white-space: nowrap; }
.ach-label-line { display: block; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, #FFD700, transparent); }

.ach-icon-container { position: relative; width: 150px; height: 150px; margin-bottom: 32px; }
.ach-icon-ring { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 215, 0, 0.2); }
.ach-icon-ring-outer { inset: -15px; animation: achRingSpin 10s linear infinite; border-style: dashed; }
.ach-icon-ring-inner { inset: -6px; animation: achRingSpin 6s linear infinite reverse; border-color: rgba(255, 215, 0, 0.4); }
@keyframes achRingSpin { to { transform: rotate(360deg); } }

.ach-icon {
    position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    animation: achIconIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; opacity: 0; animation-delay: 0.5s;
}
@keyframes achIconIn { from { opacity: 0; transform: scale(0) rotate(-180deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
.ach-icon i { font-size: 3.5rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }

.ach-icon-bronze { background: linear-gradient(135deg, #cd7f32 0%, #8b5a2b 100%); box-shadow: 0 0 50px rgba(205, 127, 50, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.2); }
.ach-icon-bronze i { color: #fff; }
.ach-icon-argent { background: linear-gradient(135deg, #e8e8e8 0%, #a0a0a0 100%); box-shadow: 0 0 50px rgba(192, 192, 192, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.3); }
.ach-icon-argent i { color: #333; }
.ach-icon-or { background: linear-gradient(135deg, #ffd700 0%, #ffa500 50%, #ffd700 100%); box-shadow: 0 0 80px rgba(255, 215, 0, 0.6), 0 0 150px rgba(255, 165, 0, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.4); animation: achIconInGold 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.5s; }
.ach-icon-or i { color: #1a1a2e; }
@keyframes achIconInGold { from { opacity: 0; transform: scale(0) rotate(-180deg); filter: brightness(2); } 60% { filter: brightness(1.5); } to { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); } }
.ach-icon-diamant { background: linear-gradient(135deg, #b9f2ff 0%, #4fc3f7 50%, #81d4fa 100%); box-shadow: 0 0 80px rgba(79, 195, 247, 0.6), inset 0 0 30px rgba(255, 255, 255, 0.5); }
.ach-icon-diamant i { color: #0d47a1; }
.ach-icon-legendaire { background: linear-gradient(135deg, #e040fb 0%, #7c4dff 50%, #e040fb 100%); box-shadow: 0 0 80px rgba(124, 77, 255, 0.6), 0 0 150px rgba(224, 64, 251, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.3); }
.ach-icon-legendaire i { color: #fff; }
.ach-icon-unlocked { background: linear-gradient(135deg, #ffd700, #ffa500); box-shadow: 0 0 50px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.2); }
.ach-icon-unlocked i { color: #1a1a2e; }

.ach-tier { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; padding: 6px 24px; border-radius: 20px; margin-bottom: 24px; animation: achFadeUp 0.5s ease-out forwards; opacity: 0; animation-delay: 0.9s; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.ach-name { font-size: 2.5rem; font-weight: 900; color: #fff; margin: 0 0 16px; line-height: 1.2; animation: achFadeUp 0.5s ease-out forwards; opacity: 0; animation-delay: 0.8s; text-shadow: 0 2px 20px rgba(255, 215, 0, 0.4); }
.ach-desc { font-size: 1.1rem; color: rgba(255, 255, 255, 0.85); margin: 0 0 24px; max-width: 440px; line-height: 1.6; animation: achFadeUp 0.5s ease-out forwards; opacity: 0; animation-delay: 1s; }
.ach-category { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(255, 255, 255, 0.5); margin-bottom: 32px; animation: achFadeUp 0.5s ease-out forwards; opacity: 0; animation-delay: 1.1s; }

.ach-dismiss { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2)); border: 1px solid rgba(255, 215, 0, 0.4); color: #FFD700; font-weight: 800; font-size: 1rem; padding: 14px 48px; border-radius: 30px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: achFadeUp 0.5s ease-out forwards; opacity: 0; animation-delay: 1.2s; backdrop-filter: blur(4px); }
.ach-dismiss:hover { background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(255, 165, 0, 0.35)); box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); transform: translateY(-3px) scale(1.02); color: #fff; }
.ach-queue-hint { margin-top: 20px; font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.4); animation: achFadeUp 0.5s ease-out forwards; opacity: 0; animation-delay: 1.3s; }
@keyframes achFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* 2. SHOWCASE (Profile Page) */
.achievement-card {
    display: flex; gap: 16px; padding: 18px; border-radius: 16px;
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
    background: rgba(var(--bs-body-color-rgb), 0.02);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}
.achievement-card:hover { transform: translateY(-4px); border-color: rgba(255, 215, 0, 0.3); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.achievement-unlocked { background: rgba(var(--bs-body-color-rgb), 0.04); border-color: rgba(255, 215, 0, 0.2); }
.achievement-locked { opacity: 0.6; filter: grayscale(1); transition: filter 0.3s, opacity 0.3s; }
.achievement-locked:hover { filter: grayscale(0.5); opacity: 0.9; border-color: rgba(var(--bs-body-color-rgb), 0.2); }

.achievement-card-icon {
    position: relative; flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--bs-body-color-rgb), 0.05);
    border: 2px solid rgba(var(--bs-body-color-rgb), 0.1);
    transition: all 0.3s;
}
.achievement-card-icon i { font-size: 1.8rem; color: rgba(var(--bs-body-color-rgb), 0.4); transition: color 0.3s; }

.achievement-icon-active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
    border-color: rgba(255, 215, 0, 0.5);
    animation: achievementShine 4s ease-in-out infinite;
}
.achievement-icon-active i { color: #FFD700; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)); }

.achievement-icon-bronze { background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(139, 90, 43, 0.2)); border-color: rgba(205, 127, 50, 0.5); animation: achievementShine 4s ease-in-out infinite; }
.achievement-icon-bronze i { color: #cd7f32; filter: drop-shadow(0 2px 4px rgba(205, 127, 50, 0.3)); }

.achievement-icon-argent { background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), rgba(160, 160, 160, 0.2)); border-color: rgba(192, 192, 192, 0.5); animation: achievementShine 4s ease-in-out infinite; }
.achievement-icon-argent i { color: #e8e8e8; filter: drop-shadow(0 2px 4px rgba(192, 192, 192, 0.3)); }

.achievement-icon-or { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2)); border-color: rgba(255, 215, 0, 0.5); animation: achievementShine 4s ease-in-out infinite; }
.achievement-icon-or i { color: #FFD700; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)); }

.achievement-icon-diamant { background: linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(129, 212, 250, 0.2)); border-color: rgba(79, 195, 247, 0.5); animation: achievementShine 4s ease-in-out infinite; }
.achievement-icon-diamant i { color: #4fc3f7; filter: drop-shadow(0 2px 4px rgba(79, 195, 247, 0.3)); }

.achievement-icon-legendaire { background: linear-gradient(135deg, rgba(224, 64, 251, 0.2), rgba(124, 77, 255, 0.2)); border-color: rgba(224, 64, 251, 0.5); animation: achievementShine 4s ease-in-out infinite; }
.achievement-icon-legendaire i { color: #e040fb; filter: drop-shadow(0 2px 4px rgba(224, 64, 251, 0.3)); }

@keyframes achievementShine { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.2); } 50% { box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.2); } }

.achievement-tier-indicator {
    position: absolute; bottom: -6px; right: -6px; font-size: 0.6rem; font-weight: 800;
    padding: 2px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.achievement-card-info { flex: 1; min-width: 0; }
.achievement-card-name { font-weight: 800; font-size: 1rem; line-height: 1.2; margin-bottom: 4px; color: var(--bs-heading-color); }
.achievement-card-desc { font-size: 0.8rem; color: rgba(var(--bs-body-color-rgb), 0.65); line-height: 1.4; margin-bottom: 8px; }

.achievement-progress-wrap .progress { background: rgba(var(--bs-body-color-rgb), 0.1); overflow: visible; }
.achievement-progress-wrap .progress-bar { position: relative; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
.achievement-progress-wrap .progress-bar::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: achProgressShine 2s linear infinite;
}
@keyframes achProgressShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }