#menu_content::-webkit-scrollbar {
    width: 16px;
}

#menu_content::-webkit-scrollbar-track {
    border-radius: 8px;
}

#menu_content::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: #888888;
}

/* Mode clair - scrollbar plus visible */
body.light-theme #menu_content::-webkit-scrollbar-thumb {
    background-color: #6c757d;
}

body.light-theme #menu_content::-webkit-scrollbar-track {
    background-color: #f8f9fa;
}

/* Mode sombre */
body.dark-theme #menu_content::-webkit-scrollbar-thumb {
    background-color: #ffffff;
}

body.dark-theme #menu_content::-webkit-scrollbar-track {
    background-color: #2c3e50;
}

ul .dropdown-menu :hover {
    background-color: rgb(37, 76, 161);
    color: white;
}

ul .dropdown-menu :hover {
    background-color: rgb(37, 76, 161);
    color: white;
    font-weight: bold;
}

/* Mode clair - dropdown hover */
body.light-theme ul .dropdown-menu :hover {
    background-color: #007bff;
    color: white;
}

#menu_content .navbar-nav .nav-item :hover {
    background-color: rgb(51, 152, 206);
    color: white;
}

/* Mode clair - menu hover */
body.light-theme #menu_content .navbar-nav .nav-item :hover {
    background-color: #007bff;
    color: white;
}

#menu {
    column-gap: 20px;
    margin-top: -16px;
    border-top-right-radius: 10px;
}

#menu_content {
    border-radius: 8px;
    height: 752px;
    margin-top: -9px;
    overflow-y: auto;
}

/* Mode claire - menu content */
body.light-theme #menu_content {
    background-color: #ffffff;
    color: #212529;
    border: 1px solid #dee2e6;
}

/* Mode sombre - menu content */
body.dark-theme #menu_content {
    background-color: #1a1a2e;
    color: #e2e8f0;
}

/* Les règles globales agressives ont été déplacées et affinées dans base.html 
   pour permettre une meilleure gestion des cas particuliers. */

/* Cards en mode sombre - compléments */
body.dark-theme .card {
    background-color: #2d3748;
    border-color: #4a5568;
}

body.dark-theme .card-header {
    background-color: #1a202c;
    border-color: #4a5568;
}

body.dark-theme .card-body {
    background-color: #2d3748;
}

/* Liens en mode sombre */
body.dark-theme a {
    color: #63b3ed !important;
}

body.dark-theme a:hover {
    color: #90cdf4 !important;
}

