:root {
    /* ── Palette Comparable — Rouge & Bleu ── */
    --color-brand-red:      #cc1515;
    --color-brand-red-dark: #a81010;
    --color-brand-blue:     #0090d4;
    --color-brand-blue-dk:  #0076ae;

    --color-sidebar:      #f0f2f5;   /* même fond que l'app */
    --color-sidebar-2:    #e8eaed;

    --color-primary:      #0090d4;   /* bleu Comparable — interactif */
    --color-primary-dark: #0076ae;
    --color-accent:       #cc1515;   /* rouge Comparable — marque/danger */

    --color-primary-10: rgba(0, 144, 212, 0.10);
    --color-primary-20: rgba(0, 144, 212, 0.18);

    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger:  #dc2626;
    --color-page:    #f0f2f5;
    --color-surface: #ffffff;
    --color-surface-soft: #f6f8fa;
    --color-border:  #e2e6ea;
    --color-text:    #111827;
    --color-muted:   #6b7280;
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.09);
    --radius-sm: 5px;
    --radius-md: 7px;
}

html,
body {
    background: var(--color-page);
    color: var(--color-text);
}

.x-mask {
    z-index: 20000;
}

/* ── Header content area (blanc, sobre) ── */
.header {
    background: #ffffff !important;
    border-bottom: 2px solid var(--color-border) !important;
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.header h1 {
    display: inline-block;
    margin: 0 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
    color: var(--color-text);
}

.header img {
    display: inline-block;
    height: 40px;
    vertical-align: middle;
}

.x-panel-body-default,
.x-grid-body,
.x-tabpanel-child {
    background: var(--color-surface-soft);
}

.x-panel-header-default {
    background: #e9ecef !important;
    border-color: #d1d5db !important;
    border-bottom: 2px solid var(--color-primary) !important;
    box-shadow: none;
}

/* Panel header (grilles/tableaux) → blanc, texte noir */
.x-panel-header-text-default {
    color: #111827 !important;
    font-weight: 700;
}

/* Fenêtre popup → fond sombre, texte blanc */
.x-window-header-text-default,
.x-window-header-default .x-window-header-text,
.x-window-header-default span {
    color: #ffffff !important;
    font-weight: 700;
}

/* Icône avant le titre (icon_user etc.) → blanche sur fond sombre */
.x-window-header-default .x-window-header-icon {
    filter: brightness(0) invert(1) opacity(0.85);
}

/* Carré blanc pour tous les boutons outils — tous types de fenêtres */
.x-window-header .x-tool {
    position: relative !important;
    background-color: #ffffff !important;
    border-radius: 4px !important;
    transition: background 0.12s;
}

.x-window-header .x-tool:hover {
    background-color: #e0e0e0 !important;
}

/* Cache le sprite ExtJS */
.x-window-header .x-tool-img {
    opacity: 0 !important;
}

/* Base commune : ✕ bleu marine par défaut */
.x-window-header .x-tool::after {
    content: '✕';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1c2b3a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

/* Symboles spécifiques via :has() */
.x-window-header .x-tool:has(.x-tool-close)::after    { content: '✕'; font-size: 13px; }
.x-window-header .x-tool:has(.x-tool-maximize)::after { content: '□'; font-size: 14px; }
.x-window-header .x-tool:has(.x-tool-restore)::after  { content: '⧉'; font-size: 12px; }
.x-window-header .x-tool:has(.x-tool-minimize)::after { content: '─'; font-size: 14px; }

.x-panel-default,
.x-grid,
.x-tabpanel-child {
    border-color: var(--color-border) !important;
}

.x-toolbar,
.x-toolbar-default,
.x-toolbar-footer,
.x-pagingtoolbar {
    background: var(--color-surface-soft) !important;
    border-color: var(--color-border) !important;
}

.x-toolbar-footer {
    padding: 8px 10px;
}

.x-btn {
    background: var(--color-primary) !important;
    border: 1px solid var(--color-primary-dark) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.12);
}

.x-btn .x-btn-inner,
.x-btn-default-small .x-btn-inner,
.x-btn-default-toolbar-small .x-btn-inner {
    color: #ffffff !important;
    font-weight: 700;
}

.x-btn-over,
.x-btn-focus,
.x-btn-pressed {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.x-btn-disabled,
.x-btn-disabled .x-btn-inner {
    opacity: 0.65;
}

.x-btn-icon-el {
    width: 24px;
}

/* ── Boutons Annuler / Supprimer → rouge ── */
.x-btn-delete,
.btn-cancel,
.x-btn-cancel {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
}

.x-btn-delete:hover,
.btn-cancel:hover,
.x-btn-cancel:hover {
    background: #b91c1c !important;
}

/* ── Boutons Ajouter / Enregistrer → bleu Comparable ── */
.btn-add {
    background: var(--color-primary) !important;
    border-color: var(--color-primary-dark) !important;
}

.x-btn-save {
    background: var(--color-primary) !important;
    border-color: var(--color-primary-dark) !important;
}

.x-window,
.x-window-default {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.x-window-header-default {
    background: #1c2b3a !important;
    border-bottom: 2px solid var(--color-primary) !important;
    border-color: #1c2b3a !important;
}

.x-resizable-handle {
    background: transparent !important;
}

/* Corps de fenêtre + tout ce qui est dedans : blanc pur */
.x-window-body-default,
.x-window .x-panel-body-default,
.x-window .x-panel-body,
.x-window .x-form,
.x-window .x-form-panel,
.x-window .x-fieldset,
.x-window .x-fieldset .x-fieldset-body {
    background: #ffffff !important;
    color: #111827;
}

.x-window .x-grid,
.x-window .x-panel-default {
    border-color: #e5e7eb !important;
}

/* Toolbar du bas (boutons) : blanc avec séparation subtile */
.x-window .x-toolbar,
.x-window .x-toolbar-default {
    background: #ffffff !important;
    border-top: 1px solid #f0f0f0 !important;
}

.x-window .x-grid-header-ct {
    border-top: 2px solid var(--color-primary) !important;
}

.x-form-item,
.x-form-field,
.x-form,
.x-form-trigger,
.x-form-trigger-wrap {
    border-radius: var(--radius-sm);
}

.x-form-item-label {
    color: #334155;
    font-weight: 600;
}

.x-form-text,
.x-form-textarea,
.x-form-trigger-wrap {
    border-color: var(--color-border) !important;
    background-color: #ffffff !important;
    color: var(--color-text) !important;
}

.x-form-focus,
.x-form-trigger-wrap-focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-20);
}

.x-form-checkbox {
    background-color: var(--color-primary) !important;
}


/* ── Formulaires ────────────────────────────────────────── */
.x-window .x-form,
.x-window .x-panel-body-default .x-form,
.x-form-panel,
.x-panel-body .x-form {
    background: #ffffff !important;
}

.x-form-item {
    margin-bottom: 12px;
}


.x-form-item-label,
.x-form-item-label-top {
    color: #111827 !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

.x-form-item-label-top {
    padding-bottom: 5px;
}

.x-form-item-label-inner {
    padding-top: 4px;
}

.x-form-required-field .x-form-item-label-inner:after,
.x-form-item-label-inner .x-form-required-field:after {
    color: var(--color-danger);
}

.x-form-text,
.x-form-textarea,
.x-form-trigger-wrap,
.x-form-file-wrap .x-form-text {
    min-height: 30px;
    border: 1px solid #e0e0e0 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #111827 !important;
}

.x-form-text {
    padding: 5px 8px !important;
}

.x-form-textarea {
    padding: 7px 8px !important;
    line-height: 1.45;
}

.x-form-trigger-wrap .x-form-text {
    border: none !important;
    box-shadow: none;
}


/* Trigger (flèche des combobox) — gris neutre */
.x-form-trigger {
    border-left: 1px solid #e5e7eb !important;
    background-color: #f9fafb !important;
}

.x-form-trigger-over,
.x-form-trigger-wrap-focus .x-form-trigger {
    background-color: #f3f4f6 !important;
}

/* Focus — bordure bleu, halo bleu léger */
.x-form-focus,
.x-form-trigger-wrap-focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-20), inset 0 1px 2px rgba(0,0,0,0.03) !important;
}

