/*
 * Capital Finance — charte graphique
 * Alignée sur l'application mobile (lib/core/utils/my_color.dart)
 *
 *   Or / Doré   #D4950D  → couleur primaire (dominante 70-90%)
 *   Bleu navy   #1B2878  → couleur d'accent (5-25%) : aside, header, boutons secondaires
 *   Typographie : Poppins
 *
 * Ce fichier est chargé APRÈS style.bundle.css et ne fait que surcharger
 * les variables CSS de Metronic — le bundle d'origine n'est pas modifié.
 */

:root,
[data-bs-theme="light"] {
    /* ── Marque ─────────────────────────────────────────────────────── */
    --cf-gold: #D4950D;
    --cf-gold-active: #B87E0A;
    --cf-gold-light: #FDF0D0;
    --cf-navy: #1B2878;
    --cf-navy-active: #141E5C;
    --cf-navy-light: #E7E9F4;

    --cf-screen-bg: #F4F6FD;
    --cf-card-border: #E7E7E7;
    --cf-text: #262626;
    --cf-text-muted: #777777;

    /* ── Typographie ────────────────────────────────────────────────── */
    --bs-font-sans-serif: Poppins, Inter, Helvetica, "sans-serif";
    --bs-body-font-family: Poppins, Inter, Helvetica, "sans-serif";
    --bs-body-color: var(--cf-text);

    /* ── Primaire = Or ──────────────────────────────────────────────── */
    --bs-primary: var(--cf-gold);
    --bs-primary-rgb: 212, 149, 13;
    --bs-primary-active: var(--cf-gold-active);
    --bs-primary-light: var(--cf-gold-light);
    --bs-primary-inverse: #ffffff;
    --bs-primary-clarity: rgba(212, 149, 13, .2);
    --bs-primary-bg-subtle: var(--cf-gold-light);
    --bs-primary-border-subtle: #EFCB7E;
    --bs-primary-text-emphasis: #6A4A07;

    /* ── Info = Navy (utilisé comme couleur secondaire dans l'app) ──── */
    --bs-info: var(--cf-navy);
    --bs-info-rgb: 27, 40, 120;
    --bs-info-active: var(--cf-navy-active);
    --bs-info-light: var(--cf-navy-light);
    --bs-info-inverse: #ffffff;
    --bs-info-clarity: rgba(27, 40, 120, .2);
    --bs-info-bg-subtle: var(--cf-navy-light);
    --bs-info-border-subtle: #8D94BB;
    --bs-info-text-emphasis: #0E1440;

    /* ── États (repris du mobile) ───────────────────────────────────── */
    --bs-success: #28C76F;
    --bs-success-rgb: 40, 199, 111;
    --bs-success-active: #21A85D;
    --bs-success-light: #D4F4E2;
    --bs-danger: #EA5455;
    --bs-danger-rgb: 234, 84, 85;
    --bs-danger-active: #D63E3F;
    --bs-danger-light: #FCE9E9;

    /* ── Liens ──────────────────────────────────────────────────────── */
    --bs-link-color: var(--cf-gold);
    --bs-link-hover-color: var(--cf-gold-active);
    --bs-link-color-rgb: 212, 149, 13;
    --bs-link-hover-color-rgb: 184, 126, 10;

    /* ── Header ─────────────────────────────────────────────────────── */
    --bs-header-bg-color: var(--cf-navy);
}

/* ── Fond d'écran général (MyColor.screenBgColor) ───────────────────── */
body,
.wrapper {
    background-color: var(--cf-screen-bg);
}

/* ── Aside / menu latéral : bleu navy (MyColor.appBarBGColor) ───────── */
.aside {
    background-color: var(--cf-navy);
}

.aside .aside-toolbar,
.aside #kt_header,
.aside .header {
    background-color: var(--cf-navy);
}

/* Attention : #kt_header est la barre du HAUT complete (il contient le bloc
   logo a gauche et la barre d'outils a droite). Seul .header-brand portait un
   fond plus clair, d'ou le rectangle visible en haut a gauche. */
.header .header-brand {
    background-color: transparent;
    box-shadow: none;
    border-bottom: none;
}

