/* ═══════════════════════════════════════════════════════════════
   FEAT-064 — 3-Level Sidebar Nav: Domain Rail → Group → Page
   style-11-sidebar.css
   Dark defaults; body[data-theme="light"] overrides at bottom
   ══════════════════════════════════════════════════════════════ */

/* ── Outer sidebar wrappers ─────────────────────────────────── */
.hi-sidebar {
    background-color: #1a1f36;
    display:          flex;
    flex-direction:   row;
    flex-shrink:      0;
}

/* ══════════════════════════════════════════════════════════════
   ICON RAIL  (52 px)
   ════════════════════════════════════════════════════════════ */

.sidebar-icon-rail {
    width:            52px;
    min-width:        52px;
    flex-shrink:      0;
    height:           100vh;
    position:         sticky;
    top:              0;
    display:          flex;
    flex-direction:   column;
    background-color: #141828;
    border-right:     1px solid rgba(255, 255, 255, 0.06);
    overflow-y:       auto;
    overflow-x:       hidden;
}

.sidebar-rail-domains {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        10px 0 6px;
    gap:            4px;
    flex:           1;
    overflow-y:     auto;
    overflow-x:     hidden;
}

.sidebar-rail-actions {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        6px 0 10px;
    gap:            2px;
    border-top:     1px solid rgba(255, 255, 255, 0.06);
    flex-shrink:    0;
}

/* ── Icon rail button ────────────────────────────────────────── */
.sidebar-rail-icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    8px;
    border:           none;
    background:       none;
    color:            rgba(255, 255, 255, 0.45);
    cursor:           pointer;
    transition:       background 150ms ease, color 150ms ease;
    flex-shrink:      0;
    padding:          0;
}

.sidebar-rail-icon:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color:            rgba(255, 255, 255, 0.9);
}

.sidebar-rail-icon.active-rail-icon {
    background-color: rgba(255, 143, 0, 0.18);
    color:            #ff8f00;
}

.sidebar-rail-action {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.9rem;
}

.sidebar-rail-action:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* ── Theme toggle icon visibility (dark default) ─────────────── */
.hi-theme-icon-sun  { display: none; }
.hi-theme-icon-moon { display: inline; }
body[data-theme="light"] .hi-theme-icon-sun  { display: inline; }
body[data-theme="light"] .hi-theme-icon-moon { display: none; }

/* ══════════════════════════════════════════════════════════════
   CONTEXT PANEL  (178 px)
   ════════════════════════════════════════════════════════════ */

.sidebar-context-panel {
    flex:             1;
    min-width:        0;
    height:           100vh;
    position:         sticky;
    top:              0;
    display:          flex;
    flex-direction:   column;
    background-color: #1a1f36;
    overflow:         hidden;
}

/* ── User strip ──────────────────────────────────────────────── */
.sidebar-user-strip {
    display:         flex;
    align-items:     center;
    padding:         12px 10px;
    gap:             8px;
    border-bottom:   1px solid rgba(255, 255, 255, 0.08);
    flex-shrink:     0;
}

.sidebar-user-avatar {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background-color:#3d5a99;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    color:           #fff;
    font-size:       0.8rem;
}