.x-form-empty-field,
textarea.x-form-empty-field {
    color: #9ca3af !important;
}

.x-form-invalid-field,
.x-form-type-text input.x-form-invalid-field,
.x-form-type-text textarea.x-form-invalid-field,
.x-form-trigger-wrap-invalid {
    border-color: var(--color-danger) !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important;
}

.x-form-error-msg,
.x-form-invalid-under {
    color: #dc2626 !important;
    font-size: 11px;
    font-weight: 700;
    padding-top: 3px;
}

.x-item-disabled .x-form-item-label,
.x-item-disabled .x-form-field,
.x-form-readonly .x-form-field,
.x-form-display-field {
    color: #6b7280 !important;
}

.x-form-readonly .x-form-text,
.x-form-display-field {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
}

.x-form-display-field {
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    line-height: 1.35;
}

/* Fieldsets — blanc, bordure légère */
.x-fieldset {
    margin: 0 0 12px 0;
    padding: 12px 14px 14px;
    border: 1px solid #e8e8e8 !important;
    border-radius: 6px;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.x-fieldset-header {
    padding: 0 4px 6px;
}

/* Label de section → bleu Comparable (visible et lisible) */
.x-fieldset-header-text {
    color: var(--color-primary) !important;
    font-size: 13px;
    font-weight: 700;
}

.x-fieldset .x-fieldset-body {
    background: transparent;
}

.x-form-cb-label {
    color: #334155;
    font-weight: 600;
}

.x-form-checkbox,
.x-form-radio {
    filter: saturate(0.9);
}

.x-toolbar-footer .x-btn {
    min-height: 28px;
}
.x-boundlist {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md);
    background-color: #ffffff !important;
    color: var(--color-text);
    box-shadow: var(--shadow-soft);
}

