/**
 * 企業級頂部導航樣式 - 輕量簡潔版本
 * Enterprise Top Navigation Styling - Lightweight Clean Version
 * 
 * 設計理念:
 * - 政府機關/銀行內部系統風格
 * - 零動畫效果，專注功能性
 * - 輕薄設計，不厚重
 * - 高對比度，最佳可讀性
 * - 僅基本功能性互動效果
 */

/* ===== 主要導航容器樣式 ===== */
.sb-topnav {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E0E0E0 !important;
    min-height: 56px !important; /* 輕量化高度 */
    padding: 0 1rem !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    box-shadow: none !important; /* 移除所有陰影 */
    display: flex !important;
    align-items: center !important; /* 垂直置中對齊 */
}

/* 移除滾動時的效果 */
.sb-topnav.scrolled {
    box-shadow: none !important;
    border-bottom: 1px solid #E0E0E0 !important;
}

/* ===== Logo 純圖片樣式 ===== */
.sb-topnav .navbar-logo {
    height: 36px !important; /* Logo 高度 */
    width: auto !important; /* 自動寬度保持比例 */
    object-fit: contain !important; /* 保持圖片比例 */
    margin-right: 2rem !important; /* 與側邊欄按鈕的間距 */
    margin-left: 1rem !important; /* 左側邊距 */
    vertical-align: middle !important;
    filter: none !important;
    opacity: 1 !important;
}

/* ===== 側邊欄切換按鈕樣式 ===== */
#sidebarToggle {
    background-color: #F8F9FA !important;
    border: 1px solid #E0E0E0 !important;
    color: #495057 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 4px !important; /* 簡單圓角 */
    font-size: 1rem !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 1rem !important; /* 與其他元素的間距 */
}

/* 簡單hover效果 - 僅背景色變化 */
#sidebarToggle:hover {
    background-color: #E9ECEF !important;
    border-color: #D0D0D0 !important;
    color: #495057 !important; /* 保持文字色不變 */
    transform: none !important; /* 移除位移 */
    box-shadow: none !important; /* 移除陰影 */
}

#sidebarToggle:focus {
    outline: 2px solid #0085CA !important;
    outline-offset: 2px !important;
    box-shadow: none !important; /* 移除陰影 */
}

#sidebarToggle:active {
    transform: none !important; /* 移除按下效果 */
    box-shadow: none !important;
    background-color: #DEE2E6 !important;
}

/* 移除圖標動畫 */
#sidebarToggle i {
    transform: none !important;
}

#sidebarToggle:hover i {
    transform: none !important; /* 移除旋轉效果 */
}

/* ===== 導航項目基本樣式 ===== */
.sb-topnav .navbar-nav {
    align-items: center !important;
    gap: 0.5rem !important;
}

.sb-topnav .nav-item {
    display: flex !important;
    align-items: center !important;
}

.sb-topnav .nav-link {
    color: #495057 !important;
    padding: 0.6rem 0.8rem !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
}

/* 簡化hover效果 */
.sb-topnav .nav-link:hover {
    color: #495057 !important;
    background-color: #F8F9FA !important; /* 僅淺背景變化 */
    border-color: #E0E0E0 !important;
    transform: none !important; /* 移除位移 */
}

.sb-topnav .nav-link:focus {
    outline: 2px solid #0085CA !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.sb-topnav .nav-link:active {
    transform: none !important;
    background-color: #E9ECEF !important;
}

/* ===== 按鈕樣式 (統一所有按鈕) ===== */
.sb-topnav .btn {
    color: #495057 !important;
    background-color: #F8F9FA !important;
    border: 1px solid #E0E0E0 !important;
    padding: 0.5rem 0.8rem !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

/* 簡化按鈕hover效果 */
.sb-topnav .btn:hover {
    color: #495057 !important;
    background-color: #E9ECEF !important;
    border-color: #D0D0D0 !important;
    transform: none !important; /* 移除位移 */
    box-shadow: none !important; /* 移除陰影 */
}

.sb-topnav .btn:focus {
    outline: 2px solid #0085CA !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.sb-topnav .btn:active {
    transform: none !important;
    box-shadow: none !important;
    background-color: #DEE2E6 !important;
}

/* ===== 按鈕連結特殊樣式 ===== */
.sb-topnav .btn-link {
    color: #495057 !important;
    border: 1px solid transparent !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

.sb-topnav .btn-link:hover {
    color: #495057 !important;
    background-color: #F8F9FA !important;
    border-color: #E0E0E0 !important;
    text-decoration: none !important;
}

.sb-topnav .btn-link:focus {
    color: #495057 !important;
    text-decoration: none !important;
    outline: 2px solid #0085CA !important;
    outline-offset: 2px !important;
}

/* ===== 主頁按鈕特殊樣式 ===== */
.sb-topnav a[href="/"] {
    color: #495057 !important;
    background-color: #F8F9FA !important;
    border: 1px solid #E0E0E0 !important;
    padding: 0.5rem 0.8rem !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0.75rem !important; /* 右側間距 */
}

.sb-topnav a[href="/"]:hover {
    color: #495057 !important;
    background-color: #E9ECEF !important;
    border-color: #D0D0D0 !important;
    transform: none !important; /* 移除位移 */
    box-shadow: none !important; /* 移除陰影 */
}

/* ===== 移除所有圖示動畫 ===== */
.sb-topnav i,
.sb-topnav .fa,
.sb-topnav .fas,
.sb-topnav .far,
.sb-topnav .fab {
    transform: none !important; /* 固定不動 */
}

/* ===== 導航列表樣式 ===== */
.sb-topnav .navbar-nav {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important; /* 推到右側 */
    gap: 0.5rem !important; /* 元素之間的間距 */
}

.sb-topnav .navbar-nav .nav-item {
    display: flex !important;
    align-items: center !important;
}

/* ===== 語言切換器樣式 ===== */
#global-language-switcher {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 0.5rem !important; /* 調整間距 */
}

#global-language-switcher .el-button {
    background-color: transparent !important;
    border: 1px solid #E0E0E0 !important;
    color: #495057 !important;
    padding: 0.5rem 1rem !important;
    height: 42px !important;
    font-size: 0.9rem !important;
}

