/* Modern Dashboard CSS - Production version
   Requires: modern-variables.css loaded before this file.
   Theme-specific --modern-primary-* vars must be set in mtheme.css.
   Load order: vendors.css > style.css > member.css > themes-common.css > mtheme.css > modern-variables.css > modern-dashboard.css
   */

/* =======================================================================
   1. BASE & TYPOGRAPHY
   ======================================================================= */

body,
html {
    font-family: var(--modern-font) !important;
    background-color: var(--modern-bg) !important;
    color: var(--modern-text-primary) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.card-heading h4 {
    font-family: var(--modern-font) !important;
    font-weight: 600 !important;
    color: var(--modern-text-primary) !important;
    letter-spacing: -0.025em !important;
}

h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

p, span, label, a, li, td, th, div {
    font-family: var(--modern-font) !important;
}

a {
    color: var(--modern-primary) !important;
    text-decoration: none !important;
    transition: color var(--modern-transition) !important;
}

a:hover, a:focus {
    color: var(--modern-primary-hover) !important;
}

/* =======================================================================
   2. TOP NAVBAR
   ======================================================================= */
.app-header.top-bar,
header.app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--modern-bg-card) !important;
    border-bottom: 1px solid var(--modern-border) !important;
    box-shadow: none !important;
    height: 60px !important;
    z-index: 1051 !important;
    width: 100% !important;
}

.top-bar .navbar {
    height: 60px !important;
    padding: 0 !important;
}


.top-bar .navbar .nav-link {
    color: var(--modern-text-secondary) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--modern-radius-sm) !important;
    transition: all var(--modern-transition) !important;
}

.top-bar .navbar .nav-link:hover {
    color: var(--modern-primary) !important;
    background: var(--modern-primary-light) !important;
}

.top-bar .navbar .nav-right .nav-item.user-profile .dropdown-menu {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius) !important;
    box-shadow: var(--modern-shadow-lg) !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin-top: 0.5rem !important;
}

.top-bar .navbar .nav-right .nav-item.user-profile .dropdown-menu .bg-gradient {
    background: linear-gradient(135deg, var(--modern-primary) 0%, var(--modern-primary-hover) 100%) !important;
}

.top-bar .navbar .nav-right .nav-item.user-profile .dropdown-menu a.dropdown-item {
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    color: var(--modern-text-secondary) !important;
    transition: all var(--modern-transition) !important;
}

.top-bar .navbar .nav-right .nav-item.user-profile .dropdown-menu a.dropdown-item:hover,
.top-bar .navbar .nav-right .nav-item.user-profile .dropdown-menu a.dropdown-item:focus {
    background: var(--modern-primary-light) !important;
    color: var(--modern-primary) !important;
}

/* =======================================================================
   3. SIDEBAR
   ======================================================================= */
.app-navbar,
aside.app-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 240px !important;
    height: 100% !important;
    padding-top: 60px !important;
    background: var(--modern-bg-sidebar) !important;
    border-right: none !important;
    box-shadow: none !important;
    z-index: 1050 !important;
    transition: all var(--modern-transition-slow) !important;
    overflow: hidden !important;
}

.sidebar-nav {
    background: var(--modern-bg-sidebar) !important;
    padding: 0.5rem 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}


.sidebar-nav .metismenu {
    padding: 0 !important;
}

/* Titre de section sidebar */
.metismenu .nav-static-title {
    color: var(--modern-text-sidebar) !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 1.25rem 1rem 0.5rem 1rem !important;
    opacity: 0.6 !important;
}

/* Items sidebar */
.metismenu > li {
    margin-bottom: 2px !important;
}

.metismenu > li > a,
.metismenu li a {
    color: var(--modern-text-sidebar) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    padding: 0.7rem 1.6rem !important;
    border-radius: 0 !important;
    transition: all var(--modern-transition) !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.metismenu > li > a:hover,
.metismenu li a:hover {
    color: var(--modern-text-sidebar-active) !important;
    background: var(--modern-bg-sidebar-hover) !important;
}

.metismenu > li.active > a,
.metismenu li.active > a {
    color: var(--modern-text-sidebar-active) !important;
    background: var(--modern-bg-sidebar-active) !important;
    font-weight: 500 !important;
}

/* Icons sidebar */
.metismenu li a i,
.metismenu li a .nav-icon {
    font-size: 1.125rem !important;
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    text-align: center !important;
    margin-right: 0.75rem !important;
    opacity: 0.7 !important;
    transition: opacity var(--modern-transition) !important;
}

.metismenu li.active a i,
.metismenu li:hover a i {
    opacity: 1 !important;
}

/* Sous-menus sidebar */
.metismenu .treeview-menu,
.metismenu ul {
    background: transparent !important;
    padding-left: 0 !important;
}

.metismenu .treeview-menu li a,
.metismenu ul li a {
    font-size: 0.8125rem !important;
    padding: 0.4rem 1.6rem 0.4rem 3rem !important;
    color: var(--modern-text-sidebar) !important;
    border-radius: 0 !important;
}

.metismenu .treeview-menu li a:hover,
.metismenu ul li a:hover {
    color: var(--modern-text-sidebar-active) !important;
    background: var(--modern-bg-sidebar-hover) !important;
}

.metismenu .treeview-menu li.active a,
.metismenu ul li.active a {
    color: var(--modern-text-sidebar-active) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Arrow indicators */
.metismenu .has-arrow::after {
    border-color: var(--modern-text-sidebar) !important;
    opacity: 0.5 !important;
    right: 1rem !important;
}

/* =======================================================================
   4. MAIN CONTENT AREA
   ======================================================================= */
.app-main,
.app-main#main {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    background: var(--modern-bg) !important;
    padding-left: 240px !important;
    min-height: 100vh !important;
    transition: all 0.3s ease-out !important;
}

.app-main .container-fluid {
    padding: 90px 30px 60px 30px !important;
    max-width: 1400px !important;
    transition: all 0.3s ease-out !important;
}

/* =======================================================================
   5. CARDS
   ======================================================================= */
.card,
.card.card-statistics {
    background: var(--modern-bg-card) !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius) !important;
    box-shadow: var(--modern-shadow) !important;
    margin-bottom: 1.5rem !important;
    transition: box-shadow var(--modern-transition) !important;
    overflow: visible !important;
}

