/*
 * 優化版 sidebar.css
 * 配合 sidebar.js 實現完美導航體驗
 * 包含桌面版與移動端全面支持
 */

/* 引入字體 */
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap');

/* ================ 基本樣式 ================ */
body {
    font-family: 'LXGW WenKai TC', cursive;
    background: #f7eded;
    color: #e6f0ff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

i {
    margin-right: 10px;
}

/* ================ 導航欄主要樣式 ================ */
.navbar-mainbg {
    background: linear-gradient(90deg, #0f2027 0%, #2c5364 100%);
    box-shadow: 0 4px 24px 0 rgba(44,83,100,0.18);
    border-radius: 0 0 24px 24px;
    padding: 0.5rem 2rem;
    transition: background 0.4s, box-shadow 0.4s;
    position: relative;
    z-index: 1030;
}

.navbar-logo {
    padding: 15px;
    font-family: 'LXGW WenKai TC', 'Noto Sans TC', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: #fff !important;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px #1a1a1a;
    transition: color 0.3s;
}

    .navbar-logo:hover {
        color: #00d4ff !important; /* 科技感藍色 */
    }

.lxgw-wenkai-tc-regular {
    font-family: "LXGW WenKai TC", cursive;
    font-weight: 400;
    font-style: normal;
}

/* ================ 漢堡按鈕樣式 ================ */
.navbar-toggler {
    border: none;
    background: transparent !important;
    outline: none;
    color: #fff;
    font-size: 2rem;
    box-shadow: none !important;
    padding: 10px;
    cursor: pointer;
}

    .navbar-toggler:focus,
    .navbar-toggler:hover {
        outline: none;
        box-shadow: 0 0 0 2px #4fc3f7 !important;
    }

    .navbar-toggler .fa-bars.text-white {
        color: #fff !important;
    }

/* ================ 選單容器與項目 ================ */
#navbarSupportedContent,
.collapse.navbar-collapse {
    overflow: visible !important;
    position: relative;
}

    #navbarSupportedContent ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    #navbarSupportedContent li {
        list-style-type: none;
        float: left;
        position: relative;
    }

    #navbarSupportedContent ul li a i {
        margin-right: 10px;
        transition: transform 0.25s cubic-bezier(.68,-0.55,.27,1.55), color 0.2s;
        min-width: 16px;
    }

    /* 選單項目基本樣式 */
    #navbarSupportedContent ul li a {
        color: #00d4ff; /* 科技感藍色 */
        text-decoration: none;
        font-size: 15px;
        display: block;
        padding: 20px !important;
        padding-right: 50px !important; /* 讓文字與箭頭有距離 */
        transition: color 0.3s, background 0.3s;
        position: relative;
        user-select: none;
    }

    #navbarSupportedContent > ul > li.active > a {
        color: #00ff99; /* 科技感綠色 */
        background-color: transparent;
    }

    /* 下拉箭頭樣式 */
    #navbarSupportedContent a:not(:only-child):after {
        content: "\f105";
        position: absolute;
        right: 20px;
        top: 18px;
        font-size: 14px;
        font-family: "Font Awesome 5 Free";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight: 900;
        transition: 0.5s;
    }

    #navbarSupportedContent .active > a:not(:only-child):after {
        transform: rotate(90deg);
    }

/* 隱藏JS動畫選擇器 */
.hori-selector {
    display: none !important;
}

/* ================ 導航欄元素樣式 ================ */
.navbar-nav {
    align-items: center;
    width: 100%;
    justify-content: flex-end;
    gap: 0.5rem;
}

.nav-item {
    position: relative;
    margin: 0 0.3rem;
}

.nav-link {
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.7rem 1.2rem !important;
    border-radius: 16px;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s;
    box-shadow: 0 2px 8px 0 rgba(44,83,100,0.08);
    display: flex;
    align-items: center;
    gap: 0.5em;
}

    .nav-link:hover,
    .nav-item.active > .nav-link,
    .nav-link:focus {
        background: linear-gradient(90deg, #4fc3f7 0%, #f44708 100%);
        color: #fff !important;
        box-shadow: 0 4px 16px 0 rgba(244,71,8,0.18);
        text-shadow: 0 2px 8px #1a1a1a;
    }

/* ================ 下拉選單樣式 ================ */
.dropdown-menu {
    background-color: #1e1e1e;
    border: 1px solid #333;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    min-width: 220px;
    padding: 10px 0;
    animation: dropdownSlide 0.3s ease forwards;
    transform-origin: top center;
    font-family: 'LXGW WenKai TC', cursive;
    z-index: 999;
    width: 240px !important;
    min-width: 240px !important;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    color: #00d4ff;
    padding: 10px 20px;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    width: 100% !important;
    box-sizing: border-box;
    border-radius: 12px;
    margin: .2rem 0 !important;
}

    .dropdown-item i {
        margin-right: 10px;
        min-width: 16px;
    }

    .dropdown-item:hover {
        background-color: #333;
        color: #00ff99;
    }

/* 固定下拉浮層對齊左側並緊貼父項 */
.navbar-nav .nav-item {
    position: relative;
}

.navbar-nav .dropdown-menu {
    position: absolute !important;
    top: 100%;
    left: 0 !important;
    margin-top: .5rem !important;
    z-index: 2000 !important;
    width: 240px !important;
    box-sizing: border-box;
}

#navbarSupportedContent .dropdown-menu .dropdown-item {
    border-radius: 12px;
    margin: 4px 8px;
}

