/* ==========================================================================
   Design System Variables — Cursor-inspired (DESIGN.md)
   ========================================================================== */
:root {
  /* --- Couleurs primaires --- */
  --palette-bg-primary-core:            #f54e00;  /* Cursor Orange — accent CTA */
  --palette-bg-tertiary-core:           #d94400;  /* Deep Orange — pressed/dark */
  --palette-text-primary-error:         #cf2d56;  /* Error — warm crimson */
  --palette-text-secondary-error-hover: #b02347;  /* Error Dark hover */

  /* --- Tiers premium --- */
  --palette-bg-primary-gold:            #c08532;  /* Gold — secondary accent */

  /* --- Texte --- */
  --palette-text-primary:               #26251e;  /* Cursor Dark — warm near-black */
  --palette-text-focused:               #3f3e37;  /* Focused warm gray */
  --palette-text-secondary:             rgba(38, 37, 30, 0.55); /* 55% warm brown */
  --palette-text-material-disabled:     rgba(38, 37, 30, 0.24);
  --palette-text-link-disabled:         rgba(38, 37, 30, 0.4);
  --palette-text-legal:                 #f54e00;  /* Accent orange pour liens */

  /* --- Surfaces & bordures --- */
  --palette-bg-base:                    #ffffff;  /* Blanc pur pour surfaces */
  --palette-surface-secondary:          #ebeae5;  /* Surface 300 — boutons, fonds sec. */
  --palette-surface-tertiary:           #e6e5e0;  /* Surface 400 — cards, surfaces */
  --palette-border-color:               rgba(38, 37, 30, 0.15); /* Warm brown 15% */

  /* --- Page background --- */
  --palette-page-bg:                    #f2f1ed;  /* Cursor Cream — fond page */

  /* --- Ombres (système 3 couches Cursor) --- */
  --shadow-card:   rgba(0, 0, 0, 0.02) 0px 0px 16px,
                   rgba(0, 0, 0, 0.008) 0px 0px 8px,
                   rgba(38, 37, 30, 0.1) 0px 0px 0px 1px;
  --shadow-hover:  rgba(0, 0, 0, 0.14) 0px 28px 70px,
                   rgba(0, 0, 0, 0.10) 0px 14px 32px,
                   rgba(38, 37, 30, 0.1) 0px 0px 0px 1px;
  --shadow-focus:  rgba(0, 0, 0, 0.10) 0px 4px 12px;

  /* --- Typographie --- */
  --font-family-primary: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* --- Rayons de bordure (Cursor scale) --- */
  --radius-subtle:   4px;
  --radius-standard: 8px;
  --radius-badge:    9999px; /* Full pill */
  --radius-card:     10px;
  --radius-large:    32px;
  --radius-circle:   50%;

  /* --- Espacements (base 8px avec sub-8px Cursor) --- */
  --spacing-1:   2px;
  --spacing-2:   4px;
  --spacing-3:   6px;
  --spacing-4:   8px;
  --spacing-5:   10px;
  --spacing-6:   12px;
  --spacing-7:   16px;
  --spacing-8:   22px;
  --spacing-9:   24px;
  --spacing-10:  32px;
}

/* ==========================================================================
   Bootstrap + sb-accent overrides — palette DESIGN.md (Cursor Orange)
   Écrase le thème Supabase (#3ECF8E vert) défini dans regulatis_app_202604072124.css
   ========================================================================== */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  /* Cursor Orange remplace le vert Supabase */
  --sb-accent:             #f54e00;
  --sb-accent-fg:          #ffffff;
  --sb-hover:              rgba(245, 78, 0, 0.07);
  --sb-focus:              rgba(245, 78, 0, 0.18);
  --sb-link:               #f54e00;

  /* Bootstrap primary → Cursor Orange */
  --bs-primary:            #f54e00;
  --bs-primary-rgb:        245, 78, 0;
  --bs-primary-text-emphasis: #7a2700;
  --bs-primary-bg-subtle:  #ffd8c5;
  --bs-primary-border-subtle: #ffb394;

  /* Typographie système */
  --bs-body-font-family:   system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --bs-link-color:         #f54e00;
  --bs-link-hover-color:   #d94400;
}

[data-bs-theme=light] {
  --bs-body-color:         #26251e;
  --bs-body-color-rgb:     38, 37, 30;
  --bs-body-bg:            #f2f1ed;
  --sb-bg:                 #f2f1ed;
  --sb-surface:            #ffffff;
  --sb-text:               #26251e;
  --sb-muted:              rgba(38, 37, 30, 0.55);
  --sb-border:             rgba(38, 37, 30, 0.15);
  --sb-accent:             #f54e00;
  --sb-accent-fg:          #ffffff;
}

[data-bs-theme=dark] {
  --bs-primary:            #f54e00;
  --bs-primary-rgb:        245, 78, 0;
  --bs-body-color:         #e8e6e0;
  --bs-body-color-rgb:     232, 230, 224;
  --bs-body-bg:            #1a1917;
  --bs-body-bg-rgb:        26, 25, 23;
  --bs-secondary-bg:       #2a2925;
  --bs-secondary-bg-rgb:   42, 41, 37;
  --sb-bg:                 #1a1917;
  --sb-surface:            #2a2925;
  --sb-text:               #e8e6e0;
  --sb-muted:              rgba(232, 230, 224, 0.55);
  --sb-border:             rgba(232, 230, 224, 0.15);
  --sb-accent:             #f54e00;
  --sb-accent-fg:          #ffffff;
  --sb-focus:              rgba(245, 78, 0, 0.15);
}

/* ==========================================================================
   Navbar — light mode (fond crème Cursor, accent Orange)
   ========================================================================== */
.main-header.navbar {
  background-color: var(--palette-bg-base);
  border-bottom: 1px solid var(--palette-border-color);
  box-shadow: var(--shadow-card);
}

/* Navbar-white / navbar-light = fond blanc */
.navbar-white,
.navbar-light {
  background-color: var(--palette-bg-base);
}

/* Navbar-primary → Cursor Orange */
.navbar-primary {
  background-color: var(--palette-bg-primary-core) !important;
  color: var(--palette-bg-base);
}

.navbar-primary .form-control-navbar::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.navbar-primary .form-control-navbar,
.navbar-primary .form-control-navbar ~ .btn-navbar {
  background-color: var(--palette-bg-tertiary-core);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
}

.navbar-primary .form-control-navbar:focus::placeholder {
  color: rgba(255, 255, 255, 0.9);
}

.navbar-primary .form-control-navbar:focus,
.navbar-primary .form-control-navbar:focus ~ .btn-navbar {
  background-color: var(--palette-bg-tertiary-core);
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: var(--palette-bg-base);
}

