/*
 * Sidebar — shadcn alignment overrides
 *
 * Aligns the dashboard sidebar's menu items and shell to the visual treatment
 * used in cashtoken-v2/backoffice (shadcn-vue Sidebar + SidebarMenuButton).
 * Preserves the existing dark charcoal background from skin.charcoal.css and
 * the existing section-label style.
 *
 * Sources:
 *   - backoffice/components/ui/shadcn/sidebar/utils.ts (SIDEBAR_WIDTH = 16rem)
 *   - backoffice/components/ui/shadcn/sidebar/index.ts (sidebarMenuButtonVariants)
 *   - backoffice/assets/scss/app.css (--sidebar* tokens, dark mode)
 */

.aside {
    --sb-fg: #fafafa;                       /* active text */
    --sb-text: #cbd5e1;                     /* idle text */
    --sb-muted: #94a3b8;                    /* idle icons, sub-item idle text */
    --sb-active-icon: #ffc107;              /* active icon — distinct accent */
    --sb-hover: rgba(255, 255, 255, 0.06);  /* row hover fill */
    --sb-active: rgba(255, 255, 255, 0.10); /* row active fill */

    width: 256px;
}

/* Disable the legacy 3px left-border active indicator. */
.nav-aside .nav-link::before {
    display: none;
}

/* Section label — align with row content (icons start at row's 8px padding) */
.nav-aside .nav-label {
    padding-left: 8px;
}

/* Account switcher block — same 8px inner offset as menu rows so its content
   ("Current Account" label, account name, badge, @username) sits at the same
   16px content baseline as the icons and labels below it. */
.aside-loggedin {
    padding: 0 8px;
}

/* Row geometry + colors.
   `color` uses !important to defeat skin.custom.css line 344
   (.nav-aside .nav-link { color: #8695a7 !important }). */
.nav-aside .nav-link {
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    gap: 8px;
    font-size: 14px;
    color: var(--sb-text) !important;
}
.nav-aside .nav-link:hover,
.nav-aside .nav-link:focus {
    background-color: var(--sb-hover);
    color: #f1f5f9 !important;
}

/* Active row — neutral pill, no blue, no amber */
.nav-aside .nav-item.active .nav-link {
    background-color: var(--sb-active);
    color: var(--sb-fg) !important;
    font-weight: 500;
}

/* Item gap */
.nav-aside .nav-item + .nav-item {
    margin-top: 4px;
}

/* Font Awesome icons (the dashboard uses <i class="fas ..."> not inline SVG).
   Fixed-width box so labels align across rows regardless of glyph variance —
   mirrors backoffice's [&>svg]:size-4 + [&>svg]:shrink-0. */
.nav-aside .nav-link i {
    width: 16px;
    font-size: 16px;
    margin-right: 0;
    color: var(--sb-muted);
    text-align: center;
    flex-shrink: 0;
}
.nav-aside .nav-item.active .nav-link i {
    color: var(--sb-active-icon);
}

/* Sub-list indentation */
.nav-aside .nav-item ul {
    padding-left: 24px;
}

/* Sub-items — match parent treatment, smaller height */
.nav-aside .nav-item ul a {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--sb-muted);
}
.nav-aside .nav-item ul a:hover,
.nav-aside .nav-item ul a:focus {
    background-color: var(--sb-hover);
    color: #f1f5f9;
}
.nav-aside .nav-item ul .active a {
    color: var(--sb-fg);
    font-weight: 500;
}