/*
 * ZEPAY — charte graphique
 * Couleurs reprises du logo Zamoha Nouvelles Technologies.
 *
 *   Bleu ciel   #12A8DC  → couleur primaire : boutons, liens, états actifs
 *   Bleu ardoise #1E4E6E → couleur d'accent : titres, boutons secondaires
 *   Interface claire : menu latéral et barre du haut blancs, aucun noir
 *   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é.
 * Les classes gardent le préfixe "cf-" pour rester compatibles avec les
 * templates existants.
 */

:root,
[data-bs-theme="light"] {
    /* ── Marque ─────────────────────────────────────────────────────── */
    --cf-primary: #12A8DC;
    --cf-primary-active: #0B87B8;
    --cf-primary-light: #E3F5FC;
    --cf-dark: #1E4E6E;
    --cf-dark-active: #163C55;
    --cf-dark-light: #E6EEF3;
    --cf-line: #E3ECF2;
    --cf-text-soft: #8AA0AE;

    --cf-screen-bg: #F1F7FB;
    --cf-card-border: #E4EDF3;
    --cf-text: #1E3A4C;
    --cf-text-muted: #5B7383;

    /* ── 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-primary);
    --bs-primary-rgb: 18, 168, 220;
    --bs-primary-active: var(--cf-primary-active);
    --bs-primary-light: var(--cf-primary-light);
    --bs-primary-inverse: #ffffff;
    --bs-primary-clarity: rgba(18, 168, 220, .2);
    --bs-primary-bg-subtle: var(--cf-primary-light);
    --bs-primary-border-subtle: #8CD3EE;
    --bs-primary-text-emphasis: #06506E;

    /* ── Info = Navy (utilisé comme couleur secondaire dans l'app) ──── */
    --bs-info: var(--cf-dark);
    --bs-info-rgb: 22, 25, 31;
    --bs-info-active: var(--cf-dark-active);
    --bs-info-light: var(--cf-dark-light);
    --bs-info-inverse: #ffffff;
    --bs-info-clarity: rgba(11, 135, 184, .2);
    --bs-info-bg-subtle: var(--cf-dark-light);
    --bs-info-border-subtle: #9AA0A8;
    --bs-info-text-emphasis: #163C55;

    /* ── É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-primary);
    --bs-link-hover-color: var(--cf-primary-active);
    --bs-link-color-rgb: 18, 168, 220;
    --bs-link-hover-color-rgb: 11, 135, 184;

    /* ── Header ─────────────────────────────────────────────────────── */
    --bs-header-bg-color: #ffffff;
}

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

/* ── Aside / menu latéral : blanc, séparé du contenu par un filet ───── */
.aside,
.aside .aside-toolbar,
.aside #kt_header,
.aside .header {
    background-color: #ffffff;
}

.aside {
    box-shadow: 1px 0 0 var(--cf-line);
}

/* 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;
}

/* Filets : on remplace les pointillés violets du thème d'origine. */
.header .header-brand,
.aside .aside-toolbar {
    border-bottom: 1px solid var(--cf-line) !important;
}

/* Le filet de la barre d'outils suffit sous le bloc utilisateur. */
.aside .aside-user {
    border-bottom: 0 !important;
}

.aside .aside-toolbar .aside-user {
    border-top: 1px solid var(--cf-line);
}

.aside-menu .menu .separator {
    border-bottom: 1px solid var(--cf-line);
}

/* Bloc de recherche vide : ses deux filets doublaient celui de la barre. */
.aside .aside-toolbar .aside-search {
    border-top: 0;
    border-bottom: 0;
}

/* Nom de l'utilisateur : le gabarit le met en .text-white. */
.aside .aside-user .text-white {
    color: var(--cf-dark) !important;
}

