:root {
    --primary: #4F46E5; --primary-hover: #4338CA; --bg: #F3F4F6; --card-bg: #FFFFFF;
    --text-main: #1F2937; --text-muted: #6B7280; --border: #E5E7EB; --danger: #EF4444; --success: #10B981;
    --blue-fab: #007AFF; 
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg); color: var(--text-main); margin: 0; padding: 0;
}

/* 頂部導航列 */
.top-navbar {
    background-color: #FFFFFF; padding: 45px 15px 12px 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between;
}
.nav-title { margin: 0; font-size: 19px; font-weight: 800; color: #111827; white-space: normal; line-height: 1.2; word-break: break-word; }
.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0;}

/* 懸浮按鈕 */
.fab-add {
    position: fixed; bottom: 40px; right: 25px; width: 60px; height: 60px;
    background-color: var(--blue-fab); color: white; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; font-size: 36px; font-weight: 300;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.4); text-decoration: none; z-index: 9999;
}
.fab-add:active { transform: scale(0.95); background-color: #0062CC; }

/* 主內容區及卡片 */
.main-content { max-width: 700px; margin: 15px auto; padding: 0 10px; min-height: 60vh; transition: max-width 0.3s; }
.card { background: var(--card-bg); border-radius: 12px; padding: 15px 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); overflow: hidden; }

/* 底部留白及控制區 */
.bottom-footer { text-align: center; padding: 20px 15px 120px 15px; margin-top: 10px; }
.footer-controls { display: flex; justify-content: center; align-items: center; gap: 15px; }
.btn-yearly { display: inline-flex; justify-content: center; align-items: center; padding: 0 20px; height: 42px; background: var(--success); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: bold; text-decoration: none; }

/* 表單強制滿版排列 */
.form-group { margin-bottom: 20px; width: 100%; display: block; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: var(--text-main); width: 100%; text-align: left; }
input[type="text"], input[type="number"], input[type="date"], textarea, select {
    width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px;
    box-sizing: border-box; font-size: 15px; background-color: #F9FAFB; display: block;
}

/* 🔥 修正：語言下拉選單 (覆蓋 100% 寬度，解決電腦版被無限拉長問題) */
.lang-dropdown { 
    width: auto !important; min-width: 150px;
    padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); 
    background: var(--card-bg); font-size: 14px; font-weight: 600; cursor: pointer; height: 42px; 
}

/* 按鈕樣式 */
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.btn-secondary { background: #E5E7EB; color: var(--text-main); }
.btn-danger { background: var(--danger); }
.btn-success { background: var(--success); color: white; }
.btn-sm { width: auto; padding: 6px 8px; font-size: 13px; border-radius: 6px; }
.btn-icon { width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 8px; font-size: 16px; display: inline-flex; justify-content: center; align-items: center; text-decoration: none; background: #E5E7EB; color: #1F2937; }

/* 表格設計 */
.table-responsive { overflow-x: auto; width: 100%; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 12px 6px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; }
th { background: #F9FAFB; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.price-col { color: var(--danger); font-weight: bold; white-space: nowrap; }

/* 極簡操作圖示 */
.action-group { display: flex; gap: 15px; justify-content: center; align-items: center; }
.action-icon { font-size: 18px; text-decoration: none; transition: transform 0.2s; }
.action-icon:hover { transform: scale(1.2); }

/* =========================================
   🔥 電腦版 vs 手機版 內容分離核心邏輯
   ========================================= */
/* 手機版預設隱藏詳細資訊 */
.desktop-only { display: none; } 

/* 當螢幕闊度大於 768px (平板/電腦) 時自動生效 */
@media (min-width: 768px) { 
    .top-navbar { padding: 30px 20px 15px 20px; } 
    .bottom-footer { margin-top: 30px; padding-bottom: 40px; }
    
    /* 擴展內容區寬度，解決 Yearly 超出顯示範圍的問題 */
    .main-content { max-width: 1050px; } 
    
    /* 顯示電腦版專屬的詳細資訊 (例如：基本薪金、津貼等) */
    th.desktop-only, td.desktop-only { display: table-cell; }
    div.desktop-only { display: block; }
    span.desktop-only { display: inline; }
}