/* Tableaux en mode sombre */
body.dark-theme .table {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

body.dark-theme .table thead th {
    background-color: #1a202c !important;
    color: #f7fafc !important;
    border-color: #4a5568 !important;
}

body.dark-theme .table tbody tr {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .table tbody tr:hover {
    background-color: #4a5568 !important;
}

body.dark-theme .table td,
body.dark-theme .table th {
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

/* Boutons en mode sombre */
body.dark-theme .btn {
    color: #e2e8f0 !important;
}

body.dark-theme .btn-dark {
    background-color: #1a202c !important;
    border-color: #4a5568 !important;
    color: #f7fafc !important;
}

body.dark-theme .btn-light {
    background-color: #4a5568 !important;
    border-color: #4a5568 !important;
    color: #f7fafc !important;
}

/* Formulaires en mode sombre */
body.dark-theme .form-control {
    background-color: #1a202c !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .form-control::placeholder {
    color: #718096 !important;
    opacity: 1;
}

body.dark-theme .form-select {
    background-color: #1a202c !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .form-select option {
    background-color: #1a202c !important;
    color: #e2e8f0 !important;
}

body.dark-theme .form-label {
    color: #e2e8f0 !important;
}

body.dark-theme input::placeholder {
    color: #718096 !important;
    opacity: 1;
}

/* Modales en mode sombre */
body.dark-theme .modal-content {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .modal-header {
    background-color: #1a202c !important;
    border-color: #4a5568 !important;
    color: #f7fafc !important;
}

body.dark-theme .modal-title {
    color: #f7fafc !important;
}

body.dark-theme .modal-body {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .modal-footer {
    background-color: #1a202c !important;
    border-color: #4a5568 !important;
}

/* Alertes en mode sombre */
body.dark-theme .alert {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .alert-warning {
    background-color: #744210 !important;
    border-color: #b45309 !important;
    color: #fde68a !important;
}

body.dark-theme .alert-danger {
    background-color: #7f1d1d !important;
    border-color: #dc2626 !important;
    color: #fca5a5 !important;
}

body.dark-theme .alert-success {
    background-color: #064e3b !important;
    border-color: #10b981 !important;
    color: #a7f3d0 !important;
}

/* Badges en mode sombre */
body.dark-theme .badge {
    color: #ffffff !important;
    background-color: #4a5568 !important;
}

/* Listes en mode sombre */
body.dark-theme .list-group-item {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .list-group-item:hover {
    background-color: #4a5568 !important;
}

body.dark-theme .list-group-item.active {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* Accordéon en mode sombre */
body.dark-theme .accordion-item {
    background-color: #2d3748 !important;
    border: 1px solid #4a5568 !important;
}

body.dark-theme .accordion-button {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

body.dark-theme .accordion-button:not(.collapsed) {
    background-color: #4a5568 !important;
    color: #90cdf4 !important;
}

body.dark-theme .accordion-body {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

/* Dropdown en mode sombre */
body.dark-theme .dropdown-menu {
    background-color: #2d3748 !important;
    border: 1px solid #4a5568 !important;
}

body.dark-theme .dropdown-item {
    color: #e2e8f0 !important;
}

body.dark-theme .dropdown-item:hover {
    background-color: #4a5568 !important;
    color: #90cdf4 !important;
}

body.dark-theme .dropdown-divider {
    border-color: #4a5568 !important;
}

/* Borders en mode sombre */
body.dark-theme .border,
body.dark-theme .border-top,
body.dark-theme .border-bottom,
body.dark-theme .border-start,
body.dark-theme .border-end {
    border-color: #4a5568 !important;
}

body.dark-theme .border-dark {
    border-color: #4a5568 !important;
}

/* Progress bar en mode sombre */
body.dark-theme .progress {
    background-color: #1a202c !important;
}

body.dark-theme .progress-bar {
    background-color: #2563eb !important;
}

/* Tooltips en mode sombre */
body.dark-theme .tooltip-inner {
    background-color: #1a202c !important;
    color: #e2e8f0 !important;
}

/* ========== RÉDUCTION TAILLE DES CARDS GLOBALE ========== */
.card {
    margin-bottom: 0.75rem !important;
}

.card-header {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.95rem !important;
}

.card-body {
    padding: 0.75rem !important;
}

.card-footer {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.95rem !important;
}

.card-title {
    margin-bottom: 0.5rem !important;
    font-size: 1rem !important;
}

.card-text {
    margin-bottom: 0.25rem !important;
    font-size: 0.95rem !important;
}

/* Réduction des tableaux dans les cards */
.card .table {
    margin-bottom: 0 !important;
    font-size: 0.9rem !important;
}

.card .table thead th {
    padding: 0.4rem 0.5rem !important;
}

.card .table td {
    padding: 0.4rem 0.5rem !important;
}

/* Réduction des boutons dans les cards */
.card .btn {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.85rem !important;
}

.card .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
}

/* Réduction des listes */
.list-group-item {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.95rem !important;
}

/* Réduction globale des espacements */
.container,
.container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.row {
    margin-left: -0.375rem !important;
    margin-right: -0.375rem !important;
}

[class*="col-"] {
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
}

/* Réduction du padding des badges */
.badge {
    padding: 0.35em 0.65em !important;
    font-size: 0.85em !important;
}

/* ========== CLASSES POUR REMPLACER CSS INLINE ========== */

/* Affichage/Masquage */
.hidden-element {
    display: none !important;
}

.visible-element {
    display: block !important;
}

/* Icons et sizes */
.icon-small {
    font-size: 1.5rem;
    margin-right: 0.75rem;
}

.icon-lg {
    font-size: 3rem;
}

.icon-xl {
    font-size: 2.5rem;
}

/* Images */
.img-product {
    height: 120px;
    width: 100%;
    object-fit: cover;
}

.img-qr-code {
    display: block;
}

/* Textes */
.text-underline {
    text-decoration: underline;
}

.text-bold-large {
    font-weight: bold;
    font-size: 19px;
}

.text-small {
    font-size: 0.85rem;
}

.text-tiny {
    font-size: 10px;
}

/* Cards */
.card-receipt {
    border: 1px solid #333;
    background-color: #ffffff;
    color: #212529;
}

body.dark-theme .card-receipt {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

.card-sticky-top {
    height: 100%;
    position: sticky;
    top: 20px;
}

/* Inputs et formulaires */
.input-date-custom {
    border: 2px solid #10b981 !important;
    border-radius: 0.75rem;
}

body.dark-theme .input-date-custom {
    background-color: #1a202c !important;
    color: #e2e8f0 !important;
    border: 2px solid #10b981 !important;
}

/* Boutons avec gradients */
.btn-gradient-primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    border: none;
    height: 150px;
}

.btn-gradient-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    height: 150px;
}

.btn-gradient-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    height: 150px;
}

.btn-gradient-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    border: none;
    height: 150px;
}

.btn-gradient-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    height: 150px;
}

.btn-gradient-pink {
    background: linear-gradient(135deg, #ec4899, #db2777);
    color: white;
    border: none;
    height: 150px;
}

.btn-gradient-teal {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: white;
    border: none;
    height: 150px;
}

.btn-gradient-orange {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    border: none;
    height: 150px;
}

.btn-gradient-lime {
    background: linear-gradient(135deg, #84cc16, #65a30d);
    color: white;
    border: none;
    height: 150px;
}

.btn-gradient-purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border: none;
    height: 150px;
}

.btn-gradient-blue {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit-green {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
}

body.dark-theme .btn-submit-green {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

/* Alert avec border-radius */
.alert-rounded {
    border-radius: 1rem;
}

.alert-rounded-mb {
    border-radius: 1rem;
    margin-bottom: 1rem;
}

/* Box shadow pour inputs */
.input-inset-shadow {
    box-shadow: inset 0 1px 2px rgba(58, 58, 58, 0.2);
}

body.dark-theme .input-inset-shadow {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Icon colors */
.icon-purple {
    color: #8b5cf6;
}

body.dark-theme .icon-purple {
    color: #c4b5fd !important;
}

/* Financial amount styling */
.financial-amount {
    background-color: #dc2626 !important;
    color: white !important;
}

body.dark-theme .financial-amount {
    background-color: #dc2626 !important;
    color: white !important;
}

/* Divider/spacer */
.icon-divider {
    font-size: 1.5rem;
}

/* Product card shadow */
.product-card-shadow {
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #1e3c72, #2a5298);
}

body.dark-theme .product-card-shadow {
    background: linear-gradient(135deg, #1e3c72, #2a5298) !important;
}

/* Toast notification icons */
.icon-notification-lg {
    font-size: 1.5rem;
    margin-right: 0.75rem;
}

/* Stat icon gradients */
.stat-icon-green {
    background: linear-gradient(135deg, #10b981, #059669);
}

.stat-icon-blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.stat-icon-amber {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-icon-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Card header with gradient */
.card-header-purple-gradient {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    border-radius: 1rem 1rem 0 0;
    padding: 1.5rem;
}

/* Text styling utility */
.text-xs-label {
    font-size: 0.75rem;
    font-weight: 600;
}

.text-lg-bold {
    font-size: 1.5rem;
    font-weight: 700;
}

.text-info-bold {
    color: #3b82f6;
    font-weight: 700;
}

body.dark-theme .text-info-bold {
    color: #60a5fa !important;
}

/* Alert info gradient */
.alert-info-gradient {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
    border-radius: 1rem;
    padding: 2rem;
}

body.dark-theme .alert-info-gradient {
    background: linear-gradient(135deg, #1e3a8a, #1e40af) !important;
    padding: 2rem;
    border-radius: 1rem;
}

/* Buttons with gradients and border-radius */
.btn-success-grad {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-radius: 0.75rem;
    padding: 1rem;
    color: white;
    border: none;
}

.btn-primary-grad {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    border-radius: 0.75rem;
    padding: 1rem;
    color: white;
    border: none;
}

.btn-warning-grad {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-radius: 0.75rem;
    padding: 1rem;
    color: white;
    border: none;
}

/* Purple input borders */
.input-border-purple {
    border: 2px solid #8b5cf6 !important;
    border-radius: 0.75rem !important;
}

body.dark-theme .input-border-purple {
    border: 2px solid #a78bfa !important;
}

/* Purple button gradient */
.btn-purple-grad {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
}

body.dark-theme .btn-purple-grad {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
}

/* Table header with purple gradient */
.table-header-purple-grad {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    color: white;
}

body.dark-theme .table-header-purple-grad {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
}

/* Badge with warning gradient */
.badge-warning-grad {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: white;
}

/* Icon colors for icons */
.icon-green {
    color: #059669;
}

body.dark-theme .icon-green {
    color: #10b981 !important;
}

.icon-dark-green {
    color: #065f46;
}

body.dark-theme .icon-dark-green {
    color: #10b981 !important;
}

.icon-forest-green {
    color: #047857;
}

body.dark-theme .icon-forest-green {
    color: #34d399 !important;
}

.icon-gray {
    color: #6b7280;
}

body.dark-theme .icon-gray {
    color: #9ca3af !important;
}

.icon-dark-gray {
    color: #1f2937;
}

body.dark-theme .icon-dark-gray {
    color: #d1d5db !important;
}

/* Text colors */
.text-dark-green {
    color: #065f46;
}

body.dark-theme .text-dark-green {
    color: #10b981 !important;
}

.text-forest-green {
    color: #047857;
}

body.dark-theme .text-forest-green {
    color: #34d399 !important;
}

.text-dark-gray {
    color: #1f2937;
}

body.dark-theme .text-dark-gray {
    color: #d1d5db !important;
}

.text-blue-dark {
    color: #1e40af;
}

body.dark-theme .text-blue-dark {
    color: #60a5fa !important;
}

.text-blue-primary {
    color: #3b82f6;
}

body.dark-theme .text-blue-primary {
    color: #60a5fa !important;
}

/* PWA update button */
.btn-pwa-update {
    background: white !important;
    border: none !important;
    color: #667eea !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
}

body.dark-theme .btn-pwa-update {
    background: #1f2937 !important;
    color: #a5b4fc !important;
}

/* Button gradient for submit with shadow */
.btn-submit-gradient {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 2.5rem !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

body.dark-theme .btn-submit-gradient {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5) !important;
}

/* Alert with border-radius and padding */
.alert-danger-rounded {
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

body.dark-theme .alert-danger-rounded {
    border-radius: 1rem;
    padding: 2rem;
}

/* Input border blue */
.input-border-blue {
    border: 2px solid #3b82f6 !important;
    border-radius: 0.75rem !important;
}

body.dark-theme .input-border-blue {
    border: 2px solid #60a5fa !important;
}

/* Icon colors for form labels */
.icon-blue {
    color: #3b82f6;
}

.icon-blue-dark {
    color: #2563eb;
}

body.dark-theme .icon-blue,
body.dark-theme .icon-blue-dark {
    color: #60a5fa !important;
}

.text-blue-dark-secondary {
    color: #1d4ed8;
}

body.dark-theme .text-blue-dark-secondary {
    color: #60a5fa !important;
}

/* Hidden element display */
.hidden-display {
    display: none;
}

/* Button border-radius utility (can be added to existing buttons) */
.btn-rounded {
    border-radius: 0.75rem;
}

.btn-rounded-lg {
    border-radius: 0.75rem;
    padding: 0.75rem 2rem;
}

.btn-rounded-sm {
    border-radius: 0.75rem;
    padding: 0.6rem 1.5rem;
}

/* Icon colors for warnings and danger */
.icon-warning {
    color: #f97316;
}

.icon-amber {
    color: #f59e0b;
}

body.dark-theme .icon-warning,
body.dark-theme .icon-amber {
    color: #fbbf24 !important;
}

.icon-danger {
    color: #dc2626;
}

body.dark-theme .icon-danger {
    color: #fca5a5 !important;
}

/* Text colors for warnings */
.text-warning-dark {
    color: #92400e;
}

.text-warning-medium {
    color: #b45309;
}

body.dark-theme .text-warning-dark,
body.dark-theme .text-warning-medium {
    color: #fbbf24 !important;
}

/* Modal header gradients */
.modal-header-red-gradient {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    padding: 1.5rem !important;
}

.modal-header-amber-gradient {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    padding: 1.5rem !important;
}

.modal-header-blue-gradient {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    padding: 1.5rem !important;
}

/* Modal content border-radius */
.modal-rounded {
    border-radius: 1.5rem;
    overflow: hidden;
}

/* Alert gradients */
.alert-warning-gradient {
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    border-radius: 0.75rem !important;
}

.alert-danger-gradient {
    background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
}

.alert-info-gradient-light {
    background: linear-gradient(135deg, #e0f2fe, #dbeafe) !important;
    border-radius: 0.75rem !important;
}

.alert-success-gradient {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
}

/* Input borders for danger */
.input-border-danger {
    border: 2px solid #ef4444 !important;
    border-radius: 0.75rem !important;
}

.input-border-warning {
    border: 2px solid #fbbf24 !important;
    border-radius: 0.75rem !important;
}

body.dark-theme .input-border-danger {
    border: 2px solid #fca5a5 !important;
}

body.dark-theme .input-border-warning {
    border: 2px solid #fcd34d !important;
}

/* Badge styles */
.badge-danger-gradient {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    color: white;
}

.badge-warning-gradient {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    color: white;
}

/* Button gradients for danger and warning */
.btn-danger-gradient {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 0.6rem 1.5rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    color: white !important;
}

.btn-warning-gradient {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 0.6rem 1.5rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3) !important;
    color: white !important;
}

/* Modal body background */
.modal-body-light {
    background: #f8fafc !important;
}

/* Card with border-radius */
.card-rounded {
    border-radius: 0.75rem;
}

/* Font size utilities */
.fs-sm-dot-5 {
    font-size: 0.5rem;
}

/* Calendar height */
.calendar-day {
    height: 120px !important;
    vertical-align: top !important;
}

.calendar-day.empty-day {
    background-color: #f8f9fa !important;
}

body.dark-theme .calendar-day.empty-day {
    background-color: #1f2937 !important;
}