.aside .aside-user .text-white:hover {
    color: var(--cf-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Logo de marque (bloc en haut de l'aside)
   Emblème (globe du logo Zamoha) suivi du nom "ZEPAY" : "ZE" en bleu
   ardoise, "PAY" en bleu ciel.
   ═══════════════════════════════════════════════════════════════════════ */
.cf-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    line-height: 1;
}

.cf-brand__mark {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff url("../images/zepay-mark.png") center / 88% no-repeat;
    box-shadow: 0 0 0 1px var(--cf-line), 0 2px 6px rgba(11, 135, 184, .12);
}

.cf-brand__wordmark {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.cf-brand__name {
    font-family: Poppins, sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--cf-dark);
    white-space: nowrap;
}

.cf-brand__name span {
    color: var(--cf-primary);
}

.cf-brand__tagline {
    font-family: Poppins, sans-serif;
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cf-text-soft);
    white-space: nowrap;
}

/* 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 bleu ardoise, icone gris bleuté. */
.aside .aside-menu .menu-item .menu-link .menu-title {
    color: #3D5A6C;
    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: #7FBFDD !important;
    transition: color .15s ease;
}

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

/* Survol : fond bleu 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: #F0F8FC !important;
}

/* Actif : pastille en dégradé bleu ZEPAY, texte et icône blancs. */
.aside .aside-menu .menu-item .menu-link.active {
    background: linear-gradient(120deg, var(--cf-primary) 0%, var(--cf-primary-active) 100%) !important;
    box-shadow: 0 6px 16px rgba(18, 168, 220, .30);
    position: relative;
}

/* Specificite renforcee (.aside-menu .menu) : doit l'emporter sur la regle
   "titre & icone en bleu" plus bas, sinon le texte disparait sur le bleu. */
.aside .aside-menu .menu .menu-item .menu-link.active .menu-title,
.aside .aside-menu .menu .menu-item .menu-link.active .menu-icon i,
.aside .aside-menu .menu .menu-item .menu-link.active .menu-icon i span,
.aside .aside-menu .menu .menu-sub .menu-item .menu-link.active .menu-title {
    color: #ffffff !important;
}

.aside .aside-menu .menu-sub .menu-item .menu-link.active .menu-bullet .fa-minus {
    background-color: #ffffff !important;
}

.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: rgba(255, 255, 255, .85);
}

/* Titre & icône en bleu 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-primary-active) !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-primary) !important;
}

/* ── Sous-menus (accordéon) ─────────────────────────────────────────── */
.aside .aside-menu .menu-sub .menu-item .menu-link .menu-title {
    color: #5B7383;
    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-primary-active) !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: #B7C6D0;
    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-primary);
}

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

/* ── Header (barre du haut) : blanc ─────────────────────────────────── */
.header {
    background-color: #ffffff;
    background-image: linear-gradient(90deg, var(--cf-primary) 0%, #5CCBF2 50%, var(--cf-primary-active) 100%);
    background-size: 100% 3px;
    background-position: bottom left;
    background-repeat: no-repeat;
    box-shadow: 0 4px 14px rgba(11, 135, 184, .06);
}

.header,
.header .toolbar,
.header .text-gray-700,
.header .text-gray-800,
.header .text-gray-900,
.header .text-dark {
    color: var(--cf-dark);
}

.header .btn-icon-muted i {
    color: #8AA0AE;
}

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

/* ── Boutons ────────────────────────────────────────────────────────── */
/* Primaire = bleu plein, texte blanc (MyColor.primaryButtonColor) */
.btn.btn-primary {
    color: #ffffff;
    border-color: transparent;
    background-color: var(--cf-primary);
    background-image: linear-gradient(120deg, #1BB4EA 0%, var(--cf-primary) 45%, var(--cf-primary-active) 100%);
    box-shadow: 0 4px 12px rgba(18, 168, 220, .28);
}

.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: transparent !important;
    background-color: var(--cf-primary-active) !important;
    background-image: linear-gradient(120deg, var(--cf-primary) 0%, var(--cf-primary-active) 100%) !important;
    box-shadow: 0 6px 16px rgba(18, 168, 220, .36);
}

/* Secondaire = bleu ardoise plein */
.btn.btn-info {
    color: #ffffff;
    border-color: var(--cf-dark);
    background-color: var(--cf-dark);
}

.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-dark-active) !important;
    background-color: var(--cf-dark-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-primary) !important;
    border-color: var(--cf-primary) !important;
}

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

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

