/* ============================================================
   Thème "Marine Ford" : construit sur le modèle de Metronic, comme les thèmes Bleu, Noël et Halloween.
   Palette bleu marine et blanc de la Marine, soleil couchant sur la mer. Activé par data-bs-theme="marineford" sur <html>.
   Tout est limité à ce sélecteur : aucun autre thème n'est touché.
   ============================================================ */

[data-bs-theme="marineford"] {
    /* === Échelle de gris → palette navy === */
    --bs-gray-100: #02060d;
    --bs-gray-100-rgb: 2, 6, 13;
    --bs-gray-200: #050c18;
    --bs-gray-200-rgb: 5, 12, 24;
    --bs-gray-300: #09162a;
    --bs-gray-300-rgb: 9, 22, 42;
    --bs-gray-400: #0e2343;
    --bs-gray-400-rgb: 14, 35, 67;
    --bs-gray-500: #2a63a9;
    --bs-gray-500-rgb: 49, 86, 155;
    --bs-gray-600: #4b80c6;
    --bs-gray-600-rgb: 79, 117, 189;
    --bs-gray-700: #c9d4ee;
    --bs-gray-700-rgb: 201, 212, 238;
    --bs-gray-800: #e1e8fa;
    --bs-gray-800-rgb: 225, 232, 250;
    --bs-gray-900: #ffffff;
    --bs-gray-900-rgb: 255, 255, 255;

    /* === Couleurs sémantiques === */
    --bs-white: #ffffff;
    --bs-light: #050c18;
    --bs-primary: #6ba5ff;
    --bs-success: #50cd89;
    --bs-info: #7239ea;
    --bs-warning: #ffc700;
    --bs-danger: #d23a3a;
    --bs-dark: #ffffff;
    --bs-secondary: #09162a;

    --bs-primary-active: #3780f6;
    --bs-secondary-active: #0e2343;
    --bs-light-active: #09162a;
    --bs-success-active: #47be7d;
    --bs-info-active: #5014d0;
    --bs-warning-active: #f1bc00;
    --bs-danger-active: #b02a2a;
    --bs-dark-active: white;

    --bs-primary-light: #050c18;
    --bs-success-light: #0e1f34;
    --bs-info-light: #1d3249;
    --bs-warning-light: #192a4c;
    --bs-danger-light: #3a1a1d;
    --bs-dark-light: #050c18;
    --bs-secondary-light: #02060d;
    --bs-red-light: #3a2424;

    --bs-primary-inverse: #ffffff;
    --bs-secondary-inverse: #c9d4ee;
    --bs-light-inverse: #4b80c6;
    --bs-success-inverse: #ffffff;
    --bs-info-inverse: #ffffff;
    --bs-warning-inverse: #ffffff;
    --bs-danger-inverse: #ffffff;
    --bs-dark-inverse: #02060d;

    --bs-white-rgb: 255, 255, 255;
    --bs-light-rgb: 5, 12, 24;
    --bs-primary-rgb: 107, 165, 255;
    --bs-success-rgb: 80, 205, 137;
    --bs-info-rgb: 36, 122, 255;
    --bs-warning-rgb: 255, 199, 0;
    --bs-danger-rgb: 210, 58, 58;
    --bs-dark-rgb: 255, 255, 255;
    --bs-secondary-rgb: 9, 22, 42;

    /* === Textes === */
    --bs-text-muted: #2a63a9;
    --bs-text-white: #ffffff;
    --bs-text-primary: #6ba5ff;
    --bs-text-secondary: #09162a;
    --bs-text-light: #050c18;
    --bs-text-success: #50cd89;
    --bs-text-info: #7239ea;
    --bs-text-warning: #ffc700;
    --bs-text-danger: #d23a3a;
    --bs-text-dark: #ffffff;
    --bs-text-purple: #812b9e;
    --bs-text-gold: #EFBF04;
    --bs-text-blue: #6ea8ff;
    --bs-text-orange: #d1714b;

    /* Échelle de texte recalibrée pour rester lisible sur body #050c18.
       Les --bs-text-gray-N sont indépendantes des --bs-gray-N (backgrounds). */
    --bs-text-gray-100: #09162a;
    --bs-text-gray-200: #0e2343;
    --bs-text-gray-300: #2a63a9;
    --bs-text-gray-400: #5f87cd;
    --bs-text-gray-500: #90afea;
    --bs-text-gray-600: #c9d4ee;
    --bs-text-gray-700: #d0daf4;
    --bs-text-gray-800: #ecf0fe;
    --bs-text-gray-900: #ffffff;

    /* === Bordures === */
    --bs-border-color: #050c18;
    --bs-border-dashed-color: #09162a;

    /* === Composants génériques === */
    --bs-component-active-color: #ffffff;
    --bs-component-active-bg: #6ba5ff;
    --bs-component-hover-color: #6ba5ff;
    --bs-component-hover-bg: #02060d;
    --bs-component-checked-color: #ffffff;
    --bs-component-checked-bg: #6ba5ff;

    /* === Ombres === */
    --bs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.1);
    --bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.1);
    --bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.2);

    /* === Inputs === */
    --bs-input-color: var(--bs-gray-700);
    --bs-input-bg: var(--bs-body-bg);
    --bs-input-solid-color: var(--bs-gray-700);
    --bs-input-solid-bg: var(--bs-gray-100);
    --bs-input-solid-bg-focus: var(--bs-gray-200);
    --bs-input-solid-placeholder-color: var(--bs-gray-500);

    /* === Tooltips, tables, dropdowns === */
    --bs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25);
    --bs-card-box-shadow: none;
    --bs-table-striped-bg: rgba(6, 3, 12, 0.75);
    --bs-table-loading-message-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
    --bs-dropdown-bg: #030a16;
    --bs-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);

    /* === Code === */
    --bs-code-bg: #050c18;
    --bs-code-box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.1);
    --bs-code-color: #d989ff;

    /* === Symbols, bullets === */
    --bs-symbol-label-color: #e1e8fa;
    --bs-symbol-label-bg: #02060d;
    --bs-symbol-border-color: rgba(255, 255, 255, 0.5);
    --bs-bullet-bg-color: #0e2343;

    /* === ScrollTop === */
    --bs-scrolltop-opacity: 0;
    --bs-scrolltop-opacity-on: 0.3;
    --bs-scrolltop-opacity-hover: 1;
    --bs-scrolltop-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.1);
    --bs-scrolltop-bg-color: #6ba5ff;
    --bs-scrolltop-bg-color-hover: #3780f6;
    --bs-scrolltop-icon-color: #ffffff;
    --bs-scrolltop-icon-color-hover: #ffffff;

    /* === Drawers === */
    --bs-drawer-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    --bs-drawer-bg-color: #030a16;
    --bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.5);

    /* === Menus / sidebar === */
    --bs-menu-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
    --bs-menu-dropdown-bg-color: #030a16;
    --bs-menu-heading-color: #2a63a9;
    --bs-menu-link-color-hover: #6ba5ff;
    --bs-menu-link-color-show: #6ba5ff;
    --bs-menu-link-color-here: #6ba5ff;
    --bs-menu-link-color-active: #6ba5ff;
    --bs-menu-link-bg-color-hover: #02060d;
    --bs-menu-link-bg-color-show: #02060d;
    --bs-menu-link-bg-color-here: #02060d;
    --bs-menu-link-bg-color-active: #02060d;

    /* === Scrollbars, overlays === */
    --bs-scrollbar-color: #050c18;
    --bs-scrollbar-hover-color: #09162a;
    --bs-overlay-bg: rgba(255, 255, 255, 0.05);
    --bs-blockui-overlay-bg: rgba(255, 255, 255, 0.05);

    /* === Rating, ribbon === */
    --bs-rating-color-default: #0e2343;
    --bs-rating-color-active: #FFAD0F;
    --bs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(255, 255, 255, 0.1);
    --bs-ribbon-label-bg: #6ba5ff;
    --bs-ribbon-label-border-color: #2162c3;
    --bs-ribbon-clip-bg: #F9F9F9;

    /* === Engage button === */
    --bs-engage-btn-bg: #050c18;
    --bs-engage-btn-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
    --bs-engage-btn-border-color: #050c18;
    --bs-engage-btn-color: #e1e8fa;
    --bs-engage-btn-icon-color: #4b80c6;
    --bs-engage-btn-color-active: #e1e8fa;

    /* === Body (fond global de la page) === */
    --bs-body-bg: #050c18;
    --bs-body-bg-rgb: 5, 12, 24;
    --bs-body-color: #c9d4ee;
    --bs-body-color-rgb: 201, 212, 238;
    --bs-heading-color: #c4daff;

    /* === Optionnel : surfaces principales (cards, headers) ===
       Ajuste si tes cards apparaissent transparentes ou mal contrastées */
    --bs-card-bg: #0a1d38;
    --bs-card-border-color: #0e2343;

    /* ============================================================
       Variables LAYOUT spécifiques à Metronic
       (sidebar, header, toolbar, footer, aside)
       ============================================================ */

    /* === Fond global de l'application === */
    --bs-app-bg-color: transparent;
    --bs-app-blank-bg-color: transparent;

    /* === Header (la barre du haut avec "Jeu", "Communauté") === */
    --bs-app-header-base-bg-color: #030a16;
    --bs-app-header-base-box-shadow: none;
    --bs-app-header-minimize-bg-color: #030a16;
    --bs-app-header-minimize-box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.1);
    --bs-app-header-light-separator-color: #050c18;

    /* === Toolbar === */
    --bs-app-toolbar-base-bg-color: #030a16;
    --bs-app-toolbar-base-box-shadow: none;
    --bs-app-toolbar-base-border-top: 1px dashed #09162a;

    /* === Aside (panneau latéral droit éventuel) === */
    --bs-app-aside-base-bg-color: #030a16;

    /* === Footer === */
    --bs-app-footer-bg-color: transparent;
    --bs-app-footer-box-shadow: none;

    /* === Sidebar (la colonne de gauche avec OPRPG, avatar, menu) === */
    --bs-app-sidebar-base-toggle-btn-box-shadow: none;
    --bs-app-sidebar-base-toggle-btn-bg-color: #050c18;
    --bs-app-sidebar-base-toggle-btn-border-color: none;
    --bs-app-sidebar-base-border-color: none;
    --bs-app-sidebar-light-bg-color: #030a16;
    --bs-app-sidebar-light-box-shadow: none;
    --bs-app-sidebar-light-separator-color: #050c18;
    --bs-app-sidebar-light-scrollbar-color-hover: #050c18;
    --bs-app-sidebar-light-menu-heading-color: #2a63a9;
    --bs-app-sidebar-light-menu-link-bg-color-active: #0e2343;
    --bs-app-sidebar-light-header-menu-link-bg-color-active: #0e2343;
    --bs-app-sidebar-light-menu-link-color: #e1e8fa;
    --bs-app-sidebar-light-menu-link-icon-color: #4b80c6;

    /* === Force le fond du body en navy === */
    background-color: var(--bs-body-bg) !important;
}

