/* InstaLedger 後台管理系統 首頁樣式 */

/* 登入頁面樣式 */
#login-container {
    background: var(--gradient-tertiary);
}

#login-container .bg-white {
    transition: all 0.3s ease;
}

#login-container .bg-white:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-5px);
}

/* 主頁面樣式 */
#content-frame {
    background-color: var(--page-bg-secondary);
    border-radius: 0.5rem;
    box-shadow: var(--card-shadow);
}

/* 登入模式：保留 index 框架，但讓 iframe 顯示登入頁 */
#main-container.login-mode #sidebar {
    display: none;
}

#main-container.login-mode header {
    display: none;
}

#main-container.login-mode main {
    height: 100vh;
}

/* 側邊欄樣式 */
#sidebar {
    background: var(--admin-sidebar-bg);
}

/* 側邊欄滾動樣式 */
#sidebar nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

#sidebar nav::-webkit-scrollbar {
    width: 6px;
}

#sidebar nav::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

#sidebar nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

/* 折疊選單樣式 */
.menu-group-header {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.menu-group-header .chevron-icon {
    transition: transform 0.2s ease;
    font-size: 0.875rem;
}

.menu-group-header.expanded .chevron-icon {
    transform: rotate(90deg);
}

.menu-group-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.menu-group-content.expanded {
    max-height: 500px; /* 足夠大的值來容納所有子項目 */
}

.menu-sub-item {
    padding-left: 3rem; /* 增加左邊距以顯示層級 */
    background-color: var(--sidebar-submenu-bg);
}

.menu-sub-item:hover {
    background-color: var(--sidebar-submenu-hover);
}

/* 側邊欄切換動畫 */
#sidebar {
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
}

/* 桌面版側邊欄 */
@media (min-width: 1024px) {
    #main-container {
        transition: all 0.3s ease-in-out;
    }

    /* 確保側邊欄正常顯示 */
    #sidebar {
        position: relative !important;
        transform: translateX(0) !important;
        width: 16rem !important; /* w-64 = 256px = 16rem */
        flex-shrink: 0 !important;
        height: 100vh !important;
        z-index: auto !important;
    }

    /* 側邊欄隱藏狀態 */
    #main-container.sidebar-hidden #sidebar {
        transform: translateX(-100%) !important;
        margin-left: -16rem !important; /* 負邊距讓主內容區域展開 */
    }

    /* 主內容區域調整 */
    #main-container > .flex-1 {
        transition: all 0.3s ease-in-out;
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }

    /* 桌面版切換按鈕 */
    #sidebar-toggle {
        display: block !important;
    }
}

/* 手機版側邊欄 */
@media (max-width: 1023px) {
    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 16rem !important;
        transform: translateX(-100%) !important;
        z-index: 1000 !important;
        margin-left: 0 !important;
    }

    #sidebar.show {
        transform: translateX(0) !important;
    }

    /* 重置桌面版樣式 */
    #main-container.sidebar-hidden #sidebar {
        transform: translateX(-100%) !important;
        margin-left: 0 !important;
    }

    #main-container > .flex-1 {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }

    /* 遮罩層 */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
    }

    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    #content-frame {
        height: calc(100vh - 4rem);
    }
}

/* 切換按鈕樣式 */
#sidebar-toggle {
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
}

#sidebar-toggle:hover {
    background-color: var(--color-primary-100);
    color: var(--color-primary-600);
}

#sidebar-toggle i {
    transition: transform 0.2s ease-in-out;
}

#sidebar-toggle.active i {
    transform: rotate(90deg);
}

/* 響應式設計 */
@media (max-width: 768px) {
    #content-frame {
        height: calc(100vh - 4rem);
    }
}