.card:hover {
    box-shadow: var(--modern-shadow-md) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--modern-border-light) !important;
    padding: 1.25rem 1.5rem !important;
}

.card-header .card-heading .card-title {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--modern-text-primary) !important;
    margin: 0 !important;
}

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

.card.p-20,
.card-statistics.p-20 {
    padding: 1.5rem !important;
}

/* Stats cards sur le dashboard */
.card-statistics .statistics h3 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--modern-text-primary) !important;
    letter-spacing: -0.025em !important;
}

.card-statistics .statistics p {
    font-size: 0.75rem !important;
    color: var(--modern-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.card-statistics .text-muted {
    color: var(--modern-text-secondary) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}

/* =======================================================================
   6. BUTTONS
   ======================================================================= */
.btn {
    font-family: var(--modern-font) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    border-radius: var(--modern-radius-sm) !important;
    padding: 0.5rem 1rem !important;
    transition: all var(--modern-transition) !important;
    letter-spacing: 0 !important;
    border: none !important;
    cursor: pointer !important;
}

.btn-primary,
.btn.btn-primary {
    background: var(--modern-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--modern-primary-hover) !important;
    box-shadow: var(--modern-shadow) !important;
    transform: translateY(-1px) !important;
}

.btn-primary:active {
    transform: translateY(0) !important;
}

.btn-outline-primary,
.btn.btn-outline-primary {
    background: transparent !important;
    color: var(--modern-primary) !important;
    border: 1px solid var(--modern-primary) !important;
}

.btn.btn-outline-primary:hover {
    background: var(--modern-primary-light) !important;
    color: var(--modern-primary) !important;
}

.btn-default,
.btn-secondary,
.btn-light {
    background: var(--modern-bg-card) !important;
    color: var(--modern-text-secondary) !important;
    border: 1px solid var(--modern-border) !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover {
    background: var(--modern-bg) !important;
    border-color: var(--modern-text-muted) !important;
}

.btn-success {
    background: #059669 !important;
    border: none !important;
}

.btn-success:hover {
    background: #047857 !important;
}

.btn-danger {
    background: #dc2626 !important;
    border: none !important;
}

.btn-danger:hover {
    background: #b91c1c !important;
}

.btn-warning {
    background: #d97706 !important;
    color: #fff !important;
    border: none !important;
}

/* Small buttons */
.btn-sm, .btn-group-sm > .btn {
    font-size: 0.8125rem !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 6px !important;
}

/* =======================================================================
   7. FORMS
   ======================================================================= */
.form-control {
    font-family: var(--modern-font) !important;
    font-size: 0.875rem !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    padding: 0.625rem 0.875rem;
    color: var(--modern-text-primary) !important;
    background: var(--modern-bg-card) !important;
    transition: all var(--modern-transition) !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.form-control:focus {
    border-color: var(--modern-primary) !important;
    box-shadow: 0 0 0 3px var(--modern-primary-soft) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--modern-text-muted) !important;
    font-weight: 400 !important;
}

label,
.control-label {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--modern-text-secondary) !important;
    margin-bottom: 0.375rem !important;
}

.form-group {
    margin-bottom: 1.25rem !important;
}

/* =======================================================================
   TOGGLE SWITCHES - Slim iOS / Shadcn-style
   Original uses: position:relative + left on ::before, box-shadow inset on span
   We override the SAME properties to win specificity
   ======================================================================= */

/* Container reset */
.checkbox.checbox-switch { padding-left: 0 !important; }
.checkbox.checbox-switch label input { display: none !important; }
.checkbox-inline.checbox-switch { padding-left: 0 !important; display: inline-block !important; }
.checkbox-inline.checbox-switch input { display: none !important; }

/* Label */
.checkbox.checbox-switch label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding-left: 0 !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
    font-size: 0.875rem !important;
    color: var(--modern-text-primary) !important;
    user-select: none !important;
}

/* ===================== TRACK ===================== */
/* 36x18 slim pill - OFF = neutral gray */
.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
    width: 36px !important;
    height: 18px !important;
    border-radius: 9999px !important;
    background-color: #c1c9d4 !important;
    border: 2px solid #c1c9d4 !important;
    box-shadow: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
    cursor: pointer !important;
    position: relative !important;
}