/* Navbar-dark */
[data-bs-theme=dark] .main-header.navbar,
.navbar-dark {
  background-color: var(--palette-bg-base);
  border-bottom: 1px solid var(--palette-border-color);
}

/* ==========================================================================
   Sidebar — états actifs avec Cursor Orange (light + dark)
   ========================================================================== */

/* Light mode — liens actifs */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar.nav-flat > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar.nav-flat > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar.nav-pills > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar.nav-pills > .nav-item > .nav-link.active {
  background-color: var(--palette-bg-primary-core);
  color: var(--palette-bg-base);
}

.sidebar-dark-primary .nav-sidebar.nav-legacy > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar.nav-legacy > .nav-item > .nav-link.active {
  border-color: var(--palette-bg-primary-core);
  color: var(--palette-bg-primary-core);
}

/* Dark mode — liens actifs */
[data-bs-theme=dark] .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
[data-bs-theme=dark] .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
[data-bs-theme=dark] .sidebar-dark-primary .nav-sidebar.nav-flat > .nav-item > .nav-link.active,
[data-bs-theme=dark] .sidebar-light-primary .nav-sidebar.nav-flat > .nav-item > .nav-link.active,
[data-bs-theme=dark] .sidebar-dark-primary .nav-sidebar.nav-pills > .nav-item > .nav-link.active,
[data-bs-theme=dark] .sidebar-light-primary .nav-sidebar.nav-pills > .nav-item > .nav-link.active {
  background-color: var(--palette-bg-primary-core);
  color: var(--palette-bg-base);
}

[data-bs-theme=dark] .sidebar-dark-primary .nav-sidebar.nav-legacy > .nav-item > .nav-link.active,
[data-bs-theme=dark] .sidebar-light-primary .nav-sidebar.nav-legacy > .nav-item > .nav-link.active {
  border-color: var(--palette-bg-primary-core);
}

/* brand-link fixed */
.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]),
[data-bs-theme=dark] .layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]) {
  background-color: var(--palette-bg-primary-core);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme=light] .layout-navbar-fixed .wrapper .sidebar-light-primary .brand-link:not([class*=navbar]) {
  background-color: var(--palette-bg-primary-core);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   Boutons Bootstrap .btn-primary → Cursor Orange (via --sb-accent redéfini)
   ========================================================================== */
.btn-primary {
  border-radius: var(--radius-standard);
}

/* ==========================================================================
   Badges et éléments --bs-primary dépendants
   ========================================================================== */
.bg-primary {
  background-color: var(--palette-bg-primary-core) !important;
}

.text-primary {
  color: var(--palette-bg-primary-core) !important;
}

.border-primary {
  border-color: var(--palette-bg-primary-core) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--palette-bg-primary-core);
  color: var(--palette-bg-base);
}

/* ==========================================================================
   Mode sombre — redéfinition des tokens pour [data-bs-theme=dark]
   Tout le CSS basé sur --palette-* bascule automatiquement.
   ========================================================================== */
[data-bs-theme=dark] {
  --palette-text-primary:      #e8e6e0;
  --palette-text-focused:      #cccab8;
  --palette-text-secondary:    rgba(232, 230, 224, 0.55);
  --palette-bg-base:           #1a1917;
  --palette-surface-secondary: #2a2925;
  --palette-surface-tertiary:  #333028;
  --palette-border-color:      rgba(232, 230, 224, 0.15);
  --palette-page-bg:           #1a1917;

  /* Ombres adaptées au fond sombre */
  --shadow-card:  rgba(0, 0, 0, 0.40) 0px 0px 0px 1px,
                  rgba(0, 0, 0, 0.30) 0px 2px 8px,
                  rgba(0, 0, 0, 0.25) 0px 0px 16px;
  --shadow-hover: rgba(0, 0, 0, 0.60) 0px 14px 40px,
                  rgba(0, 0, 0, 0.40) 0px 6px 20px,
                  rgba(0, 0, 0, 0.40) 0px 0px 0px 1px;
}

/* Mode clair — tokens explicites */
[data-bs-theme=light],
:root:not([data-bs-theme=dark]) {
  --palette-text-primary:      #26251e;
  --palette-text-focused:      #3f3e37;
  --palette-text-secondary:    rgba(38, 37, 30, 0.55);
  --palette-bg-base:           #ffffff;
  --palette-surface-secondary: #ebeae5;
  --palette-surface-tertiary:  #e6e5e0;
  --palette-border-color:      rgba(38, 37, 30, 0.15);
  --palette-page-bg:           #f2f1ed;

  --shadow-card:  rgba(0, 0, 0, 0.02) 0px 0px 16px,
                  rgba(0, 0, 0, 0.008) 0px 0px 8px,
                  rgba(38, 37, 30, 0.1) 0px 0px 0px 1px;
  --shadow-hover: rgba(0, 0, 0, 0.14) 0px 28px 70px,
                  rgba(0, 0, 0, 0.10) 0px 14px 32px,
                  rgba(38, 37, 30, 0.1) 0px 0px 0px 1px;
}

/* ==========================================================================
   Typographie globale
   ========================================================================== */
body,
.content-wrapper,
.main-sidebar,
.navbar,
.card,
.modal,
.dropdown-menu,
.popover,
.form-control,
.btn {
  font-family: var(--font-family-primary);
  color: var(--palette-text-primary);
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.44px;
  color: var(--palette-text-primary);
}

h4, h5 {
  font-weight: 600;
  letter-spacing: -0.18px;
  color: var(--palette-text-primary);
}

h6, .h6 {
  font-weight: 600;
  color: var(--palette-text-primary);
}

small, .small {
  font-size: 0.81rem;
  color: var(--palette-text-secondary);
}

a {
  color: var(--palette-text-legal);
}

a:hover {
  color: var(--palette-bg-tertiary-core);
}

/* ==========================================================================
   Canvas & Layout
   ========================================================================== */
[data-bs-theme=light] body,
body:not([data-bs-theme=dark]) {
  background-color: var(--palette-page-bg) !important;
  color: var(--palette-text-primary);
}

[data-bs-theme=dark] body {
  background-color: var(--palette-page-bg) !important;
  color: var(--palette-text-primary);
}

.content-wrapper {
  background-color: var(--palette-page-bg);
}

[data-bs-theme=dark] .content-wrapper {
  background-color: var(--palette-page-bg);
}

/* ==========================================================================
   Cartes — ombre 3 couches + radius
   ========================================================================== */
