/* Status pills of the Home launcher (Beta / Partial gray, Add-on lilac). Tokens come from tokens.css. */
.im-status-badge.im-pill {
    border-color: transparent;
    background: var(--im-pill-bg);
    color: var(--im-pill-text);
}

.im-status-badge.im-pill.im-status-addon {
    background: var(--im-addon-bg);
    color: var(--im-addon-text);
}

/* ================================================================================
 * App shell (Vuexy look): light/dark sidebar with logo on top, floating top bar card.
 * Overrides the Skote rules from app.min.css; all colors come from --im-* tokens.
 * Layout offsets (>= 992px) are driven by --im-sb-w so the collapsed (70px) state keeps working.
 * ================================================================================ */
body { --im-sb-w: var(--im-sidebar-width); }
body.vertical-collpsed { --im-sb-w: 70px; }

/* ---- Brand box: colored logo on light, white logo on dark ---- */
.navbar-brand-box,
body[data-sidebar] .navbar-brand-box {
    display: flex;
    align-items: center;
    height: 64px;
    background: var(--im-nav-bg);
}
.navbar-brand-box .logo { display: flex; align-items: center; line-height: 1; }
body[data-sidebar] .navbar-brand-box .logo-dark { display: block; }
body[data-sidebar] .navbar-brand-box .logo-light { display: none; }
[data-bs-theme="dark"] body[data-sidebar] .navbar-brand-box .logo-dark { display: none; }
[data-bs-theme="dark"] body[data-sidebar] .navbar-brand-box .logo-light { display: block; }

/* ---- Top bar: a card, not a colored strip ---- */
#page-topbar {
    background: var(--im-surface) !important;
    color: var(--im-ink);
}
#page-topbar .header-item,
#page-topbar .header-item:hover { color: var(--im-ink); background: transparent; }
#page-topbar .header-item:hover,
#page-topbar .dropdown .show.header-item { background: var(--im-secondary); }
#page-topbar .header-item i,
#page-topbar .header-item .mdi { color: var(--im-ink); }
#page-topbar .text-muted { color: var(--im-muted) !important; }
/* Center every top-bar group (incl. the hamburger) vertically in the bar. */
#page-topbar .navbar-header > .d-flex { align-items: center; height: 100%; }
#page-topbar #vertical-menu-btn { display: inline-flex; align-items: center; justify-content: center; }

#page-topbar .app-search .form-control {
    background: var(--im-secondary);
    color: var(--im-ink);
    border-radius: var(--im-radius-control);
}
#page-topbar .app-search .form-control::placeholder { color: var(--im-muted); }
#page-topbar .app-search span { color: var(--im-muted); }

#page-header-user-dropdown.show,
#page-header-user-dropdown:hover,
#page-header-user-dropdown:focus {
    background-color: var(--im-secondary);
    color: var(--im-ink);
}

#page-topbar .dropdown-menu .dropdown-item {
    color: var(--im-ink);
}

#page-topbar .dropdown-menu .dropdown-item:hover,
#page-topbar .dropdown-menu .dropdown-item:focus,
#page-topbar .dropdown-menu .dropdown-item:active {
    background-color: var(--im-primary-tint);
    color: var(--im-accent-text);
}

/* The selected row (account / workspace switcher) is accent-filled: its text must be white to be readable. */
#page-topbar .dropdown-menu .dropdown-item.active,
#page-topbar .dropdown-menu .dropdown-item.active:hover,
#page-topbar .dropdown-menu .dropdown-item.active:focus {
    background-color: var(--im-primary);
    color: #fff;
}

/* ---- Sidebar items ---- */
.vertical-menu {
    background: var(--im-nav-bg) !important;
    box-shadow: 0 0 24px rgba(47, 51, 73, 0.07);
}
[data-bs-theme="dark"] .vertical-menu { box-shadow: 0 0 24px rgba(10, 12, 24, 0.35); }

body[data-sidebar] #sidebar-menu { padding: 8px 12px 24px; }
body[data-sidebar] #sidebar-menu ul li a {
    margin: 2px 0;
    padding: 9px 12px;
    border-radius: var(--im-radius-control);
    color: var(--im-nav-text);
    font-size: 14px;
    transition: background-color .15s, color .15s;
}
body[data-sidebar] #sidebar-menu ul li a i { color: var(--im-nav-muted); min-width: 1.6rem; }
/* Hover only adds the gray fill; text/icon colors never change (Skote forces white on hover otherwise). */
body[data-sidebar] #sidebar-menu ul li a:hover {
    background: var(--im-nav-hover-bg);
    color: var(--im-nav-text) !important;
}
body[data-sidebar] #sidebar-menu ul li a:hover i { color: var(--im-nav-muted) !important; }
body[data-sidebar] #sidebar-menu ul li ul.sub-menu li a:hover { color: var(--im-nav-sub-text) !important; }

/* Open group: no fill (a group is only highlighted when it holds the current page, see below). */
body[data-sidebar] #sidebar-menu .mm-active > a,
body[data-sidebar] #sidebar-menu .mm-active > a i {
    color: var(--im-nav-text) !important;
}
body[data-sidebar] #sidebar-menu .mm-active > a i { color: var(--im-nav-muted) !important; }