.x-boundlist-item {
    border: none;
    line-height: 1.6rem;
    color: var(--color-text);
}

.x-boundlist-item:hover,
.x-boundlist-selected {
    background-color: #e0f3fc !important;
    color: #005a8e !important;
}

.x-grid-header-ct,
.x-column-header,
.x-column-header-over {
    background: #f6f8fa !important;
    border-color: var(--color-border) !important;
}

.x-column-header-text {
    color: #263342;
    font-weight: 700;
}

.x-grid-row .x-grid-cell {
    background: #ffffff;
    border-color: #f3f4f6;
    color: var(--color-text);
}

.x-grid-row-alt .x-grid-cell {
    background: #fafafa;
}

.x-grid-view,
.x-grid-table,
.x-grid-with-row-lines .x-grid-table {
    background: var(--color-page) !important;
}

.x-grid-row-over .x-grid-cell {
    background: #e8f5fc !important;
}

.x-grid-row-selected .x-grid-cell {
    background: #bde6fa !important;
    color: #005a8e;
}

.x-grid-cell-inner {
    padding: 7px 10px;
}

.x-grid-empty {
    padding: 18px;
    color: var(--color-muted);
    background: var(--color-surface);
}

.x-tab-bar-default {
    background: var(--color-surface-soft) !important;
    border-color: var(--color-border) !important;
}

.x-tab-default {
    border-color: var(--color-border) !important;
    background: #edf2f7 !important;
}

.x-tab-default-active {
    background: #ffffff !important;
    border-top: 2px solid var(--color-primary) !important;
}

.x-tab-default .x-tab-inner {
    color: var(--color-muted) !important;
    font-weight: 600;
}

.x-tab-default-active .x-tab-inner {
    color: var(--color-primary) !important;
    font-weight: 700;
}