.aside .aside-user {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* ═══════════════════════════════════════════════════════════════════════
   Logo de marque (bloc en haut de l'aside)
   L'ancien logo (contour blanc de logo1_nobg.png) etait quasi invisible sur
   le navy. On utilise l'icone pleine + le nom en toutes lettres a cote.
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   Logo typographique (aucune image) : monogramme "Cf" en dégradé doré +
   lockup "CAPITAL / FINANCE". Pense pour se lire clairement sur le navy.
   ═══════════════════════════════════════════════════════════════════════ */
.cf-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    line-height: 1;
}

/* Monogramme : "Cf" en dégradé doré applique sur le texte. */
.cf-brand__mark {
    font-family: Poppins, sans-serif;
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, #F4C56B 0%, var(--cf-gold) 55%, var(--cf-gold-active) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cf-gold);
    /* Léger halo doré pour detacher le monogramme du fond. */
    filter: drop-shadow(0 1px 4px rgba(212, 149, 13, .35));
}

/* Wordmark autonome : "CAPITAL" (blanc) au-dessus de "FINANCE" (dégradé doré).
   Les deux mots comptent 7 lettres : a tracking egal ils s'alignent au pixel. */
.cf-brand__wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 6px;
    /* Filet doré sous le nom, en dégradé qui s'estompe. */
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--cf-gold) 0%, rgba(212, 149, 13, .15) 100%) 1;
}

.cf-brand__line1,
.cf-brand__line2 {
    font-family: Poppins, sans-serif;
    font-size: 1.18rem;
    line-height: 1.08;
    /* Le tracking ajoute de l'espace a droite du dernier caractere ; on le
       compense par un text-indent egal pour garder le bloc bien aligne. */
    letter-spacing: .34em;
    text-indent: .34em;
    white-space: nowrap;
}

.cf-brand__line1 {
    font-weight: 500;
    color: rgba(255, 255, 255, .95);
}

.cf-brand__line2 {
    font-weight: 800;
    background: linear-gradient(135deg, #F4C56B 0%, var(--cf-gold) 55%, var(--cf-gold-active) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cf-gold);
}

/* Aside minimise : on ne garde que le monogramme. */
[data-kt-aside-minimize="on"] .cf-brand__wordmark {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Menu latéral
   ═══════════════════════════════════════════════════════════════════════ */

/* Liens : coins arrondis, rythme aere, transition douce. */
.aside .aside-menu .menu-item .menu-link {
    border-radius: 9px;
    padding-top: .68rem;
    padding-bottom: .68rem;
    transition: background-color .15s ease, color .15s ease;
}

/* Etat par defaut : titre et icone en blanc attenue. */
.aside .aside-menu .menu-item .menu-link .menu-title {
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
}

.aside .aside-menu .menu-item .menu-link .menu-icon i,
.aside .aside-menu .menu-item .menu-link .menu-icon i span {
    color: rgba(255, 255, 255, .55) !important;
    transition: color .15s ease;
}

.aside .aside-menu .menu-arrow::after {
    opacity: .5;
}

/* Survol : fond doré très léger. */
.aside .aside-menu .menu-item .menu-link:hover:not(.disabled):not(.active),
.aside .aside-menu .menu-item.here > .menu-link {
    background-color: rgba(212, 149, 13, .12) !important;
}

/* Actif : pastille dorée plus marquée + accent vertical à gauche. */
.aside .aside-menu .menu-item .menu-link.active {
    background-color: rgba(212, 149, 13, .20) !important;
    position: relative;
}

.aside .aside-menu .menu-item .menu-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background-color: var(--cf-gold);
}

/* Titre & icône en doré au survol / actif / accordéon ouvert. */
.aside .aside-menu .menu-item .menu-link.active .menu-title,
.aside .aside-menu .menu-item .menu-link:hover .menu-title,
.aside .aside-menu .menu-item.here > .menu-link > .menu-title {
    color: var(--cf-gold) !important;
    font-weight: 600;
}

.aside .aside-menu .menu-item .menu-link.active .menu-icon i,
.aside .aside-menu .menu-item .menu-link.active .menu-icon i span,
.aside .aside-menu .menu-item .menu-link:hover .menu-icon i,
.aside .aside-menu .menu-item .menu-link:hover .menu-icon i span,
.aside .aside-menu .menu-item.here > .menu-link .menu-icon i,
.aside .aside-menu .menu-item.here > .menu-link .menu-icon i span {
    color: var(--cf-gold) !important;
}

/* ── Sous-menus (accordéon) ─────────────────────────────────────────── */
.aside .aside-menu .menu-sub .menu-item .menu-link .menu-title {
    color: rgba(255, 255, 255, .68);
    font-weight: 500;
}

.aside .aside-menu .menu-sub .menu-item .menu-link:hover .menu-title,
.aside .aside-menu .menu-sub .menu-item .menu-link.active .menu-title {
    color: var(--cf-gold) !important;
}

/* Puce des sous-éléments : petit point plutôt qu'un tiret. */
.aside .aside-menu .menu-sub .menu-bullet .fa-minus {
    font-size: 0;
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .4);
    transition: background-color .15s ease;
}