/* ===================== KNOB ===================== */
/* 14x14 circle inside the track */
.checkbox.checbox-switch label span::before,
.checkbox-inline.checbox-switch span::before {
    display: block !important;
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #fff !important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

/* ===================== CHECKED STATE ===================== */
/* Track ON - default blue */
.checkbox.checbox-switch label > input:checked + span,
.checkbox-inline.checbox-switch > input:checked + span {
    background-color: var(--modern-primary) !important;
    border-color: var(--modern-primary) !important;
    box-shadow: none !important;
}

/* Knob ON - slide right (36 - 2*2border - 14knob = 18px) */
.checkbox.checbox-switch label > input:checked + span::before,
.checkbox.checbox-switch label > input:checked + span:before,
.checkbox-inline.checbox-switch > input:checked + span::before,
.checkbox-inline.checbox-switch > input:checked + span:before {
    left: 18px !important;
}

/* ===================== COLOR VARIANTS ===================== */
.checkbox.checbox-switch.switch-primary label > input:checked + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked + span {
    background-color: var(--modern-primary) !important;
    border-color: var(--modern-primary) !important;
    box-shadow: none !important;
}

.checkbox.checbox-switch.switch-success label > input:checked + span,
.checkbox-inline.checbox-switch.switch-success > input:checked + span {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    box-shadow: none !important;
}

.checkbox.checbox-switch.switch-danger label > input:checked + span,
.checkbox-inline.checbox-switch.switch-danger > input:checked + span {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    box-shadow: none !important;
}

.checkbox.checbox-switch.switch-info label > input:checked + span,
.checkbox-inline.checbox-switch.switch-info > input:checked + span {
    background-color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
    box-shadow: none !important;
}

.checkbox.checbox-switch.switch-warning label > input:checked + span,
.checkbox-inline.checbox-switch.switch-warning > input:checked + span {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    box-shadow: none !important;
}

.checkbox.checbox-switch.switch-dark label > input:checked + span,
.checkbox-inline.checbox-switch.switch-dark > input:checked + span {
    background-color: #334155 !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}

/* ===================== DISABLED ===================== */
.checkbox.checbox-switch label > input:disabled + span,
.checkbox-inline.checbox-switch > input:disabled + span {
    background-color: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.checkbox.checbox-switch label > input:disabled + span::before,
.checkbox-inline.checbox-switch > input:disabled + span::before {
    background: #f1f5f9 !important;
    box-shadow: none !important;
}

.checkbox.checbox-switch label > input:checked:disabled + span,
.checkbox-inline.checbox-switch > input:checked:disabled + span {
    opacity: 0.5 !important;
}

/* =======================================================================
   CHECKBOXES & RADIO - Color-only overrides
   Keep Bootstrap 4 positioning intact (position:absolute + padding-left)
   Only override colors, focus ring, and font
   ======================================================================= */

/* Labels */
.form-check label,
.form-check-label,
.radio label {
    cursor: pointer !important;
    font-size: 0.875rem !important;
    color: var(--modern-text-primary) !important;
}

/* Checkbox & radio - color overrides only (no appearance/position changes) */
.form-check-input:checked,
.form-check input[type="checkbox"]:checked,
.form-check input[type="radio"]:checked {
    accent-color: var(--modern-primary) !important;
}

.form-check-input:focus,
.form-check input[type="checkbox"]:focus,
.form-check input[type="radio"]:focus {
    outline: 2px solid var(--modern-primary-soft) !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

/* Original CSS pseudo-element for form-check (green circle) - use theme color */
.form-check label::after {
    background-color: var(--modern-primary) !important;
}

/* Radio / checkbox inside .checkbox wrapper (not switch) */
.checkbox:not(.checbox-switch) label input[type="checkbox"]:checked {
    accent-color: var(--modern-primary) !important;
}

.radio label input[type="radio"]:checked {
    accent-color: var(--modern-primary) !important;
}

/* Select2 overrides */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    height: 42px !important;
    padding-top: 6px !important;
    transition: border-color var(--modern-transition) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--modern-primary) !important;
    box-shadow: 0 0 0 3px var(--modern-primary-soft) !important;
}

.select2-dropdown {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    box-shadow: var(--modern-shadow-lg) !important;
}

.select2-results__option--highlighted {
    background-color: var(--modern-primary-light) !important;
    color: var(--modern-primary) !important;
}

/* Input group */
.input-group-addon,
.input-group-text {
    background-color: var(--modern-bg) !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    color: var(--modern-text-secondary) !important;
    font-size: 0.875rem !important;
}

/* Custom file input */
.custom-file-label {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    font-size: 0.875rem !important;
}

.custom-file-label::after {
    background: var(--modern-primary) !important;
    color: #fff !important;
    border-radius: 0 var(--modern-radius-sm) var(--modern-radius-sm) 0 !important;
}

/* =======================================================================
   8. TABLES
   ======================================================================= */
.table,
table.dataTable {
    font-size: 0.875rem !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table thead th,
table.dataTable thead th {
    background: var(--modern-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: none !important;
    border-top: none !important;
    border-right: 1px solid rgba(255,255,255,0.15) !important;
    /*padding: 0.75rem 1rem !important;*/
    white-space: nowrap !important;
}

.table thead th:last-child,
table.dataTable thead th:last-child {
    border-right: none !important;
}

/* Sorting icons in white */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    color: rgba(255,255,255,0.6) !important;
}

table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before {
    color: #fff !important;
}

.table td,
table.dataTable td {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--modern-border-light) !important;
    border-top: none !important;
    vertical-align: middle !important;
    /*color: var(--modern-text-primary) !important;*/
}

.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background: var(--modern-primary-light) !important;
    transition: background var(--modern-transition) !important;
}

.table-bordered {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    overflow: visible !important;
}

/* Row header coloree */
tr.bg-primary th,
tr.bg-success th {
    background: var(--modern-primary) !important;
    color: #fff !important;
    font-size: 0.8125rem !important;
}

/* DataTables controls */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    transition: border-color var(--modern-transition) !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--modern-primary) !important;
    box-shadow: 0 0 0 3px var(--modern-primary-soft) !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 0.8125rem !important;
    color: var(--modern-text-muted) !important;
}

/* =======================================================================
   9. PAGINATION (Bootstrap .page-item + DataTables v2 .dt-paging-button)
   ======================================================================= */

/* --- Bootstrap pagination --- */
.pagination {
    gap: 4px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin: 1rem 0 !important;
}

.page-link {
    border: 1px solid var(--modern-border) !important;
    background: var(--modern-bg-card) !important;
    color: var(--modern-text-secondary) !important;
    font-family: var(--modern-font) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    margin-left: 0 !important;
    min-width: 34px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    transition: all var(--modern-transition) !important;
    position: relative !important;
    display: block !important;
}

.page-link:hover {
    z-index: 2 !important;
    background: var(--modern-primary-light) !important;
    border-color: var(--modern-primary) !important;
    color: var(--modern-primary) !important;
    text-decoration: none !important;
}