.card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--palette-border-color);
  background-color: var(--palette-bg-base);
  overflow: hidden; /* ferme les coins sur les enfants — OBLIGATOIRE */
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transition: box-shadow 0.2s ease;
}

.card-header,
.card-footer {
  border-radius: 0;
  background-color: transparent;
  border-color: var(--palette-border-color);
}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn {
  border-radius: var(--radius-standard);
  font-family: var(--font-family-primary);
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.25;
  transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn:focus,
.btn:active,
.btn.btn-primary.ew-btn:focus,
.btn.btn-primary.ew-btn:active,
.swal2-confirm.btn.btn-primary.ew-swal2-confirm-button.swal2-styled:focus,
.swal2-cancel.btn.btn-secondary.ew-swal2-cancel-button.swal2-styled:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Bouton primaire — Cursor Orange (DESIGN.md) */
.btn.btn-primary,
.btn.btn-primary.ew-btn.ew-submit {
  border-radius: var(--radius-standard);
}

/* Bouton default — warm surface style */
.btn.btn-default,
.btn.btn-default.ew-btn {
  border-radius: var(--radius-standard);
  color: var(--palette-text-primary);
  background-color: var(--palette-surface-secondary);
  border-color: var(--palette-border-color);
}

.show > .btn.btn-default,
.btn.btn-default.active,
.btn.btn-default:active,
.btn.btn-default:hover {
  color: var(--palette-text-primary-error);
  background-color: var(--palette-surface-tertiary);
  border-color: var(--palette-border-color);
  box-shadow: var(--shadow-focus);
}

/* Boutons SweetAlert2 */
.swal2-confirm.btn.btn-primary.ew-swal2-confirm-button.swal2-styled {
  border-radius: var(--radius-standard);
  background-color: var(--palette-bg-primary-core);
  border-color: var(--palette-bg-primary-core);
}

.swal2-cancel.btn.btn-secondary.ew-swal2-cancel-button.swal2-styled {
  border-radius: var(--radius-standard);
}

.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y:    0.25rem;
  --bs-btn-padding-x:    0.5rem;
  --bs-btn-font-size:    0.875rem;
  --bs-btn-border-radius: var(--radius-subtle);
}

/* ==========================================================================
   Input-group — fusion input + bouton (date picker, search…)
   ========================================================================== */
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
  border-radius: var(--radius-standard) 0 0 var(--radius-standard) !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  border-radius: 0 var(--radius-standard) var(--radius-standard) 0 !important;
}

.input-group > .btn:last-child,
.input-group > .input-group-text:last-child {
  border-radius: 0 var(--radius-standard) var(--radius-standard) 0 !important;
  border-left: none;
}

.input-group > .btn:first-child,
.input-group > .input-group-text:first-child {
  border-radius: var(--radius-standard) 0 0 var(--radius-standard) !important;
  border-right: none;
}

/* Seul élément dans un input-group */
.input-group > .form-control:only-child,
.input-group > .btn:only-child {
  border-radius: var(--radius-standard) !important;
}

/* Alignement vertical */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group > .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--palette-border-color);
  background-color: var(--palette-surface-secondary);
  color: var(--palette-text-primary);
}

.input-group > .btn:hover {
  background-color: var(--palette-text-primary);
  color: var(--palette-bg-base);
}

/* ==========================================================================
   Formulaires
   ========================================================================== */
.form-control:not(.form-control-navbar):not(.form-control-sidebar):not(.is-invalid):not(:focus),
.form-control.form-control-sidebar,
.form-select.form-select-sm,
.custom-file-label,
.custom-file-label::after {
  border-radius: var(--radius-standard);
  border-color: var(--palette-border-color);
  color: var(--palette-text-primary);
}

select.form-select.form-select-sm.ew-tooltip:focus,
input.form-control:focus,
input.form-control:active,
textarea.form-control:focus,
select.form-select.form-control:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--palette-text-primary);
  border-radius: var(--radius-standard);
}

.form-control::placeholder {
  color: var(--palette-text-secondary);
  opacity: 0.6;
}

textarea::placeholder {
  color: var(--palette-text-secondary);
  opacity: 0.6;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
select.is-invalid ~ .select2-container--bootstrap5.select2-container--focus .select2-selection {
  border-color: var(--palette-text-primary-error);
  box-shadow: none !important;
}

@media (min-width: 576px) {
  .col-form-label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
    text-align: right;
  }
}

/* ==========================================================================
   Select2
   ========================================================================== */
.ew-select, .select2-container {
  min-width: 20em !important;
}

.select2-container--bootstrap5 .select2-selection {
  border-radius: var(--radius-standard);
  border-color: var(--palette-border-color);
}

span.select2-selection.select2-selection--single:focus,
span.select2-selection.select2-selection--single:active,
span.select2-selection.select2-selection--multiple {
  outline: none !important;
  box-shadow: none !important;
}

.select2-container--bootstrap5 .select2-search--dropdown .select2-search__field {
  padding: 0.375rem 0.75rem;
  color: inherit;
  border: 1px solid var(--palette-border-color);
  border-radius: var(--radius-subtle);
}

.select2-container--bootstrap5 .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--palette-text-primary);
  outline: none !important;
  box-shadow: none !important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option--selected,
.select2-container--bootstrap5 .select2-dropdown .select2-results__option[aria-selected=true] {
  color: var(--palette-bg-base);
  background-color: var(--palette-text-primary);
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option--selected.select2-results__option--highlighted,
.select2-container--bootstrap5 .select2-dropdown .select2-results__option[aria-selected=true].select2-results__option--highlighted {
  color: var(--palette-text-primary);
  background-color: var(--palette-surface-secondary);
}

.select2-container--bootstrap5 .select2-selection--multiple .select2-search__field {
  height: calc(1em + 0.1rem);
  padding-top: 0;
  margin: 0;
  line-height: 1;
  color: var(--palette-text-primary);
}

.select2-selection__placeholder {
  color: var(--palette-text-secondary);
  opacity: 0.6;
}

/* ==========================================================================
   Modales
   ========================================================================== */
.modal {
  border-radius: var(--radius-card);
}

.modal-content {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--palette-border-color);
}

.modal-header {
  border-bottom-color: var(--palette-border-color);
}

.modal-footer {
  border-top-color: var(--palette-border-color);
}

.modal-dialog-scrollable {
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

/* ==========================================================================
   Dropdowns
   ========================================================================== */
.dropdown-menu,
.dropdown-menu.ew-dropdown-menu.ew-list-options {
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-card);
  border-color: var(--palette-border-color);
}