#global-language-switcher .el-button:hover {
    background-color: #F8F9FA !important;
    border-color: #D0D0D0 !important;
    color: #495057 !important;
}

#global-language-switcher .el-button:focus {
    outline: 2px solid #0085CA !important;
    outline-offset: 2px !important;
}

/* 語言旗幟和文字間距 */
#global-language-switcher .language-flag {
    margin-right: 6px !important;
    font-size: 1.1rem !important;
}

#global-language-switcher .language-name {
    font-weight: 500 !important;
}

/* 下拉選單樣式 */
.el-dropdown-menu {
    border: 1px solid #E0E0E0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.el-dropdown-menu__item {
    color: #495057 !important;
    padding: 0.75rem 1rem !important;
}

.el-dropdown-menu__item:hover {
    background-color: #F8F9FA !important;
    color: #0085CA !important;
}

.el-dropdown-menu__item.is-active {
    color: #0085CA !important;
    font-weight: 600 !important;
}

/* ===== 登出按鈕樣式 ===== */
.sb-topnav form button[type="submit"] {
    background-color: #F8F9FA !important;
    border: 1px solid #E0E0E0 !important;
    color: #495057 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px !important;
    font-size: 0.9rem !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.sb-topnav form button[type="submit"]:hover {
    background-color: #FFF5F5 !important;
    border-color: #DC3545 !important;
    color: #DC3545 !important;
}

/* ===== 使用者歡迎文字 ===== */
.sb-topnav .navbar-text {
    color: #495057 !important;
    margin-right: 0.75rem !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
}

.sb-topnav .btn:hover i,
.sb-topnav .btn:hover .fa,
.sb-topnav .btn:hover .fas,
.sb-topnav .btn:hover .far,
.sb-topnav .btn:hover .fab {
    transform: none !important; /* 移除所有縮放 */
}

/* ===== 搜尋表單樣式 ===== */
.sb-topnav .form-inline {
    margin-right: auto !important;
    max-width: 400px !important;
    flex-grow: 1 !important;
}

.sb-topnav .input-group {
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: none !important; /* 移除陰影 */
    width: 100% !important;
}

.sb-topnav .form-control {
    border: 1px solid #E0E0E0 !important;
    border-right: none !important;
    padding: 0.6rem 0.8rem !important;
    font-size: 0.9rem !important;
    color: #495057 !important;
    background-color: #FFFFFF !important;
    min-height: 42px !important;
}

.sb-topnav .form-control:focus {
    border-color: #0085CA !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: #FFFFFF !important;
}

.sb-topnav .form-control::placeholder {
    color: #ADB5BD !important;
    opacity: 1 !important;
}

.sb-topnav #btnNavbarSearch {
    background-color: #0085CA !important;
    border: 1px solid #0085CA !important;
    color: #FFFFFF !important;
    padding: 0.6rem 0.8rem !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sb-topnav #btnNavbarSearch:hover {
    background-color: #006FA3 !important;
    border-color: #006FA3 !important;
    transform: none !important; /* 移除縮放 */
    box-shadow: none !important; /* 移除陰影 */
}

.sb-topnav #btnNavbarSearch:active {
    transform: none !important;
    box-shadow: none !important;
}

/* ===== 語言切換器容器 ===== */
#global-language-switcher {
    margin-top: 0.2rem !important;
    margin-right: 1rem !important;
    display: flex !important;
    align-items: center !important;
}

/* Element Plus 按鈕樣式覆寫 - 企業風格 */
#global-language-switcher .el-button {
    color: #495057 !important;
    border-color: #E0E0E0 !important;
    background-color: #F8F9FA !important;
    min-height: 40px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    border-width: 1px !important;
    font-size: 0.85rem !important;
    padding: 0.4rem 0.7rem !important;
    box-shadow: none !important; /* 移除陰影 */
}

