/**
 * kwaneema.css — Identité visuelle Kwaneema Track & Trace
 * Chargé APRÈS les styles Vuexy pour surcharger les couleurs primaires.
 */

/* ── Variables Kwaneema ─────────────────────────────────────────────────────── */
:root {
    --kw-primary:       #1B3A8A;
    --kw-primary-dark:  #142d6e;
    --kw-primary-light: #e8edf8;
    --kw-accent:        #F5B800;
    --kw-accent-dark:   #d4a000;
}

/* ── Boutons primary ────────────────────────────────────────────────────────── */
.btn-primary,
.btn-primary:focus {
    background-color: var(--kw-primary) !important;
    border-color:     var(--kw-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--kw-primary-dark) !important;
    border-color:     var(--kw-primary-dark) !important;
}

/* ── Utilities Bootstrap surcharge ──────────────────────────────────────────── */
.bg-primary     { background-color: var(--kw-primary) !important; }
.text-primary   { color: var(--kw-primary) !important; }
.border-primary { border-color: var(--kw-primary) !important; }

/* ── Accent couleur Kwaneema ────────────────────────────────────────────────── */
.text-kw-accent      { color: var(--kw-accent); }
.bg-kw-accent        { background-color: var(--kw-accent); }
.btn-kw-accent       { background-color: var(--kw-accent); border-color: var(--kw-accent); color: #1B3A8A; font-weight: 600; }
.btn-kw-accent:hover { background-color: var(--kw-accent-dark); border-color: var(--kw-accent-dark); color: #1B3A8A; }

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — fond navy + états active / hover
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fond de la sidebar */
#layout-menu,
.layout-menu {
    background-color: #28292d !important;
}

/* Ombre interne : dégradé adapté au fond sombre */
.layout-menu .menu-inner-shadow {
    background: linear-gradient(
        #28292d 40%,
        rgba(40, 41, 45, 0.11) 95%,
        rgba(40, 41, 45, 0)
    ) !important;
}

/* Séparateur sous le logo */
.layout-menu .app-brand.demo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Bouton de collapse (chevron) */
.layout-menu-toggle .menu-toggle-icon,
.layout-menu-toggle .ti {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ── Texte et icônes des items (état normal) ─────────────────────────────── */
.menu-vertical .menu-inner > .menu-item > .menu-link,
.menu-vertical .menu-inner > .menu-item > .menu-link > div,
.menu-vertical .menu-sub .menu-item .menu-link,
.menu-vertical .menu-sub .menu-item .menu-link > div {
    color: rgba(255, 255, 255, 0.72) !important;
}
.menu-vertical .menu-item .menu-link .menu-icon i,
.menu-vertical .menu-item .menu-link .menu-icon {
    color: rgba(255, 255, 255, 0.50) !important;
}

/* ── Hover ───────────────────────────────────────────────────────────────── */
.menu-vertical .menu-item .menu-link:hover,
.menu-vertical .menu-item:hover > .menu-link {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
.menu-vertical .menu-item .menu-link:hover > div,
.menu-vertical .menu-item:hover > .menu-link > div {
    color: #fff !important;
}
.menu-vertical .menu-item .menu-link:hover .menu-icon i,
.menu-vertical .menu-item:hover > .menu-link .menu-icon {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* ── Item actif ──────────────────────────────────────────────────────────── */
.menu-vertical .menu-item.active > .menu-link,
.menu-vertical .menu-item .menu-link.active {
    background: linear-gradient(270deg, rgb(44, 93, 186) 0%, #012770 100%) !important;
    box-shadow: 0px 2px 6px rgba(1, 39, 112, 0.48);
    border-radius: 6px;
}
.menu-vertical .menu-item.active > .menu-link > div,
.menu-vertical .menu-item .menu-link.active > div {
    color: #fff !important;
    font-weight: 600;
}
.menu-vertical .menu-item.active > .menu-link .menu-icon i,
.menu-vertical .menu-item .menu-link.active .menu-icon {
    color: var(--kw-accent) !important;
}

/* ── En-têtes de sections ────────────────────────────────────────────────── */
.menu-vertical .menu-header .menu-header-text {
    color: rgba(255, 255, 255, 0.38) !important;
    letter-spacing: 0.05em;
}

/* ── Scrollbar de la sidebar ─────────────────────────────────────────────── */
#layout-menu::-webkit-scrollbar-track { background: #28292d; }
#layout-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 4px; }

/* ── Sidebar — logos (full vs. mini) ───────────────────────────────────────── */
/* Sidebar ouverte : logo complet visible, icône seule cachée */
.kw-logo-full { display: block; }
.kw-logo-mini { display: none;  }

/* Sidebar rétractée : icône seule visible, logo complet caché */
html.layout-menu-collapsed .layout-menu .kw-logo-full { display: none  !important; }
html.layout-menu-collapsed .layout-menu .kw-logo-mini { display: block !important; }

/* ── Liens ──────────────────────────────────────────────────────────────────── */
a { color: var(--kw-primary); }
a:hover { color: var(--kw-primary-dark); }

/* ── Form focus ─────────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--kw-primary);
    box-shadow: 0 0 0 0.2rem rgba(27, 58, 138, 0.2);
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge.bg-primary { background-color: var(--kw-primary) !important; }

/* ── Page Login — override couleur Vuexy ────────────────────────────────────── */
.authentication-wrapper .card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(27, 58, 138, 0.10);
}

/* Lien "mot de passe oublié" couleur accent */
.link-accent {
    color: var(--kw-accent);
    font-weight: 500;
}
.link-accent:hover {
    color: var(--kw-accent-dark);
}