/* =====================================================
   sidebar-custom.css
   Only NEW additions on top of kaiadmin.css.
   All rules are scoped under .sidebar to avoid leaks.
   ===================================================== */

/* ── 1. Section labels ─────────────────────────────── */
/* Thin uppercase divider label between nav groups      */
.sidebar[data-background-color="dark"] {
    background: #ebedf5 !important;
}
.logo-header[data-background-color="dark"] {
        background: #1a2035 !important;
/*    background: #ebedf5 !important;*/
}
.sidebar .sx-section-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
/*    color: rgba(255, 255, 255, 0.30);*/
    color:#000;
    padding: 14px 20px 4px;
    pointer-events: none;
    list-style: none;
}

/* Hide section labels when sidebar is in mini/collapsed mode */
.sidebar-mini .sidebar .sx-section-label,
.nav_open .sidebar .sx-section-label {
    visibility: hidden;
    height: 0;
    padding: 0;
}


/* ── 2. Role badges ────────────────────────────────── */
/* Small pill shown next to role-gated nav links        */
.sidebar .sx-role-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: auto;        /* pushes badge to right of <p> */
    margin-right: 6px;
    background-color: rgba(123, 92, 245, 0.20);
    color: #000;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.6;
}

/* Admin variant — amber tint */
.sidebar .sx-role-badge--admin {
    background-color: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Hide badges in mini mode (no room) */
.sidebar-mini .sidebar .sx-role-badge {
    display: none;
}


/* ── 3. Active state for sub-items ────────────────── */
/* KaiAdmin marks active on <li>; ensure child <a>      */
/* gets the accent colour without a full override.      */
.sidebar .nav.nav-collapse > li.active > a,
.sidebar .nav.nav-collapse > li.active > a i,
.sidebar .nav.nav-collapse > li.active > a p {
    color: #000 !important;   /* match your primary accent */
}

.sidebar .nav.nav-collapse > li.active > a {
    background-color: rgba(79, 142, 247, 0.10);
    border-radius: 8px;
}


/* ── 4. Logout item ────────────────────────────────── */
/* Adds a top separator and a red hover so it reads     */
/* as a destructive/exit action rather than a nav link. */
.sidebar .sx-logout-item {
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 6px;
}
/* Fix: text & icon color on hover and active state for top-level nav items */
.sidebar .nav.nav-secondary > li.nav-item > a:hover,
.sidebar .nav.nav-secondary > li.nav-item > a:hover i,
.sidebar .nav.nav-secondary > li.nav-item > a:hover p,
.sidebar .nav.nav-secondary > li.nav-item.active > a,
.sidebar .nav.nav-secondary > li.nav-item.active > a i,
.sidebar .nav.nav-secondary > li.nav-item.active > a p {
    color: #000 !important;
}
.sidebar .nav.nav-collapse > li > a:hover,
.sidebar .nav.nav-collapse > li > a:hover i,
.sidebar .nav.nav-collapse > li > a:hover p,
.sidebar .nav.nav-collapse > li.active > a,
.sidebar .nav.nav-collapse > li.active > a i,
.sidebar .nav.nav-collapse > li.active > a p,
.sidebar .nav.nav-collapse .subnav > li > a:hover,
.sidebar .nav.nav-collapse .subnav > li > a:hover i,
.sidebar .nav.nav-collapse .subnav > li > a:hover p,
.sidebar .nav.nav-collapse .subnav > li.active > a,
.sidebar .nav.nav-collapse .subnav > li.active > a i,
.sidebar .nav-item .nav.nav-collapse > li.active > a p {
    color: #000 !important;
}
.sidebar[data-background-color="dark"] .nav .nav-item > a:hover,
.sidebar[data-background-color="dark"] .nav .nav-item > a:hover p,
.sidebar[data-background-color="dark"] .nav .nav-item > a:hover i,
.sidebar[data-background-color="dark"] .nav .nav-item > a:focus,
.sidebar[data-background-color="dark"] .nav .nav-item > a:focus p,
.sidebar[data-background-color="dark"] .nav .nav-item > a:focus i,
.sidebar[data-background-color="dark"] .nav-collapse li > a:hover,
.sidebar[data-background-color="dark"] .nav-collapse li > a:hover p,
.sidebar[data-background-color="dark"] .nav-collapse li > a:hover i,
.sidebar[data-background-color="dark"] .nav-collapse li > a:hover i.text-blue,
.sidebar[data-background-color="dark"] .nav-collapse.subnav li > a:hover,
.sidebar[data-background-color="dark"] .nav-collapse.subnav li > a:hover p,
.sidebar[data-background-color="dark"] .nav-collapse.subnav li > a:hover i,
.sidebar[data-background-color="dark"] .nav-collapse.subnav li > a:hover i.text-blue {
    color: #000000 !important;
}
    .sidebar[data-background-color="dark"] .nav > .nav-item > a:hover *,
    .sidebar[data-background-color="dark"] .nav > .nav-item > a:focus *,
    .sidebar[data-background-color="dark"] .nav-collapse li > a:hover *,
    .sidebar[data-background-color="dark"] .nav-collapse li > a:focus *,
    .sidebar[data-background-color="dark"] .nav > .nav-item > a:hover,
    .sidebar[data-background-color="dark"] .nav > .nav-item > a:focus,
    .sidebar[data-background-color="dark"] .nav-collapse li > a:hover,
    .sidebar[data-background-color="dark"] .nav-collapse li > a:focus {
        color: #000000 !important;
    }
.sidebar[data-background-color="dark"] .nav > .nav-item a:hover p, .sidebar[data-background-color="dark"] .nav > .nav-item a:focus p, .sidebar[data-background-color="dark"] .nav > .nav-item a[data-toggle="collapse"][aria-expanded="true"] p {
    color: #000 !important;
}
    .sidebar .sx-logout-item > a,
    .sidebar .sx-logout-item > a i,
    .sidebar .sx-logout-item > a p {
        /*    color: rgba(255, 255, 255, 0.35) !important;*/
        color: #000;
        transition: color 0.15s ease;
    }

    .logo-header {
        float: left;
        width: 265px;
        height:60px !important;
    }

    .sidebar .sx-logout-item:hover > a,
    .sidebar .sx-logout-item:hover > a i,
    .sidebar .sx-logout-item:hover > a p {
        color: #000 !important; /* soft red on hover */
    }
    /* ── 5. Collapse arrow direction fix ──────────────── */
    /* KaiAdmin's .caret rotates when collapsed; this just  */
    /* smooths the transition if not already animated.      */
    .sidebar .nav-item > a .caret {
        transition: transform 0.20s ease;
    }

    .sidebar .nav-item > a.collapsed .caret {
        transform: rotate(-90deg);
    }