/* ===============共用style.css=========================

/* ========================================
   1. 字型引入與CSS變數定義
   ======================================== */

/* 引入Google字型 - Chiron GoRound TC */
@import url('https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@200..900&display=swap');

/* 全域CSS變數定義 */
:root {
    /* 主要色彩變數 */
    --primary-color: #2c2c2c;      /* 主要色彩 - 深灰色 */
    --secondary-color: #404040;    /* 次要色彩 - 中灰色 */
    --accent-color: #666666;       /* 強調色彩 - 淺灰色 */
    --background-color: #f8f9fa;   /* 背景色彩 - 淺藍灰 */
    --text-color: #333333;         /* 文字色彩 - 深灰 */
    --white: #ffffff;              /* 白色 */
    
    /* 狀態色彩變數 */
    --success-color: #28a745;      /* 成功色彩 - 綠色 */
    --warning-color: #ffc107;      /* 警告色彩 - 黃色 */
    --danger-color: #dc3545;       /* 危險色彩 - 紅色 */
    --info-color: #17a2b8;         /* 資訊色彩 - 藍色 */
    
    /* 導航列專用色彩變數 */
    --navbar-primary: #2c2c2c;     /* 導航列主色 */
    --navbar-secondary: #404040;   /* 導航列次色 */
    --navbar-hover: #555555;       /* 導航列滑鼠懸停色 */
    --navbar-active: #1a1a1a;      /* 導航列啟用狀態色 */
    --navbar-white: #ffffff;       /* 導航列文字色 */
    --navbar-shadow: rgba(0, 0, 0, 0.15); /* 導航列陰影色 */
}

/* ========================================
   2. 基礎重置與全域樣式
   ======================================== */

/* CSS重置 - 清除所有元素的預設邊距和內距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 盒子模型計算包含邊框和內距 */
}

/* 全域主體樣式 */
body {
    font-family: 'Chiron GoRound TC','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* 漸層背景 */
    color: var(--text-color);
    line-height: 1.6;         /* 行高設定 */
    min-height: 100vh;        /* 最小高度為視窗高度 */
}

/* ========================================
   3. 主要內容區域樣式
   ======================================== */

/* 主要內容容器 */
.main-content {
    margin-top: 120px;        /* 上邊距 - 避開固定導航列 */
    padding: 0 20px;          /* 左右內距 */
    max-width: 1200px;        /* 最大寬度限制 */
    margin-left: auto;        /* 水平置中 */
    margin-right: auto;       /* 水平置中 */
    margin-bottom: 150px;     /* 下邊距 - 避開固定底部導航 */
}

/* 頁面內容容器 */
.page-content {
    display: none;            /* 預設隱藏 */
    opacity: 0;               /* 透明度為0 */
    transform: translateY(20px); /* 向下位移20px */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑過渡動畫 */
}

/* 啟用狀態的頁面內容 */
.page-content.active {
    display: block;           /* 顯示元素 */
    opacity: 1;               /* 完全不透明 */
    transform: translateY(0); /* 回到原位 */
}

/* ========================================
   4. 卡片樣式系統
   ======================================== */

/* 基礎卡片樣式 */
.card {
    background: var(--white);              /* 白色背景 */
    border-radius: 20px;                   /* 圓角邊框 */
    box-shadow: 0 8px 32px rgba(0,0,0,0.08); /* 陰影效果 */
    padding: 30px;                         /* 內距 */
    margin-bottom: 30px;                   /* 下邊距 */
    transition: all 0.3s ease;            /* 平滑過渡 */
    border: 1px solid rgba(0,0,0,0.05);   /* 細邊框 */
}


/* 卡片標題區域彈性布局 */
.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-header-flex h3 {
    font-size: 1.2em;
    margin: 0;
    display: flex;
    align-items: center;
}

/* 大樓篩選器下拉選單 */
.building-filter {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    background-color: white;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    height: fit-content;
    margin: auto 0;
}

.building-filter:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.building-filter:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(148, 165, 168, 0.2);
}

/* 響應式樣式 - 平板 */
@media (max-width: 768px) {
    .card-header-flex h3 {
        font-size: 1.1em;
    }

    .building-filter {
        padding: 6px 8px;
        font-size: 13px;
        min-width: 85px;
    }

    .card-header-flex {
        margin-bottom: 15px;
    }
}

/* 響應式樣式 - 手機 */
@media (max-width: 480px) {
    .card-header-flex h3 {
        font-size: 1em;
    }

    .card-header-flex h3 i {
        font-size: 0.9em;
        margin-right: 6px;
    }

    .building-filter {
        padding: 4px 6px;
        font-size: 12px;
        min-width: 75px;
        border-width: 1.5px;
    }
}

