/* (*** V13.11 核心修改 ***) */
/* 基本重設和字體 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* (V17.3) 調整漸層背景比例 */
    background: linear-gradient(to bottom, #1056e5 0%, #d2c8f7 30%, #f1e1d2 100%);
    /* (V17.6) 固定頁面高度，禁止整頁滾動 */
    height: 100vh;
    overflow: hidden;
    color: #333;
    margin: 0;
    padding: 20px; /* APP 主頁面需要 padding */
    box-sizing: border-box;
}

/* (V13.11) 登入頁面 (改為太空旅程背景) */
.login-page-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: hsl(256, 100%, 5%);
    color: #fff;
    margin: 0;
    padding: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}

.login-page-body .space-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}
/* (*** 修改結束 ***) */


/* 主要容器 - 玻璃卡片效果 */
.container {
    max-width: 600px;
    margin: 0 auto; /* (V17.2) 移除上方空間 */
    /* (V17.0) 玻璃卡片效果 */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 25px;
    overflow: hidden;
    position: relative;
    /* (V17.3) 移除 padding-bottom */
    /* (V17.6) 限制容器高度，適應固定頁面 */
    max-height: calc(100vh - 220px); /* 扣除 body padding、外部導航、工具列 */
    display: flex;
    flex-direction: column;
}
/* (V13.0) 隱藏 APP (登入前) */
.container.hidden {
    display: none;
}

/* (V11.3) h2 (上班人數) */
#workforce-count {
    text-align: center;
    color: #007bff; 
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 25px; /* (V15.0) 調整與上方 week-selector 的距離 */
    margin-bottom: 15px;
}

/* 導覽按鈕 */
.nav-button {
    background-color: #e9ecef;
    color: #007bff;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 60px; 
    text-align: center;
    flex-basis: 48%; 
}
.nav-button:active {
    background-color: #ced4da; 
}

/* 錯誤訊息 */
#error-message {
    text-align: center;
    color: #dc3545; 
    font-weight: 500;
}

/* 時間軸 */
.timeline-container {
    width: 100%;
    margin-bottom: 20px; /* (V15.0) 調整下方距離 */
    padding: 0 5px;
    box-sizing: border-box;
}
#timeline-bar {
    height: 12px;
    border-radius: 6px;
    background: #e9ecef; 
    transition: background 0.5s ease;
    /* (V15.0) 移除 labels，戰力條本身已足夠清晰 */
}

/* 姓名列表 */
#name-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* (V17.6) 改用 flex 自動計算高度 */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}
#name-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.15);
    margin-bottom: 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}
#name-list li:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}
#name-list li:last-child { margin-bottom: 0; }

/* .user-info (頭像 + 姓名) */
.user-info {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 1.05rem;
    color: #333; /* (V17.3) 改為深色字 */
}

/* (V13.9) 26px 頭像圖片 (已移除背景色) */
.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 4px; /* (V13.8) 圓角 */
    object-fit: cover;   
    margin-right: 15px; 
}

/* (V13.7) 備用圖示 (如果 .gif 讀取失敗) */
.fallback-icon {
    font-size: 1.6rem;
    color: #888;
    margin-right: 15px;
    width: 26px; 
    height: 26px;
    display: inline-block;
    text-align: center;
    line-height: 26px;
}


/* 右側的 "詳細資料" (班別 + 狀態) */
.details {
    display: flex;
    align-items: center;
    font-size: 1rem;
    gap: 8px;
}
/* (V17.3) 班別標籤樣式 */
.shift-text {
    font-weight: 600;
    color: #333;
    padding: 4px 12px;
    border-radius: 12px;
    background-color: #e0e0e0; /* 預設背景色 */
    font-size: 0.9rem;
    white-space: nowrap;
}
.status-text {
    font-weight: 700;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    white-space: nowrap;
}
.status-text.on-call {
    background-color: #ff6b6b;
    color: white;
}
.shift-text.disabled {
    color: rgba(51, 51, 51, 0.5);
    font-weight: 500;
}
#name-list li.faded-out {
    opacity: 0.5; /* (V8.5) 50% */
}
.status-text.leave {
    background-color: rgba(128, 128, 128, 0.3); /* (V17.6) 改為半透明灰 */
    color: rgba(64, 64, 64, 0.9); /* (V17.6) 深灰文字 */
    font-weight: 500;
}

