/* ============================================================
   iSecureX 셸 리스타일 (리디자인 시안 → 사이드바 / 헤더)
   - 시안(export/*.dc.html)의 셸: 네이비 사이드바(--sidebar-bg) +
     시안 활성 항목(좌측 액센트 바) + 토큰 헤더(--header-bg).
   - MudBlazor MudDrawer/MudAppBar/MudNavMenu 를 디자인 토큰으로 오버라이드.
     (기능/마크업은 유지 — 색·형태만 시안에 맞춤)
   - 토큰 정의: design-tokens.css / 매핑: docs/design/DESIGN-TOKENS.md
   ============================================================ */

/* ── 사이드바 (MudDrawer) ─────────────────────────────────
   라이트/다크 모두 네이비 고정(--sidebar-bg). 시안 동일. */
.isx-sidebar.mud-drawer {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid rgba(255, 255, 255, .06) !important;
}

/* 브랜드 헤더 (아이콘 시안 + 흰 타이틀, 하단 보더) */
.isx-sidebar .mud-drawer-header {
    min-height: 64px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.isx-sidebar .isx-brand-icon {
    color: var(--accent-bright) !important; /* #22d3ee */
}

.isx-sidebar .isx-brand-title {
    color: #f1f5f9;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* 시안엔 헤더 보더만 — MudDivider 숨김 */
.isx-sidebar .mud-divider {
    display: none !important;
}

/* 사이드바 하단 로고 (margin-top:auto 로 바닥 고정 — 드로어는 flex 컬럼) */
.isx-sidebar .isx-sidebar-footer {
    margin-top: auto;
    flex: none;
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: 18px 12px;
}

.isx-sidebar .isx-sidebar-logo {
    display: block;
    width: 76%; /* 기본값 — 실제 폭은 설정(Branding.SidebarLogoWidth)으로 inline 오버라이드 */
    height: auto;
    max-height: 96px; /* 넉넉히 — 폭(%)이 크기를 좌우하도록 */
    margin: 0 auto; /* 가운데 정렬 */
    object-fit: contain;
    /* 흰색 반전 로고 — 투명 배경으로 네이비 사이드바에 바로 표시 (시안 동일) */
    background: transparent;
}

/* 내비 컨테이너 */
.isx-sidebar .fc-nav-menu {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* 내비 항목 (비활성)
   - MudBlazor 기본: padding-inline-start:36px + align-items:flex-start → 시안(14px·세로중앙)으로 보정.
     (padding-inline 로 논리 속성까지 덮어써 36px 들여쓰기 제거) */
.isx-sidebar .fc-nav-menu .mud-nav-link {
    position: relative;
    margin: 0;
    padding: 11px 14px;
    padding-inline: 14px;
    gap: 12px;
    min-height: 0;
    align-items: center;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-faint);
    transition: background .12s ease, color .12s ease;
}

.isx-sidebar .fc-nav-menu .mud-nav-link .mud-nav-link-icon {
    color: var(--text-muted);
    min-width: 20px;
    font-size: 20px;
}

.isx-sidebar .fc-nav-menu .mud-nav-link:hover {
    background: rgba(255, 255, 255, .05);
    color: var(--text-3);
}

/* 내비 항목 (활성) — 시안 색 + 좌측 액센트 바 */
.isx-sidebar .fc-nav-menu .mud-nav-link.active,
.isx-sidebar .fc-nav-menu .mud-nav-link.mud-nav-link-active {
    background: rgba(34, 211, 238, .13);
    color: #67e8f9;
    font-weight: 600 !important; /* MudBlazor active 의 font-weight:500 !important 를 덮어씀 */
    /* MudBlazor 기본 active 우측 보더(2px) 제거 — 좌측 ::before 바로 대체 */
    border-inline-end-width: 0 !important;
}

.isx-sidebar .fc-nav-menu .mud-nav-link.active .mud-nav-link-icon,
.isx-sidebar .fc-nav-menu .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
    color: #67e8f9;
}

.isx-sidebar .fc-nav-menu .mud-nav-link.active::before,
.isx-sidebar .fc-nav-menu .mud-nav-link.mud-nav-link-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-bright);
}

/* MudBlazor 기본 active 좌측 보더 인디케이터 제거(우리 ::before 로 대체) */
.isx-sidebar .fc-nav-menu .mud-nav-link.active::after,
.isx-sidebar .fc-nav-menu .mud-nav-link.mud-nav-link-active::after {
    display: none !important;
}

/* ── 헤더 (MudAppBar) ─────────────────────────────────────
   토큰 배경/보더. 아이콘은 Color.Inherit → 헤더 텍스트색 상속.
   (상태 점 등 명시 Color 를 가진 요소는 그대로 유지) */
.isx-appbar.mud-appbar {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-2) !important;
    color: var(--text-2);
}