.sidebar-user-name {
    color:           #fff;
    font-weight:     600;
    font-size:       0.8rem;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

/* ── Domain header ───────────────────────────────────────────── */
.sidebar-domain-header {
    font-size:       0.65rem;
    font-weight:     700;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    color:           rgba(255, 255, 255, 0.35);
    padding:         10px 12px 4px;
    flex-shrink:     0;
}

/* ── Search box ──────────────────────────────────────────────── */
.sidebar-search-wrap {
    padding:         0 10px 8px;
    flex-shrink:     0;
}

.sidebar-search-input {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border:           1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius:    6px !important;
    color:            rgba(255, 255, 255, 0.85) !important;
    font-size:        0.8rem !important;
    padding:          5px 10px !important;
    outline:          none !important;
    transition:       border-color 150ms ease, background 150ms ease;
}

.sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.sidebar-search-input:focus {
    border-color:     rgba(255, 143, 0, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Search results ──────────────────────────────────────────── */
.sidebar-search-results {
    padding: 0 6px;
}

.sidebar-search-result {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          7px 8px;
    border-radius:    6px;
    color:            rgba(255, 255, 255, 0.7);
    font-size:        0.8125rem;
    cursor:           pointer;
    margin-bottom:    2px;
    transition:       background 150ms ease, color 150ms ease;
}

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

.sidebar-search-result.active-page {
    background-color: rgba(255, 143, 0, 0.15);
    color:            #ff8f00;
    border-left:      3px solid #ff8f00;
    padding-left:     5px;
    font-weight:      600;
}

.sidebar-search-label {
    flex:      1;
    min-width: 0;
    overflow:  hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-search-group-hint {
    font-size:    0.68rem;
    color:        rgba(255, 255, 255, 0.3);
    flex-shrink:  0;
    margin-left:  6px;
    white-space:  nowrap;
}

.sidebar-search-no-results {
    font-size:  0.8rem;
    color:      rgba(255, 255, 255, 0.3);
    padding:    12px;
    text-align: center;
}

/* ── Scrollable nav area ─────────────────────────────────────── */
.sidebar-nav-scroll {
    flex:       1;
    overflow-y: auto;
    overflow-x: hidden;
    padding:    4px 6px;
}

/* ── Empty domain placeholder ────────────────────────────────── */
.sidebar-empty-domain {
    font-size:  0.8rem;
    color:      rgba(255, 255, 255, 0.25);
    padding:    12px;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   GROUP & CHILD ITEMS
   ════════════════════════════════════════════════════════════ */

.sidebar-group {
    margin-bottom: 2px;
}

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

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

.sidebar-group-row.active-group {
    color:       #ff8f00;
    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:          32px;
    padding:         0 8px 0 34px;
    border-radius:   6px;
    color:           rgba(255, 255, 255, 0.55);
    font-size:       0.8rem;
    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:     31px;
    font-weight:      600;
    text-decoration:  none;
}

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

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

/* ── 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:    10px;
    color:        rgba(255, 255, 255, 0.25);
    text-align:   center;
    padding:      8px 10px 10px;
    flex-shrink:  0;
    border-top:   1px solid rgba(255, 255, 255, 0.06);
    letter-spacing: 0.3px;
}

/* ══════════════════════════════════════════════════════════════
   COLLAPSED STATE  (icon rail only, 52 px)
   ════════════════════════════════════════════════════════════ */

.hi-sidebar-collapsed .sidebar-icon-rail {
    height:    100vh;
    width:     52px;
    min-width: 52px;
    border-right: none;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE  (≤ 390 px)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 390px) {
    .hi-sidebar-expanded {
        width:     52px !important;
        min-width: 52px !important;
    }
    .sidebar-context-panel {
        display: none;
    }
}

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

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

body[data-theme="light"] .sidebar-icon-rail {
    background-color: #e8eaf0;
    border-right:     1px solid #d6d9e0;
}

body[data-theme="light"] .sidebar-context-panel {
    background-color: #f4f5f7;
}

body[data-theme="light"] .sidebar-rail-icon {
    color: rgba(61, 66, 82, 0.55);
}

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

body[data-theme="light"] .sidebar-rail-icon.active-rail-icon {
    background-color: rgba(217, 119, 6, 0.15);
    color:            #d97706;
}

body[data-theme="light"] .sidebar-rail-action {
    color: rgba(61, 66, 82, 0.4);
}

body[data-theme="light"] .sidebar-user-strip {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .sidebar-user-name {
    color: #1a1f2e;
}

body[data-theme="light"] .sidebar-domain-header {
    color: rgba(61, 66, 82, 0.45);
}

body[data-theme="light"] .sidebar-search-input {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-color:     rgba(0, 0, 0, 0.15) !important;
    color:            #1a1f2e !important;
}

body[data-theme="light"] .sidebar-search-input::placeholder {
    color: rgba(61, 66, 82, 0.4);
}

body[data-theme="light"] .sidebar-search-input:focus {
    border-color:     rgba(217, 119, 6, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.07) !important;
}

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

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

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

body[data-theme="light"] .sidebar-search-group-hint {
    color: rgba(61, 66, 82, 0.4);
}

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;
}

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.35);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

body[data-theme="light"] .sidebar-rail-actions {
    border-top-color: rgba(0, 0, 0, 0.08);
}