/* 卡片滑鼠懸停效果 */
.card:hover {
    transform: translateY(-5px);           /* 向上浮起5px */
    box-shadow: 0 12px 40px rgba(0,0,0,0.12); /* 加深陰影 */
}

/* Modal 樣式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background-color: var(--white);
    margin: 10vh auto;
    padding: 0;
    width: 90%;
    max-width: 600px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease-out;
}

.modal.active {
    display: block;
}

.modal.active .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.2em;
}

.modal-close {
    font-size: 28px;
    font-weight: bold;
    color: var(--accent-color);
    cursor: pointer;
    transition: color 0.3s ease;
}

.modal-close:hover {
    color: var(--primary-color);
}

.modal-body {
    padding: 20px 25px;
    max-height: 50vh;
    overflow-y: auto;

    /* 隱藏滾輪（Chrome、Edge、Safari） */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE、Edge */
}
.modal-body::-webkit-scrollbar {
    display: none; /* Chrome、Safari */
}


/* 課表樣式 */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.schedule-table th, .schedule-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.schedule-table th {
    background-color: var(--background-color);
    color: var(--primary-color);
    font-weight: 600;
}

.schedule-row {
    transition: background-color 0.3s ease;
}

.schedule-row:hover {
    background-color: rgba(23, 162, 184, 0.1);
}

.schedule-row.current {
    background-color: rgba(40, 167, 69, 0.1);
}

@media (max-width: 480px) {
    .modal-content {
        width: 95%;
        margin: 5vh auto;
    }

    .modal-header {
        padding: 15px 20px;
    }

    .modal-body {
        padding: 15px 20px;
    }

    .schedule-table th, .schedule-table td {
        padding: 8px;
        font-size: 14px;
    }
}

/* ========================================
   5. 搜尋功能樣式
   ======================================== */

/* 搜尋容器 */
.search-container {
    text-align: center;       /* 文字置中 */
    margin-bottom: 30px;      /* 下邊距 */
}

/* 搜尋輸入框 */
.search-box {
    width: 100%;              /* 寬度100% */
    max-width: 500px;         /* 最大寬度限制 */
    padding: 15px 20px;       /* 內距 */
    border: 2px solid #e9ecef; /* 邊框樣式 */
    font-size: 16px;          /* 字型大小 */
    transition: all 0.3s ease; /* 平滑過渡 */
    outline: none;            /* 移除輪廓 */
}

/* 搜尋框焦點狀態 */
.search-box:focus {
    border-color: var(--primary-color);     /* 邊框變為主色 */
}

/* 搜尋按鈕 */
.search-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;             /* 文字顏色 */
    border: none;             /* 無邊框 */
    padding: 15px 30px;       /* 內距 */
    cursor: pointer;          /* 滑鼠指標樣式 */
    font-size: 16px;          /* 字型大小 */
    transition: all 0.3s ease; /* 平滑過渡 */
}

/* 搜尋按鈕滑鼠懸停效果 */
.search-btn:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* 加深陰影 */
}

/* ========================================
   6. 說明頁面樣式
   ======================================== */

/* 說明區塊 */
.guide-section {
    margin-bottom: 30px;      /* 下邊距 */
}

/* 說明區塊標題 */
.guide-section h3 {
    color: var(--primary-color); /* 主色標題 */
    margin-bottom: 15px;          /* 下邊距 */
    font-size: 1.3em;            /* 字型大小 */
}

/* 說明清單 */
.guide-list {
    list-style: none;        /* 移除預設清單樣式 */
    padding-left: 20px;      /* 左內距 */
}

/* 說明清單項目 */
.guide-list li {
    margin-bottom: 10px;     /* 下邊距 */
    position: relative;      /* 相對定位 */
}

/* 說明清單項目前的箭頭符號 */
.guide-list li::before {
    content: '→';            /* 箭頭符號 */
    color: var(--accent-color); /* 強調色 */
    position: absolute;      /* 絕對定位 */
    left: -20px;            /* 左邊偏移 */
}

/* ========================================
   7. 導航列樣式系統
   ======================================== */

/* 主導航列容器 */
.navbar {
    position: fixed;         /* 固定定位 */
    width: 85%;              /* 寬度85% */
    max-width: 800px;        /* 最大寬度 */
    top: 25px;              /* 距離頂部25px */
    left: 50%;              /* 左邊50% */
    transform: translateX(-50%); /* 水平置中 */
    background: linear-gradient(135deg, var(--navbar-primary) 0%, var(--navbar-secondary) 100%);
    border-radius: 50px;     /* 圓角邊框 */
    box-shadow: 0 8px 32px var(--navbar-shadow); /* 陰影效果 */
    padding: 12px 20px;      /* 內距 */
    display: flex;           /* Flexbox佈局 */
    justify-content: center; /* 內容置中 */
    align-items: center;     /* 垂直置中 */
    z-index: 1000;          /* 層級順序 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    transition: all 0.3s ease;  /* 平滑過渡 */
}