.page-link:focus {
    z-index: 2 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--modern-primary-soft) !important;
}

.page-item.active .page-link {
    z-index: 1 !important;
    background: var(--modern-primary) !important;
    border-color: var(--modern-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.page-item.disabled .page-link {
    background: var(--modern-bg) !important;
    color: var(--modern-text-muted) !important;
    border-color: var(--modern-border-light) !important;
    pointer-events: none !important;
    cursor: auto !important;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 6px !important;
}

/* --- DataTables v2 pagination (.dt-paging) --- */
div.dt-container .dt-paging {
    padding-top: 0.75rem !important;
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

div.dt-container .dt-paging .dt-paging-button {
    border: 1px solid var(--modern-border) !important;
    background: var(--modern-bg-card) !important;
    color: var(--modern-text-secondary) !important;
    font-family: var(--modern-font) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    min-width: 34px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all var(--modern-transition) !important;
    margin-left: 0 !important;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    background: var(--modern-primary-light) !important;
    border-color: var(--modern-primary) !important;
    color: var(--modern-primary) !important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--modern-primary) !important;
    border-color: var(--modern-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active {
    background: var(--modern-bg) !important;
    color: var(--modern-text-muted) !important;
    border: 1px solid var(--modern-border-light) !important;
    cursor: default !important;
    box-shadow: none !important;
}

div.dt-container .dt-paging .dt-paging-button:active {
    outline: none !important;
    background: var(--modern-primary-hover) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* DataTables v2 controls */
div.dt-container .dt-length,
div.dt-container .dt-search,
div.dt-container .dt-info,
div.dt-container .dt-paging {
    font-family: var(--modern-font) !important;
    font-size: 0.8125rem !important;
    color: var(--modern-text-secondary) !important;
}

div.dt-container .dt-search input,
div.dt-container .dt-length select {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    transition: border-color var(--modern-transition) !important;
}

div.dt-container .dt-search input:focus {
    border-color: var(--modern-primary) !important;
    box-shadow: 0 0 0 3px var(--modern-primary-soft) !important;
    outline: none !important;
}

/* --- Legacy DataTables v1 pagination (fallback) --- */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.75rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--modern-border) !important;
    background: var(--modern-bg-card) !important;
    color: var(--modern-text-secondary) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
    min-width: 34px !important;
    text-align: center !important;
    transition: all var(--modern-transition) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--modern-primary-light) !important;
    border-color: var(--modern-primary) !important;
    color: var(--modern-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--modern-primary) !important;
    border-color: var(--modern-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: var(--modern-bg) !important;
    color: var(--modern-text-muted) !important;
    border-color: var(--modern-border-light) !important;
    cursor: default !important;
}

/* =======================================================================
   10. BADGES & TAGS
   ======================================================================= */
.badge,
.badge-primary {
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.625rem !important;
    border-radius: 9999px !important;
    letter-spacing: 0 !important;
}

.badge-primary {
    background: var(--modern-primary-light) !important;
    color: var(--modern-primary) !important;
}

.badge-success {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.badge-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
}

.badge-warning {
    background: #fef9c3 !important;
    color: #854d0e !important;
}

.tag.label-info {
    background: var(--modern-primary) !important;
    border-radius: 9999px !important;
    padding: 0.25rem 0.75rem !important;
}

/* =======================================================================
   11. ACCORDION
   ======================================================================= */

/* ---- Widget edit pages: independent column heights ---- */

/* Row: each column takes its own height */
.tab-content .row,
.tab-pane .row {
    align-items: flex-start !important;
}

/* Sidebar config (col-md-4): hauteur dynamique selon contenu */
.tab-pane .row > .col-md-4 > .card,
.tab-content .row > .col-md-4 > .card {
    height: auto !important;
}

.tab-pane .row > .col-md-4 > .card > .card-body,
.tab-content .row > .col-md-4 > .card > .card-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Preview column (col-md-8): sticky */
.tab-pane .row > .col-md-8 {
    position: sticky !important;
    top: 80px !important;
    align-self: flex-start !important;
}

/* Preview card: restore original behavior (protect from global overrides) */
.card.modern-preview-card {
    overflow: hidden !important;
    height: 100% !important;
}

.card.modern-preview-card > .card-body.preview_panels {
    min-height: 500px !important;
    height: calc(100vh - 320px) !important;
    overflow: auto !important;
}

.card.modern-preview-card > .card-body.preview:not(.preview_panels) {
    height: calc(100vh - 320px) !important;
    min-height: 500px !important;
    overflow: auto !important;
}

.accordion .acd-group {
    border: none !important;
    border-radius: var(--modern-radius-sm) !important;
    margin-bottom: 0.5rem !important;
    overflow: hidden !important;
}

.accordion .acd-group > .card-header,
.accordion .acd-group > .card-header.rounded-0,
.accordion .acd-group > .card-header[class*="border-"] {
    background-color: var(--modern-primary) !important;
    padding: 0 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
}

.accordion .acd-group > .card-header h5 {
    margin: 0 !important;
}

.accordion .acd-group > .card-header .acd-heading,
.accordion .acd-group > .card-header .acd-heading.collapsed {
    padding: 0.5rem 2.5rem 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    background-color: transparent !important;
    transition: opacity var(--modern-transition) !important;
    line-height: 1.4 !important;
}

.accordion .acd-group > .card-header .acd-heading:hover {
    opacity: 0.85 !important;
    color: #ffffff !important;
}

/* Fold/unfold icon in white */
.accordion .acd-group > .card-header .acd-heading::before,
.accordion .acd-group > .card-header .acd-heading.collapsed::before {
    color: #ffffff !important;
    padding: 0.55rem 1rem !important;
    font-size: 0.8rem !important;
}

/* Collapse body */
.accordion .acd-group > .collapse,
.accordion .acd-group > .collapsing {
    border: 1px solid var(--modern-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--modern-radius-sm) var(--modern-radius-sm) !important;
    background: var(--modern-bg-card) !important;
}

/* =======================================================================
   11b. BUSINESS HOURS - Calendar months
   ======================================================================= */
table.month {
    border: 1px solid var(--modern-primary) !important;
    border-radius: var(--modern-radius-sm) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

table.month tr:first-child th {
    background-color: var(--modern-primary) !important;
    color: #ffffff !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 0.5rem !important;
}

table.month tr:nth-child(2) th {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--modern-text-secondary) !important;
    padding: 0.375rem 0.25rem !important;
    border-bottom: 1px solid var(--modern-border) !important;
}

table.month td {
    padding: 0.125rem !important;
}

/* =======================================================================
   12. TABS
   ======================================================================= */
.tab-border .nav.nav-tabs {
    border-bottom: 2px solid var(--modern-border-light) !important;
    gap: 0.25rem !important;
}

.tab-border .nav.nav-tabs li a {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--modern-text-muted) !important;
    padding: 0.75rem 1.25rem !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    transition: all var(--modern-transition) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.tab-border .nav.nav-tabs li a:hover {
    color: var(--modern-text-primary) !important;
    border-bottom-color: var(--modern-text-muted) !important;
}

.tab-border .nav.nav-tabs li a.active,
.tab-border .nav.nav-tabs li a.active:focus,
.tab-border .nav.nav-tabs li a.active:hover {
    color: var(--modern-primary) !important;
    border-bottom-color: var(--modern-primary) !important;
    background: transparent !important;
}

/* =======================================================================
   13. MODALS
   ======================================================================= */

.modal-content {
    border: none !important;
    border-radius: var(--modern-radius-xl) !important;
    box-shadow: var(--modern-shadow-lg) !important;
    overflow: hidden !important;
}

.modal-header {
    border-bottom: 1px solid var(--modern-border-light) !important;
    padding: 1.25rem 1.5rem !important;
}

.modal-header .modal-title {
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
}

.modal-body {
    padding: 1.5rem !important;
}

.modal-footer {
    border-top: 1px solid var(--modern-border-light) !important;
    padding: 1rem 1.5rem !important;
}

.modal-backdrop.show {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

/* =======================================================================
   14. ALERTS & MESSAGES
   ======================================================================= */
.alert {
    border-radius: var(--modern-radius-sm) !important;
    border: none !important;
    font-size: 0.875rem !important;
    padding: 1rem 1.25rem !important;
}

.alert-success {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border-left: 4px solid #22c55e !important;
}

.alert-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-left: 4px solid #ef4444 !important;
}

.alert-warning {
    background: #fffbeb !important;
    color: #854d0e !important;
    border-left: 4px solid #f59e0b !important;
}

.alert-info {
    background: var(--modern-primary-light) !important;
    color: var(--modern-primary-hover) !important;
    border-left: 4px solid var(--modern-primary) !important;
}

/* =======================================================================
   15. FOOTER
   ======================================================================= */
footer.footer {
    background: transparent !important;
    border-top: 1px solid var(--modern-border) !important;
    padding: 1rem 1.5rem !important;
    font-size: 0.8125rem !important;
    color: var(--modern-text-muted) !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: calc(100% - 240px) !important;
    height: 60px !important;
    box-shadow: none !important;
    transition: all 0.3s ease-out !important;
}

footer.footer p {
	font-size: 0.8125rem !important;
}

/* =======================================================================
   15b. NAVBAR HEADER (logo area in sidebar)
   ======================================================================= */
.top-bar .navbar .navbar-header {
    background: var(--modern-bg-sidebar) !important;
    width: 240px !important;
    flex-shrink: 0 !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 1.6rem !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 99 !important;
    transition: all 0.3s ease-out !important;
    text-align: center !important;
}

.top-bar .navbar .navbar-header .navbar-brand {
    margin: 0 !important;
    padding: 0 !important;
}

/* Logo - normal mode: desktop visible, mobile hidden */
.top-bar .navbar .navbar-header .logo-desktop {
    width: 130px !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    display: inline-block !important;
    transition: all ease-in-out 0.2s !important;
}

.top-bar .navbar .navbar-header .logo-mobile {
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 30px !important;
    height: auto !important;
    display: inline-block !important;
    transition: all ease-in-out 0.2s !important;
}

/* =======================================================================
   15c. RESPONSIVE - mobile
   ======================================================================= */
@media screen and (max-width: 767px) {
    .app-navbar,
    aside.app-navbar {
        left: -240px !important;
    }

    .app-navbar.expand {
        left: 0 !important;
    }
	
	.sidebar-toggled .app-navbar {
        left: 0 !important;
	}
	

    .app-main,
    .app-main#main {
        padding-left: 0 !important;
    }

    .app-main .container-fluid {
        padding: 80px 15px 60px 15px !important;
    }

    footer.footer {
        width: 100% !important;
    }

    .top-bar .navbar .navbar-header {
        /*width: auto !important;*/
        width: 100% !important;
        background: transparent !important;
    }
	
	.top-bar .navbar .navbar-header .logo-desktop{
		display:none !important;
	}
	
	.top-bar .navbar .navbar-header .logo-light{
		width: 130px !important;
		height: auto !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative !important;
		display: inline-block !important;
		transition: all ease-in-out 0.2s !important;	
	}
}

/* =======================================================================
   16. GRADIENTS OVERRIDE
   ======================================================================= */
.bg-gradient {
    background: linear-gradient(135deg, var(--modern-primary) 0%, var(--modern-primary-hover) 100%) !important;
    filter: none !important;
}

.bg-primary {
    background: var(--modern-primary) !important;
}

/* =======================================================================
   17. SCROLLBAR (Webkit)
   ======================================================================= */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: var(--modern-text-muted) !important;
    border-radius: 9999px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--modern-text-secondary) !important;
}