.dropdown-menu.dropdown-menu-anim {
  animation: dropdown-menu-fade-in 0.3s ease 1, dropdown-menu-move-up 0.3s ease-out 1;
}

.dropup .dropdown-menu.dropdown-menu-anim,
.dropdown-menu .dropdown-menu-anim-down.dropdown-menu-anim {
  animation: dropdown-menu-fade-in 0.3s ease 1, dropdown-menu-move-down 0.3s ease-out 1;
}

/* ==========================================================================
   Tableaux
   ========================================================================== */
.table.ew-table.table-head-fixed thead tr:nth-child(1) th {
  box-shadow: none;
  outline: 0;
  outline-offset: 0;
}

body:not([data-bs-theme=dark]) .ew-grid {
  border-color: var(--palette-border-color) !important;
  border-radius: var(--radius-standard);
}

[data-bs-theme=light] .ew-grid-lower-panel.card-footer,
[data-bs-theme=light] .ew-grid-upper-panel.card-header {
  padding: 0.4rem 0.4rem;
  border-left: 0;
  border-right: 0;
  background: rgba(38, 37, 30, 0.03);
}

[data-bs-theme=light] .ew-grid .ew-table.table-hover > tbody > tr:not(.expandable-body):hover > * {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state:    var(--bs-table-hover-bg);
}

/* ==========================================================================
   Navigation & Sidebar
   ========================================================================== */
.nav-legacy {
  margin: 0 -0.5rem;
}

.nav-pills,
.nav-tabs {
  margin-bottom: -1px;
}

/* ==========================================================================
   Onglets / Tab-content
   ========================================================================== */
.tab-content:not([data-bs-theme=dark]) {
  border-top: 1px solid var(--palette-border-color);
  border-left: 1px solid var(--palette-border-color);
  border-right: 1px solid var(--palette-border-color);
  border-bottom: 1px solid var(--palette-border-color);
  padding-right: var(--spacing-5);
  margin-left: 0;
  background-color: var(--palette-bg-base);
  margin-bottom: var(--spacing-8);
  border-radius: 0 var(--radius-standard) var(--radius-standard) var(--radius-standard);
}

.popover-body .tab-content,
.tab-content {
  margin-top: 0;
  padding-left: var(--spacing-5);
  padding-bottom: var(--spacing-5);
  width: 100%;
}

.tab-content {
  margin-right: var(--spacing-5);
  padding-top: var(--spacing-5);
}

.ew-detail-pages .tab-content,
.ew-multi-page .tab-content,
.ew-preview .tab-content,
.ew-preview-overlay .tab-content,
.ew-preview-container .tab-content {
  margin-top: 0;
  border-top: 1px solid var(--palette-border-color);
  background-color: var(--palette-bg-base);
  width: 100% !important;
  padding: var(--spacing-5);
}

/* ==========================================================================
   Popovers
   ========================================================================== */
.popover,
.popover-body .tab-content {
  font-family: var(--font-family-primary);
}

.popover {
  border-radius: var(--radius-standard);
  background-color: var(--palette-bg-base) !important;
  box-shadow: var(--shadow-card);
}

.popover-header,
.fc-popover-header.popover-header {
  border-radius: var(--radius-standard) var(--radius-standard) 0 0;
  background-color: var(--palette-surface-secondary);
  color: var(--palette-text-primary);
  font-weight: 600;
}

.bs-popover-auto[x-placement^=right] .arrow::after,
.bs-popover-right .arrow::after {
  left: 1px;
  border-right-color: var(--palette-bg-base);
}

.popover-body .ew-grid-content,
.popover-content {
  font-family: inherit;
  border-left: none !important;
}

.popover-body .tab-content {
  float: left;
  padding-right: var(--spacing-5);
}

/* ==========================================================================
   Badges & Labels
   ========================================================================== */
.badge {
  border-radius: var(--radius-badge);
  font-weight: 600;
  font-size: 0.69rem;
  letter-spacing: 0.05px;
}

/* ==========================================================================
   User panel & carte utilisateur
   ========================================================================== */
.user-panel {
  top: -4px;
}

.brand-image {
  margin-top: -5px;
  line-height: 0.1;
  max-height: 30px;
  margin-bottom: -4px;
}

.ms-user-card {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: var(--spacing-4) var(--spacing-4);
  width: 220px;
  min-height: 65px;
  margin-bottom: 28.5px;
}

.ms-user-card .ms-user-card-wrapper {
  left: 0;
  right: 0;
  position: absolute;
  display: flex;
  height: 100%;
  bottom: -32.5px;
  padding: 0 0.8rem;
}

.ms-user-card .ms-user-card-wrapper .ms-user-card-pic {
  display: flex;
  align-items: center;
  padding-right: 0.2rem;
}

.ms-user-card .ms-user-card-wrapper .ms-user-card-pic img {
  border-radius: var(--radius-circle);
  max-height: 80px;
  max-width: 80px;
}

.ms-user-card .ms-user-card-wrapper .ms-user-card-details {
  display: flex;
  flex-direction: column;
}

.ms-user-card .ms-user-card-wrapper .ms-user-card-details .ms-user-card-name {
  display: flex;
  align-items: flex-end;
  font-size: 0.8rem;
  height: 50%;
  font-weight: 500;
  padding-bottom: 0.25rem;
  color: var(--palette-bg-base);
}

.ms-user-card .ms-user-card-wrapper .ms-user-card-details .ms-user-card-position {
  padding-top: 0.25rem;
  display: flex;
  height: 50%;
  align-items: flex-start;
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Scroll to top
   ========================================================================== */
.scrollTop {
  position: fixed;
  bottom: 40px;
  right: 30px;
  z-index: 10000;
  display: none;
  cursor: pointer;
  overflow: hidden;
}

.scrollTop #scrolltop-bg {
  fill: var(--palette-bg-primary-core);
}

.scrollTop #scrolltop-arrow {
  fill: var(--palette-bg-base);
}

.scrollTop a:hover #scrolltop-bg {
  fill: var(--palette-bg-tertiary-core);
}

.scrollTop a:hover #scrolltop-arrow {
  fill: var(--palette-bg-base);
}

.scrollTop a svg {
  display: block;
  border-radius: var(--radius-circle);
  width: 100%;
  height: 100%;
}

.scrollTop a svg path {
  transition: all 0.1s;
}

.scrollTop a #scrolltop-arrow {
  transform: scale(0.66);
  transform-origin: center;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.ms-breadcrumblinks-form { width: 100% !important; }

@media (min-width: 576px) {
  .ms-breadcrumblinks-box { width: 550px; }
}

/* ==========================================================================
   Signature
   ========================================================================== */