/* 導航列滑鼠懸停效果 */
.navbar:hover {
    box-shadow: 0 12px 40px var(--navbar-shadow); /* 加深陰影 */
    transform: translateX(-50%) translateY(-2px);  /* 向上浮起 */
}

/* 導航列選單容器 */
.navbar-menu {
    display: flex;           /* Flexbox佈局 */
    list-style: none;        /* 移除清單樣式 */
    gap: 10px;              /* 項目間距 */
    width: 100%;            /* 寬度100% */
    justify-content: space-around; /* 項目均勻分佈 */
    margin: 0;              /* 無邊距 */
    padding: 0;             /* 無內距 */
}

/* 導航列項目 */
.navbar-item {
    flex: 1;                /* 等分空間 */
    text-align: center;     /* 文字置中 */
}

/* 導航列連結 */
.navbar-link {
    display: flex;          /* Flexbox佈局 */
    align-items: center;    /* 垂直置中 */
    justify-content: center; /* 水平置中 */
    gap: 8px;              /* 圖示與文字間距 */
    color: var(--navbar-white); /* 文字顏色 */
    text-decoration: none;  /* 移除底線 */
    padding: 12px 20px;     /* 內距 */
    border-radius: 35px;    /* 圓角 */
    font-size: 16px;        /* 字型大小 */
    font-weight: 500;       /* 字型粗細 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑過渡 */
    position: relative;     /* 相對定位 */
    overflow: hidden;       /* 隱藏溢出 */
    cursor: pointer;        /* 滑鼠指標 */
}

/* 導航列連結光澤效果 */
.navbar-link::before {
    content: '';            /* 空內容 */
    position: absolute;     /* 絕對定位 */
    top: 0;
    left: -100%;           /* 初始位置在左邊外側 */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s;  /* 移動動畫 */
}

/* 導航列連結滑鼠懸停效果 */
.navbar-link:hover {
    background-color: var(--navbar-hover); /* 背景色變化 */
    transform: translateY(-2px);           /* 向上浮起 */
    box-shadow: 0 4px 16px rgba(0,0,0,0.2); /* 陰影效果 */
}

/* 滑鼠懸停時的光澤移動效果 */
.navbar-link:hover::before {
    left: 100%;            /* 光澤從左移到右 */
}

/* 導航列連結啟用狀態 */
.navbar-link.active {
    background-color: var(--navbar-active); /* 啟用狀態背景色 */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); /* 內陰影 */
}

/* 導航列圖示 */
.navbar-icon {
    font-size: 18px;        /* 圖示大小 */
    transition: transform 0.3s ease; /* 變形過渡 */
}

/* 導航列連結滑鼠懸停時的圖示效果 */
.navbar-link:hover .navbar-icon {
    transform: scale(1.1) rotate(5deg); /* 放大並旋轉 */
    animation: wave 0.6s ease-in-out;   /* 波浪動畫 */
}

/* 導航列文字 */
.navbar-text {
    font-size: 14px;        /* 文字大小 */
    white-space: nowrap;    /* 不換行 */
}

/* 波浪動畫關鍵影格 */
@keyframes wave {
    0%, 100% { transform: translateY(0) scale(1.1) rotate(5deg); }
    50% { transform: translateY(-3px) scale(1.1) rotate(5deg); }
}

/* ========================================
   8. 載入動畫樣式
   ======================================== */

/* 載入狀態容器 */
.loading {
    text-align: center;     /* 文字置中 */
    padding: 50px;          /* 內距 */
    color: #6c757d;         /* 文字顏色 */
}

/* 載入圖示 */
.loading i {
    font-size: 48px;        /* 圖示大小 */
    margin-bottom: 20px;    /* 下邊距 */
    animation: spin 2s linear infinite; /* 旋轉動畫 */
}

/* 旋轉動畫關鍵影格 */
@keyframes spin {
    0% { transform: rotate(0deg); }   /* 起始角度 */
    100% { transform: rotate(360deg); } /* 結束角度 */
}

/* ========================================
   9. 響應式設計 - 平板與手機版本
   ======================================== */

