:root{
    --brand:#75bde3;
    --brand-blue:#156b95;
    --brand-pink:#ca4461;
    --brand-orange:#de9742;
}

/* ===== LOGIN (layout simple) ===== */
.fi-simple-layout{
    position: relative;     /* indispensable pour ::before */
    overflow: hidden;       /* pour éviter que ::before déborde */
    background: linear-gradient(135deg, #75bde3 50%, #156b95 50%);
}

/* Motif UNIQUEMENT sur le bleu clair */
.fi-simple-layout::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 52, 255, 0.11) 2px, #c5000000 1px);
    background-size: 16px 16px;
    background-position: 0 0;
    -webkit-mask: linear-gradient(135deg, #000 0 50%, transparent 50% 100%);
    mask: linear-gradient(135deg, #000 0 50%, transparent 50% 100%);
}
.fi-simple-layout > *{
    position: relative;
    z-index: 1;
}
.fi-simple-layout .fi-card{
    border-radius: 18px !important;
    border: 1px solid #e6eaf0 !important;
    box-shadow: 0 18px 55px rgba(2,6,23,.10) !important;
}

/* =========================
   LOGO — LOGIN (page connexion)
   ========================= */
.fi-simple-layout .fi-logo img,
.fi-simple-layout img.fi-logo[style]{
    height: 78px !important;
    width: auto !important;
    max-width: 280px !important;
    object-fit: contain !important;
}

/* Un peu d'air sous le logo login */
.fi-simple-layout .fi-logo{
    margin-bottom: 14px !important;
}

/* =========================
   LOGO — ADMIN (topbar / sidebar)
   ========================= */

/* Sidebar header (logo en haut à gauche) */
.fi-sidebar-header a{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1 !important;
}

/* Logo admin (sidebar / topbar) — override le style inline */
.fi-sidebar-header img.fi-logo[style],
.fi-topbar img.fi-logo[style],
.fi-sidebar-header .fi-logo img[style],
.fi-topbar .fi-logo img[style]{
    height: 42px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
}


/* Le texte "SECURE DOC" */
.fi-sidebar-header .fi-logo + span,
.fi-sidebar-header .fi-brand-name{
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    font-size: 12px !important;
    color: white !important;
    text-transform: uppercase !important;
    opacity: .95 !important;
}
.fi-sidebar-header a::after{
    content: "SECURE DOC";
    font-weight: 900;
    letter-spacing: .18em;
    font-size: 12px;
    color: white;
    text-transform: uppercase;
    margin-left: 10px;
}

/* Bouton primaire (Connexion) */
.fi-simple-layout .fi-btn.fi-btn-color-primary{
    background: var(--brand-pink) !important;
    border-color: var(--brand-pink) !important;
    color:#fff !important;
    font-weight: 900 !important;
    border-radius: 12px !important;
}

/* Focus inputs */
.fi-simple-layout .fi-input-wrp:focus-within{
    border-color: rgba(21,107,149,.35) !important;
    box-shadow: 0 0 0 4px rgba(21,107,149,.14) !important;
}

/* ===== TOPBAR (connecté) ===== */

/* Option : un peu d'air vertical dans la topbar si tu augmentes fort */
.fi-topbar > nav{
    min-height: 64px !important; /* adapte si besoin */
}


.fi-topbar > nav{
    position: relative !important;
    background: linear-gradient(135deg, var(--brand-pink) 9%, var(--brand-blue) 0%);
}

.fi-sidebar-header {
    background: var(--brand-pink);
}

/* Texture ultra légère (option) */
.fi-topbar > nav::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1px) !important;
    background-size: 18px 18px !important;
    opacity: .25 !important;
}

/* S'assure que tout le contenu du nav est au-dessus */
.fi-topbar > nav > *{
    position: relative !important;
    z-index: 1 !important;
}