#signatureparent { height: 200px !important; }
#signature       { height: 150px !important; }

/* ==========================================================================
   Misc
   ========================================================================== */
.ew-list-option-body {
  vertical-align: top !important;
}

.ew-preview-container.ew-table-preview-row.expandable-body {
  background-color: inherit !important;
  min-width: 500px;
}

button:focus {
  outline: dotted 0;
  outline: -webkit-focus-ring-color auto 0;
}

/* ==========================================================================
   Paginateur responsive
   ========================================================================== */
@media (min-width: 780px) {
  .ew-pager .input-group {
    flex-wrap: nowrap;
  }
  .ew-pager .input-group > input.ew-page-no {
    width: 6em;
  }
}

@media (min-width: 476px) and (max-width: 768px) {
  .ew-pager .input-group {
    flex-wrap: nowrap;
  }
  .ew-pager .input-group > input.ew-page-no {
    width: 3em;
  }
}

@media (max-width: 575.98px) {
  div.small-box p {
    font-size: 1.2rem !important;
  }
}

/* ==========================================================================
   Theme switch (dark / light)
   ========================================================================== */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}

.theme-switch-wrapper em {
  margin-left: var(--spacing-5);
  font-size: 1rem;
}

.theme-switch {
  display: inline-block;
  height: 24px;
  position: relative;
  width: 48px;
}

.theme-switch input {
  display: none;
}

.theme-slider {
  background-color: var(--palette-surface-secondary);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.5s;
}

.theme-slider:before {
  background-color: var(--palette-border-color);
  bottom: 2px;
  content: "";
  height: 20px;
  left: 2px;
  position: absolute;
  transition: 0.5s;
  width: 20px;
}

input:checked + .theme-slider {
  background-color: var(--palette-text-focused);
}

input:checked + .theme-slider:before {
  transform: translateX(24px);
  background-color: #dedede;
}

.theme-slider.round {
  border-radius: var(--radius-large);
}

.theme-slider.round:before {
  border-radius: var(--radius-circle);
}

/* ==========================================================================
   Scrollbar (OS theme light)
   ========================================================================== */
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  background: var(--palette-border-color);
}

.os-theme-light > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
  background: var(--palette-surface-secondary);
}

.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
  background: var(--palette-text-secondary);
}

/* ==========================================================================
   Calendrier FullCalendar (dropdown)
   ========================================================================== */
.dropdown.ew-calendar-dropdown,
[data-bs-theme=dark] .dropdown.ew-calendar-dropdown {
  z-index: 999999;
}

.fc-popover.popover.fc-more-popover.fc-day.fc-day-mon.fc-day-past > .fc-popover-header.popover-header {
  background-color: var(--palette-surface-secondary);
}

/* ==========================================================================
   MODE SOMBRE — overrides spécifiques (non couverts par les tokens)
   ========================================================================== */

/* Tables PHPMaker / EW */
[data-bs-theme=dark] .ew-desktop-table,
[data-bs-theme=dark] .ew-view-table,
[data-bs-theme=dark] div.ew-custom-template {
  background-color: #2a2925;
}

/* Select2 — dropdown fond sombre */
[data-bs-theme=dark] .select2-container--bootstrap5 .select2-dropdown {
  background-color: #1a1917;
  border-color: rgba(232, 230, 224, 0.15);
  color: rgba(232, 230, 224, 0.7);
}

[data-bs-theme=dark] .select2-container--bootstrap5 .select2-dropdown .select2-results__option--selected,
[data-bs-theme=dark] .select2-container--bootstrap5 .select2-dropdown .select2-results__option[aria-selected=true] {
  color: #e8e6e0;
  background-color: #3a3830;
}

[data-bs-theme=dark] .select2-container--bootstrap5 .select2-selection--single .select2-selection__placeholder {
  color: rgba(232, 230, 224, 0.55);
}

[data-bs-theme=dark] .select2-container--bootstrap5 .select2-selection--single {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E8E6E0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-color: #2a2925;
}

/* SweetAlert2 */
[data-bs-theme=dark] .swal2-validation-message {
  align-items: center;
  justify-content: center;
  margin: 1em 0 0;
  padding: 0.625em;
  overflow: hidden;
  background: transparent;
  color: #e8e6e0;
  font-size: 1em;
  font-weight: 400;
}

