/* ============================================================
   Thème "Alabasta" : le royaume du désert, qui s'adapte à l'heure (plein jour, crépuscule, nuit étoilée, aube).
   Construit sur le modèle de Metronic, comme les thèmes Bleu, Noël, Halloween et Marine Ford. Activé par data-bs-theme="alabasta" sur <html>.
   Tout est limité à ce sélecteur : aucun autre thème n'est touché.

   Deux familles de couleurs :
   - la PAGE (fond, textes hors cartes) : claire le jour et à l'aube, sombre au crépuscule et la nuit. Les variables du premier bloc sont celles du plein jour (valeurs de repli) ;
     le moteur front/src/lib/alabasta.js les remplace en ligne sur <html> selon l'heure (palette : front/src/lib/alabastaPalette.js) et fournit les variables du décor --ab-* ;
   - l'INTERFACE (menu, en-tête, cartes, menus déroulants, fenêtres) : toujours sombre, brun et or, avec un texte clair. Seul un léger reflet change selon le moment (--ab-ui-1, --ab-ui-2).
   ============================================================ */

[data-bs-theme="alabasta"] {
    --bs-text-muted: #7b6347;
    --bs-gray-100: #fbf3e2;
    --bs-gray-100-rgb: 251, 243, 226;
    --bs-gray-200: #f3e4c3;
    --bs-gray-200-rgb: 243, 228, 195;
    --bs-gray-300: #e6d2a4;
    --bs-gray-300-rgb: 230, 210, 164;
    --bs-gray-400: #cdb27c;
    --bs-gray-400-rgb: 205, 178, 124;
    --bs-gray-500: #a8895a;
    --bs-gray-500-rgb: 168, 137, 90;
    --bs-gray-600: #86694a;
    --bs-gray-600-rgb: 134, 105, 74;
    --bs-gray-700: #5d4630;
    --bs-gray-700-rgb: 93, 70, 48;
    --bs-gray-800: #43311f;
    --bs-gray-800-rgb: 67, 49, 31;
    --bs-gray-900: #2a1d12;
    --bs-gray-900-rgb: 42, 29, 18;
    --bs-light: #f3e4c3;
    --bs-primary: #c8553d;
    --bs-secondary: #e6d2a4;
    --bs-success: #50cd89;
    --bs-info: #2fa6a0;
    --bs-warning: #ffc700;
    --bs-danger: #f1416c;
    --bs-dark: #3a2a1c;
    --bs-primary-active: #a8402b;
    --bs-secondary-active: #cdb27c;
    --bs-light-active: #e6d2a4;
    --bs-success-active: #47be7d;
    --bs-info-active: #238b86;
    --bs-warning-active: #f1bc00;
    --bs-danger-active: #d9214e;
    --bs-dark-active: #2a1d12;
    --bs-primary-light: #fbe3da;
    --bs-secondary-light: #F9F9F9;
    --bs-pink-light: #FBEAF0;
    --bs-success-light: #e8fff3;
    --bs-info-light: #dcf3f1;
    --bs-warning-light: #fff8dd;
    --bs-danger-light: #fff5f8;
    --bs-dark-light: #F1F1F2;
    --bs-red-light: #faebeb;
    --bs-primary-inverse: #ffffff;
    --bs-secondary-inverse: #5d4630;
    --bs-light-inverse: #86694a;
    --bs-success-inverse: #ffffff;
    --bs-info-inverse: #ffffff;
    --bs-warning-inverse: #ffffff;
    --bs-danger-inverse: #ffffff;
    --bs-dark-inverse: #fffaf0;
    --bs-light-rgb: 243, 228, 195;
    --bs-primary-rgb: 200, 85, 61;
    --bs-secondary-rgb: 230, 210, 164;
    --bs-success-rgb: 80, 205, 137;
    --bs-info-rgb: 47, 166, 160;
    --bs-warning-rgb: 255, 199, 0;
    --bs-danger-rgb: 241, 65, 108;
    --bs-dark-rgb: 58, 42, 28;
    --bs-text-white: #ffffff;
    --bs-text-primary: #c8553d;
    --bs-text-secondary: #e6d2a4;
    --bs-text-light: #e6d2a4;
    --bs-text-success: #50cd89;
    --bs-text-info: #2fa6a0;
    --bs-text-warning: #ffc700;
    --bs-text-danger: #f1416c;
    --bs-text-dark: #3a2a1c;
    --bs-text-purple: #812b9e;
    --bs-text-gold: #EFBF04;
    --bs-text-blue: #4b62d1;
    --bs-text-orange: #d1714b;
    --bs-text-gray-100: #e6d2a4;
    --bs-text-gray-200: #cdb27c;
    --bs-text-gray-300: #a8895a;
    --bs-text-gray-400: #86694a;
    --bs-text-gray-500: #6e5239;
    --bs-text-gray-600: #5d4630;
    --bs-text-gray-700: #4a361f;
    --bs-text-gray-800: #3a2a1c;
    --bs-text-gray-900: #2a1d12;
    --bs-border-color: #e6d2a4;
    --bs-border-dashed-color: #d9b97b;
    --bs-component-active-color: #ffffff;
    --bs-component-active-bg: #c8553d;
    --bs-component-hover-color: #c8553d;
    --bs-component-hover-bg: #f3dfb3;
    --bs-component-checked-color: #ffffff;
    --bs-component-checked-bg: #c8553d;
    --bs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0,  0,  0,  0.05);
    --bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0,  0,  0,  0.05);
    --bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0,  0,  0,  0.075);
    --bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0,  0,  0,  0.1);
    --bs-input-bg: #fffaf0;
    --bs-input-color: #3a2a1c;
    --bs-input-solid-color: #3a2a1c;
    --bs-input-solid-bg: #f3e4c3;
    --bs-input-solid-bg-focus: #ecdcb6;
    --bs-input-solid-placeholder-color: #a8895a;
    --bs-tooltip-box-shadow: 0px 0px 30px rgba(0,  0,  0,  0.15);
    --bs-table-striped-bg: rgba(var(--bs-gray-100-rgb),  0.75);
    --bs-table-loading-message-box-shadow: 0px 0px 50px 0px rgba(82,  63,  105,  0.15);
    --bs-dropdown-bg: #fffaf0;
    --bs-dropdown-box-shadow: 0px 0px 50px 0px rgba(82,  63,  105,  0.15);
    --bs-code-bg: #F1F3F8;
    --bs-code-box-shadow: 0px 3px 9px rgba(0,  0,  0,  0.08);
    --bs-code-color: #b93993;
    --bs-symbol-label-color: var(--bs-gray-800);
    --bs-symbol-label-bg: var(--bs-gray-100);
    --bs-symbol-border-color: rgba(var(--bs-body-bg),  0.5);
    --bs-bullet-bg-color: var(--bs-gray-400);
    --bs-scrolltop-opacity: 0;
    --bs-scrolltop-opacity-on: 0.3;
    --bs-scrolltop-opacity-hover: 1;
    --bs-scrolltop-box-shadow: var(--bs-box-shadow);
    --bs-scrolltop-bg-color: #c8553d;
    --bs-scrolltop-bg-color-hover: var(--bs-primary);
    --bs-scrolltop-icon-color: #ffffff;
    --bs-scrolltop-icon-color-hover: var(--bs-primary-inverse);
    --bs-drawer-box-shadow: 0px 1px 9px -3px rgba(0,  0,  0,  0.05);
    --bs-drawer-bg-color: #fffaf0;
    --bs-drawer-overlay-bg-color: rgba(0,  0,  0,  0.2);
    --bs-menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82,  63,  105,  0.15);
    --bs-menu-dropdown-bg-color: #fffaf0;
    --bs-menu-heading-color: #86694a;
    --bs-menu-link-color-hover: #c8553d;
    --bs-menu-link-color-show: #c8553d;
    --bs-menu-link-color-here: #c8553d;
    --bs-menu-link-color-active: #c8553d;
    --bs-menu-link-bg-color-hover: #f3dfb3;
    --bs-menu-link-bg-color-show: #f3dfb3;
    --bs-menu-link-bg-color-here: #f3dfb3;
    --bs-menu-link-bg-color-active: #f3dfb3;
    --bs-scrollbar-color: #e6d2a4;
    --bs-scrollbar-hover-color: #d9a455;
    --bs-overlay-bg: rgba(0,  0,  0,  0.05);
    --bs-blockui-overlay-bg: rgba(0,  0,  0,  0.05);
    --bs-rating-color-default: #B5B5C3;
    --bs-rating-color-active: #FFAD0F;
    --bs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(7,  20,  55,  0.1);
    --bs-ribbon-label-bg: #3E97FF;
    --bs-ribbon-label-border-color: #0063d7;
    --bs-ribbon-clip-bg: #071437;
    --bs-engage-btn-bg: #ffffff;
    --bs-engage-btn-box-shadow: 0px 0px 22px #E0E0E0;
    --bs-engage-btn-border-color: #E8E8E8;
    --bs-engage-btn-color: #252F4A;
    --bs-engage-btn-icon-color: #78829D;
    --bs-engage-btn-color-active: #252F4A;
    --bs-white: #ffffff;
    --bs-body-bg: #f6ead2;
    --bs-body-color: #3a2a1c;
    --bs-heading-color: #7a4f17;
    --bs-card-bg: #fffaf0;
    --bs-card-border-color: #d9a455;
    --bs-card-box-shadow: 0 .4rem 1.2rem rgba(120, 80, 30, .16);
    --bs-app-bg-color: transparent;
    --bs-app-blank-bg-color: transparent;
    --bs-app-header-base-bg-color: #efdcb4;
    --bs-app-header-base-box-shadow: none;
    --bs-app-header-minimize-bg-color: #efdcb4;
    --bs-app-header-minimize-box-shadow: 0 .1rem 1rem .25rem rgba(120, 80, 30, .15);
    --bs-app-header-light-separator-color: #d9a455;
    --bs-app-toolbar-base-bg-color: #efdcb4;
    --bs-app-toolbar-base-box-shadow: none;
    --bs-app-toolbar-base-border-top: 1px dashed #d9a455;
    --bs-app-aside-base-bg-color: #e8d3a6;
    --bs-app-footer-bg-color: transparent;
    --bs-app-footer-box-shadow: none;
    --bs-app-sidebar-base-toggle-btn-box-shadow: none;
    --bs-app-sidebar-base-toggle-btn-bg-color: #fffaf0;
    --bs-app-sidebar-base-toggle-btn-border-color: none;
    --bs-app-sidebar-base-border-color: none;
    --bs-app-sidebar-light-bg-color: #e8d3a6;
    --bs-app-sidebar-light-box-shadow: none;
    --bs-app-sidebar-light-separator-color: #d9b97b;
    --bs-app-sidebar-light-scrollbar-color-hover: #d9a455;
    --bs-app-sidebar-light-menu-heading-color: #86694a;
    --bs-app-sidebar-light-menu-link-bg-color-active: #f3dfb3;
    --bs-app-sidebar-light-header-menu-link-bg-color-active: #f3dfb3;
    --bs-app-sidebar-light-menu-link-color: #4a361f;
    --bs-app-sidebar-light-menu-link-icon-color: #86694a;
    --bs-text-muted-rgb: 123, 99, 71;
    --bs-primary-active-rgb: 168, 64, 43;
    --bs-secondary-active-rgb: 205, 178, 124;
    --bs-light-active-rgb: 230, 210, 164;
    --bs-success-active-rgb: 71, 190, 125;
    --bs-info-active-rgb: 35, 139, 134;
    --bs-warning-active-rgb: 241, 188, 0;
    --bs-danger-active-rgb: 217, 33, 78;
    --bs-dark-active-rgb: 42, 29, 18;
    --bs-primary-light-rgb: 251, 227, 218;
    --bs-secondary-light-rgb: 249, 249, 249;
    --bs-pink-light-rgb: 251, 234, 240;
    --bs-success-light-rgb: 232, 255, 243;
    --bs-info-light-rgb: 220, 243, 241;
    --bs-warning-light-rgb: 255, 248, 221;
    --bs-danger-light-rgb: 255, 245, 248;
    --bs-dark-light-rgb: 241, 241, 242;
    --bs-red-light-rgb: 250, 235, 235;
    --bs-primary-inverse-rgb: 255, 255, 255;
    --bs-secondary-inverse-rgb: 93, 70, 48;
    --bs-light-inverse-rgb: 134, 105, 74;
    --bs-success-inverse-rgb: 255, 255, 255;
    --bs-info-inverse-rgb: 255, 255, 255;
    --bs-warning-inverse-rgb: 255, 255, 255;
    --bs-danger-inverse-rgb: 255, 255, 255;
    --bs-dark-inverse-rgb: 255, 250, 240;
    --bs-text-white-rgb: 255, 255, 255;
    --bs-text-primary-rgb: 200, 85, 61;
    --bs-text-secondary-rgb: 230, 210, 164;
    --bs-text-light-rgb: 230, 210, 164;
    --bs-text-success-rgb: 80, 205, 137;
    --bs-text-info-rgb: 47, 166, 160;
    --bs-text-warning-rgb: 255, 199, 0;
    --bs-text-danger-rgb: 241, 65, 108;
    --bs-text-dark-rgb: 58, 42, 28;
    --bs-text-purple-rgb: 129, 43, 158;
    --bs-text-gold-rgb: 239, 191, 4;
    --bs-text-blue-rgb: 75, 98, 209;
    --bs-text-orange-rgb: 209, 113, 75;
    --bs-text-gray-100-rgb: 230, 210, 164;
    --bs-text-gray-200-rgb: 205, 178, 124;
    --bs-text-gray-300-rgb: 168, 137, 90;
    --bs-text-gray-400-rgb: 134, 105, 74;
    --bs-text-gray-500-rgb: 110, 82, 57;
    --bs-text-gray-600-rgb: 93, 70, 48;
    --bs-text-gray-700-rgb: 74, 54, 31;
    --bs-text-gray-800-rgb: 58, 42, 28;
    --bs-text-gray-900-rgb: 42, 29, 18;
    --bs-border-color-rgb: 230, 210, 164;
    --bs-border-dashed-color-rgb: 217, 185, 123;
    --bs-component-active-color-rgb: 255, 255, 255;
    --bs-component-active-bg-rgb: 200, 85, 61;
    --bs-component-hover-color-rgb: 200, 85, 61;
    --bs-component-hover-bg-rgb: 243, 223, 179;
    --bs-component-checked-color-rgb: 255, 255, 255;
    --bs-component-checked-bg-rgb: 200, 85, 61;
    --bs-input-bg-rgb: 255, 250, 240;
    --bs-input-color-rgb: 58, 42, 28;
    --bs-input-solid-color-rgb: 58, 42, 28;
    --bs-input-solid-bg-rgb: 243, 228, 195;
    --bs-input-solid-bg-focus-rgb: 236, 220, 182;
    --bs-input-solid-placeholder-color-rgb: 168, 137, 90;
    --bs-dropdown-bg-rgb: 255, 250, 240;
    --bs-code-bg-rgb: 241, 243, 248;
    --bs-code-color-rgb: 185, 57, 147;
    --bs-scrolltop-bg-color-rgb: 200, 85, 61;
    --bs-scrolltop-icon-color-rgb: 255, 255, 255;
    --bs-drawer-bg-color-rgb: 255, 250, 240;
    --bs-menu-dropdown-bg-color-rgb: 255, 250, 240;
    --bs-menu-heading-color-rgb: 134, 105, 74;
    --bs-menu-link-color-hover-rgb: 200, 85, 61;
    --bs-menu-link-color-show-rgb: 200, 85, 61;
    --bs-menu-link-color-here-rgb: 200, 85, 61;
    --bs-menu-link-color-active-rgb: 200, 85, 61;
    --bs-menu-link-bg-color-hover-rgb: 243, 223, 179;
    --bs-menu-link-bg-color-show-rgb: 243, 223, 179;
    --bs-menu-link-bg-color-here-rgb: 243, 223, 179;
    --bs-menu-link-bg-color-active-rgb: 243, 223, 179;
    --bs-scrollbar-color-rgb: 230, 210, 164;
    --bs-scrollbar-hover-color-rgb: 217, 164, 85;
    --bs-rating-color-default-rgb: 181, 181, 195;
    --bs-rating-color-active-rgb: 255, 173, 15;
    --bs-ribbon-label-bg-rgb: 62, 151, 255;
    --bs-ribbon-label-border-color-rgb: 0, 99, 215;
    --bs-ribbon-clip-bg-rgb: 7, 20, 55;
    --bs-engage-btn-bg-rgb: 255, 255, 255;
    --bs-engage-btn-border-color-rgb: 232, 232, 232;
    --bs-engage-btn-color-rgb: 37, 47, 74;
    --bs-engage-btn-icon-color-rgb: 120, 130, 157;
    --bs-engage-btn-color-active-rgb: 37, 47, 74;
    --bs-white-rgb: 255, 255, 255;
    --bs-body-bg-rgb: 246, 234, 210;
    --bs-body-color-rgb: 58, 42, 28;
    --bs-heading-color-rgb: 122, 79, 23;
    --bs-card-bg-rgb: 255, 250, 240;
    --bs-card-border-color-rgb: 217, 164, 85;
    --bs-app-header-base-bg-color-rgb: 239, 220, 180;
    --bs-app-header-minimize-bg-color-rgb: 239, 220, 180;
    --bs-app-header-light-separator-color-rgb: 217, 164, 85;
    --bs-app-toolbar-base-bg-color-rgb: 239, 220, 180;
    --bs-app-aside-base-bg-color-rgb: 232, 211, 166;
    --bs-app-sidebar-base-toggle-btn-bg-color-rgb: 255, 250, 240;
    --bs-app-sidebar-light-bg-color-rgb: 232, 211, 166;
    --bs-app-sidebar-light-separator-color-rgb: 217, 185, 123;
    --bs-app-sidebar-light-scrollbar-color-hover-rgb: 217, 164, 85;
    --bs-app-sidebar-light-menu-heading-color-rgb: 134, 105, 74;
    --bs-app-sidebar-light-menu-link-bg-color-active-rgb: 243, 223, 179;
    --bs-app-sidebar-light-header-menu-link-bg-color-active-rgb: 243, 223, 179;
    --bs-app-sidebar-light-menu-link-color-rgb: 74, 54, 31;
    --bs-app-sidebar-light-menu-link-icon-color-rgb: 134, 105, 74;
}