/* Sidebar scrollbar */
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* =======================================================================
   18. DATERANGE PICKER
   ======================================================================= */
.daterangepicker {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius) !important;
    box-shadow: var(--modern-shadow-lg) !important;
    font-family: var(--modern-font) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--modern-primary) !important;
    border-radius: var(--modern-radius-sm) !important;
}

.daterangepicker .btn-primary {
    background: var(--modern-primary) !important;
}

/* =======================================================================
   19. LOADER
   ======================================================================= */
.loader {
    background: var(--modern-bg-card) !important;
}

/* =======================================================================
   20. MISCELLANEOUS POLISH
   ======================================================================= */

/* Dropdown menus inside tables/cards must be visible */
.card .dropdown-menu.show,
.table .dropdown-menu.show,
.dataTable .dropdown-menu.show,
.dt-container .dropdown-menu.show,
.dataTables_wrapper .dropdown-menu.show {
    z-index: 1060 !important;
    overflow: visible !important;
}

/* card-body overflow visible sauf preview */
.card-body:not(.preview):not(.preview_panels) {
    overflow: visible !important;
}

.table-responsive {
    overflow: visible !important;
}

/* Collapse panels padding */
.show1.pt-3.collapse.show {
    padding: 0.5rem !important;
}

/* Dashboard stat card icons */
.icon-arrow-up-circle {
    color: #059669 !important;
}