/* 簡化Element Plus按鈕hover效果 */
#global-language-switcher .el-button:hover {
    color: #495057 !important;
    border-color: #D0D0D0 !important;
    background-color: #E9ECEF !important;
    transform: none !important; /* 移除位移 */
    box-shadow: none !important; /* 移除陰影 */
}

#global-language-switcher .el-button:focus {
    color: #495057 !important;
    border-color: #0085CA !important;
    box-shadow: 0 0 0 2px rgba(0, 133, 202, 0.2) !important;
    outline: none !important;
}

#global-language-switcher .el-button:active {
    transform: none !important;
    background-color: #DEE2E6 !important;
}

/* Element Plus下拉選單樣式 */
.el-dropdown-menu {
    border: 1px solid #E0E0E0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    padding: 0.25rem 0 !important;
    min-width: 120px !important;
}

.el-dropdown-menu__item {
    color: #495057 !important;
    font-size: 0.85rem !important;
    padding: 0.5rem 0.8rem !important;
    line-height: 1.4 !important;
}

.el-dropdown-menu__item:hover {
    background-color: #F8F9FA !important;
    color: #495057 !important;
}

.el-dropdown-menu__item.is-active {
    background-color: #E7F3FF !important;
    color: #0085CA !important;
    font-weight: 600 !important;
}

/* ===== 響應式設計 ===== */
@media (max-width: 991.98px) {
    .sb-topnav {
        padding: 0 0.75rem !important;
        min-height: 52px !important;
    }
    
    .sb-topnav .navbar-brand {
        margin-right: 0.75rem !important;
        font-size: 1.1rem !important;
    }
    
    .sb-topnav .navbar-brand img {
        max-height: 40px !important;
    }
    
    #sidebarToggle {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.9rem !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    .sb-topnav .btn {
        padding: 0.4rem 0.7rem !important;
        font-size: 0.9rem !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    .sb-topnav .nav-link {
        padding: 0.5rem 0.7rem !important;
        min-height: 40px !important;
    }
    
    #global-language-switcher {
        margin-right: 0.5rem !important;
    }
    
    .sb-topnav .form-inline {
        max-width: 300px !important;
    }
    
    .sb-topnav .form-control {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.7rem !important;
    }
    
    .sb-topnav #btnNavbarSearch {
        padding: 0.5rem 0.7rem !important;
        min-width: 40px !important;
    }
}

@media (max-width: 767.98px) {
    .sb-topnav {
        padding: 0 0.5rem !important;
        min-height: 48px !important;
        flex-wrap: nowrap !important;
    }
    
    .sb-topnav .navbar-brand {
        margin-right: 0.5rem !important;
        font-size: 1rem !important;
        padding: 0.2rem 0.4rem !important;
    }
    
    .sb-topnav .navbar-brand img {
        max-height: 36px !important;
    }
    
    #sidebarToggle {
        padding: 0.3rem 0.5rem !important;
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 0.85rem !important;
    }
    
    .sb-topnav .btn {
        padding: 0.3rem 0.5rem !important;
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 0.85rem !important;
    }
    
    .sb-topnav .nav-link {
        padding: 0.4rem 0.5rem !important;
        min-height: 36px !important;
    }
    
    #global-language-switcher {
        margin-right: 0.25rem !important;
        margin-top: 0.1rem !important;
    }
    
    #global-language-switcher .el-button {
        min-height: 36px !important;
        font-size: 0.8rem !important;
        padding: 0.25rem 0.45rem !important;
    }
    
    .sb-topnav .form-inline {
        display: none !important;
    }
    
    .sb-topnav a[href="/"] {
        padding: 0.3rem 0.5rem !important;
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 0.85rem !important;
    }
}

/* ===== 無障礙設計增強 ===== */
.sb-topnav *:focus {
    outline-color: #0085CA !important;
    outline-width: 2px !important;
    outline-style: solid !important;
    outline-offset: 2px !important;
}

/* 高對比度模式支援 */
@media (prefers-contrast: high) {
    .sb-topnav {
        border-bottom-width: 2px !important;
        border-bottom-color: #000000 !important;
    }
    
    .sb-topnav .navbar-brand,
    .sb-topnav .nav-link,
    .sb-topnav .btn {
        color: #000000 !important;
        border-color: #000000 !important;
    }
    
    .sb-topnav .btn:hover {
        background-color: #000000 !important;
        color: #FFFFFF !important;
    }
}

/* 移除動畫偏好 - 全面移除 */
.sb-topnav *,
.sb-topnav *::before,
.sb-topnav *::after {
    animation: none !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 0 !important;
    transition: none !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
}

/* ===== 打印樣式 ===== */
@media print {
    .sb-topnav {
        display: none !important;
    }
}