/* Tableaux */
[data-bs-theme=dark] .table {
  --bs-table-color:         var(--palette-text-primary);
  --bs-table-bg:            var(--palette-bg-base);
  --bs-table-border-color:  var(--palette-border-color);
  --bs-table-striped-bg:    #2a2925;
  --bs-table-striped-color: #e8e6e0;
  --bs-table-active-bg:     #333028;
  --bs-table-active-color:  #e8e6e0;
  --bs-table-hover-bg:      #2e2c25;
  --bs-table-hover-color:   #e8e6e0;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

[data-bs-theme=dark] .table-bordered,
[data-bs-theme=dark] .table-bordered td,
[data-bs-theme=dark] .table-bordered th {
  border-color: var(--palette-border-color);
}

[data-bs-theme=dark] .table-hover tbody tr:hover {
  color: #e8e6e0;
  background-color: #252420;
  border-color: var(--palette-border-color);
}

[data-bs-theme=dark] .table thead th {
  border-bottom-color: var(--palette-border-color);
}

[data-bs-theme=dark] .table th,
[data-bs-theme=dark] .table td {
  border-top-color: var(--palette-border-color);
}

[data-bs-theme=dark] .table.table-head-fixed thead tr:nth-child(1) th {
  background-color: #333028;
}

[data-bs-theme=dark] .ew-grid .ew-table > thead > tr > th,
[data-bs-theme=dark] .ew-grid .ew-table > thead > tr > td {
  font-weight: normal;
}

[data-bs-theme=dark] .ew-grid .ew-table > tbody:last-child > tr:last-child > td.ew-table-border-bottom,
[data-bs-theme=dark] .ew-grid .ew-table > tfoot > tr:last-child > td.ew-table-border-bottom,
[data-bs-theme=dark] .ew-grid .ew-table td.ew-table-last-row.ew-table-border-bottom,
[data-bs-theme=dark] .ew-grid .ew-table .ew-table-border-bottom {
  border-bottom: 1px rgba(232, 230, 224, 0.2) solid;
}

/* Grille upper/lower panels */
[data-bs-theme=dark] .ew-grid-upper-panel.card-header,
[data-bs-theme=dark] .ew-grid-lower-panel.card-footer {
  padding: 0.4rem;
  border-left: 0;
  border-right: 0;
  background-color: rgba(38, 37, 30, 0.4);
  color: rgba(232, 230, 224, 0.55);
}

[data-bs-theme=dark] .ew-pager {
  color: rgba(232, 230, 224, 0.55);
}

[data-bs-theme=dark] .fa-solid.fa-ellipsis-vertical.ew-icon {
  color: #e8e6e0;
}

/* Onglets */
[data-bs-theme=dark] .tab-content {
  border-top:    1px solid rgba(232, 230, 224, 0.2);
  padding-right: var(--spacing-5);
  margin-left:   0;
  border-left:   1px solid rgba(232, 230, 224, 0.2);
  border-right:  1px solid rgba(232, 230, 224, 0.2);
  border-bottom: 1px solid rgba(232, 230, 224, 0.2);
  background-color: #2a2925;
  margin-bottom: var(--spacing-8);
}

[data-bs-theme=dark] .tab-pane {
  background-color: #2a2925 !important;
}

[data-bs-theme=dark] .ew-detail-pages .tab-content,
[data-bs-theme=dark] .ew-multi-page .tab-content,
[data-bs-theme=dark] .ew-preview .tab-content,
[data-bs-theme=dark] .ew-preview-overlay .tab-content,
[data-bs-theme=dark] .ew-preview-container .tab-content {
  margin-top: 0;
  border-top: 1px solid rgba(232, 230, 224, 0.2);
  background-color: #2a2925;
  width: 100% !important;
  padding: var(--spacing-5);
}

[data-bs-theme=dark] .ew-preview-container {
  background-color: rgba(232, 230, 224, 0.15) !important;
  min-width: 500px;
}

/* Popovers */
[data-bs-theme=dark] .fc-popover,
[data-bs-theme=dark] .popover,
[data-bs-theme=dark] .fc-popover-header.popover-header {
  background-color: #2a2925 !important;
  color: #e8e6e0;
}

[data-bs-theme=dark] .fc-popover-body.popover-body,
[data-bs-theme=dark] .popover-body {
  color: #e8e6e0;
}

[data-bs-theme=dark] .fc-popover.popover.fc-more-popover.fc-day.fc-day-mon.fc-day-past > .fc-popover-header.popover-header {
  background-color: #1a1917;
}

/* Alertify */
[data-bs-theme=dark] .alertify .ajs-header,
[data-bs-theme=dark] .alertify .ajs-handle,
[data-bs-theme=dark] .ajs-content {
  color: rgba(232, 230, 224, 0.75);
}

/* Rapports */
[data-bs-theme=dark] .ew-rpt-grp-field-1 {
  --bs-table-accent-bg: #333028;
}

[data-bs-theme=dark] .ew-rpt-page-summary,
[data-bs-theme=dark] .ew-rpt-grand-summary {
  --bs-table-accent-bg: #1a1917 !important;
  color: #e8e6e0 !important;
}

/* Sidebar */
[data-bs-theme=dark] [class*=sidebar-dark-] {
  border-right: inherit;
}

[data-bs-theme=dark] [class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active,
[data-bs-theme=dark] [class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active:hover,
[data-bs-theme=dark] [class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active:focus {
  color: #fff !important;
}

/* Calendrier FullCalendar */
[data-bs-theme=dark] .fc-list.fc-list-sticky.fc-listYear-view.fc-view,
[data-bs-theme=dark] .fc-list .fc-list-sticky.fc-listMonth-view.fc-view,
[data-bs-theme=dark] .fc-list .fc-list-sticky.fc-listDay-view.fc-view,
[data-bs-theme=dark] .fc .fc-list-empty {
  border: 1px solid #2a2925;
  border-radius: var(--radius-standard);
  padding: var(--spacing-8);
  position: relative;
}

[data-bs-theme=dark] .fc .fc-daygrid-day.fc-day-today {
  background-color: rgba(245, 78, 0, 0.12) !important;
}

[data-bs-theme=dark] .fc-list-event-title {
  background-color: #1a1917;
}

[data-bs-theme=dark] .fc-theme-bootstrap5-shaded,
[data-bs-theme=dark] .fc-list-day-cushion.fc-theme-bootstrap5-shaded,
[data-bs-theme=dark] .fc-list-table {
  background-color: #1a1917;
}

[data-bs-theme=dark] .fc .fc-list-event td {
  background-color: #2a2925;
}

[data-bs-theme=dark] .fc .fc-list-event:hover td {
  background-color: #333028 !important;
}

[data-bs-theme=dark] .fc-scrollgrid.fc-scrollgrid-liquid,
[data-bs-theme=dark] .fc-theme-bootstrap5 .fc-list,
[data-bs-theme=dark] .fc-theme-bootstrap5 .fc-scrollgrid,
[data-bs-theme=dark] .fc-theme-bootstrap5 td,
[data-bs-theme=dark] .fc-theme-bootstrap5 th {
  border-color: rgba(232, 230, 224, 0.2);
}

[data-bs-theme=dark] .fc .fc-timegrid-slot,
[data-bs-theme=dark] .fc-daygrid-day {
  background-color: #252420 !important;
}

/* ==========================================================================
   Animations dropdown
   ========================================================================== */
@keyframes dropdown-menu-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dropdown-menu-move-down {
  from { margin-top: -10px; }
  to   { margin-top: 0; }
}

@keyframes dropdown-menu-move-up {
  from { margin-top: 10px; }
  to   { margin-top: 0; }
}

/* ==========================================================================
   Dropdown utilisateur — Cursor Design System
   Sélecteurs : .ew-user-dropdown, #ew-nav-link-user, .ew-user-image
   ========================================================================== */

/* Bouton déclencheur — avatar dans la navbar */
#ew-nav-link-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-circle);
  transition: background-color 0.15s ease;
  color: var(--palette-text-primary);
  text-decoration: none;
}

#ew-nav-link-user:hover {
  background-color: var(--palette-surface-secondary);
}

/* Avatar circulaire */
.ew-user-image.img-circle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--palette-border-color);
  object-fit: cover;
  transition: border-color 0.15s ease;
}

#ew-nav-link-user:hover .ew-user-image.img-circle {
  border-color: var(--palette-bg-primary-core);
}

/* Dropdown panel principal */
.dropdown-menu.ew-user-dropdown {
  min-width: 240px;
  padding: var(--spacing-4) 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--palette-border-color);
  background-color: var(--palette-bg-base);
  font-family: var(--font-family-primary);
  margin-top: var(--spacing-3) !important;
}

/* Header — nom + rôle */
.dropdown-menu.ew-user-dropdown .dropdown-header,
.dropdown-menu.ew-user-dropdown > div:first-child {
  padding: var(--spacing-4) var(--spacing-7);
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
}