/* ===== TOPBAR : DARK ===== */
html.dark .fi-topbar > nav{
    border-bottom: 1px solid rgba(148,163,184,.18) !important;

    background:
            linear-gradient(135deg,
            rgba(202,68,97,.14) 0%,
            rgba(202,68,97,.14) 46%,
            rgba(21,107,149,.16) 46%,
            rgba(21,107,149,.16) 100%
            ) !important;
}

html.dark .fi-topbar > nav::before{
    opacity: .12 !important;
    background: radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1px) !important;
}



/* ===== SIDEBAR : séparation nette ===== */
.fi-sidebar{
    background: #fbfcfe !important; /* léger contraste */
}

.fi-sidebar-nav{
    padding-top: 8px !important;
    gap: 6px !important;
}

/* Liens */
.fi-sidebar-item > a{
    border-radius: 12px !important;
}

/* Actif = brand-blue */
.fi-sidebar-item.fi-active > a{
    background: rgba(21,107,149,.12) !important;
    color: var(--brand-blue) !important;
    font-weight: 900 !important;
}

/* Texte (label) actif : override Tailwind text-primary-600 */
.fi-sidebar-item.fi-active .fi-sidebar-item-label{
    color: var(--brand-blue) !important;
    font-weight: 900;
}

/* En option : label actif au hover (reste bleu) */
.fi-sidebar-item.fi-active > a:hover .fi-sidebar-item-label{
    color: var(--brand-blue) !important;
    font-weight: 900;
}

/* Icône actif en brand-pink (accent) */
.fi-sidebar-item.fi-active svg{
    color: var(--brand-pink) !important;
    margin-left: 11px !important;
}

/* Petit trait à gauche de l’item actif */
.fi-sidebar-item.fi-active > a{
    position: relative !important;
}
.fi-sidebar-item-label-active {
    color: var(--brand-pink) !important;
}

.fi-sidebar-item.fi-active > a::before{
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: var(--brand-pink) !important;
}

/* Hover */
.fi-sidebar-item > a:hover{
    background: rgba(21,107,149,.08) !important;
}

/* ===== DARK MODE ===== */
html.dark .fi-sidebar{
    background: rgba(15, 23, 42, 0.55) !important; /* slate-900-ish transparent */
    border-right: 1px solid rgba(148,163,184,.18) !important; /* slate-400 */
}

html.dark .fi-sidebar-item > a:hover{
    background: rgba(117,189,227,.10) !important; /* brand light hover */
}

/* Actif en dark : fond bleu discret, texte lisible */
html.dark .fi-sidebar-item.fi-active > a{
    background: rgba(21,107,149,.22) !important;
    color: #e2e8f0 !important; /* slate-200 */
}

/* Icône actif reste brand-pink (ok en dark) */
html.dark .fi-sidebar-item.fi-active svg{
    color: var(--brand-pink) !important;
}

/* Le petit trait rose reste */
html.dark .fi-sidebar-item.fi-active > a::before{
    background: var(--brand-pink) !important;
}

/* ===== BREADCRUMBS ===== */

/* Liens breadcrumb */
.fi-breadcrumbs-item-label a{
    color: var(--brand-pink) !important;
    font-weight: 800 !important;
}

/* Hover (un poil plus sombre) */
.fi-breadcrumbs-item-label a:hover{
    filter: brightness(.92);
}

/* L’item courant (souvent sans <a>) */
.fi-breadcrumbs-item-label{
    color: var(--brand-pink) !important;
    font-weight: 900 !important;
}

html.dark .fi-breadcrumbs-item-label a{
    color: rgba(202,68,97,.95) !important;
}

/* ===== PAGE TITLE (H1) ===== */

/* Cas le plus courant : h1 avec class fi-header-heading */
.fi-header-heading{
    color: var(--brand-blue) !important;
}

/* Fallback : si Filament rend un h1 dans le header */
.fi-header h1{
    color: var(--brand-blue) !important;
}