/* ═══════════════════════════════════════════════════════════════
   FEAT-023 — Sidebar Navigation Hierarchy
   style-11-sidebar.css
   Dark defaults; body[data-theme="light"] overrides at bottom
   ══════════════════════════════════════════════════════════════ */

/* ── Sidebar background (dark default) ─────────────────────── */
.hi-sidebar {
    background-color: #1a1f36;
}

/* ── Home item ──────────────────────────────────────────────── */
.sidebar-home-item {
    display:        flex;
    align-items:    center;
    height:         44px;
    padding:        0 12px;
    border-radius:  6px;
    color:          rgba(255, 255, 255, 0.75);
    font-size:      0.875rem;
    cursor:         pointer;
    margin-bottom:  2px;
    transition:     background 150ms ease, color 150ms ease;
}

.sidebar-home-item:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color:            #fff;
}

.sidebar-home-item.active-page {
    background-color: rgba(255, 143, 0, 0.15);
    color:            #ff8f00;
    border-left:      3px solid #ff8f00;
    padding-left:     9px; /* 12 - 3 to compensate border */
    font-weight:      600;
}

/* ── Group row ───────────────────────────────────────────────── */
.sidebar-group {
    margin-bottom: 2px;
}

.sidebar-group-row {
    display:        flex;
    align-items:    center;
    height:         44px;
    padding:        0 12px;
    border-radius:  6px;
    color:          rgba(255, 255, 255, 0.75);
    font-size:      0.875rem;
    cursor:         pointer;
    user-select:    none;
    transition:     background 150ms ease, color 150ms ease, border-left 150ms ease;
}

.sidebar-group-row:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color:            #fff;
}

.sidebar-group-row.active-group {
    color:            #ff8f00;
    border-left:      3px solid #ff8f00;
    padding-left:     9px; /* 12 - 3 to compensate border */
    font-weight:      600;
}

/* ── Chevron ─────────────────────────────────────────────────── */
.sidebar-chevron {
    transition:   transform 200ms ease;
    flex-shrink:  0;
    margin-left:  4px;
    color:        inherit;
}

.sidebar-chevron.expanded {
    transform: rotate(90deg);
}

/* ── Child items ─────────────────────────────────────────────── */
.sidebar-children {
    padding-left: 0;
}

.sidebar-child-item {
    display:        flex;
    align-items:    center;
    height:         36px;
    padding:        0 12px 0 48px;
    border-radius:  6px;
    color:          rgba(255, 255, 255, 0.65);
    font-size:      0.8125rem;
    cursor:         pointer;
    transition:     background 150ms ease, color 150ms ease;
    margin-bottom:  1px;
    text-decoration: none;
}

.sidebar-child-item:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color:            #fff;
    text-decoration:  none;
}

.sidebar-child-item.active-page {
    background-color: rgba(255, 143, 0, 0.15);
    color:            #ff8f00;
    border-left:      3px solid #ff8f00;
    padding-left:     45px; /* 48 - 3 to compensate border */
    font-weight:      600;
    text-decoration:  none;
}

.sidebar-child-item.soon {
    cursor:  not-allowed;
    opacity: 0.55;
}

.sidebar-child-item.soon:hover {
    background-color: transparent;
    color:            rgba(255, 255, 255, 0.65);
}

/* ── Soon badge ──────────────────────────────────────────────── */
.sidebar-soon-badge {
    font-size:        10px;
    color:            #6c757d;
    background-color: rgba(108, 117, 125, 0.15);
    border:           1px solid rgba(108, 117, 125, 0.3);
    border-radius:    10px;
    padding:          1px 6px;
    margin-left:      6px;
    flex-shrink:      0;
    font-weight:      500;
    letter-spacing:   0.2px;
}

/* ── Version label ───────────────────────────────────────────── */
.sidebar-version-label {
    font-size:    11px;
    color:        rgba(255, 255, 255, 0.3);
    text-align:   center;
    padding:      10px 14px 14px;
    flex-shrink:  0;
    border-top:   1px solid rgba(255, 255, 255, 0.07);
    letter-spacing: 0.3px;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ════════════════════════════════════════════════════════════ */

body[data-theme="light"] .hi-sidebar {
    background-color: #f4f5f7;
    border-right:     1px solid #e2e4e9;
}

body[data-theme="light"] .sidebar-home-item {
    color: #3d4252;
}

body[data-theme="light"] .sidebar-home-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color:            #1a1f2e;
}

body[data-theme="light"] .sidebar-home-item.active-page {
    background-color: rgba(255, 143, 0, 0.1);
    color:            #d97706;
    border-left-color: #d97706;
}

body[data-theme="light"] .sidebar-group-row {
    color: #3d4252;
}

body[data-theme="light"] .sidebar-group-row:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color:            #1a1f2e;
}

body[data-theme="light"] .sidebar-group-row.active-group {
    color:             #d97706;
    border-left-color: #d97706;
}

body[data-theme="light"] .sidebar-child-item {
    color: #555c6e;
}

body[data-theme="light"] .sidebar-child-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color:            #1a1f2e;
}

body[data-theme="light"] .sidebar-child-item.active-page {
    background-color: rgba(217, 119, 6, 0.1);
    color:            #d97706;
    border-left-color: #d97706;
}

body[data-theme="light"] .sidebar-child-item.soon:hover {
    background-color: transparent;
    color:            #555c6e;
}

body[data-theme="light"] .sidebar-soon-badge {
    color:            #6c757d;
    background-color: rgba(108, 117, 125, 0.1);
    border-color:     rgba(108, 117, 125, 0.25);
}

body[data-theme="light"] .sidebar-version-label {
    color:      rgba(61, 66, 82, 0.4);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── Light theme: sidebar header/user-info borders ───────────── */
body[data-theme="light"] .hi-sidebar .hi-sidebar-expanded > div:first-child,
body[data-theme="light"] .hi-sidebar > div:first-child {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}