/* ============================================================
   Règles HORS du bloc principal — sélecteurs composés classiques.
   En thème "marineford", on a un fond sombre → on cache les éléments
   destinés au fond clair (logos light, icônes light, etc.)
   et on laisse visibles ceux destinés au fond sombre.
   ============================================================ */

[data-bs-theme="marineford"] .theme-light-show {
    display: none !important;
}

[data-bs-theme="marineford"] .theme-dark-show {
    display: inline-block !important;
}

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

/* ============================================================
   Force le fond des cards en bleu plus clair que le body.
   Nécessaire car Metronic redéfinit --bs-card-bg directement
   sur .card (style.bundle.css ligne 3806), ce qui écrase
   la valeur héritée du thème.
   ============================================================ */

[data-bs-theme="marineford"] .card {
    --bs-card-bg: #0a1d38;
    background-color: #0a1d38;
}

/* ============================================================
   Décor de Marine Ford (par-dessus la palette), d'après la maquette : illustration de la forteresse de la Marine sous un voile bleu marine, cadres bleu clair,
   en-tête translucide, menu actif en bleu plein, muraille de la Marine en filigrane au bas du menu latéral.
   ============================================================ */

[data-bs-theme="marineford"] {
    --mf-fond: url('/assets/media/marineford/fond.webp?v=18');
    --mf-muraille: url('/assets/media/marineford/muraille.webp');
    --mf-amiraux: url('/assets/media/marineford/amiraux_bleu.webp');

    /* Teintes de la maquette : bleu marine à reflet sarcelle, cadres bleu acier */
    --bs-body-bg: #08192e; --bs-body-bg-rgb: 8, 25, 46;
    --bs-card-bg: #0e2b4b; --bs-card-border-color: #2d5f93;
    --bs-primary: #4a90e2; --bs-primary-active: #3a7bc8; --bs-primary-rgb: 74, 144, 226; --bs-text-primary: #7db4f0;
    --bs-app-sidebar-light-bg-color: #0a2038;
    --bs-app-sidebar-light-menu-link-bg-color-active: #3b6fae;
    --bs-app-sidebar-light-menu-link-color-active: #ffffff;
    --bs-menu-link-bg-color-active: #3b6fae; --bs-menu-link-color-active: #ffffff;
    --bs-menu-link-bg-color-hover: #14395f; --bs-menu-link-bg-color-here: #14395f;
    --bs-body-color: #b9d0ea;
}