/* IRS range slider */
.irs--flat .irs-bar {
    background: var(--modern-primary) !important;
}

.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
    background: var(--modern-primary) !important;
    border-radius: 4px !important;
}

.irs--flat .irs-handle > i:first-child {
    background: var(--modern-primary-hover) !important;
}

/* Day wrapper (business hours) */
.day_wrapper {
    border-radius: var(--modern-radius-sm) !important;
    border: 1px solid var(--modern-border) !important;
    background: #fef2f2 !important;
}

.day_wrapper_active {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
}

/* Bootstrap colorpicker */
.colorpicker {
    border-radius: var(--modern-radius-sm) !important;
    box-shadow: var(--modern-shadow-lg) !important;
}

/* Timepicker */
.ui-timepicker-container .ui-timepicker {
    border-radius: var(--modern-radius-sm) !important;
    box-shadow: var(--modern-shadow-lg) !important;
    border: 1px solid var(--modern-border) !important;
}

/* Error styling */
input.error, select.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.error {
    color: #ef4444 !important;
}

/* Text utilities */
.text-muted {
    color: var(--modern-text-muted) !important;
}

/* Smooth transitions on interactive elements */
.card, .btn, .form-control, .nav-link, .page-link, .dropdown-item,
.metismenu li a, .table tbody tr, .badge, .alert {
    transition: all var(--modern-transition) !important;
}

/* No data dashboard placeholder */
.dashboard_no_data {
    border-radius: var(--modern-radius) !important;
    background: var(--modern-bg) !important;
    border: 2px dashed var(--modern-border) !important;
    color: var(--modern-text-muted) !important;
    padding: 3rem 1.5rem !important;
    text-align: center !important;
    font-size: 0.875rem !important;
}

/* =======================================================================
   DASHBOARD - Animations & KPI cards dynamiques
   ======================================================================= */

/* Fade-in + slide-up animation for cards */
@keyframes dashFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger cards appearance */
/*
.container-fluid > .row > [class*="col-"] {
    animation: dashFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}
*/

.container-fluid > .row:nth-child(1) > [class*="col-"]:nth-child(1) { animation-delay: 0.05s !important; }
.container-fluid > .row:nth-child(1) > [class*="col-"]:nth-child(2) { animation-delay: 0.1s !important; }
.container-fluid > .row:nth-child(1) > [class*="col-"]:nth-child(3) { animation-delay: 0.15s !important; }
.container-fluid > .row:nth-child(1) > [class*="col-"]:nth-child(4) { animation-delay: 0.2s !important; }
.container-fluid > .row:nth-child(2) > [class*="col-"]:nth-child(1) { animation-delay: 0.25s !important; }
.container-fluid > .row:nth-child(2) > [class*="col-"]:nth-child(2) { animation-delay: 0.3s !important; }
.container-fluid > .row:nth-child(3) > [class*="col-"]:nth-child(1) { animation-delay: 0.35s !important; }
.container-fluid > .row:nth-child(3) > [class*="col-"]:nth-child(2) { animation-delay: 0.4s !important; }

/* KPI stat cards - top row */
.card-statistics.p-20 {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius) !important;
    padding: 1.25rem !important;
    position: relative !important;
    overflow: visible !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-statistics.p-20:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--modern-shadow-md) !important;
}

/* KPI big number */
.card-statistics .statistics h3 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--modern-text-primary) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
}

.card-statistics .statistics h3 a {
    color: var(--modern-text-primary) !important;
    text-decoration: none !important;
}

.card-statistics .statistics h3 a:hover {
    color: var(--modern-primary) !important;
}

/* KPI arrow icon - colored accent */
.card-statistics .statistics h3 .icon-arrow-up-circle {
    color: #10b981 !important;
    font-size: 1.25rem !important;
    vertical-align: middle !important;
}