/* 載入中動畫 (不用動) */
#loading-overlay {
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.2s;
}
#loading-overlay.hidden {
    opacity: 0;
    pointer-events: none; 
}
.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 內容滑動動畫 (不用動) */
.slide-out-left { animation: slideOutLeft 0.3s forwards; }
.slide-in-from-right { animation: slideInFromRight 0.3s forwards; }
.slide-out-right { animation: slideOutRight 0.3s forwards; }
.slide-in-from-left { animation: slideInFromLeft 0.3s forwards; }
@keyframes slideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
@keyframes slideInFromRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@keyframes slideInFromLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* (V13.0) 登入頁面樣式 */
/* Futuristic login card (glassmorphism) */
.login-card {
    max-width: 380px;
    width: 90%;
    padding: 32px 28px;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.15);
    transform: translateY(40px);
    opacity: 0;
    animation: loginFloatIn 0.9s ease-out forwards;
}
@keyframes loginFloatIn {
    to { transform: translateY(0); opacity: 1; }
}
.login-card h1 {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    color: #fff;
    font-weight: 700;
}
.login-card p {
    font-size: 1rem;
    color: #cfd8dc;
    margin: 6px 0 22px 0;
}
.or-text {
    text-align: center;
    color: #9fb3b8;
    margin: 14px 0 8px 0;
    font-size: 0.95rem;
}
.social-btn {
    display: flex; /* 更穩定的跨瀏覽器對齊 */
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px; /* 防止內容擠壓導致高度不一 */
    padding: 12px 16px;
    gap: 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1; /* 避免文字行高影響垂直置中 */
    cursor: pointer;
    transition: 0.25s ease;
    box-sizing: border-box;
}
.social-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 16px rgba(0, 255, 255, 0.25);
}
.social-btn svg,
.social-btn img {
    width: 20px;
    height: 20px;
    display: block; /* 移除行內元素的基線偏移 */
    flex-shrink: 0; /* 避免被擠壓變形 */
}
.social-btn span { display: inline-block; }

/* (V13.12) 動態漸層背景動畫 */
@keyframes gradient {
	0% {
		background-position: 0% 0%;
	}
	50% {
		background-position: 100% 100%;
	}
	100% {
		background-position: 0% 0%;
	}
}

/* (V16.0) 日誌頁面樣式 */
.log-header {
    text-align: center;
    padding: 20px 0 10px 0;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 20px;
}

.log-header h1 {
    color: #007bff;
    font-size: 1.8rem;
    margin: 0 0 5px 0;
}

.log-header h1 i {
    margin-right: 10px;
}

.log-subtitle {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
}

.log-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding-right: 5px;
}

.log-item {
    display: flex;
    gap: 15px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #007bff;
    transition: transform 0.2s, box-shadow 0.2s;
}

.log-item:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.log-icon {
    font-size: 1.5rem;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.log-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.log-message {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.log-timestamp {
    font-size: 0.8rem;
    color: #6c757d;
}

.log-empty {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.log-empty i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.3;
}

.log-empty p {
    margin: 0;
    font-size: 1rem;
}

/* 捲軸美化 (僅適用於 Webkit 瀏覽器) */
.log-list::-webkit-scrollbar {
    width: 8px;
}

.log-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.log-list::-webkit-scrollbar-thumb {
    background: #007bff;
    border-radius: 4px;
}

.log-list::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}

/* (*** V17.1 核心修改: 外部日期導航 ***) */
.date-navigation-outer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 20px 20px 0 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#current-month-display {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.month-controls {
    display: flex;
}

.month-nav-button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.month-nav-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}
.month-nav-button:active {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0.95);
}

.week-selector-outer {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* 舊版樣式（保留以防其他地方使用） */
.hero-section {
    color: white;
    padding: 0;
    margin: 0;
}

.date-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.week-selector {
    display: flex;
    justify-content: space-between;
}

.day-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.day-of-week {
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.8);
}

.day-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: background-color 0.2s;
    /* (V17.2) 所有日期都顯示圓形，非今天用 #5166a8 */
    background-color: #5166a8;
    color: white;
}
.day-circle.active {
    background-color: white;
    color: #4A7FD9;
}

/* (*** V17.0 內容區塊樣式 - 移除玻璃效果 ***) */
.glass-card-main {
    background: transparent;
    border-radius: 12px;
    padding: 20px;
    margin-top: 0; /* (V17.2) 移除上方空間 */
    /* (V17.6) 讓內容區塊可伸縮 */
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.glass-card-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-card-main-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.workforce-info {
    display: flex;
    align-items: center;
}

#workforce-count {
    font-size: 14px;
    color: white;
    font-weight: 500;
    margin: 0;
}

/* (*** V14.0 核心修改: 工具列樣式 ***) */
.toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px; /* 稍微加高以容納文字 */
    background-color: rgba(255, 255, 255, 0.9); /* 帶點透明感的背景 */
    backdrop-filter: blur(10px); /* iOS 風格的毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08); /* 調整陰影 */
    z-index: 1000;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.toolbar-button {
    display: flex;
    align-items: center;
    justify-content: center; /* 垂直置中圖示 */
    color: #888;
    text-decoration: none;
    flex-grow: 1;
    height: 100%;
}