/* ================ 圖標動畫效果 ================ */
.nav-link i,
.dropdown-item i {
    transition: transform 0.25s cubic-bezier(.68,-0.55,.27,1.55), color 0.2s;
}

.nav-link:hover i,
.nav-item.active > .nav-link i,
.dropdown-item:hover i {
    transform: scale(1.2) rotate(-10deg);
    color: #ffe082;
}

/* ================ 特殊按鈕樣式 ================ */
/* 登入/登出按鈕特效 */
.nav-link.text-warning,
.nav-link.text-danger {
    font-weight: bold;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #f44708 0%, #ffb347 100%);
    color: #fff !important;
    border-radius: 16px;
    box-shadow: 0 2px 8px 0 rgba(244,71,8,0.18);
    transition: background 0.3s, color 0.3s;
}

    .nav-link.text-warning:hover,
    .nav-link.text-danger:hover {
        background: linear-gradient(90deg, #ffb347 0%, #f44708 100%);
        color: #fff !important;
    }

/* 管理介面按鈕特效 */
.nav-link[href*="Admin"] {
    background: linear-gradient(90deg, #232526 0%, #4fc3f7 100%);
    color: #fff !important;
    border-radius: 16px;
    font-weight: bold;
    transition: background 0.3s, color 0.3s;
}

    .nav-link[href*="Admin"]:hover {
        background: linear-gradient(90deg, #4fc3f7 0%, #232526 100%);
        color: #fff !important;
    }

/* 修正下拉箭頭顏色 */
.navbar-nav .nav-item .dropdown-toggle::after {
    border-top-color: #fff;
}

/* ================ 響應式設計 ================ */
/* 桌面版設定 */
@media(min-width: 992px) {
    .navbar-expand-custom {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

        .navbar-expand-custom .navbar-nav {
            -ms-flex-direction: row;
            flex-direction: row;
        }

        .navbar-expand-custom .navbar-toggler {
            display: none;
        }

        .navbar-expand-custom .navbar-collapse {
            display: -ms-flexbox !important;
            display: flex !important;
            flex-basis: auto;
        }
}

/* 小型螢幕調整 */
@media (max-width: 575.98px) {
    .navbar-logo {
        font-size: 1.3rem;
        padding: 0.2rem 0;
    }

    .navbar-mainbg {
        padding: 0.3rem 0.5rem;
    }

    .nav-link {
        font-size: 1rem;
        padding: 0.8rem 1rem !important;
    }

    .dropdown-item {
        font-size: 0.98rem;
        padding: 0.7rem 1.1rem;
    }
}

/* ================ 手機與平板設備 - 漢堡選單樣式 ================ */
/* 手機版強制修復 - 重要！ */
@media (max-width: 991px) {
    /* 確保下拉選單正確顯示 */
    .navbar-nav .dropdown-menu {
        display: none !important; /* 預設隱藏 */
    }

        .navbar-nav .dropdown-menu.show {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: static !important;
            float: none !important;
            width: 100% !important;
            margin: 0 !important;
            transform: none !important;
            border: none !important;
            background-color: rgba(35, 37, 38, 0.95) !important;
            box-shadow: none !important;
            max-height: 1000px !important; /* 確保足夠高度顯示所有內容 */
            overflow: visible !important;
            transition: none !important;
            animation: none !important;
            left: auto !important;
            right: auto !important;
            padding: 8px 0 !important;
            margin-left: 20px !important;
            border-left: 2px solid rgba(0, 212, 255, 0.3) !important;
        }

    /* 確保選單項可點擊 */
    .navbar-nav .nav-item > a {
        pointer-events: auto !important;
        cursor: pointer !important;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

        /* 提高點擊區域大小 */
        .navbar-nav .nav-item > a.dropdown-toggle {
            padding: 15px 30px !important;
        }

    /* 防止選單被其他元素覆蓋 */
    .navbar-collapse.show {
        z-index: 9999 !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 60px) !important;
    }

        /* 修復選單展開不完整問題 */
        .navbar-collapse.show .navbar-nav {
            padding-bottom: 50px !important;
        }
}