[data-bs-theme="alabasta"] {
    /* Décor, plein jour (le moteur les met à jour) : dunes, couleurs de l'interface, poids des quatre illustrations de fond */
    --ab-d1: #e8be78; --ab-d2: #d6a058; --ab-d3: #c48640;
    --ab-or: #8a5a1c; --ab-trait: #f2b84b; --ab-ui-1: #33241a; --ab-ui-2: #21160e;
    --ab-w-jour: 1; --ab-w-crep: 0; --ab-w-nuit: 0; --ab-w-aube: 0;
}

/* ---------- Interface toujours sombre : menu, en-tête, cartes, menus déroulants, fenêtres ---------- */
[data-bs-theme="alabasta"] :is(.card, #kt_app_header, #kt_app_sidebar, .dropdown-menu, .modal-content, .menu-sub-dropdown, .popover, .toast, #kt_drawer_chat, .mobile-quickbar) {
    color: var(--bs-body-color);
    --bs-gray-100: color-mix(in srgb, var(--ab-ui-2) 65%, #000);
    --bs-gray-100-rgb: 28, 19, 13;
    --bs-gray-200: var(--ab-ui-2);
    --bs-gray-200-rgb: 42, 29, 20;
    --bs-gray-300: var(--ab-ui-1);
    --bs-gray-300-rgb: 58, 42, 29;
    --bs-gray-400: color-mix(in srgb, var(--ab-ui-1) 70%, #fff);
    --bs-gray-400-rgb: 84, 64, 44;
    --bs-gray-500: #8c7456;
    --bs-gray-500-rgb: 140, 116, 86;
    --bs-gray-600: #b49a74;
    --bs-gray-600-rgb: 180, 154, 116;
    --bs-gray-700: #d9c9a8;
    --bs-gray-700-rgb: 217, 201, 168;
    --bs-gray-800: #efe3c8;
    --bs-gray-800-rgb: 239, 227, 200;
    --bs-gray-900: #ffffff;
    --bs-gray-900-rgb: 255, 255, 255;
    --bs-text-gray-100: var(--ab-ui-1);
    --bs-text-gray-200: color-mix(in srgb, var(--ab-ui-1) 70%, #fff);
    --bs-text-gray-300: #8c7456;
    --bs-text-gray-400: #a98f66;
    --bs-text-gray-500: #c3ad88;
    --bs-text-gray-600: #d9c9a8;
    --bs-text-gray-700: #e6d8bb;
    --bs-text-gray-800: #f3e9d2;
    --bs-text-gray-900: #ffffff;
    --bs-text-muted: #b49a74;
    --bs-body-color: #efe3c8;
    --bs-body-color-rgb: 239, 227, 200;
    --bs-heading-color: #e9c46a;
    --bs-border-color: color-mix(in srgb, var(--ab-ui-1) 70%, #fff);
    --bs-border-dashed-color: color-mix(in srgb, var(--ab-ui-1) 70%, #fff);
    --bs-card-bg: var(--ab-ui-2);
    --bs-card-border-color: var(--ab-trait);
    --bs-primary: var(--ab-acc);
    --bs-primary-rgb: var(--ab-acc-rgb, 232, 136, 58);
    --bs-primary-active: #c9701f;
    --bs-primary-light: var(--ab-ui-1);
    --bs-primary-inverse: #2a1608;
    --bs-text-primary: var(--ab-acc-clair);
    --bs-info: #52d6c9;
    --bs-info-rgb: 82, 214, 201;
    --bs-info-active: #3dbfb2;
    --bs-info-light: #1b3b4c;
    --bs-info-inverse: #0b2531;
    --bs-text-info: #52d6c9;
    --bs-light: var(--ab-ui-1);
    --bs-light-rgb: 58, 42, 29;
    --bs-light-active: color-mix(in srgb, var(--ab-ui-1) 70%, #fff);
    --bs-light-inverse: #d9c9a8;
    --bs-text-light: var(--ab-ui-1);
    --bs-secondary: var(--ab-ui-1);
    --bs-secondary-rgb: 58, 42, 29;
    --bs-secondary-active: color-mix(in srgb, var(--ab-ui-1) 70%, #fff);
    --bs-secondary-inverse: #efe3c8;
    --bs-dark: #efe3c8;
    --bs-dark-rgb: 239, 227, 200;
    --bs-dark-active: #ffffff;
    --bs-dark-inverse: color-mix(in srgb, var(--ab-ui-2) 75%, #000);
    --bs-text-dark: #efe3c8;
    --bs-input-bg: color-mix(in srgb, var(--ab-ui-2) 75%, #000);
    --bs-input-color: #efe3c8;
    --bs-input-solid-bg: color-mix(in srgb, var(--ab-ui-2) 75%, #000);
    --bs-input-solid-bg-focus: var(--ab-ui-2);
    --bs-input-solid-color: #efe3c8;
    --bs-input-solid-placeholder-color: #8c7456;
    --bs-dropdown-bg: var(--ab-ui-2);
    --bs-menu-dropdown-bg-color: var(--ab-ui-2);
    --bs-drawer-bg-color: var(--ab-ui-2);
    --bs-component-active-bg: var(--ab-acc);
    --bs-component-active-color: #2a1608;
    --bs-component-hover-color: var(--ab-acc-clair);
    --bs-component-hover-bg: var(--ab-ui-1);
    --bs-component-checked-bg: var(--ab-acc);
    --bs-component-checked-color: #2a1608;
    --bs-menu-heading-color: #c3ad88;
    --bs-menu-link-color-hover: var(--ab-acc-clair);
    --bs-menu-link-color-show: var(--ab-acc-clair);
    --bs-menu-link-color-here: var(--ab-acc-clair);
    --bs-menu-link-color-active: var(--ab-acc-clair);
    --bs-menu-link-bg-color-hover: var(--ab-ui-1);
    --bs-menu-link-bg-color-show: var(--ab-ui-1);
    --bs-menu-link-bg-color-here: var(--ab-ui-1);
    --bs-menu-link-bg-color-active: var(--ab-ui-1);
    --bs-scrollbar-color: color-mix(in srgb, var(--ab-ui-1) 70%, #fff);
    --bs-scrollbar-hover-color: #8c7456;
    --bs-app-header-base-bg-color: var(--ab-ui-1);
    --bs-app-sidebar-light-bg-color: var(--ab-ui-1);
    --bs-app-sidebar-light-menu-heading-color: #c3ad88;
    --bs-app-sidebar-light-menu-link-bg-color-active: color-mix(in srgb, var(--ab-acc) 20%, transparent);
    --bs-app-sidebar-light-header-menu-link-bg-color-active: color-mix(in srgb, var(--ab-acc) 20%, transparent);
    --bs-app-sidebar-light-menu-link-color: #efe3c8;
    --bs-app-sidebar-light-menu-link-icon-color: #c3ad88;
    --bs-app-sidebar-light-separator-color: color-mix(in srgb, var(--ab-ui-1) 70%, #fff);
}

/* ---------- Fond de page : l'illustration d'Alabasta (palais d'Alubarna) à quatre moments, fondus selon l'heure (calque posé par alabasta.js), sous un voile sombre qui garde les textes lisibles.
   Calque fixe qui couvre l'écran (un fond sur le body se coupe sur les pages longues, et `fixed` est ignoré sur iOS). ---------- */
[data-bs-theme="alabasta"] #ab-fond { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #0b1020; }
@media (min-width: 992px) {
    [data-bs-theme="alabasta"] #ab-fond { left: var(--bs-app-sidebar-width, 265px); }
}
/* Connexion et inscription : pas de menu latéral, l'illustration prend toute la largeur. */
[data-bs-theme="alabasta"]:has(body.app-blank) #ab-fond { left: 0; }
/* L'image a la largeur de la zone de contenu (à droite du menu latéral) et est calée pour que le palais soit au milieu de l'écran : le haut du ciel et le bas du sable sont coupés si l'écran est moins haut que l'image.
   Si l'écran est plus haut, le haut est complété par un fond uni dégradé aux couleurs du bord de l'image (ciel). */
[data-bs-theme="alabasta"] #ab-fond i { position: absolute; inset: 0; }
[data-bs-theme="alabasta"] #ab-fond i::after { content: ''; position: absolute; inset: 0; background-repeat: no-repeat; background-position: center 85%; background-size: 100% auto; }
[data-bs-theme="alabasta"] #ab-fond .ab-jour { background-image: linear-gradient(180deg, #89c9fc 0%, #0169ea 20%, #9fd6fc 40%, #2ba6fa 60%, #ab939a 75%, #8e4f43 90%, #fcb673 100%); opacity: var(--ab-w-jour); }
[data-bs-theme="alabasta"] #ab-fond .ab-jour::after { background-image: url('/assets/media/alabasta/heros-jour.webp'); }
[data-bs-theme="alabasta"] #ab-fond .ab-crep { background-image: linear-gradient(180deg, #072372 0%, #2d3587 20%, #202f7a 40%, #8d4065 60%, #30316d 75%, #3d243c 90%, #a65046 100%); opacity: var(--ab-w-crep); }
[data-bs-theme="alabasta"] #ab-fond .ab-crep::after { background-image: url('/assets/media/alabasta/heros-crepuscule.webp'); }
[data-bs-theme="alabasta"] #ab-fond .ab-nuit { background-image: linear-gradient(180deg, #0b307e 0%, #00103c 20%, #011344 40%, #001e64 60%, #073b8d 75%, #101b4a 90%, #1f2652 100%); opacity: var(--ab-w-nuit); }
[data-bs-theme="alabasta"] #ab-fond .ab-nuit::after { background-image: url('/assets/media/alabasta/heros-nuit.webp'); }
[data-bs-theme="alabasta"] #ab-fond .ab-aube { background-image: linear-gradient(180deg, #5f7cd6 0%, #bab2da 20%, #809ae0 40%, #8280c5 60%, #a17593 75%, #5a343c 90%, #cc704a 100%); opacity: var(--ab-w-aube); }
[data-bs-theme="alabasta"] #ab-fond .ab-aube::after { background-image: url('/assets/media/alabasta/heros-aube.webp'); }
[data-bs-theme="alabasta"] #ab-fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 18, .74) 0%, rgba(10, 8, 18, .68) 55%, rgba(10, 8, 18, .6) 100%); }
[data-bs-theme="alabasta"] body { background: transparent !important; }

/* Logos : l'interface étant sombre, ce sont ceux du fond sombre qui s'affichent dans le menu et l'en-tête */
[data-bs-theme="alabasta"] .theme-light-show { display: none !important; }
[data-bs-theme="alabasta"] .theme-dark-show { display: inline-block !important; }

[data-bs-theme="alabasta"] .app-page, [data-bs-theme="alabasta"] .app-wrapper { border-top: none !important; }

/* ---------- En-tête : brun (nuit : bleu nuit) translucide, avec un filet dont la couleur suit le moment de la journée (--ab-trait : or le jour, orange au crépuscule, bleu lune la nuit, rose à l'aube). ---------- */
[data-bs-theme="alabasta"] #kt_app_header {
    background: transparent !important;
    border-bottom: .5px solid var(--ab-trait);
    box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .3);
}
/* Bandeau de ville derrière l'en-tête (quatre images en fondu), assombri à gauche pour que les onglets restent lisibles */
#ab-tete { position: fixed; top: 0; right: 0; left: 0; height: var(--bs-app-header-height, 70px); z-index: 99; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, var(--ab-ui-1), var(--ab-ui-2)); }
#ab-tete i { position: absolute; inset: 0; background: center 70% / cover no-repeat; }
#ab-tete .ab-jour { background-image: url('/assets/media/alabasta/tete-jour.webp'); opacity: calc(var(--ab-w-jour, 0) * .4); }
#ab-tete .ab-crep { background-image: url('/assets/media/alabasta/tete-crepuscule.webp'); opacity: calc(var(--ab-w-crep, 0) * .4); }
#ab-tete .ab-nuit { background-image: url('/assets/media/alabasta/tete-nuit.webp'); opacity: calc(var(--ab-w-nuit, 0) * .4); }
#ab-tete .ab-aube { background-image: url('/assets/media/alabasta/tete-aube.webp'); opacity: calc(var(--ab-w-aube, 0) * .4); }
#ab-tete::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ab-ui-1) 96%, transparent) 0%, color-mix(in srgb, var(--ab-ui-2) 92%, transparent) 38%, color-mix(in srgb, var(--ab-ui-2) 22%, transparent) 62%, color-mix(in srgb, var(--ab-ui-2) 22%, transparent) 82%, color-mix(in srgb, var(--ab-ui-2) 62%, transparent) 100%); }
/* Sur téléphone, l'en-tête défile avec la page : le bandeau aussi */
@media (max-width: 991.98px) { [data-bs-theme="alabasta"] #kt_app_header { position: relative; z-index: 100; } #ab-tete { position: absolute; } }
@media (min-width: 992px) { #ab-tete { left: var(--bs-app-sidebar-width, 265px); } }

/* Personnage du menu latéral (Vivi le jour, Crocodile au crépuscule, le troisième la nuit, Cobra à l'aube), en filigrane au bas du menu . */
#ab-perso { display: none; }
/* Téléphone : le menu est un tiroir ; le personnage s'affiche au bas du tiroir quand il est ouvert */
@media (max-width: 991.98px) {
    html:has(#kt_app_sidebar.drawer-on) #ab-perso { display: block; position: fixed; left: 0; bottom: 0; width: min(225px, 85vw); height: 160px; z-index: 112; pointer-events: none;
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
    html:has(#kt_app_sidebar.drawer-on) #ab-perso i { position: absolute; inset: 0; background: no-repeat center bottom 6px / auto 130px; }
    html:has(#kt_app_sidebar.drawer-on) #ab-perso .ab-jour { background-image: url('/assets/media/alabasta/perso-jour.webp'); opacity: calc(var(--ab-w-jour, 0) * .32); filter: sepia(.45) saturate(.8) brightness(.9); }
    html:has(#kt_app_sidebar.drawer-on) #ab-perso .ab-crep { background-image: url('/assets/media/alabasta/perso-crepuscule.webp'); opacity: calc(var(--ab-w-crep, 0) * .32); filter: sepia(.55) saturate(.9) brightness(.8); }
    html:has(#kt_app_sidebar.drawer-on) #ab-perso .ab-nuit { background-image: url('/assets/media/alabasta/perso-nuit.webp'); opacity: calc(var(--ab-w-nuit, 0) * .32); filter: grayscale(.3) saturate(.7) brightness(.7) hue-rotate(-10deg); }
    html:has(#kt_app_sidebar.drawer-on) #ab-perso .ab-aube { background-image: url('/assets/media/alabasta/perso-aube.webp'); opacity: calc(var(--ab-w-aube, 0) * .32); filter: sepia(.4) saturate(.85) brightness(.9) hue-rotate(-15deg); }
}
@media (min-width: 992px) {
    #ab-perso { display: block; position: fixed; left: 0; bottom: 0; width: var(--bs-app-sidebar-width, 265px); height: 160px; z-index: 106; pointer-events: none;
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
    #ab-perso i { position: absolute; inset: 0; background: no-repeat center bottom 6px / auto 130px; }
    #ab-perso .ab-jour { background-image: url('/assets/media/alabasta/perso-jour.webp'); opacity: calc(var(--ab-w-jour, 0) * .32); filter: sepia(.45) saturate(.8) brightness(.9); }
    #ab-perso .ab-crep { background-image: url('/assets/media/alabasta/perso-crepuscule.webp'); opacity: calc(var(--ab-w-crep, 0) * .32); filter: sepia(.55) saturate(.9) brightness(.8); }
    #ab-perso .ab-nuit { background-image: url('/assets/media/alabasta/perso-nuit.webp'); opacity: calc(var(--ab-w-nuit, 0) * .32); filter: grayscale(.3) saturate(.7) brightness(.7) hue-rotate(-10deg); }
    #ab-perso .ab-aube { background-image: url('/assets/media/alabasta/perso-aube.webp'); opacity: calc(var(--ab-w-aube, 0) * .32); filter: sepia(.4) saturate(.85) brightness(.9) hue-rotate(-15deg); }
}

/* ---------- Menu latéral : même fond que l'en-tête, liseré doré, personnage en filigrane au bas ---------- */
[data-bs-theme="alabasta"] #kt_app_sidebar { background: linear-gradient(180deg, var(--ab-ui-1), var(--ab-ui-2)) !important; border-right: .5px solid var(--ab-trait); }
[data-bs-theme="alabasta"] .app-sidebar-logo { border-bottom: .5px dashed var(--ab-trait); }

/* ---------- Cartes : brun foncé (nuit : bleu nuit), cadre doré, coins arrondis. Titres en or, à empattement. ---------- */
[data-bs-theme="alabasta"] .card {
    position: relative; border: .5px solid var(--ab-trait); border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ab-ui-1) 86%, transparent), color-mix(in srgb, var(--ab-ui-2) 90%, transparent)) !important;
    backdrop-filter: blur(3px);
    box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 233, 180, .1);
    color: var(--bs-body-color);
}
[data-bs-theme="alabasta"] .card :is(h1, h2, h3, h4, h5, h6, .card-title, .card-label) { color: #f2cf73; }
/* Grandes cartes (classe posée par decorThemes.js) : un coin doré en haut à droite, comme un cadre de papyrus */
[data-bs-theme="alabasta"] .card.deco-grande::after {
    content: ''; position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; pointer-events: none; opacity: .85;
    border-top: 2px solid var(--ab-trait); border-right: 2px solid var(--ab-trait); border-radius: 0 10px 0 0;
}

/* Titre de section : un filet de la couleur du moment derrière */
[data-bs-theme="alabasta"] .titre-section { display: flex; align-items: center; gap: 14px; color: var(--ab-or) !important; }
[data-bs-theme="alabasta"] .titre-section::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ab-trait), transparent); }

/* ---------- Boutons principaux : orange chaud, texte brun foncé, petit relief ---------- */
[data-bs-theme="alabasta"] .btn.btn-primary, [data-bs-theme="alabasta"] .btn.btn-dark {
    border: .5px solid var(--ab-trait); color: #2a1608; background: linear-gradient(180deg, var(--ab-acc-clair), var(--ab-acc));
    box-shadow: 0 2px 0 #a85a15, 0 .3rem .7rem rgba(0, 0, 0, .25);
}
[data-bs-theme="alabasta"] .btn.btn-primary:hover, [data-bs-theme="alabasta"] .btn.btn-primary:focus,
[data-bs-theme="alabasta"] .btn.btn-dark:hover, [data-bs-theme="alabasta"] .btn.btn-dark:focus { background: linear-gradient(180deg, var(--ab-acc-clair), var(--ab-acc)); color: #2a1608; }
[data-bs-theme="alabasta"] .btn.btn-primary:active, [data-bs-theme="alabasta"] .btn.btn-dark:active { transform: translateY(2px); box-shadow: 0 0 0 #a85a15; }

/* Champs : fond brun très sombre, liseré doré */
[data-bs-theme="alabasta"] .form-control, [data-bs-theme="alabasta"] .form-select { border: .5px solid var(--ab-trait); background-color: var(--bs-input-solid-bg); color: var(--bs-input-solid-color); }
[data-bs-theme="alabasta"] .form-control:focus, [data-bs-theme="alabasta"] .form-select:focus { border-color: var(--ab-acc); }
[data-bs-theme="alabasta"] .form-label { color: #f2cf73; font-weight: 700; }

/* Liens */
[data-bs-theme="alabasta"] a:not(.btn):not(.menu-link):not(.nav-link) { color: var(--bs-primary); }

/* Barre rapide du téléphone (avatar, barres, raccourcis) : mêmes teintes que l'en-tête */
[data-bs-theme="alabasta"] .mobile-quickbar { background: linear-gradient(180deg, var(--ab-ui-1), var(--ab-ui-2)); border-top: .5px solid var(--ab-trait); box-shadow: 0 -.2rem .8rem rgba(0, 0, 0, .3); }
[data-bs-theme="alabasta"] .mobile-quickbar-avatar > img:first-child { border: .5px solid var(--ab-trait); }
[data-bs-theme="alabasta"] .mobile-quickbar-bar .progress { background: var(--ab-ui-1); }
[data-bs-theme="alabasta"] .mobile-quickbar-bar span, [data-bs-theme="alabasta"] .mobile-quickbar-berry { color: #efe3c8; }
[data-bs-theme="alabasta"] .mobile-quickbar-action { background: var(--ab-ui-1); border: .5px solid var(--ab-trait); color: var(--ab-acc-clair); }
[data-bs-theme="alabasta"] .mobile-quickbar-action:hover, [data-bs-theme="alabasta"] .mobile-quickbar-action:active { background: color-mix(in srgb, var(--ab-ui-1) 70%, #fff); color: var(--ab-acc-clair); }

/* Logo classique plus gros que celui des autres thèmes (Karoo se place juste devant) */
[data-bs-theme="alabasta"] .app-sidebar-logo img.h-25px { height: 40px !important; }

/* Pages sans en-tête ni menu (connexion, inscription) : ni bandeau de ville ni personnage */
body.app-blank #ab-tete, body.app-blank #ab-perso { display: none !important; }

/* Survol des cartes (annuaires, forum, combat…) : le liseré de la carte est déjà de la couleur du moment, donc le survol passe à la teinte claire, avec un halo, pour rester visible */
[data-bs-theme="alabasta"] :is(.border-hover-primary, .border-hover-primary-thick) { transition: border-color .15s, box-shadow .15s; }
[data-bs-theme="alabasta"] :is(.border-hover-primary, .border-hover-primary-thick):hover {
    border-color: var(--ab-acc-clair) !important;
    box-shadow: 0 0 0 1px var(--ab-acc-clair), 0 .6rem 1.6rem color-mix(in srgb, var(--ab-acc) 35%, transparent), inset 0 1px 0 rgba(255, 233, 180, .1);
}

/* Élément sélectionné (attaque ou cible active des combats : carte avec « border-primary ») : même teinte claire et même halo que le survol, pour se distinguer du liseré normal des cartes */
[data-bs-theme="alabasta"] .card.border-primary {
    border-color: var(--ab-acc-clair) !important;
    box-shadow: 0 0 0 2px var(--ab-acc-clair), 0 .6rem 1.6rem color-mix(in srgb, var(--ab-acc) 45%, transparent), inset 0 1px 0 rgba(255, 233, 180, .1);
}