.toolbar-button i {
    font-size: 24px; /* 放大圖示 */
    /* 移除上下邊距 */
    margin: 0;
}

.toolbar-button.active {
    color: #007bff;
}

/* (V16.4) 使用者頭貼樣式 - 僅工具列圓形 */
.toolbar .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #007bff;
}

.toolbar #user-icon-fallback {
    display: inline-block;
}

.toolbar .user-avatar.hidden + #user-icon-fallback {
    display: inline-block;
}

.toolbar .user-avatar:not(.hidden) + #user-icon-fallback {
    display: none;
}

/* (V17.4) 個人選單下拉樣式 */
.user-menu {
    position: fixed;
    bottom: 75px; /* 工具列上方 */
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    min-width: 200px;
    z-index: 1001;
    border: 1px solid rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.user-menu:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #333;
}

.user-menu-item:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.user-menu-item i {
    font-size: 18px;
    color: #007bff;
    width: 20px;
    text-align: center;
}

.user-menu-item span {
    font-size: 15px;
    font-weight: 500;
}

/* (*** 修改結束 ***) */

/* ==================== (V16.5) 月曆模式樣式 ==================== */

/* (V17.1) 外部標題區 - container 外面 */
.calendar-header-outer {
    text-align: center;
    margin-bottom: 15px;
    padding: 20px 20px 0 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.calendar-header-outer .calendar-subtitle {
    margin: 0;
    font-size: 18px;
    color: white;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 月曆標題區 (舊版，保留以防其他地方使用) */
.calendar-header {
    text-align: center;
    margin-bottom: 20px;
    padding: 10px 0;
}

.calendar-subtitle {
    margin: 0;
    font-size: 16px;
    color: white;
    font-weight: 500;
}

/* (V17.1) 外部月份導航 - container 外面 */
.calendar-month-nav-outer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    padding: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* 月份導航 (舊版，保留以防其他地方使用) */
.calendar-month-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

.month-nav-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-nav-button:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

.month-nav-button:active {
    transform: scale(0.95);
}

#current-cal-month {
    font-size: 20px;
    font-weight: 600;
    color: white;
    min-width: 150px;
    text-align: center;
}

/* (V17.1) 外部星期標題 - container 外面 */
.calendar-weekdays-outer {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 15px;
    padding: 0 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* 星期標題 (舊版，保留以防其他地方使用) */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 10px;
    padding: 0 10px;
}

.calendar-weekday {
    text-align: center;
    font-weight: 600;
    color: white;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 14px;
}

.calendar-weekday:first-child {
    color: #ffcccc;
}

.calendar-weekday:last-child {
    color: #cce5ff;
}

/* 月曆網格 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    padding: 10px;
    margin-bottom: 80px;
}

/* 日期格子 */
.calendar-day {
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.calendar-day:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.calendar-day.empty {
    background-color: #f8f9fa;
    border: 1px dashed #dee2e6;
    box-shadow: none;
}

.calendar-day.empty:hover {
    transform: none;
}

/* 日期數字 */
.day-number {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

/* 排班狀態 */
.day-status {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* 休假狀態 */
.status-rest {
    background-color: #ffebee;
    color: #c62828;
}

/* 上班狀態 (早/中/晚) - 背景和文字顏色將由 JS 動態設定 */
.status-work {
    font-weight: 700;
}

/* 請假狀態 (病假/公假/事假) */
.status-leave {
    background-color: #e0e0e0;
    color: #424242;
}

/* 其他狀態 */
.status-other {
    background-color: #f3e5f5;
    color: #6a1b9a;
}

/* 錯誤狀態 */
.day-status.error {
    background-color: #fff3e0;
    color: #e65100;
    font-size: 12px;
}

/* 月曆容器 - 移除背景，使用玻璃卡片效果 */
#calendar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* (V17.1) 月曆模式的 container 不需要 margin-top */
#calendar-container.container {
    padding-top: 20px;
    margin-top: 0;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .calendar-header h1 {
        font-size: 20px;
    }

    .calendar-subtitle {
        font-size: 14px;
    }

    #current-cal-month {
        font-size: 16px;
    }

    .calendar-weekday {
        font-size: 12px;
        padding: 8px 0;
    }

    .calendar-day {
        min-height: 70px;
        padding: 8px;
    }

    .day-number {
        font-size: 14px;
    }

    .day-status {
        font-size: 14px;
        padding: 6px;
    }

    .month-nav-button {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .calendar-grid {
        gap: 5px;
        padding: 5px;
    }

    .calendar-day {
        min-height: 60px;
        padding: 5px;
    }

    .day-number {
        font-size: 12px;
    }

    .day-status {
        font-size: 12px;
        padding: 4px;
    }
}