/* KPI label */
.card-statistics .statistics p {
    font-size: 0.75rem !important;
    color: var(--modern-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
}

/* KPI top label */
.card-statistics .d-flex > p.text-muted.font-weight-bold {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--modern-text-secondary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* KPI report link icon */
.card-statistics .d-flex > a .fa-chart-pie {
    color: var(--modern-primary) !important;
    font-size: 1rem !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

.card-statistics .d-flex > a:hover .fa-chart-pie {
    opacity: 1 !important;
}

/* Chart cards */
.card.card-statistics .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--modern-border-light) !important;
    padding: 1rem 1.25rem !important;
}

.card.card-statistics .card-header .card-title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--modern-text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.card.card-statistics .card-body {
    padding: 1rem 1.25rem 1.25rem !important;
}

/* ApexCharts tooltip */
.apexcharts-tooltip {
    border-radius: 8px !important;
    border: 1px solid var(--modern-border) !important;
    box-shadow: var(--modern-shadow-lg) !important;
    font-family: var(--modern-font) !important;
}

.apexcharts-tooltip .apexcharts-tooltip-title {
    background: var(--modern-bg) !important;
    border-bottom: 1px solid var(--modern-border-light) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
}

/* ApexCharts legend */
.apexcharts-legend-text {
    font-family: var(--modern-font) !important;
    font-size: 0.8125rem !important;
    color: var(--modern-text-secondary) !important;
}

/* Sparkline bar charts in KPI cards */
.apexchart-wrapper {
    transition: transform 0.2s ease !important;
}

.card-statistics:hover .apexchart-wrapper {
    transform: scale(1.02) !important;
}

/* Dashboard h2 title */
.container-fluid > h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--modern-text-primary) !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: -0.025em !important;
}

/* Dashboard filter card (top form) */
#range_form .form-label {
    font-weight: 600 !important;
    color: var(--modern-text-secondary) !important;
    font-size: 0.8125rem !important;
}

#range_form .form-control {
    border-radius: 8px !important;
    font-size: 0.875rem !important;
}

/* KPI card sparkline area - subtle gradient */
.apexcharts-area-series .apexcharts-area {
    opacity: 0.15 !important;
}

/* Preview mobile frame */
.preview_mobile {
    border-radius: var(--modern-radius-xl) !important;
    border: 2px solid var(--modern-border) !important;
}

/* jQuery UI overrides */
.ui-widget {
    font-family: var(--modern-font) !important;
}

/* Language flags - subtle styling */
.nav-link img[alt="French"],
.nav-link img[alt="English"] {
    border-radius: 2px !important;
    opacity: 0.7 !important;
    transition: opacity var(--modern-transition) !important;
}

.nav-link img[alt="French"]:hover,
.nav-link img[alt="English"]:hover {
    opacity: 1 !important;
}

/* =======================================================================
   21. LOGIN PAGE - Full modern redesign
   ======================================================================= */

/* Page background */
body.login-page {
    background: var(--modern-bg) !important;
    min-height: 100vh !important;
}

/* Main container */
.login-page .app-contant,
.app-contant {
    min-height: 100vh !important;
}

.app-contant > .bg-white {
    background: transparent !important;
    min-height: 100vh !important;
}

.app-contant .container-fluid {
    padding: 0 !important;
    max-width: 100% !important;
}

.app-contant .container-fluid > .row {
    min-height: 100vh !important;
    margin: 0 !important;
}

/* Left column - form side */
.app-contant .container-fluid > .row > .col-sm-6.align-self-center,
.app-contant .container-fluid > .row > .col-lg-5 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
    background: var(--modern-bg-card) !important;
}

/* Login form container */
.login-page .login,
.app-contant .login {
    width: 100% !important;
    max-width: 400px !important;
    padding: 0 !important;
}

/* Logo */
.app-contant .login > p.mb-3 {
    text-align: center !important;
    margin-bottom: 2.5rem !important;
}

.app-contant .login > p.mb-3 img {
    max-width: 200px !important;
    height: auto !important;
}

/* Error / info message */
.app-contant .login > p:not(.mb-3) {
    text-align: center !important;
    font-size: 0.875rem !important;
    margin-bottom: 1rem !important;
}

/* Form */
.app-contant .login form {
    margin-top: 0 !important;
}

.app-contant .login .form-group {
    margin-bottom: 1.25rem !important;
}

.app-contant .login .control-label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--modern-text-secondary) !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

.app-contant .login .form-control {
    height: 48px !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--modern-border) !important;
    font-size: 0.9375rem !important;
    padding: 0.75rem 1rem !important;
    background: var(--modern-bg-card) !important;
    transition: all 0.2s ease !important;
}

.app-contant .login .form-control:focus {
    border-color: var(--modern-primary) !important;
    box-shadow: 0 0 0 4px var(--modern-primary-soft) !important;
}

.app-contant .login .form-control::placeholder {
    color: #b0b8c8 !important;
}

/* Remember me checkbox - works WITH the custom checkbox system */
/* Original: input hidden at -9999px, label::before = box, label::after = checkmark */
.app-contant .login .form-check {
    padding: 0 0 0 28px !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

.app-contant .login .form-check label::before {
    width: 18px !important;
    height: 18px !important;
    left: 0 !important;
    top: 50% !important;
    margin-top: -9px !important;
    border-radius: 4px !important;
    background: #eceef3 !important;
}

.app-contant .login .form-check label::after {
    width: 10px !important;
    height: 10px !important;
    left: 4px !important;
    top: 50% !important;
    margin-top: -5px !important;
    border-radius: 2px !important;
    background-color: var(--modern-primary) !important;
}

.app-contant .login .form-check .form-check-label {
    font-size: 0.8125rem !important;
    color: var(--modern-text-secondary) !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

/* Forgot password link */
.app-contant .login a.ml-auto {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--modern-primary) !important;
}

.app-contant .login a.ml-auto:hover {
    color: var(--modern-primary-hover) !important;
    text-decoration: underline !important;
}

/* Sign in button */
.app-contant .login .btn {
    height: 48px !important;
    border-radius: 10px !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 0 2rem !important;
    box-shadow: 0 2px 8px rgba(30, 36, 245, 0.25) !important;
    transition: all 0.2s ease !important;
}

.app-contant .login .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(30, 36, 245, 0.35) !important;
}