/* Sub-menu: ring bullet in place of the icon, indented. */
body[data-sidebar] #sidebar-menu ul li ul.sub-menu { padding: 2px 0 4px; background: transparent; }
body[data-sidebar] #sidebar-menu ul li ul.sub-menu li a {
    padding: 8px 12px 8px 34px;      /* indented 20px under the parent */
    font-size: 13.5px;
    color: var(--im-nav-sub-text);
}
body[data-sidebar] #sidebar-menu ul li ul.sub-menu li a i {
    min-width: 1.4rem;
    font-size: 1rem;
    color: var(--im-nav-muted);
}

/* Current SECTION: solid blue pill on the top-level item — the leaf itself (Home) or the group that holds the current page. */
body[data-sidebar] #sidebar-menu > ul > li > a.active,
body[data-sidebar] #sidebar-menu > ul > li:has(> ul.sub-menu a.active) > a {
    background: linear-gradient(72deg, var(--im-primary), color-mix(in srgb, var(--im-primary) 72%, #fff)) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px 0 color-mix(in srgb, var(--im-primary) 45%, transparent);
}
body[data-sidebar] #sidebar-menu > ul > li > a.active i,
body[data-sidebar] #sidebar-menu > ul > li:has(> ul.sub-menu a.active) > a i {
    color: #fff !important;
}
/* Current sub-page: gray shading only, the blue stays with its parent. */
body[data-sidebar] #sidebar-menu ul.sub-menu li a.active {
    background: var(--im-nav-hover-bg) !important;
    color: var(--im-accent-text) !important;
    font-weight: 500;
    box-shadow: none;
}
body[data-sidebar] #sidebar-menu ul.sub-menu li a.active i { color: var(--im-accent-text) !important; }

/* Flyout items (collapsed sidebar) keep a normal inset. */
body.vertical-collpsed[data-sidebar] #sidebar-menu ul li ul.sub-menu li a { padding-left: 20px; }

/* ---- Collapsed (70px) sidebar: icons centered, flyouts on tokens ---- */
body.vertical-collpsed #sidebar-menu { padding: 8px; }
body.vertical-collpsed[data-sidebar] #sidebar-menu > ul > li > a {
    padding: 12px 0;
    margin: 4px 0;
    text-align: center;
}
body.vertical-collpsed[data-sidebar] #sidebar-menu > ul > li > a i {
    display: block;
    margin: 0;
    min-width: 0;
    text-align: center;
}
body[data-sidebar].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    background: var(--im-nav-hover-bg);
    color: var(--im-nav-text);
    text-align: left;
    padding-left: 24px;
}
body[data-sidebar].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i { color: var(--im-nav-text); display: inline-block; min-width: 1.6rem; }
body[data-sidebar].vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
    background-color: var(--im-nav-bg) !important;
    border-radius: 0 0 var(--im-radius-control) var(--im-radius-control);
}
body[data-sidebar].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a { color: var(--im-nav-sub-text); }
body[data-sidebar].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a.active,
body[data-sidebar].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover:has(> ul.sub-menu a.active) > a {
    background: linear-gradient(72deg, var(--im-primary), color-mix(in srgb, var(--im-primary) 72%, #fff));
    color: #fff;
}
body[data-sidebar].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a.active i,
body[data-sidebar].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover:has(> ul.sub-menu a.active) > a i { color: #fff; }

/* ---- Desktop layout: sidebar full-height, content offset, floating top bar ---- */
@media (min-width: 992px) {
    .navbar-brand-box {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--im-sb-w) !important;
        z-index: 1003;
        padding: 0 20px;
    }
    body.vertical-collpsed .navbar-brand-box { padding: 0; justify-content: center; }

    .vertical-menu {
        top: 0 !important;
        width: var(--im-sb-w) !important;
        padding-top: 64px;
    }

    #page-topbar {
        top: 12px;
        left: calc(var(--im-sb-w) + 24px);
        right: 24px;
        border: 1px solid var(--im-card-border);
        border-radius: var(--im-radius-card);
        box-shadow: var(--im-card-shadow) !important;
    }
    #page-topbar .navbar-header { height: 56px; max-width: none; padding: 0 8px; }
    #page-topbar .header-item { height: 40px; border-radius: var(--im-radius-control); }

    .main-content { margin-left: var(--im-sb-w) !important; }
    .main-content .page-content { padding-top: 92px; }
    .footer { left: var(--im-sb-w); background: transparent; color: var(--im-muted); }
}

/* ---- Small screens: keep everything on one line and the user menu (Logout) always reachable ---- */
@media (max-width: 991.98px) {
    #page-topbar .navbar-header { flex-wrap: nowrap; }
    #page-topbar .navbar-header > .d-flex:first-child { min-width: 0; flex-shrink: 1; }
    #page-topbar .navbar-header > .d-flex:last-child { flex-shrink: 0; align-items: center; }
    #page-topbar .header-item { padding-left: .5rem; padding-right: .5rem; }
}