/* ── Page d'authentification ────────────────────────────────────────── */
body.auth-bg {
    background-color: #FFFFFF !important;
}

/* ── Pagination / DataTables ────────────────────────────────────────── */
.page-item.active .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--cf-primary);
    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 4px 18px rgba(11, 135, 184, .07);
}

.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-dark);
    font-weight: 600;
}

/* Filet bleu 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: linear-gradient(90deg, var(--cf-primary) 0%, #5CCBF2 100%);
}

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

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

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

.table > tbody > tr:hover > td {
    background-color: rgba(18, 168, 220, .06);
}

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

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

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

/* ── Boutons secondaires / contours ─────────────────────────────────── */
.btn.btn-light-primary {
    color: var(--cf-primary-active);
    background-color: var(--cf-primary-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-primary) !important;
}

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

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

/* 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-primary);
    outline-offset: 2px;
}

/* ── Modales ────────────────────────────────────────────────────────── */
.modal-header {
    background: linear-gradient(120deg, var(--cf-primary) 0%, var(--cf-primary-active) 100%);
    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 bleu. */
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

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

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

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

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

.cf-hero {
    background:
        radial-gradient(circle at 92% 115%, rgba(255, 255, 255, .14) 0, rgba(255, 255, 255, .14) 110px, transparent 111px),
        radial-gradient(circle at 78% -30%, rgba(255, 255, 255, .10) 0, rgba(255, 255, 255, .10) 140px, transparent 141px),
        linear-gradient(120deg, #1BB4EA 0%, var(--cf-primary) 40%, #0A6F9C 100%);
    box-shadow: 0 12px 30px rgba(11, 135, 184, .25);
    overflow: hidden;
    position: relative;
}

/* Halo clair 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(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.cf-hero__eyebrow {
    color: rgba(255, 255, 255, .8);
    letter-spacing: .12em;
}

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

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

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

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

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

/* ── Tuiles d'acces rapide ──────────────────────────────────────────── */
/* Chaque tuile porte sa couleur (--tile / --tile-light) : une palette
   harmonisee avec le bleu ZEPAY plutot qu'une simple alternance. */
.cf-tile {
    --tile: var(--cf-primary);
    --tile-light: var(--cf-primary-light);
    transition: transform .15s ease, box-shadow .15s ease;
    border-bottom: 3px solid transparent !important;
}

.cf-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(11, 135, 184, .14);
    border-bottom-color: var(--tile) !important;
}

.cf-tile__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-color: var(--tile-light);
    transition: background-color .15s ease;
}

/* Les icones duotone portent leur propre couleur sur chaque <span class="path">. */
.cf-tile__icon i,
.cf-tile__icon i [class^="path"] {
    color: var(--tile) !important;
    transition: color .15s ease;
}

/* Survol : l'icone passe en plein, la couleur de la tuile ressort. */
.cf-tile:hover .cf-tile__icon {
    background-color: var(--tile);
}

.cf-tile:hover .cf-tile__icon i,
.cf-tile:hover .cf-tile__icon i [class^="path"] {
    color: #ffffff !important;
}

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

.cf-tile--sky     { --tile: #12A8DC; --tile-light: #E3F5FC; }
.cf-tile--teal    { --tile: #0FA5A0; --tile-light: #DFF5F3; }
.cf-tile--indigo  { --tile: #4F6BDB; --tile-light: #E8ECFB; }
.cf-tile--emerald { --tile: #22A06B; --tile-light: #E0F4EA; }
.cf-tile--amber   { --tile: #E8930C; --tile-light: #FDF0DC; }
.cf-tile--violet  { --tile: #8A5CD6; --tile-light: #F0E9FB; }
.cf-tile--ocean   { --tile: #0B6FA4; --tile-light: #E1EEF6; }
.cf-tile--rose    { --tile: #E0567A; --tile-light: #FCE7ED; }

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