/**
 * Layout V2 企業主題樣式
 * Layout V2 Enterprise Theme Styles
 * 
 * 功能：
 * - 企業級配色主題
 * - 統一的 UI 元件樣式
 * - 頂部導航與側邊欄樣式
 * - 表格、表單、按鈕統一樣式
 * - 響應式設計支援
 */

/* ================================
   企業配色主題變數
   Enterprise Color Theme Variables
================================ */
:root {
    --layout-v2-primary: #0085CA;
    --layout-v2-primary-hover: #006FA3;
    --layout-v2-background: #F5F5F5;
    --layout-v2-white: #FFFFFF;
    --layout-v2-text-primary: #333333;
    --layout-v2-text-muted: #6C757D;
    --layout-v2-border: #E0E0E0;
    --layout-v2-table-header: #F8F9FA;
    --layout-v2-shadow: 0 0 0 0.2rem rgba(0, 133, 202, 0.25);
}

/* ================================
   基礎頁面樣式
   Base Page Styles
================================ */
body {
    background-color: var(--layout-v2-background);
    font-family: 'Cabin', sans-serif;
    font-family: 'Noto Sans TC', sans-serif;
    color: var(--layout-v2-text-primary);
}

header {
    background-color: var(--layout-v2-white);
}

/* ================================
   頂部導航欄樣式
   Top Navigation Styles
================================ */
.sb-topnav {
    background-color: var(--layout-v2-white) !important;
    border-bottom: 1px solid var(--layout-v2-border);
}

/* 頂部導航欄文字顏色 */
.sb-topnav .navbar-brand {
    color: var(--layout-v2-text-primary) !important;
}

.sb-topnav .nav-link {
    color: var(--layout-v2-text-primary) !important;
}

.sb-topnav .btn {
    color: var(--layout-v2-text-primary) !important;
}

/* Logo 區域優化 */
.sb-topnav .navbar-brand img {
    filter: none;
    opacity: 1;
}

/* 頂部導航按鈕樣式 */
.sb-topnav #sidebarToggle {
    color: var(--layout-v2-text-primary) !important;
    border: 1px solid var(--layout-v2-border);
}

.sb-topnav #sidebarToggle:hover {
    background-color: var(--layout-v2-background);
    color: var(--layout-v2-primary) !important;
}

/* 頂部右側按鈕和連結 */
.sb-topnav .btn-link {
    color: var(--layout-v2-text-primary) !important;
}

.sb-topnav .btn-link:hover {
    color: var(--layout-v2-primary) !important;
}

/* ================================
   主要內容區域樣式
   Main Content Area Styles
================================ */
#layoutSidenav_content {
    background-color: var(--layout-v2-background);
}

/* ================================
   卡片和面板樣式
   Card and Panel Styles
================================ */
.card {
    background-color: var(--layout-v2-white);
    border: 1px solid var(--layout-v2-border);
    color: var(--layout-v2-text-primary);
}

/* ================================
   表格樣式
   Table Styles
================================ */
.table {
    background-color: var(--layout-v2-white);
    color: var(--layout-v2-text-primary);
}

.table th {
    background-color: var(--layout-v2-table-header);
    color: var(--layout-v2-text-primary);
    border-color: var(--layout-v2-border);
}

.table td {
    border-color: var(--layout-v2-border);
}

/* ================================
   按鈕樣式
   Button Styles
================================ */
.btn-primary {
    background-color: var(--layout-v2-primary);
    border-color: var(--layout-v2-primary);
}

.btn-primary:hover {
    background-color: var(--layout-v2-primary-hover);
    border-color: var(--layout-v2-primary-hover);
}

/* ================================
   表單元件樣式
   Form Control Styles
================================ */
.form-control {
    border-color: var(--layout-v2-border);
    color: var(--layout-v2-text-primary);
}

.form-control:focus {
    border-color: var(--layout-v2-primary);
    box-shadow: var(--layout-v2-shadow);
}

/* ================================
   文字樣式
   Typography Styles
================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--layout-v2-text-primary);
}

.text-muted {
    color: var(--layout-v2-text-muted) !important;
}

/* ================================
   頁尾樣式
   Footer Styles
================================ */
footer {
    background-color: var(--layout-v2-white) !important;
    border-top: 1px solid var(--layout-v2-border);
}

footer .text-muted {
    color: var(--layout-v2-text-muted) !important;
}

/* ================================
   語言切換器樣式
   Language Switcher Styles
================================ */
#global-language-switcher .el-button {
    color: var(--layout-v2-text-primary);
    border-color: var(--layout-v2-border);
}

#global-language-switcher .el-button:hover {
    color: var(--layout-v2-primary);
    border-color: var(--layout-v2-primary);
}

/* ================================
   響應式設計
   Responsive Design
================================ */
@media (max-width: 768px) {
    .sb-topnav #sidebarToggle {
        margin-right: 0.5rem;
    }
    
    .sb-topnav .navbar-brand {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 0.9rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .table {
        font-size: 0.85rem;
    }
}