/* ============================================================
   SSAM+ LMS — unfold admin 커스텀 스타일
   ============================================================ */

/* ── 토글 스위치 (.sw-toggle / .sw-slider) ── */
.sw-toggle { position:relative; display:inline-block; width:36px; height:20px; cursor:pointer; flex-shrink:0; }
.sw-toggle input { opacity:0; width:0; height:0; position:absolute; }
.sw-slider { position:absolute; inset:0; background:#d1d5db; border-radius:20px; border:1px solid rgba(0,0,0,.15); transition:background .15s; }
.sw-slider::before { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s; }
.sw-toggle input:checked + .sw-slider { background:#7c3aed; }
.sw-toggle input:checked + .sw-slider::before { transform:translateX(16px); }
.dark .sw-slider { background:#4b5563; border-color:rgba(255,255,255,.15); }
.dark .sw-toggle input:checked + .sw-slider { background:#007bff; }

/* ── 페이지 전환 오버레이 ──
   opacity/blur 는 흰 배경이 비쳐 흰 화면처럼 보이므로 사용하지 않는다.
   대신 ::before 로 전체화면 dark overlay 를 씌워 "로딩 중" 상태를 표현한다. */
#lms-content.navigating::before,
#content.navigating::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

/* ── 1depth 그룹 타이틀 색상 연하게 ── */
#nav-sidebar-apps h2 {
    color: rgb(107 114 128) !important;  /* gray-500 */
}
.dark #nav-sidebar-apps h2 {
    color: rgb(156 163 175) !important;  /* gray-400 */
}
#nav-sidebar-apps h2:hover {
    color: rgb(var(--color-primary-600)) !important;
}
.dark #nav-sidebar-apps h2:hover {
    color: rgb(var(--color-primary-500)) !important;
}

/* ── 2depth dot 마커 다크모드 보장 ── */
#nav-sidebar-apps ol > li > div > div > span.rounded-full {
    background: rgb(156 163 175) !important;  /* gray-400 */
}
.dark #nav-sidebar-apps ol > li > div > div > span.rounded-full {
    background: rgb(209 213 219) !important;  /* gray-300 */
}

/* ── 3depth 선택된 링크: 왼쪽 강조 bar ── */
#nav-sidebar-apps ol ol li a.active {
    position: relative;
}
#nav-sidebar-apps ol ol li a.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background-color: rgb(var(--color-primary-600));
}

/* ── 1depth 그룹 헤더: active trail 강조 ── */
#nav-sidebar-apps h2[x-on\:click] {
    transition: color 0.15s;
}

/* ── 2depth 항목: active 상태일 때 약간의 배경 ── */
#nav-sidebar-apps ol > li > div > div:has(~ ol .active) {
    color: rgb(var(--color-primary-600));
}
.dark #nav-sidebar-apps ol > li > div > div:has(~ ol .active) {
    color: rgb(var(--color-primary-500));
}