/* =========================================================================
   Woorinote Theme Core Definitions (Bootstrap 5 native mapping)
   ========================================================================= */

/* 애니메이션 효과 (테마 전환을 부드럽게) */
body,
#mainSidebar,
#mainScrollArea,
.note-element,
.form-control {
    transition: background 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 컴포넌트 실 적용 매핑 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

#mainSidebar {
    /* 그라데이션 지원을 위해 background-color 대신 background 사용 */
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    /* 사이드바 전용 폰트 컬러가 없으면 기본 텍스트 속성을 따라감 */
    color: var(--sidebar-text-color, var(--text-color));
}

#sidebarToggleBtnOuter,
#sidebarToggleBtnOuter i {
    color: var(--sidebar-icon-color, #555555) !important;
    text-shadow: none !important;
}

#mainScrollArea {
    background-color: var(--bg-color);
}

/* 각종 아이템 호버 효과 (기존 style.css의 hover를 안전하게 덮어쓰기 위해 none important 사용하지만 필요에 따라 strong 적용) */
.hover-target:hover,
#mainSidebar .nav-item:hover,
#mainSidebar .note-list-item:hover,
#mainSidebar .folder-header:hover {
    background-color: var(--hover-color) !important;
}

/* 인풋/모달 박스 계열 */
.input-field-custom {
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--border-color);
}

/* 💡 [내지 마켓 대응] 내지/도형 등에서 가져다 쓸 핵심 포인트 컬러 동기화 */
.naeji-item-box {
    border-color: var(--bs-primary);
}


/* =========================================================================
   Color Palettes
   ========================================================================= */

/* 1. 🌑 Dark (기본값 / 기본 테마) */
:root,
[data-bs-theme="dark"] {
    --primary-color: #007bff;
    --bg-color: #1e1e1e;
    --sidebar-bg: #1a1a2e;                     /* 어두운 네이비 사이드바 */
    --sidebar-text-color: rgba(255,255,255,0.85);
    --sidebar-icon-color: rgba(255,255,255,0.55);
    --sidebar-active-border: #4a6fa5;
    --text-color: #ffffff;
    --border-color: #333333;
    --input-bg: #3c3c3c;
    --input-text: #ffffff;
    --hover-color: rgba(255,255,255,0.1);
    --close-btn-filter: invert(1);         /* 모달 닫기버튼 흰색 */

    /* 부트스트랩 코어 동기화 */
    --bs-primary: var(--primary-color);
    --bs-body-bg: var(--bg-color);
    --bs-body-color: var(--text-color);
    --bs-success: #198754;
    --bs-danger: #dc3545;
}

/* 2. ☀️ Light (.theme-light) */
[data-bs-theme="light"],
.theme-light {
    --primary-color: #0056b3;
    --bg-color: #ffffff;
    --sidebar-bg: #f3f3f3;
    /* ── 텍스트 색상 ───────────────────────────────────────────────────── */
    --sidebar-text-color: #2d3748;          /* 사이드바/헤더 영역 글씨 → 어두운 색  */
    --sidebar-icon-color: #555555;
    --sidebar-active-border: #0056b3;
    --text-color: #1a1a1a;                  /* 메인 콘텐츠 영역 글씨 → 어두운 색   */
    --border-color: #dddddd;
    --input-bg: #ffffff;
    --input-text: #1a1a1a;
    --hover-color: rgba(0,0,0,0.06);
    --close-btn-filter: none;              /* 모달 닫기버튼 기본(검정) */

    --bs-primary: var(--primary-color);
    --bs-body-bg: var(--bg-color);
    --bs-body-color: var(--text-color);
}