/* Language flags on login page */
.app-contant .login .nav-link.language {
    padding: 0.5rem !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

.app-contant .login .nav-link.language:hover {
    opacity: 1 !important;
}

/* Right column - gradient image side */
.app-contant .bg-gradient1 {
    background: linear-gradient(135deg, var(--modern-primary) 0%, var(--modern-primary-hover) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Subtle pattern overlay */
.app-contant .bg-gradient1::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 60%),
                radial-gradient(circle at 70% 80%, rgba(255,255,255,0.05) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

.app-contant .bg-gradient1 .row {
    position: relative !important;
    z-index: 1 !important;
}

.app-contant .bg-gradient1 .col-7 {
    max-width: 80% !important;
    flex: 0 0 80% !important;
}

.app-contant .bg-gradient1 img.img-fluid {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15)) !important;
    animation: loginFloat 6s ease-in-out infinite !important;
    border-radius: 0 !important;
    border: none !important;
    clip-path: none !important;
    object-fit: contain !important;
}

@keyframes loginFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* Remove any pseudo-elements on the gradient side that could clip the image */
.app-contant .bg-gradient1 img::before,
.app-contant .bg-gradient1 img::after,
.app-contant .bg-gradient1 .col-7::before,
.app-contant .bg-gradient1 .col-7::after,
.app-contant .bg-gradient1 .row::before,
.app-contant .bg-gradient1 .row::after {
    display: none !important;
}

/* Override o-hidden class that clips content */
.app-contant .o-hidden {
    overflow: visible !important;
}

/* Prevent any circle/round clipping on login illustration */
.app-contant .bg-gradient1 *,
.app-contant .bg-gradient1 .row,
.app-contant .bg-gradient1 .col-7,
.app-contant .bg-gradient1 .col-7 img {
    border-radius: 0 !important;
    clip-path: none !important;
    shape-outside: none !important;
}

/* Loader on login page */
.login-page .loader {
    background: var(--modern-bg-card) !important;
}

/* h-100-vh helper */
.app-contant .h-100-vh {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Mobile login */
@media screen and (max-width: 576px) {
    .app-contant .container-fluid > .row > .col-sm-6.align-self-center,
    .app-contant .container-fluid > .row > .col-lg-5 {
        padding: 2rem 1.5rem !important;
    }

    .app-contant .bg-gradient1 {
        min-height: 200px !important;
        padding: 2rem !important;
    }

    .app-contant .bg-gradient1 img.img-fluid {
        max-width: 60% !important;
    }

    .app-contant .login > p.mb-3 img {
        max-width: 160px !important;
    }
}

/* =======================================================================
   SIDEBAR-MINI - ALL collapsed rules at the END to win cascade
   ======================================================================= */

/* Sidebar collapsed */
body.sidebar-mini .app-navbar,
.sidebar-mini .app-navbar {
    width: 60px !important;
    /*z-index: 1052 !important;*/
}

/* Sidebar hover expand */
body.sidebar-mini .app-navbar:hover,
.sidebar-mini .app-navbar:hover {
    width: 240px !important;
}

body.sidebar-mini .app-navbar:hover .metismenu li.nav-static-title {
    display: block !important;
}

body.sidebar-mini .app-navbar:hover .metismenu li a .nav-title,
body.sidebar-mini .app-navbar:hover .metismenu li a .nav-label {
    opacity: 1 !important;
}

body.sidebar-mini .app-navbar:hover .metismenu .collapse.in {
    display: block !important;
}

/* Hide text when collapsed */
body.sidebar-mini .app-navbar ul.metismenu li a .nav-title,
body.sidebar-mini .app-navbar ul.metismenu li a .nav-label {
    opacity: 0 !important;
    transition: all 0.3s !important;
}

body.sidebar-mini .app-navbar ul.metismenu li a:after {
    display: none !important;
}

body.sidebar-mini .app-navbar ul.metismenu li.nav-static-title {
    display: none !important;
}

body.sidebar-mini .app-navbar ul.metismenu li + li {
    width: 240px !important;
}

body.sidebar-mini .app-navbar ul.metismenu .collapse.in {
    display: none !important;
}

/* Main content + footer collapsed */
body.sidebar-mini .app-main,
body.sidebar-mini .app-main#main {
    padding-left: 60px !important;
}

body.sidebar-mini .app-main .container-fluid {
    padding: 90px 30px 60px 30px !important;
}

body.sidebar-mini .footer,
body.sidebar-mini footer.footer {
    width: calc(100% - 60px) !important;
}

/* Navbar header collapsed */
body.sidebar-mini .top-bar .navbar .navbar-header {
    width: 60px !important;
    padding-left: 0 !important;
    justify-content: center !important;
    overflow: visible !important;
}

body.sidebar-mini .top-bar .navbar .navbar-header .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Logo collapsed: hide desktop, show mobile */
body.sidebar-mini .top-bar .navbar .navbar-header .logo-desktop {
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
}

body.sidebar-mini .top-bar .navbar .navbar-header .logo-mobile {
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 30px !important;
    max-width: 30px !important;
    height: auto !important;
    max-height: 40px !important;
    display: block !important;
    z-index: 10 !important;
    object-fit: contain !important;
}

/* Logo expand on hover */
body.sidebar-mini .top-bar .navbar .navbar-header.expand {
    width: 240px !important;
}

body.sidebar-mini .top-bar .navbar .navbar-header.expand .logo-desktop {
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 0 !important;
    width: 130px !important;
    height: auto !important;
}

body.sidebar-mini .top-bar .navbar .navbar-header.expand .logo-mobile {
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
}



/* =======================================================================
   22. PRINT-SAFE (ne pas casser l'impression)
   ======================================================================= */
@media print {
    .app-navbar { display: none !important; }
    .app-header { display: none !important; }
    .app-main { margin: 0 !important; padding: 0.5cm !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}