/* Fond : l'illustration de Marine Ford (le panorama de la forteresse de la Marine) sous un voile bleu marine sombre pour que les pages restent lisibles.
   Posé sur un calque fixe qui couvre toujours tout l'écran (un fond sur le body se coupe sur les pages longues, et `fixed` est ignoré sur iOS). */
[data-bs-theme="marineford"]::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 16, 34, .88) 0%, rgba(7, 26, 52, .82) 55%, rgba(8, 34, 66, .72) 100%),
        var(--mf-fond) center bottom / 100% auto no-repeat, linear-gradient(180deg, #1883f5, #1a8fe0);
}
/* Ordinateur : l'image a la largeur de la zone de contenu (à droite du menu latéral), ni zoomée ni floutée ; au-dessus, le ciel de l'image se prolonge en dégradé. */
@media (min-width: 992px) {
    [data-bs-theme="marineford"]::before { left: var(--bs-app-sidebar-width, 265px); }
}
/* Connexion et inscription : pas de menu latéral (le body porte alors la classe app-blank), l'image prend toute la largeur de l'écran. */
[data-bs-theme="marineford"]:has(body.app-blank)::before { left: 0; }

[data-bs-theme="marineford"] body { background: transparent !important; }

/* Titres de cartes : blanc bleuté, avec un filet bleu à gauche comme dans la maquette */
[data-bs-theme="marineford"] .card-header h1, [data-bs-theme="marineford"] .card-header h2, [data-bs-theme="marineford"] .card-header h3, [data-bs-theme="marineford"] .card-header .card-label, [data-bs-theme="marineford"] .card .card-header .card-title, [data-bs-theme="marineford"] .card .card-header .card-title .card-label {
    color: #eef5ff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}

/* En-tête : bleu marine translucide et fin liseré bleu clair en dessous. Pas d'overflow caché : les menus déroulants et le panneau du profil sont des enfants de l'en-tête. */
[data-bs-theme="marineford"] #kt_app_header {
    background: rgba(8, 27, 50, .88) !important;
    border-bottom: 1px solid rgba(110, 170, 235, .4);
    box-shadow: 0 .3rem 1.2rem rgba(0, 0, 0, .35);
    backdrop-filter: blur(4px);
}
/* Les trois amiraux (teintés de bleu pour s'accorder à l'en-tête) à gauche des icônes (messagerie, notifications, raccourcis, profil). L'image est ancrée en bas à droite, décalée de la
   largeur des icônes. Sur ordinateur, 14 px de marge en haut ; sur téléphone, l'en-tête est plus étroit : l'image est plus petite, plus près des icônes, et passe derrière le logo si besoin. */