/* Avatar dans le panel */
.dropdown-menu.ew-user-dropdown .img-circle.ew-user-image {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--palette-border-color);
  object-fit: cover;
  flex-shrink: 0;
}

/* Nom utilisateur */
.dropdown-menu.ew-user-dropdown .ew-user-name,
.dropdown-menu.ew-user-dropdown strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--palette-text-primary);
  line-height: 1.3;
  display: block;
}

/* Rôle / sous-titre */
.dropdown-menu.ew-user-dropdown .ew-user-role,
.dropdown-menu.ew-user-dropdown small,
.dropdown-menu.ew-user-dropdown p.text-muted {
  font-size: 0.81rem;
  font-weight: 400;
  color: var(--palette-text-secondary);
  line-height: 1.3;
  display: block;
}

/* Séparateur */
.dropdown-menu.ew-user-dropdown .dropdown-divider {
  margin: var(--spacing-3) 0;
  border-color: var(--palette-border-color);
  opacity: 1;
}

/* Items de navigation */
.dropdown-menu.ew-user-dropdown .dropdown-item {
  padding: var(--spacing-4) var(--spacing-7);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--palette-text-primary);
  border-radius: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.dropdown-menu.ew-user-dropdown .dropdown-item:hover,
.dropdown-menu.ew-user-dropdown .dropdown-item:focus {
  background-color: var(--palette-surface-secondary);
  color: var(--palette-text-primary);
}

.dropdown-menu.ew-user-dropdown .dropdown-item:active {
  background-color: var(--palette-bg-primary-core);
  color: var(--palette-bg-base);
}

/* Footer — bouton Logout */
.dropdown-menu.ew-user-dropdown .dropdown-footer {
  padding: var(--spacing-4) var(--spacing-7);
  border-top: 1px solid var(--palette-border-color);
  margin-top: var(--spacing-3);
}

.dropdown-menu.ew-user-dropdown .dropdown-footer .btn {
  width: 100%;
  border-radius: var(--radius-standard);
  font-size: 0.88rem;
  font-weight: 500;
  padding: var(--spacing-3) var(--spacing-6);
  background-color: var(--palette-surface-secondary);
  border: 1px solid var(--palette-border-color);
  color: var(--palette-text-primary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dropdown-menu.ew-user-dropdown .dropdown-footer .btn:hover {
  background-color: var(--palette-bg-primary-core);
  border-color: var(--palette-bg-primary-core);
  color: var(--palette-bg-base);
}

/* --- Dark mode --- */
[data-bs-theme=dark] .dropdown-menu.ew-user-dropdown {
  background-color: var(--palette-bg-base);
  border-color: var(--palette-border-color);
  box-shadow: var(--shadow-hover);
}

[data-bs-theme=dark] .dropdown-menu.ew-user-dropdown .dropdown-item {
  color: var(--palette-text-primary);
}

[data-bs-theme=dark] .dropdown-menu.ew-user-dropdown .dropdown-item:hover {
  background-color: var(--palette-surface-secondary);
}

[data-bs-theme=dark] .dropdown-menu.ew-user-dropdown .dropdown-divider {
  border-color: var(--palette-border-color);
}

[data-bs-theme=dark] .dropdown-menu.ew-user-dropdown .dropdown-footer {
  border-top-color: var(--palette-border-color);
}

[data-bs-theme=dark] .dropdown-menu.ew-user-dropdown .dropdown-footer .btn {
  background-color: var(--palette-surface-secondary);
  border-color: var(--palette-border-color);
  color: var(--palette-text-primary);
}

[data-bs-theme=dark] .dropdown-menu.ew-user-dropdown .dropdown-footer .btn:hover {
  background-color: var(--palette-bg-primary-core);
  border-color: var(--palette-bg-primary-core);
  color: var(--palette-bg-base);
}

[data-bs-theme=dark] #ew-nav-link-user:hover {
  background-color: var(--palette-surface-secondary);
}

/* ==========================================================================
   Dropdown utilisateur — header ms-user-card (styles spécifiques)
   ========================================================================== */

/* Zone header avec background image */
.dropdown-menu.ew-user-dropdown .ms-user-card {
  width: 100%;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  min-height: 72px;
  margin-bottom: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-6);
  background-color: var(--palette-text-primary); /* fallback sans image */
  overflow: visible;
}

/* Avatar dans le header */
.dropdown-menu.ew-user-dropdown .ms-user-card .ms-user-card-pic img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--palette-bg-base);
  box-shadow: var(--shadow-focus);
  object-fit: cover;
}

/* Nom dans le header */
.dropdown-menu.ew-user-dropdown .ms-user-card .ms-user-card-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--palette-bg-base);
  letter-spacing: 0;
}

/* Rôle/poste dans le header */
.dropdown-menu.ew-user-dropdown .ms-user-card .ms-user-card-position {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

/* Items du menu */
.dropdown-menu.ew-user-dropdown #dropdown-user-profile,
.dropdown-menu.ew-user-dropdown #personal-data,
.dropdown-menu.ew-user-dropdown #change-password,
.dropdown-menu.ew-user-dropdown #enable-2fa,
.dropdown-menu.ew-user-dropdown #disable-2fa,
.dropdown-menu.ew-user-dropdown #backup-codes,
.dropdown-menu.ew-user-dropdown #enable-chat,
.dropdown-menu.ew-user-dropdown #disable-chat {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--palette-text-primary);
  padding: var(--spacing-4) var(--spacing-7);
}

/* Bouton Logout dans footer */
.dropdown-menu.ew-user-dropdown .dropdown-footer .btn.btn-default {
  font-size: 0.88rem;
  font-weight: 500;
  width: auto;
  padding: var(--spacing-3) var(--spacing-7);
  border-radius: var(--radius-standard);
  color: var(--palette-text-primary);
  border: 1px solid var(--palette-border-color);
  background-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dropdown-menu.ew-user-dropdown .dropdown-footer .btn.btn-default:hover {
  background-color: var(--palette-bg-primary-core);
  border-color: var(--palette-bg-primary-core);
  color: var(--palette-bg-base) !important;
  box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   Paginateur & boutons grille — Cursor Design System
   .ew-pager, .ew-prev-next, .ew-list-other-options
   ========================================================================== */

/* Conteneur pager */
.ew-pager {
  gap: var(--spacing-3);
  align-items: center;
  font-family: var(--font-family-primary);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--palette-text-secondary);
}

/* Groupe navigation << < 1 > >> */
.ew-pager .input-group {
  gap: 0;
  flex-wrap: nowrap;
  align-items: stretch;
}

/* Boutons << < > >> */
.ew-pager .ew-prev-next .btn,
.ew-pager .ew-numeric-page .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.81rem;
  font-weight: 600;
  background-color: var(--palette-surface-secondary);
  border: 1px solid var(--palette-border-color);
  color: var(--palette-text-primary);
  border-radius: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
  line-height: 1;
}