.aside .aside-menu .menu-sub .menu-item .menu-link:hover .menu-bullet .fa-minus,
.aside .aside-menu .menu-sub .menu-item .menu-link.active .menu-bullet .fa-minus {
    background-color: var(--cf-gold);
}

/* ── Titres de section (APPS, CONFIGURATION) ────────────────────────── */
.aside .aside-menu .menu-content .menu-heading {
    color: rgba(255, 255, 255, .4) !important;
    letter-spacing: .12em;
    font-size: .7rem !important;
}

/* ── Header (barre du haut) ─────────────────────────────────────────── */
.header {
    background-color: var(--cf-navy);
}

/* Le gabarit d'origine utilise des classes de texte sombres (text-gray-700)
   dans une barre desormais navy : illisible. On force le contraste ici plutot
   que de reprendre les classes dans chaque template. */
.header .text-gray-700,
.header .text-gray-800,
.header .text-gray-900,
.header .text-dark {
    color: rgba(255, 255, 255, .9) !important;
}

.header,
.header .toolbar {
    color: rgba(255, 255, 255, .9);
}

.header .btn-icon-muted i {
    color: rgba(255, 255, 255, .7);
}

.header .btn-icon-muted:hover i {
    color: var(--cf-gold);
}

/* ── Boutons ────────────────────────────────────────────────────────── */
/* Primaire = or plein, texte blanc (MyColor.primaryButtonColor) */
.btn.btn-primary {
    color: #ffffff;
    border-color: var(--cf-gold);
    background-color: var(--cf-gold);
}

.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.show,
.show > .btn.btn-primary {
    color: #ffffff;
    border-color: var(--cf-gold-active) !important;
    background-color: var(--cf-gold-active) !important;
}

/* Secondaire = navy plein (MyColor.secondaryButtonColor) */
.btn.btn-info {
    color: #ffffff;
    border-color: var(--cf-navy);
    background-color: var(--cf-navy);
}

.btn.btn-info:hover:not(.btn-active),
.btn.btn-info:focus:not(.btn-active),
.btn.btn-info:active:not(.btn-active),
.btn.btn-info.show,
.show > .btn.btn-info {
    color: #ffffff;
    border-color: var(--cf-navy-active) !important;
    background-color: var(--cf-navy-active) !important;
}

/* Neutralise les couleurs inline héritées de l'ancienne charte (#224c8e) */
.btn.btn-primary[style*="224c8e"],
.btn.btn-primary[style*="#224C8E"] {
    background-color: var(--cf-gold) !important;
    border-color: var(--cf-gold) !important;
}

/* ── Champs de formulaire (bordure active dorée) ────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--cf-gold);
    box-shadow: none;
}

/* ── Cartes ─────────────────────────────────────────────────────────── */
.card {
    border-color: var(--cf-card-border);
}

/* ── Page d'authentification ────────────────────────────────────────── */
body.auth-bg {
    background-color: var(--cf-navy) !important;
}

/* ── Pagination / DataTables ────────────────────────────────────────── */
.page-item.active .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--cf-gold);
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════
   Composants transverses
   Ces regles s'appliquent a toutes les pages : elles evitent de reprendre
   les ~30 templates un par un.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Cartes : ombre douce et coins homogenes ────────────────────────── */
.card {
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(27, 40, 120, .05);
}

.card > .card-header {
    border-bottom: 1px solid var(--cf-card-border);
    min-height: 64px;
}

.card > .card-header .card-title,
.card > .card-header .card-label {
    color: var(--cf-navy);
    font-weight: 600;
}

/* Filet dore sous le titre de carte : rappel de marque discret. */
.card > .card-header .card-title::after {
    content: "";
    display: block;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    margin-top: 6px;
    background-color: var(--cf-gold);
}

/* ── Titres de page ─────────────────────────────────────────────────── */
.page-title .page-heading,
.page-title h1,
.toolbar .page-title {
    color: var(--cf-navy);
}

/* Separateur horizontal de section (utilise sur l'accueil). */
.cf-rule {
    height: 1px;
    background: linear-gradient(90deg, var(--cf-gold) 0%, rgba(212, 149, 13, 0) 100%);
}

/* ── Tableaux ───────────────────────────────────────────────────────── */
.table:not(.table-bordered) > thead > tr > th,
.table thead th {
    color: var(--cf-navy);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .04em;
    border-bottom: 2px solid var(--cf-card-border) !important;
}

