/* 主題色定義 */
:root {
    --primary-color: #2F3944;
    --secondary-color: #84754E;
    --accent-color: #996A4E;
    --light-accent: #C69B80;
    --sidebar-bg: var(--primary-color);
    --sidebar-section: #e5e5e5;
    --sidebar-hover-bg: var(--accent-color);
    --sidebar-hover-text: #FCF9EA;
    --topnav-bg: #0f1a24;
}

/* 頂部 navbar 高度 */
body {
    padding-top: 64px;
    background: var(--primary-color);
}

/* Sidebar 佈局 */
.sidebar-nav, .sjx-sidebar-nav {
    position: fixed;
    top: 64px;
    left: 0;
    width: 230px;
    height: 100vh;
    background: var(--sidebar-bg);
    z-index: 1030;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(47,57,68,0.04);
}

/* Sidebar 連結樣式 */
.sidebar-nav .nav-link, .sjx-sidebar-link {
    color: var(--accent-color);
    padding: 0.75rem 1.5rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.7em;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    font-weight: 600;
}
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active, .sjx-sidebar-link:hover, .sjx-sidebar-link.active {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
}

/* Sidebar 區塊標題 */
.sidebar-section, .sjx-sidebar-section {
    letter-spacing: 1px;
    font-size: 0.93em;
    margin-top: 1.2em;
    margin-bottom: 0.3em;
    color: var(--light-accent);
    font-weight: 700;
}

/* Sidebar 連結樣式 */
.sjx-sidebar-link {
    color: var(--light-accent) !important;
    padding: 0.65rem 1.3rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.7em;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    font-weight: 600;
    background: none;
    border: none;
}
.sjx-sidebar-link:hover,
.sjx-sidebar-link.active,
.sjx-sidebar-link:focus {
    background: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-hover-text) !important;
    text-decoration: none;
}

/* Sidebar 區塊標題 */
.sjx-sidebar-section {
    letter-spacing: 1px;
    font-size: 0.8em;          /* 標題更小 */
    margin-top: 0.5em;
    margin-bottom: 0.1em;
    color: var(--sidebar-hover-text);
    font-weight: 700;
}

/* Sidebar 佈局 */
.sjx-sidebar-nav {
    position: fixed;
    top: 64px; /* 讓 sidebar 從最上方開始 */
    left: 0;
    width: 230px;
    height: 100vh; /* 滿高 */
    background: var(--sidebar-bg);
    z-index: 1020; /* 比 topnav 低一點 */
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(47,57,68,0.04);
}

/* 主內容區域左側留白，避免被 sidebar 遮住 */
.body.container {
    margin-left: 230px;
    transition: margin-left 0.2s;
}

.nav-link:hover{
    color: var(--sidebar-hover-text) !important;
}

/* 收合狀態 sidebar */
.sjx-sidebar-nav.sjx-sidebar-collapsed {
    width: 64px;
    min-width: 64px;
    transition: width 0.2s;
}
.sjx-sidebar-nav.sjx-sidebar-collapsed .sjx-sidebar-section,
.sjx-sidebar-nav.sjx-sidebar-collapsed .sjx-sidebar-link span {
    display: none !important;
}
.sjx-sidebar-nav.sjx-sidebar-collapsed .sjx-sidebar-link {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.sjx-sidebar-nav .sjx-sidebar-link i {
    font-size: 1.35em;
}

/* 讓主內容自動縮進 */
.body.container {
    margin-left: 230px;
    transition: margin-left 0.2s;
}
.sjx-sidebar-nav.sjx-sidebar-collapsed ~ .body.container {
    margin-left: 64px;
}

/* 響應式：小螢幕隱藏 sidebar，主內容回歸 */
@media (max-width: 991px) {
    .sjx-sidebar-nav {
        left: -230px;
        width: 230px;
    }
    .sjx-sidebar-nav.sjx-sidebar-open {
        left: 0;
    }
    .body.container,
    .sjx-sidebar-nav.sjx-sidebar-collapsed ~ .body.container {
        margin-left: 0;
    }
    /* 可選：加個遮罩 */
    .sjx-sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(47,57,68,0.35);
        z-index: 1019;
    }
    .sjx-sidebar-backdrop.active {
        display: block;
    }
    /* topnav logo縮小 */
    .navbar-brand img {
        width: 100px;
    }
}

/* 手機下 topnav 右側加個 sidebar 開關按鈕 */
.sjx-sidebar-toggle {
    display: inline-block;
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 2rem;
    margin-left: 1rem;
    cursor: pointer;
    vertical-align: middle;
}
@media (max-width: 991px) {
    .sjx-sidebar-toggle {
        display: block;
    }
}

/* 頂部 navbar 樣式 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--topnav-bg) !important;
    box-shadow: 0 2px 8px rgba(47,57,68,0.04);
    z-index: 1030; /* 比 sidebar 高 */
}
.navbar-brand img {
    filter: drop-shadow(0 2px 8px rgba(47,57,68,0.08));
}

/* 讓 topbar 和 sidebar 左側齊平 */
.navbar .container-fluid {
    padding-left: 0 !important;
}

.navbar-brand {
    margin-left: 0 !important;
    padding-left: 1.3rem; /* 與 sidebar 內文一致 */
    display: flex;
    align-items: center;
}

/* 其他自訂樣式 */
.sjx-sidebar-link,
.sjx-sidebar-link:hover,
.sjx-sidebar-link:focus,
.sjx-sidebar-link.active {
    text-decoration: none !important;
}
.sjx-sidebar-link.active {
    background: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-hover-text) !important;
    border-left: 4px solid var(--accent-color);
    font-weight: 700;
}

/* Dropdown menu styles */
.dropdown-menu {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(47,57,68,0.13);
    border: none;
    padding: 0.5rem 0;
    min-width: 180px;
    background: #fff;
    font-size: 1rem;
    margin-top: 0.7rem !important;
}

.dropdown-menu .dropdown-item {
    color: #2F3944;
    padding: 0.7rem 1.3rem;
    border-radius: 8px;
    transition: background 0.18s, color 0.18s;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.7em;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: #F5E9DD;
    color: #996A4E;
}

.dropdown-menu .dropdown-divider {
    margin: 0.3rem 0;
    border-top: 1px solid #eee;
}

/* Dropdown arrow icon spacing */
.dropdown-menu .bi {
    margin-right: 0.6em;
    font-size: 1.1em;
    opacity: 0.85;
}

/* Optional: active item style */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background: #C69B80;
    color: #fff;
}