/* 3. 🔵 Blue Gradient */
[data-bs-theme="blue-grad"],
.theme-blue-grad {
    --primary-color: #0b4a7d;
    --bg-color: #f8f9fc;
    --sidebar-bg: linear-gradient(to bottom, #062a4d 0%, #106fbb 100%);
    --sidebar-active-border: color-mix(in srgb, #062a4d 50%, white);
    --text-color: #333333;
    --sidebar-text-color: rgba(255, 255, 255, 0.9);
    --border-color: rgba(255, 255, 255, 0.1);
    --input-bg: #ffffff;
    --input-text: #000000;
    --hover-color: rgba(255, 255, 255, 0.2);
    --sidebar-icon-color: #6bb9f0;

    --bs-primary: var(--primary-color);
    --bs-body-bg: var(--bg-color);
    --bs-body-color: var(--text-color);
}

/* 4. 🟢 Green Gradient */
[data-bs-theme="green-grad"],
.theme-green-grad {
    --primary-color: #0b5e40;
    --bg-color: #f8f9fc;
    --sidebar-bg: linear-gradient(to bottom, #053b26 0%, #128f63 100%);
    --sidebar-active-border: color-mix(in srgb, #053b26 50%, white);
    --text-color: #333333;
    --sidebar-text-color: rgba(255, 255, 255, 0.9);
    --border-color: rgba(255, 255, 255, 0.1);
    --input-bg: #ffffff;
    --input-text: #000000;
    --hover-color: rgba(255, 255, 255, 0.2);
    --sidebar-icon-color: #8be0b6;

    --bs-primary: var(--primary-color);
    --bs-body-bg: var(--bg-color);
    --bs-body-color: var(--text-color);
}

/* 5. 🔴 Red Gradient */
[data-bs-theme="red-grad"],
.theme-red-grad {
    --primary-color: #7d1515;
    --bg-color: #f8f9fc;
    --sidebar-bg: linear-gradient(to bottom, #500b0b 0%, #ba2828 100%);
    --sidebar-active-border: color-mix(in srgb, #500b0b 50%, white);
    --text-color: #333333;
    --sidebar-text-color: rgba(255, 255, 255, 0.9);
    --border-color: rgba(255, 255, 255, 0.1);
    --input-bg: #ffffff;
    --input-text: #000000;
    --hover-color: rgba(255, 255, 255, 0.2);
    --sidebar-icon-color: #ff8e8e;

    --bs-primary: var(--primary-color);
    --bs-body-bg: var(--bg-color);
    --bs-body-color: var(--text-color);
}

/* 6. 🟣 Purple Gradient */
[data-bs-theme="purple-grad"],
.theme-purple-grad {
    --primary-color: #6a11cb;
    --bg-color: #f8f9fc;
    --sidebar-bg: linear-gradient(to bottom, #440b85 0%, #a229a2 100%);
    --sidebar-active-border: color-mix(in srgb, #440b85 50%, white);
    --text-color: #333333;
    --sidebar-text-color: rgba(255, 255, 255, 0.9);
    --border-color: rgba(255, 255, 255, 0.1);
    --input-bg: #ffffff;
    --input-text: #000000;
    --hover-color: rgba(255, 255, 255, 0.2);
    --sidebar-icon-color: #d18ff0;

    --bs-primary: var(--primary-color);
    --bs-body-bg: var(--bg-color);
    --bs-body-color: var(--text-color);
}

/* 7. 🟠 Orange Gradient */
[data-bs-theme="orange-grad"],
.theme-orange-grad {
    --primary-color: #ba470c;
    --bg-color: #f8f9fc;
    --sidebar-bg: linear-gradient(to bottom, #802e04 0%, #ef6a1c 100%);
    --sidebar-active-border: color-mix(in srgb, #802e04 50%, white);
    --text-color: #333333;
    --sidebar-text-color: rgba(255, 255, 255, 0.9);
    --border-color: rgba(255, 255, 255, 0.1);
    --input-bg: #ffffff;
    --input-text: #000000;
    --hover-color: rgba(255, 255, 255, 0.2);
    --sidebar-icon-color: #ffb085;

    --bs-primary: var(--primary-color);
    --bs-body-bg: var(--bg-color);
    --bs-body-color: var(--text-color);
}

/* 8. 🟡 Dark Yellow Gradient */
[data-bs-theme="yellow-grad"],
.theme-yellow-grad {
    --primary-color: #9c8405;
    --bg-color: #f8f9fc;
    --sidebar-bg: linear-gradient(to bottom, #635301 0%, #cfb319 100%);
    --sidebar-active-border: color-mix(in srgb, #635301 50%, white);
    --text-color: #333333;
    --sidebar-text-color: rgba(255, 255, 255, 0.9);
    --border-color: rgba(255, 255, 255, 0.1);
    --input-bg: #ffffff;
    --input-text: #000000;
    --hover-color: rgba(255, 255, 255, 0.2);
    --sidebar-icon-color: #ffed8a;

    --bs-primary: var(--primary-color);
    --bs-body-bg: var(--bg-color);
    --bs-body-color: var(--text-color);
}

/* =========================================================================
   Zeno Style Sidebar & Accordion (Minimize, Badges, Single Open)
   ========================================================================= */

/* 범주 라벨 (GENERAL 등) */
.sidebar-category-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sidebar-text-color, var(--text-color));
    opacity: 0.5;
    letter-spacing: 1px;
    padding: 1rem 1.5rem 0.5rem 1.5rem;
    margin-top: 5px;
}

/* 폴더 헤더 공통 스타일 */
.zeno-folder .folder-header {
    cursor: pointer;
    padding: 0.8rem 1rem;
    position: relative;
    border-left: 5px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.75;
}

.zeno-folder .folder-header:hover {
    background-color: var(--hover-color) !important;
    opacity: 1;
}

/* 활성화된 폴더(열림 상태) */
.zeno-folder:not(.is-collapsed) .folder-header {
    opacity: 1;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.05);
    /* 은은한 배경 강조 */
    border-left-color: var(--bs-primary);
    /* 포인트 보더 (왼쪽 기준) */
}

/* 우측 화살표 (Chevron) 애니메이션 */
.zeno-chevron {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.zeno-folder:not(.is-collapsed) .zeno-chevron {
    transform: rotate(90deg);
}

/* 하위 노트(Sub Menu) 리스트 */
.note-list-item {
    position: relative;
    padding: 0.7rem 1.0rem 0.7rem 1.2rem !important;
    margin-right: 15px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: transparent !important;
    border-left: 3px solid transparent;
    opacity: 0.75;
}

.note-list-item:hover {
    background-color: var(--hover-color) !important;
    opacity: 1;
}

.note-list-item.active {
    font-weight: bold;
    opacity: 1;
    margin-right: -10px;
    /* width explicitly removed to prevent scrollbar pushing */
    color: inherit !important;
    border-left-color: var(--bs-primary);
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
}

/* 돌출 탭 배경 물리적 채우기 (투명도가 있으면 우측 하얀 캔버스와 겹칠 때 투명해지므로 단색/고정 배경 렌더링) */
body[data-bs-theme] .note-list-item.active {
    background-color: var(--hover-color) !important;
}

/* 🌈 그라데이션 테마 스페셜 보정 */
[data-bs-theme$="-grad"] .note-list-item.active {
    /* 튀어나온 부분이 하얗게 날아가지 않도록, 사이드바와 똑같은 그라데이션을 부여하되 viewport에 고정(fixed)시켜 색상을 완벽 일치시킴 */
    background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), var(--sidebar-bg) !important;
    background-attachment: scroll, fixed !important;
    background-size: 100% 100%, 100% 100vh !important;
    background-color: transparent !important;
}

.zeno-note-icon {
    font-size: 0.45rem;
    /* 아주 작은 원형 아이콘 */
    transform: translateY(-2px);
    display: inline-block;
}

.note-list-item.active .zeno-note-icon {
    color: var(--bs-primary) !important;
}

/* 툴바 호버 액션 (삭제, 설정 등은 호버 시에만 보이게) */
.note-action-icons {
    opacity: 0;
    transition: opacity 0.2s;
}

.note-list-item:hover .note-action-icons,
.zeno-folder .folder-header:hover .folder-settings-btn,
.zeno-folder .folder-header:hover .folder-delete-sidebar-btn {
    opacity: 1;
}

/* =========================================================================
   Sidebar Collapse (Minimize) Mode
   ========================================================================= */
.sidebar {
    transition: width 0.3s ease;
    width: 280px;
    overflow-x: visible;
}

body.sidebar-collapsed .sidebar {
    width: 20px;
    /* 10px보다 더 얇게 6px 선처럼 보이게 함 */
    z-index: 9999;
    position: relative;
}

body.sidebar-collapsed .sidebar:hover {
    width: 280px;
    /* box-shadow removed to test if it creates the white line */
}

/* 텍스트 요소들 숨기기 */
body.sidebar-collapsed .sidebar:not(:hover) .sidebar-brand-text,
body.sidebar-collapsed .sidebar:not(:hover) .sidebar-category-label,
body.sidebar-collapsed .sidebar:not(:hover) .folder-title-text,
body.sidebar-collapsed .sidebar:not(:hover) .folder-note-count,
body.sidebar-collapsed .sidebar:not(:hover) .zeno-chevron,
body.sidebar-collapsed .sidebar:not(:hover) .note-list-item-title,
body.sidebar-collapsed .sidebar:not(:hover) .folder-settings-btn,
body.sidebar-collapsed .sidebar:not(:hover) .folder-delete-sidebar-btn,
body.sidebar-collapsed .sidebar:not(:hover) .note-action-icons {
    display: none !important;
}

/* 들여쓰기 롤백 (아이콘만 보이게 중앙 정렬) */
body.sidebar-collapsed .sidebar:not(:hover) .zeno-folder .folder-header {
    padding: 1rem 0;
    justify-content: center !important;
}

body.sidebar-collapsed .sidebar:not(:hover) .zeno-folder .folder-main-icon {
    margin: 0 !important;
    font-size: 1.3rem;
}

body.sidebar-collapsed .sidebar:not(:hover) .note-list-item {
    position: relative;
    padding: 0.7rem 1.0rem 0.7rem 2.8rem !important;
    margin-right: 15px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: transparent !important;
    border-left: 3px solid transparent;
    opacity: 0.75;
}

body.sidebar-collapsed .sidebar:not(:hover) .zeno-note-icon {
    margin: 0 !important;
    font-size: 0.8rem;
}

/* 로고 영역 재정렬 */
body.sidebar-collapsed .sidebar:not(:hover) .sidebar-header {
    justify-content: center !important;
    flex-direction: column;
}

body.sidebar-collapsed .sidebar:not(:hover) #btnToggleSidebar {
    margin: 10px auto 0 auto !important;
}

/* =========================================================================
   Custom Context Menu (Sidebar Right-click)
   ========================================================================= */
#customContextMenu {
    border-radius: 8px;
    padding: 0.5rem 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    background-color: var(--sidebar-bg, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

#customContextMenu .dropdown-item {
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--text-color, #333);
}

#customContextMenu .dropdown-item:hover {
    background-color: var(--hover-color, rgba(0, 0, 0, 0.05));
    color: var(--bs-primary);
}

#customContextMenu .dropdown-item.text-danger:hover {
    color: var(--bs-danger) !important;
}


/* 사이드바 스크롤바 트랙/썸 배경 투명화 (튀어나오는 흰색 선 완벽 제거) */
.sidebar .simplebar-track,
.sidebar .simplebar-scrollbar {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.sidebar .simplebar-scrollbar:before {
    opacity: 0 !important;
}


/* 사이드바 우측 튀어나오는 스크롤바 잔여물 완벽 제거 (Windows 17px 스크롤바 버그 패치) */
.sidebar {
    scrollbar-width: none;
    /* Firefox */
}

.sidebar ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

.sidebar .simplebar-track,
.sidebar .simplebar-track.simplebar-vertical {
    display: none !important;
    width: 0 !important;
    background: transparent !important;
}



/* Simplebar 0px offset 강제 유도 (overflow-x: visible 상태에서 Windows 네이티브 스크롤바 17px 밀림 현상 방지) */
.simplebar-content-wrapper::-webkit-scrollbar,
.app-sidebar-body::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
}

.simplebar-content-wrapper,
.app-sidebar-body {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}


/* 폴더명 길이에 의한 사이드바 컨테이너 가로 늘어남(레이아웃 붕괴) 방지 */
.folder-title-text,
.note-list-item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.zeno-folder .folder-header {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}