/* Coins arrondis : premier et dernier du groupe nav */
.ew-pager .ew-prev-next .btn:first-child {
  border-radius: var(--radius-standard) 0 0 var(--radius-standard);
}
.ew-pager .ew-prev-next .btn:last-child {
  border-radius: 0 var(--radius-standard) var(--radius-standard) 0;
}

/* Supprime double bordure entre boutons */
.ew-pager .ew-prev-next .btn + .btn {
  border-left: none;
}

/* Hover sur les boutons nav */
.ew-pager .ew-prev-next .btn:not(:disabled):hover {
  background-color: var(--palette-bg-primary-core);
  color: var(--palette-bg-base);
  border-color: var(--palette-bg-primary-core);
  z-index: 1;
}

/* Disabled */
.ew-pager .ew-prev-next .btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Input numéro de page */
.ew-pager .input-group > input.ew-page-no,
.ew-pager .input-group > input.ew-page-number {
  height: 32px;
  min-width: 3.5em;
  max-width: 5em;
  padding: 0 var(--spacing-4);
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--palette-text-primary);
  background-color: var(--palette-bg-base);
  border: 1px solid var(--palette-border-color);
  border-radius: var(--radius-standard);
  border-left: none;
  border-right: none;
}

.ew-pager .input-group > input.ew-page-no:focus,
.ew-pager .input-group > input.ew-page-number:focus {
  outline: none;
  box-shadow: none !important;
  border-color: var(--palette-text-primary);
}

/* Input "nb lignes par page" */
.ew-pager input[name="recperpage"],
.ew-grid-upper-panel input[name="recperpage"],
.ew-grid-lower-panel input[name="recperpage"] {
  height: 32px;
  width: 4em;
  padding: 0 var(--spacing-4);
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--palette-text-primary);
  background-color: var(--palette-bg-base);
  border: 1px solid var(--palette-border-color);
  border-radius: var(--radius-standard);
}

/* Texte "Page" / "de N" / "Enregistrement…" */
.ew-grid-upper-panel .ew-pager,
.ew-grid-lower-panel .ew-pager {
  margin-bottom: 0;
}

/* ==========================================================================
   Boutons + (Ajouter) et poubelle (Supprimer sélection) dans la grille
   ========================================================================== */
.ew-list-other-options .btn,
.ew-grid-upper-panel .btn:not(.btn-primary):not(.btn-danger),
.ew-grid-lower-panel .btn:not(.btn-primary):not(.btn-danger) {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-standard);
  background-color: var(--palette-surface-secondary);
  border: 1px solid var(--palette-border-color);
  color: var(--palette-text-primary);
  font-size: 0.9rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ew-list-other-options .btn:hover,
.ew-grid-upper-panel .btn:not(.btn-primary):not(.btn-danger):hover,
.ew-grid-lower-panel .btn:not(.btn-primary):not(.btn-danger):hover {
  background-color: var(--palette-text-primary);
  color: var(--palette-bg-base);
  border-color: var(--palette-text-primary);
}

/* Bouton + spécifique → Cursor Orange au hover */
.ew-list-other-options a[href*="add"] .btn,
.ew-list-other-options .ew-add-edit-btn,
a.btn[href*="add"],
a.btn[data-ew-action*="add"] {
  background-color: var(--palette-surface-secondary);
  border-color: var(--palette-border-color);
  color: var(--palette-text-primary);
}

.ew-list-other-options a[href*="add"] .btn:hover,
.ew-list-other-options .ew-add-edit-btn:hover,
a.btn[href*="add"]:hover,
a.btn[data-ew-action*="add"]:hover {
  background-color: var(--palette-bg-primary-core);
  border-color: var(--palette-bg-primary-core);
  color: var(--palette-bg-base);
}

/* Bouton poubelle → crimson au hover */
.ew-list-other-options .btn-danger,
.ew-grid-upper-panel .btn-danger,
.ew-grid-lower-panel .btn-danger {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-standard);
  background-color: var(--palette-surface-secondary);
  border: 1px solid var(--palette-border-color);
  color: var(--palette-text-primary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ew-list-other-options .btn-danger:hover,
.ew-grid-upper-panel .btn-danger:hover,
.ew-grid-lower-panel .btn-danger:hover {
  background-color: var(--palette-text-primary-error);
  border-color: var(--palette-text-primary-error);
  color: var(--palette-bg-base);
}

/* --- Dark mode --- */
[data-bs-theme=dark] .ew-pager .ew-prev-next .btn,
[data-bs-theme=dark] .ew-pager .ew-numeric-page .btn {
  background-color: var(--palette-surface-secondary);
  border-color: var(--palette-border-color);
  color: var(--palette-text-primary);
}

[data-bs-theme=dark] .ew-pager .ew-prev-next .btn:not(:disabled):hover {
  background-color: var(--palette-bg-primary-core);
  color: var(--palette-bg-base);
  border-color: var(--palette-bg-primary-core);
}

[data-bs-theme=dark] .ew-pager .input-group > input.ew-page-no,
[data-bs-theme=dark] .ew-pager .input-group > input.ew-page-number,
[data-bs-theme=dark] .ew-pager input[name="recperpage"],
[data-bs-theme=dark] .ew-grid-upper-panel input[name="recperpage"],
[data-bs-theme=dark] .ew-grid-lower-panel input[name="recperpage"] {
  background-color: var(--palette-bg-base);
  border-color: var(--palette-border-color);
  color: var(--palette-text-primary);
}

[data-bs-theme=dark] .ew-list-other-options .btn,
[data-bs-theme=dark] .ew-grid-upper-panel .btn:not(.btn-primary):not(.btn-danger),
[data-bs-theme=dark] .ew-grid-lower-panel .btn:not(.btn-primary):not(.btn-danger) {
  background-color: var(--palette-surface-secondary);
  border-color: var(--palette-border-color);
  color: var(--palette-text-primary);
}

[data-bs-theme=dark] .ew-list-other-options .btn-danger,
[data-bs-theme=dark] .ew-grid-upper-panel .btn-danger,
[data-bs-theme=dark] .ew-grid-lower-panel .btn-danger {
  background-color: var(--palette-surface-secondary);
  border-color: var(--palette-border-color);
  color: var(--palette-text-primary);
}