[data-bs-theme="marineford"] #kt_app_header {
    background: var(--mf-amiraux) right 182px bottom / auto calc(100% - 26px) no-repeat, rgba(8, 27, 50, .88) !important;
}
@media (min-width: 992px) {
    [data-bs-theme="marineford"] #kt_app_header {
        background: var(--mf-amiraux) right 250px bottom / auto calc(100% - 14px) no-repeat, rgba(8, 27, 50, .88) !important;
    }
}

/* Menu latéral : liseré bleu clair, et la muraille de la Marine en filigrane au bas */
[data-bs-theme="marineford"] #kt_app_sidebar { border-right: 1px solid rgba(110, 170, 235, .4); background-color: rgba(10, 32, 56, .92) !important; }
[data-bs-theme="marineford"] #kt_app_sidebar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 190px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 32, 56, .96), rgba(10, 32, 56, .45)), var(--mf-muraille) center bottom / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%); mask-image: linear-gradient(180deg, transparent, #000 55%);
}

/* Cartes : verre bleu marine, cadre bleu acier aux coins peu arrondis */
[data-bs-theme="marineford"] .card {
    position: relative;
    border: 1px solid rgba(110, 170, 235, .5); border-radius: 6px;
    background: linear-gradient(180deg, rgba(16, 52, 90, .8), rgba(10, 34, 62, .85)) !important;
    box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Boutons principaux : bleu uni */
[data-bs-theme="marineford"] .btn.btn-primary {
    border: 1px solid #2f6fc0; color: #fff; background: #3d86dd;
    box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .35);
}
[data-bs-theme="marineford"] .btn.btn-primary:hover, [data-bs-theme="marineford"] .btn.btn-primary:focus { background: #4a95ee; color: #fff; }
[data-bs-theme="marineford"] .btn.btn-primary:active { transform: translateY(1px); }

/* Champs : fond marine sombre, liseré bleu clair discret */
[data-bs-theme="marineford"] .form-control, [data-bs-theme="marineford"] .form-select {
    background-color: rgba(5, 18, 36, .75); border: 1px solid rgba(110, 170, 235, .35); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
}
[data-bs-theme="marineford"] .form-control:focus, [data-bs-theme="marineford"] .form-select:focus { border-color: #6fb0f5; }
[data-bs-theme="marineford"] .form-label { color: #cfe3ff; font-weight: 700; }

/* Liens */
[data-bs-theme="marineford"] a:not(.btn):not(.menu-link):not(.nav-link) { color: #7db4f0; }