.table > tbody > tr:hover > td {
    background-color: rgba(212, 149, 13, .05);
}

/* ── Onglets ────────────────────────────────────────────────────────── */
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    border-bottom-color: var(--cf-gold);
    color: var(--cf-navy);
}

/* ── Badges d'etat ──────────────────────────────────────────────────── */
.badge-light-primary {
    color: var(--cf-gold-active);
    background-color: var(--cf-gold-light);
}

.badge-light-info {
    color: var(--cf-navy);
    background-color: var(--cf-navy-light);
}

/* ── Boutons secondaires / contours ─────────────────────────────────── */
.btn.btn-light-primary {
    color: var(--cf-gold-active);
    background-color: var(--cf-gold-light);
    border-color: transparent;
}

.btn.btn-light-primary:hover:not(.btn-active),
.btn.btn-light-primary:active:not(.btn-active) {
    color: #ffffff;
    background-color: var(--cf-gold) !important;
}

.btn.btn-outline-primary {
    color: var(--cf-gold);
    border-color: var(--cf-gold);
}

.btn.btn-outline-primary:hover:not(.btn-active) {
    color: #ffffff;
    background-color: var(--cf-gold);
}

/* Accessibilite : anneau de focus visible au clavier sur tous les boutons. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--cf-gold);
    outline-offset: 2px;
}

/* ── Modales ────────────────────────────────────────────────────────── */
.modal-header {
    background-color: var(--cf-navy);
    border-top-left-radius: calc(.475rem - 1px);
    border-top-right-radius: calc(.475rem - 1px);
}

.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h5 {
    color: #ffffff;
}

/* Bouton de fermeture : inverse pour rester lisible sur le navy. */
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Alertes ────────────────────────────────────────────────────────── */
.alert.alert-primary {
    color: var(--cf-gold-active);
    background-color: var(--cf-gold-light);
    border-color: transparent;
}

/* ── Boites de dialogue SweetAlert ──────────────────────────────────── */
.swal2-popup .swal2-title {
    color: var(--cf-navy);
}

/* ── Barre de defilement ────────────────────────────────────────────── */
.scroll-y,
.scroll {
    --kt-scrollbar-color: #D8DCE8;
    --kt-scrollbar-hover-color: var(--cf-gold);
}

/* ═══════════════════════════════════════════════════════════════════════
   Page d'accueil
   ═══════════════════════════════════════════════════════════════════════ */

.cf-hero {
    background: linear-gradient(120deg, var(--cf-navy) 0%, var(--cf-navy-active) 100%);
    overflow: hidden;
    position: relative;
}

/* Halo dore decoratif dans l'angle superieur droit. */
.cf-hero::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 149, 13, .28) 0%, rgba(212, 149, 13, 0) 70%);
    pointer-events: none;
}

.cf-hero__eyebrow {
    color: var(--cf-gold);
    letter-spacing: .12em;
}

.cf-hero__title {
    color: #ffffff;
    font-size: 1.9rem;
}

.cf-hero__text {
    color: rgba(255, 255, 255, .75);
}

.cf-hero__badge {
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
}

.cf-hero__avatar {
    background-color: var(--cf-gold);
    color: #ffffff;
}

.cf-hero__role {
    color: rgba(255, 255, 255, .6);
}

/* ── Tuiles d'acces rapide ──────────────────────────────────────────── */
.cf-tile {
    transition: transform .15s ease, box-shadow .15s ease;
    border-bottom: 3px solid transparent !important;
}

.cf-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(27, 40, 120, .12);
    border-bottom-color: var(--cf-gold) !important;
}

.cf-tile__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
}

/* Les icones duotone portent leur propre couleur sur chaque <span class="path">.
   Sans ces regles, elles restent grises et l'alternance or/navy ne se voit pas. */
.cf-tile__icon--gold {
    background-color: var(--cf-gold-light);
}

.cf-tile__icon--gold i,
.cf-tile__icon--gold i [class^="path"] {
    color: var(--cf-gold) !important;
}

.cf-tile__icon--navy {
    background-color: var(--cf-navy-light);
}

.cf-tile__icon--navy i,
.cf-tile__icon--navy i [class^="path"] {
    color: var(--cf-navy) !important;
}

.cf-tile:hover .cf-tile__title {
    color: var(--cf-gold-active) !important;
}

@media (max-width: 991.98px) {
    .cf-hero__title {
        font-size: 1.5rem;
    }
}