/* 平板與手機版本樣式（768px以下） */
@media (max-width: 768px) {
    /* 主要內容區域調整 */
    .main-content {
        margin-top: 50px;     /* 減少上邊距 */
        padding: 0 10px;      /* 減少左右內距 */
        margin-bottom: 120px; /* 調整下邊距 */
    }

    /* 卡片內距調整 */
    .card {
        padding: 15px 15px;   /* 減少內距 */
    }

    /* 導航列移到底部 */
    .navbar {
        width: 90%;           /* 增加寬度 */
        max-width: 500px;     /* 調整最大寬度 */
        top: auto;            /* 取消頂部定位 */
        bottom: 30px;         /* 底部定位 */
        padding: 16px 20px;   /* 調整內距 */
        border-radius: 40px;  /* 調整圓角 */
        height: auto;         /* 高度自動 */
        min-height: 70px;     /* 最小高度 */
    }

    /* 導航選單調整 */
    .navbar-menu {
        justify-content: space-between; /* 項目之間平均分佈 */
        align-items: center;            /* 垂直置中 */
    }

    /* 導航連結調整 */
    .navbar-link {
        flex-direction: row;    /* 水平排列 */
        padding: 12px 8px;      /* 調整內距 */
        gap: 8px;              /* 間距 */
        min-width: 60px;       /* 最小寬度 */
        position: relative;     /* 相對定位 */
        justify-content: center; /* 水平置中 */
        align-items: center;    /* 垂直置中 */
        border-radius: 25px;    /* 圓角 */
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 過渡動畫 */
    }

    /* 導航文字預設隱藏 */
    .navbar-text {
        font-size: 12px;        /* 字型大小 */
        opacity: 0;             /* 透明度 */
        max-width: 0;           /* 最大寬度為0 */
        overflow: hidden;       /* 隱藏溢出 */
        transform: translateX(-10px); /* 向左位移 */
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 過渡動畫 */
        white-space: nowrap;    /* 不換行 */
        font-weight: 600;       /* 字型粗細 */
    }

    /* 啟用狀態的導航連結展開顯示文字 */
    .navbar-link.active {
        background-color: var(--navbar-active); /* 背景色 */
        padding: 12px 16px;                     /* 增加內距 */
        box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* 陰影 */
        transform: scale(1.05);                 /* 放大 */
    }

    /* 啟用狀態顯示文字 */
    .navbar-link.active .navbar-text {
        opacity: 1;             /* 完全不透明 */
        max-width: 80px;        /* 最大寬度 */
        transform: translateX(0); /* 回到原位 */
        margin-left: 4px;       /* 左邊距 */
    }

    /* 滑鼠懸停時輕微顯示文字預覽 */
    .navbar-link:hover:not(.active) .navbar-text {
        opacity: 0.7;           /* 半透明 */
        max-width: 70px;        /* 最大寬度 */
        transform: translateX(0); /* 回到原位 */
    }

    /* 導航圖示調整 */
    .navbar-icon {
        font-size: 22px;        /* 圖示大小 */
        transition: all 0.3s ease; /* 過渡動畫 */
        flex-shrink: 0;         /* 不縮小 */
    }

    /* 滑鼠懸停效果 */
    .navbar-link:hover {
        transform: translateY(-2px);        /* 向上浮起 */
        background-color: var(--navbar-hover); /* 背景色變化 */
    }

    /* 啟用狀態的滑鼠懸停效果 */
    .navbar-link.active:hover {
        transform: translateY(-2px) scale(1.05); /* 向上浮起並放大 */
    }

    /* 非選中項目樣式 */
    .navbar-link:not(.active) {
        opacity: 0.7;           /* 降低透明度 */
        transform: scale(0.9);  /* 縮小 */
    }

    /* 非選中項目的滑鼠懸停效果 */
    .navbar-link:not(.active):hover {
        opacity: 1;             /* 完全不透明 */
        transform: scale(0.95) translateY(-2px); /* 稍微放大並上浮 */
    }
}

/* 小型手機版本樣式（480px以下） */
@media (max-width: 480px) {
    /* 導航列進一步調整 */
    .navbar {
        width: 95%;             /* 增加寬度 */
        padding: 14px 16px;     /* 調整內距 */
    }
    
    /* 圖示大小調整 */
    .navbar-icon {
        font-size: 20px;        /* 減少圖示大小 */
    }
    
    /* 文字大小調整 */
    .navbar-text {
        font-size: 10px;        /* 減少文字大小 */
    }
}

/* ========================================
   Full-page loading overlay
   ======================================== */
.loading-overlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    opacity: 0;
    visibility: hidden;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-overlay .loader-card {
    border-radius: 14px;
    padding: 18px 22px;
    text-align: center;
    max-width: 90%;
}

.loading-overlay .loader-card i {
    font-size: 28px;
    color: var(--primary-color);
    margin-bottom: 8px;
    display: block;
}

.loading-overlay .loader-card p {
    margin: 0;
    color: var(--primary-color);
    font-weight: 600;
}

.loading-overlay .loader-message {
    transition: opacity 0.25s ease;
    opacity: 1;
}