/* ── Action column icons ── */
.x-action-col-icon {
    cursor: pointer !important;
    font-size: 14px !important;
    margin: 0 3px !important;
    color: #64748b !important;
}
.x-action-col-icon:hover {
    color: #1a3c6e !important;
}
.x-action-col-icon.x-fa.fa-pencil { color: #2563eb !important; }
.x-action-col-icon.x-fa.fa-trash { color: #dc2626 !important; }
.x-action-col-icon.x-fa.fa-key { color: #b45309 !important; }

/* ═══════════════════════════════════════════════
   SIDEBAR — Comparable : clair, même fond que l'app
   ═══════════════════════════════════════════════ */
.west-body {
    background: var(--color-sidebar) !important;
    border-right: 1px solid var(--color-border) !important;
    box-shadow: none;
}

/* Cache les boutons collapse (mais PAS la barre de resize west) */
.x-layout-split-east,
.x-layout-split-north,
.x-layout-split-south,
.x-layout-collapsed-west,
.x-layout-collapsed-south,
.x-layout-collapsed-north,
.x-tool-collapse-west,
.x-tool-collapse-east,
.x-tool-collapse-north,
.x-tool-collapse-south,
.x-tool-expand-west,
.x-tool-expand-east,
.x-tool-expand-north,
.x-tool-expand-south {
    display: none !important;
}

/* Barre de resize sidebar — invisible, visible au survol */
.x-layout-split-west,
.x-splitter,
.x-splitter-horizontal,
.x-splitter-vertical,
.x-layout-split,
.x-box-scroller,
.x-border-region-slide-in {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    transition: background 0.2s;
}

.x-layout-split-west:hover,
.x-splitter:hover,
.x-splitter-horizontal:hover,
.x-splitter-vertical:hover {
    background: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}

/* Brand logo */
.sidebar-brand {
    background: transparent !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.west-body .x-menu {
    height: 100% !important;
    border: none !important;
    background: transparent !important;
}

/* Cache les flèches de scroll ExtJS du menu sidebar */
.west-body .x-menu-scroll-up,
.west-body .x-menu-scroll-down,
.west-body .x-scroller-ct,
.west-body .x-menu-scroller {
    display: none !important;
}

.west-body .x-menu-body {
    display: flex !important;
    height: 100% !important;
    min-height: 100% !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: transparent !important;
    padding: 6px 0 !important;
}

.west-body .x-menu-item:not(.x-menu-item-separator) {
    display: flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    min-height: 28px !important;
    background: transparent !important;
    border-left: 3px solid transparent !important;
    transition: background 0.13s, border-left-color 0.13s;
}

.west-body .x-menu-item-separator {
    display: none !important;
}

.west-body .x-menu-item-text {
    color: #334155 !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1px;
}

.west-body .x-menu-item-icon {
    opacity: 0.65;
    color: #64748b !important;
    filter: grayscale(1) brightness(0.45);
}

.west-body .x-menu-item-arrow {
    filter: none;
    opacity: 0.5;
}

/* Hover → bleu doux */
.west-body .x-menu-item:hover {
    border-left-color: var(--color-primary) !important;
    background: rgba(0, 144, 212, 0.08) !important;
}

.west-body .x-menu-item:hover .x-menu-item-text {
    color: var(--color-primary-dark) !important;
}

/* Actif temporaire (clic) */
.west-body .x-menu-item-active {
    border-left-color: var(--color-brand-red) !important;
    background: rgba(0, 144, 212, 0.12) !important;
}

/* Sélectionné (page courante) */
.west-body .x-menu-item.sidebar-selected,
.west-body .x-menu-item.sidebar-selected:not(.x-menu-item-separator) {
    border-left: 3px solid var(--color-primary) !important;
    background: rgba(0, 144, 212, 0.12) !important;
    border-radius: 0 6px 6px 0;
}

.west-body .x-menu-item.sidebar-selected .x-menu-item-text {
    color: var(--color-primary) !important;
    font-weight: 700;
}

.west-body .x-menu-item.sidebar-selected .x-menu-item-icon {
    opacity: 1;
}

.west-body .x-menu-item-active .x-menu-item-text {
    color: var(--color-primary-dark) !important;
    font-weight: 700;
}

.west-body .x-menu-item:hover .x-menu-item-icon,
.west-body .x-menu-item-active .x-menu-item-icon {
    opacity: 1;
    filter: grayscale(0) brightness(1);
    color: var(--color-primary) !important;
}

.west-body .x-menu-item.sidebar-selected .x-menu-item-icon {
    opacity: 1;
    filter: grayscale(0) brightness(1);
    color: var(--color-primary) !important;
}

.x-menu-floating {
    border-color: var(--color-border) !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.10);
    border-radius: var(--radius-md) !important;
}

.x-menu-floating .x-menu-item-text {
    color: var(--color-text) !important;
}

.x-menu-floating .x-menu-item-active {
    background: #e0f3fc !important;
}

.x-menu-floating .x-menu-item-active .x-menu-item-text {
    color: var(--color-primary) !important;
}

/* South footer : cache le header ExtJS (le ^ de collapse) */
.x-border-item:has(.my-footer) > .x-panel-header,
.x-border-item:has(.my-footer) .x-panel-header-default {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

.south-footer,
.south-footer .x-panel-body {
    background: var(--color-sidebar) !important;
    border-top: 1px solid var(--color-border) !important;
}

.my-footer {
    text-align: center;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0.5px;
}

.x-form-itemselector-body .x-form-item {
    margin: 0;
}

.x-form-itemselector-top { background-image: url(../images/icon/top2.gif); }
.x-form-itemselector-up { background-image: url(../images/icon/up2.gif); }
.x-form-itemselector-add { background-image: url(../images/icon/right2.gif); }
.x-form-itemselector-remove { background-image: url(../images/icon/left2.gif); }
.x-form-itemselector-down { background-image: url(../images/icon/down2.gif); }
.x-form-itemselector-bottom { background-image: url(../images/icon/bottom2.gif); }

.icon_user { background: url('../images/icon/user.png') !important; }
.icon_group { background: url('../images/icon/user.png') !important; }
.icon_gear { background: url('../images/icon/engine.png') !important; }
.icon_tag { background: url('../images/icon/tag.png') !important; }
.icon_add { background: url('../images/icon/plus.png') !important; }
.icon_edit { background: url('../images/icon/pencil.png') !important; }
.icon_save { background: url('../images/icon/save.png') !important; }
.icon_delete { background: url('../images/icon/error.png') !important; }
.icon_categories { background: url('../images/icon/list.png') !important; }
.icon_category { background: url('../images/icon/list.png') !important; }
.icon_color { background: url('../images/icon/color.png') !important; }
.icon_make { background: url('../images/icon/make.png') !important; }
.icon_model { background: url('../images/icon/model.png') !important; }
.icon_feature { background: url('../images/icon/feature.png') !important; }
.icon_position { background: url('../images/icon/contact.png') !important; }
.icon_status { background: url('../images/icon/status.png') !important; }
.icon_search,
.icon-search { background: url('../images/icon/Search.png') !important; }
.icon_people { background: url('../images/icon/user.png') !important; }
.icon_help { background: url('../images/icon/tools.png.png') !important; }
.icon_loan { background: url('../images/icon/consommable.png.jpg') !important; }
.icon_info,
.icon_view { background: url('../images/icon/list.png') !important; }
.icon_warning { background: url('../images/icon/warming.png.jpg') !important; }
.icon_refresh { background: url('../images/icon/status.png') !important; }
.icon_print { background: url('../images/icon/print.png.jpg') !important; }
.icon_export { background: url('../images/icon/rapport.png.jpg') !important; }
.icon_update { background: url('../images/icon/save.png') !important; }
.icon_cancel { background: url('../images/icon/error.png') !important; }
.icon_assign { background: url('../images/icon/contact.png') !important; }
.icon_history { background: url('../images/icon/diagram.png.jpg') !important; }
.icon_consommable { background: url('../images/icon/consommable.png.jpg') !important; }
.icon_log { background: url('../images/icon/rapport.png.jpg') !important; }
.icon_user1 { background: url('../images/icon/User1.png') !important; }

/* ═══════════════════════════════════════════════
   PAGINATION — barre de navigation propre
   ═══════════════════════════════════════════════ */

/* Fond de la toolbar pagination */
.x-pagingtoolbar {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Boutons navigation (◀◀ ◀ ▶ ▶▶ ↺) — remplace le bleu criard */
.x-pagingtoolbar .x-btn {
    background: #f1f5f9 !important;
    border: 1px solid #dde3ea !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    min-width: 28px;
    height: 28px;
    margin: 0 2px !important;
    transition: background 0.12s, border-color 0.12s;
}

.x-pagingtoolbar .x-btn:hover,
.x-pagingtoolbar .x-btn-over {
    background: #0090d4 !important;
    border-color: #0076ae !important;
}

.x-pagingtoolbar .x-btn:hover .x-btn-icon-el,
.x-pagingtoolbar .x-btn-over .x-btn-icon-el {
    filter: brightness(100) !important;  /* icône blanche au survol */
}

/* Bouton désactivé (première/dernière page) */
.x-pagingtoolbar .x-btn-disabled {
    background: #f8fafc !important;
    border-color: #e9edf2 !important;
    opacity: 0.45 !important;
}

/* Icônes de navigation — couleur bleu marine par défaut */
.x-pagingtoolbar .x-btn-icon-el {
    filter: brightness(0) saturate(1) invert(17%) sepia(40%) saturate(800%) hue-rotate(185deg) !important;
    opacity: 1 !important;
}

/* Champ "Page X" */
.x-tbar-page-number {
    background: #f8fafc !important;
    border: 1px solid #dde3ea !important;
    border-radius: 5px !important;
    color: #1c2b3a !important;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    height: 26px !important;
    padding: 0 4px !important;
    box-shadow: none !important;
    width: 36px !important;
}

/* Texte "Page", "of X", séparateurs */
.x-pagingtoolbar .x-toolbar-text,
.x-pagingtoolbar .x-tbtext {
    color: #6b7280 !important;
    font-size: 12px;
    font-weight: 500;
}

/* ── Search pill ── */
.search-pill { background: #f1f3f4; }
.search-pill-focus { background: #e8eaed !important; box-shadow: 0 0 0 2px rgba(0,144,212,.15); }

/* ── Theme toggle ── */
.theme-toggle { background: #e2e8f0; }
.theme-toggle:hover { background: #cbd5e1; }

/* ═══════════════════════════════════════════════
   THEME SOMBRE
   ═══════════════════════════════════════════════ */

body.theme-dark { background: #0f172a !important; color: #e2e8f0; }

/* ── Header ── */
body.theme-dark .header { background: #1e293b !important; border-bottom-color: #334155 !important; box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* ── Sidebar ── */
body.theme-dark .west-body { background: linear-gradient(180deg, #1c2b3a 0%, #162233 100%) !important; border-right: none !important; box-shadow: 3px 0 10px rgba(0,0,0,.18); }
body.theme-dark .sidebar-brand { border-bottom-color: rgba(255,255,255,.08) !important; }
body.theme-dark .brand-name { color: #ffffff !important; }
body.theme-dark .brand-sarl { color: rgba(200,211,221,.55) !important; }
body.theme-dark .brand-desc { color: rgba(200,211,221,.65) !important; }
body.theme-dark .nav-label  { color: rgba(200,211,221,.45) !important; }

body.theme-dark .west-body .x-menu-item-text { color: #c8d3dd !important; }
body.theme-dark .west-body .x-menu-item-icon { filter: brightness(0) invert(.8); }
body.theme-dark .west-body .x-menu-item-arrow { filter: brightness(0) invert(.5); }
body.theme-dark .west-body .x-menu-item:hover .x-menu-item-text { color: #e8f4fb !important; }
body.theme-dark .west-body .x-menu-item-active .x-menu-item-text { color: #ffffff !important; }
body.theme-dark .west-body .x-menu-item.sidebar-selected,
body.theme-dark .west-body .x-menu-item.sidebar-selected:not(.x-menu-item-separator) { border-left: 3px solid var(--color-primary) !important; background: rgba(0,144,212,.18) !important; }
body.theme-dark .west-body .x-menu-item.sidebar-selected .x-menu-item-text { color: #ffffff !important; }
body.theme-dark .west-body .x-menu-item.sidebar-selected .x-menu-item-icon { filter: brightness(0) invert(1); }
body.theme-dark .west-body .x-menu-item:hover .x-menu-item-icon,
body.theme-dark .west-body .x-menu-item-active .x-menu-item-icon { opacity: 1; filter: brightness(0) invert(1); }
body.theme-dark .west-body .x-menu-item-separator { border-color: rgba(255,255,255,.07) !important; }
body.theme-dark .west-body .x-menu-item:hover { background: rgba(0,144,212,.10) !important; }
body.theme-dark .west-body .x-menu-item-active { background: rgba(0,144,212,.18) !important; }
body.theme-dark .x-layout-split-west,
body.theme-dark .x-splitter { background: transparent !important; }
body.theme-dark .x-layout-split-west:hover,
body.theme-dark .x-splitter:hover { background: rgba(0,144,212,.7) !important; }

/* ── Panels ── */
body.theme-dark .x-panel-header-default { background: #1e293b !important; border-color: #334155 !important; }
body.theme-dark .x-panel-header-text-default { color: #e2e8f0 !important; }
body.theme-dark .x-panel-body-default,
body.theme-dark .x-grid-body,
body.theme-dark .x-tabpanel-child { background: #1a2535 !important; }
body.theme-dark .x-panel-default,
body.theme-dark .x-grid,
body.theme-dark .x-tabpanel-child { border-color: #334155 !important; }

/* ── Grids ── */
body.theme-dark .x-grid-header-ct,
body.theme-dark .x-column-header,
body.theme-dark .x-column-header-over { background: #1e293b !important; border-color: #334155 !important; }
body.theme-dark .x-column-header-text { color: #94a3b8; }
body.theme-dark .x-grid-row .x-grid-cell { background: #0f172a; border-color: #1e293b; color: #e2e8f0; }
body.theme-dark .x-grid-row-alt .x-grid-cell { background: #162032; }
body.theme-dark .x-grid-view,
body.theme-dark .x-grid-table,
body.theme-dark .x-grid-with-row-lines .x-grid-table { background: #0f172a !important; }
body.theme-dark .x-grid-row-over .x-grid-cell { background: #1e3a5f !important; }
body.theme-dark .x-grid-row-selected .x-grid-cell { background: #1e3a5f !important; color: #bde6fa; }
body.theme-dark .x-grid-empty { color: #94a3b8; background: #1e293b; }
body.theme-dark .x-grid-group-hd { background: #1a2535 !important; border-color: #334155 !important; }
body.theme-dark .x-grid-group-title { color: #e2e8f0 !important; }

/* ── Toolbars ── */
body.theme-dark .x-toolbar,
body.theme-dark .x-toolbar-default,
body.theme-dark .x-toolbar-footer { background: #1e293b !important; border-color: #334155 !important; }

/* ── Tabs ── */
body.theme-dark .x-tab-bar-default { background: #1a2535 !important; border-color: #334155 !important; }
body.theme-dark .x-tab-default { border-color: #334155 !important; background: #1e293b !important; }
body.theme-dark .x-tab-default-active { background: #0f172a !important; }
body.theme-dark .x-tab-default .x-tab-inner { color: #94a3b8 !important; }

/* ── Forms ── */
body.theme-dark .x-form-item-label,
body.theme-dark .x-form-item-label-top,
body.theme-dark .x-form-item-label-inner { color: #cbd5e1 !important; }
body.theme-dark .x-form-text,
body.theme-dark .x-form-textarea,
body.theme-dark .x-form-trigger-wrap,
body.theme-dark .x-form-file-wrap .x-form-text,
body.theme-dark .x-field .x-form-trigger-wrap,
body.theme-dark .x-field .x-form-text { border-color: #475569 !important; background: #0f172a !important; color: #e2e8f0 !important; box-shadow: none !important; }
body.theme-dark .x-form-trigger-wrap .x-form-text,
body.theme-dark .x-field .x-form-trigger-wrap .x-form-text { background: transparent !important; border: none !important; color: #e2e8f0 !important; }
body.theme-dark .x-form-trigger { border-left-color: #475569 !important; background-color: #1e293b !important; filter: invert(.7) brightness(1.5); }
body.theme-dark .x-form-trigger-over,
body.theme-dark .x-form-trigger-wrap-focus .x-form-trigger { background-color: #334155 !important; }
body.theme-dark .x-form-date-trigger,
body.theme-dark .x-form-arrow-trigger { filter: invert(.7) brightness(1.5); }
body.theme-dark .x-datepicker { background: #1e293b !important; border-color: #334155 !important; }
body.theme-dark .x-datepicker-header { background: #1c2b3a !important; }
body.theme-dark .x-datepicker-header a { color: #e2e8f0 !important; }
body.theme-dark .x-datepicker-cell span { color: #cbd5e1 !important; }
body.theme-dark .x-datepicker-selected span { background: #0090d4 !important; color: #fff !important; }
body.theme-dark .x-datepicker-column-header span { color: #64748b !important; }
body.theme-dark .x-datepicker-cell:hover span { background: #334155 !important; }
body.theme-dark .x-form-empty-field,
body.theme-dark textarea.x-form-empty-field { color: #64748b !important; }
body.theme-dark .x-fieldset { border-color: #334155 !important; background: #1a2535 !important; }
body.theme-dark .x-fieldset-header-text { color: #60a5fa !important; }
body.theme-dark .x-form-cb-label { color: #cbd5e1; }
body.theme-dark .x-form-display-field { background: #1a2535 !important; border-color: #334155; color: #e2e8f0 !important; }
body.theme-dark .x-form-readonly .x-form-text { background: #1a2535 !important; border-color: #334155 !important; }

/* ── Windows (popups) ── */
body.theme-dark .x-window,
body.theme-dark .x-window-default { background: #1e293b !important; border-color: #334155 !important; }
body.theme-dark .x-window-body-default,
body.theme-dark .x-window .x-panel-body-default,
body.theme-dark .x-window .x-panel-body,
body.theme-dark .x-window .x-form,
body.theme-dark .x-window .x-form-panel,
body.theme-dark .x-window .x-fieldset,
body.theme-dark .x-window .x-fieldset .x-fieldset-body { background: #1e293b !important; color: #e2e8f0; }
body.theme-dark .x-window .x-toolbar,
body.theme-dark .x-window .x-toolbar-default { background: #1e293b !important; border-top-color: #334155 !important; }

/* ── Menus contextuels ── */
body.theme-dark .x-menu-floating { background: #1e293b !important; border-color: #334155 !important; }
body.theme-dark .x-menu-floating .x-menu-item-text { color: #e2e8f0 !important; }
body.theme-dark .x-menu-floating .x-menu-item-active { background: #2d4a6f !important; }
body.theme-dark .x-menu-floating .x-menu-item-active .x-menu-item-text { color: #bde6fa !important; }
body.theme-dark .x-menu-item-separator { border-color: #334155 !important; }

/* ── Dropdowns ── */
body.theme-dark .x-boundlist { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0; }
body.theme-dark .x-boundlist-item { color: #e2e8f0; }
body.theme-dark .x-boundlist-item:hover,
body.theme-dark .x-boundlist-selected { background-color: #2d4a6f !important; color: #bde6fa !important; }

/* ── Footer ── */
body.theme-dark .south-footer,
body.theme-dark .south-footer .x-panel-body { background: #1c2b3a !important; border-top: 2px solid var(--color-brand-red) !important; }
body.theme-dark .my-footer { color: rgba(200,211,221,.75); }

/* ── Pagination ── */
body.theme-dark .x-pagingtoolbar { background: #1e293b !important; border-color: #334155 !important; }
body.theme-dark .x-pagingtoolbar .x-btn { background: #0f172a !important; border-color: #334155 !important; }
body.theme-dark .x-pagingtoolbar .x-btn-disabled { background: #1a2535 !important; border-color: #2d3d4f !important; }
body.theme-dark .x-tbar-page-number { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
body.theme-dark .x-pagingtoolbar .x-toolbar-text,
body.theme-dark .x-pagingtoolbar .x-tbtext { color: #94a3b8 !important; }

/* ── Search pill ── */
body.theme-dark .search-pill { background: #334155 !important; }
body.theme-dark .search-pill input { color: #e2e8f0 !important; }
body.theme-dark .search-pill-focus { background: #475569 !important; box-shadow: 0 0 0 2px rgba(0,144,212,.25); }

/* ── Profile badge ── */
body.theme-dark .profile-pill { background: #334155 !important; border-color: #475569 !important; }
body.theme-dark .profile-name { color: #e2e8f0 !important; }

/* ── Theme toggle ── */
body.theme-dark .theme-toggle { background: #334155 !important; }
body.theme-dark .theme-toggle:hover { background: #475569 !important; }

/* ── Search dropdown ── */
body.theme-dark #globalSearchDropdown { background: #1e293b !important; border-color: #334155 !important; }
body.theme-dark #globalSearchDropdown .gs-item { background: #1e293b !important; border-bottom-color: #334155 !important; }
body.theme-dark #globalSearchDropdown .gs-item:hover { background: #2d4a6f !important; }

/* ── Mask / Messages ── */
body.theme-dark .x-mask { background: rgba(15,23,42,.7) !important; }
body.theme-dark .x-mask-msg { background: #1e293b !important; border-color: #334155 !important; }
body.theme-dark .x-mask-msg-text { color: #e2e8f0 !important; }

/* ── Dashboard ── */
body.theme-dark .adb-wrap { background: #0f172a !important; }
body.theme-dark .adb-greeting { color: #e2e8f0; }
body.theme-dark .adb-sub { color: #64748b; }
body.theme-dark .adb-kpi { background: #1e293b; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
body.theme-dark .adb-kpi-val { color: #e2e8f0; }
body.theme-dark .adb-kpi-lbl { color: #94a3b8; }
body.theme-dark .adb-kpi-sub { color: #64748b; }
body.theme-dark .adb-card { background: #1e293b; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
body.theme-dark .adb-card-hdr { border-bottom-color: #334155; }
body.theme-dark .adb-card-title { color: #e2e8f0; }
body.theme-dark .adb-tbl th { background: #162032; border-bottom-color: #334155; color: #64748b; }
body.theme-dark .adb-tbl td { color: #cbd5e1; border-bottom-color: #1a2535; }
body.theme-dark .adb-tbl tbody tr:hover td { background: #1e3a5f; }
body.theme-dark .adb-tbl .adb-copieur { color: #e2e8f0; }
body.theme-dark .adb-tbl .adb-msg { color: #94a3b8; }
body.theme-dark .adb-bar-label { color: #cbd5e1; }
body.theme-dark .adb-bar-val { color: #e2e8f0; }
body.theme-dark .adb-bar-track { background: #334155; }
body.theme-dark .adb-hbar-track { background: #334155; }
body.theme-dark .adb-hbar-name { color: #cbd5e1; }
body.theme-dark .adb-empty { color: #64748b; }
body.theme-dark .adb-empty i { color: #475569; }
body.theme-dark .adb-card-scroll::-webkit-scrollbar-thumb { background: #475569; }
body.theme-dark .adb-sev-item.red { background: #2a1215; border-color: #5c1d1d; }
body.theme-dark .adb-sev-item.orange { background: #2a1f0a; border-color: #5c3d12; }
body.theme-dark .adb-sev-item.green { background: #0a2a1a; border-color: #125c32; }