/* ==========================================
   設計系統 - 冷色調漸層主題
   色彩、字體、間距統一管理
   ========================================== */

/* CSS 變數定義 */
:root {
  /* 冷色調主色系 */
  --primary: #4f46e5;           /* 主色：靛藍 */
  --primary-light: #818cf8;     /* 淺色版：hover/背景 */
  --primary-dark: #3730a3;      /* 深色版：文字/active */
  
  /* 漸層色 */
  --gradient-start: #667eea;     /* 漸層起始：藍 */
  --gradient-end: #764ba2;       /* 漸層結束：紫 */
  
  /* 語意色彩 */
  --success: #10b981;            /* 成功：綠 */
  --error: #ef4444;              /* 錯誤：紅 */
  --warning: #f59e0b;            /* 警告：黃 */
  
  /* 中性色 */
  --gray-100: #f8fafc;
  --gray-200: #f1f5f9;
  --gray-300: #e2e8f0;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  
  /* 字體設定：Roboto + Noto Sans TC */
  --font-primary: 'Roboto', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* 字級階層 */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  
  /* 圓角系統 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  
  /* 間距系統 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  
  /* 陰影 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.15);
  
  /* 動畫 */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 全域字體與基礎樣式 */
body {
  font-family: var(--font-primary);
  background: var(--gray-100);
  color: var(--gray-800);
  line-height: 1.7;           /* 優化中文閱讀間距 */
  letter-spacing: 0.01em;   /* 微調字距 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 字級階層設定 */
h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--gray-900);
}

h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.4;
  color: var(--gray-800);
}

h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.4;
  color: var(--gray-700);
}

h4 {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.5;
  color: var(--gray-700);
}

/* 程式碼字體 */
code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.page {
  min-height: 100vh;
  padding: var(--space-5);
}

.hidden {
  display: none !important;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

/* ==========================================
   登入頁面樣式 - 冷色調漸層背景
   ========================================== */
#login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 冷色調藍紫漸層 */
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

#login-page .container {
  text-align: center;
  background: white;
  padding: var(--space-10);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

#login-page h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
  color: var(--gray-800);
}

.subtitle {
  color: var(--gray-500);
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
}

.input-group {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.input-group input {
  flex: 1;
  padding: var(--space-4);
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  transition: border-color var(--transition-base);
}

.input-group input:focus {
  outline: none;
  border-color: var(--primary);
}

/* 按鈕基礎樣式 - 主色按鈕 */
button {
  padding: var(--space-4) var(--space-6);
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
}

button:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

button:active {
  transform: translateY(0);
}

/* 次要按鈕樣式 */
.btn-small {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  background: var(--gray-500);
}

.btn-small:hover {
  background: var(--gray-600);
}

/* 現有使用者選擇區塊 */
.existing-users {
  margin-top: var(--space-5);
}

.existing-users p {
  color: var(--gray-500);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.user-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.user-tag {
  padding: var(--space-2) var(--space-3);
  background: var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: var(--text-sm);
  color: var(--gray-700);
}

.user-tag:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-1px);
}

/* ==========================================
   主應用頁面樣式
   ========================================== */
#app-page {
  background: var(--gray-100);
}

/* 頁面標頭 */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  gap: var(--space-2);
}

header h1 {
  font-size: var(--text-xl);
  color: var(--gray-900);
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

#current-user {
  font-weight: 600;
  color: var(--primary);
  font-size: var(--text-base);
}

/* ==========================================
   統計區塊 - 卡片式設計
   ========================================== */
.stats-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.stat-card {
  background: white;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: var(--space-1);
  font-weight: 500;
}

.stat-value {
  display: block;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-800);
}

/* ==========================================
   內容區塊統一樣式
   ========================================== */
.balance-section,
.add-expense-section,
.expense-list-section {
  background: white;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.balance-section h2,
.add-expense-section h2,
.expense-list-section h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ==========================================
   收支結算區塊
   ========================================== */
.balance-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.balance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.balance-item:hover {
  background: var(--gray-200);
}

/* 應收款 - 綠色 */
.balance-item.positive {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border-left: 4px solid var(--success);
}

/* 應付款 - 紅色 */
.balance-item.negative {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
  border-left: 4px solid var(--error);
}

.balance-amount {
  font-weight: 700;
  font-size: var(--text-base);
}

/* ==========================================
   新增支出表單
   ========================================== */
#expense-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#expense-form input {
  padding: var(--space-4);
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  transition: all var(--transition-base);
}

#expense-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* ==========================================
   支出明細列表
   ========================================== */
.expense-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 400px;
  overflow-y: auto;
}

.expense-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary);
  transition: all var(--transition-base);
}

.expense-item:hover {
  background: var(--gray-200);
  transform: translateX(2px);
}

.expense-info {
  flex: 1;
}

.expense-payer {
  font-weight: 600;
  color: var(--primary);
  font-size: var(--text-sm);
}

.expense-item-text {
  color: var(--gray-700);
  margin-top: var(--space-1);
  font-size: var(--text-base);
}

.expense-time {
  font-size: var(--text-xs);
  color: var(--gray-400);
  margin-top: var(--space-1);
}

.expense-amount {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--gray-800);
  margin-right: var(--space-3);
}

/* ==========================================
   功能按鈕樣式
   ========================================== */
.btn-delete {
  padding: var(--space-1) var(--space-2);
  background: var(--error);
  font-size: var(--text-xs);
}

.btn-delete:hover {
  background: #dc2626;
}

.btn-edit {
  padding: var(--space-1) var(--space-2);
  background: var(--warning);
  color: var(--gray-900);
  font-size: var(--text-xs);
  margin-right: var(--space-1);
}

.btn-edit:hover {
  background: #d97706;
}

.btn-save {
  padding: var(--space-1) var(--space-2);
  background: var(--success);
  font-size: var(--text-xs);
  margin-right: var(--space-1);
}

.btn-save:hover {
  background: #059669;
}

.btn-cancel {
  padding: var(--space-1) var(--space-2);
  background: var(--gray-500);
  font-size: var(--text-xs);
}

.btn-cancel:hover {
  background: var(--gray-600);
}

.edit-input {
  padding: var(--space-2);
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
  width: 100%;
  font-family: var(--font-primary);
}

.edit-input:focus {
  outline: none;
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.empty-state {
  text-align: center;
  padding: var(--space-10);
  color: var(--gray-400);
  font-size: var(--text-base);
}

/* ==========================================
   響應式設計 - 手機優先
   ========================================== */

/* 手機基礎樣式 (375px 以上) */
@media (min-width: 375px) {
  .page {
    padding: var(--space-4);
  }
  
  #login-page .container {
    padding: var(--space-8);
  }
}

/* 平板斷點 (768px) */
@media (min-width: 768px) {
  .page {
    padding: var(--space-6);
  }
  
  #login-page .container {
    padding: var(--space-10);
    max-width: 450px;
  }
  
  header h1 {
    font-size: var(--text-2xl);
  }
  
  .stat-value {
    font-size: var(--text-2xl);
  }
}

/* 桌面斷點 (1200px) */
@media (min-width: 1200px) {
  .container {
    max-width: 700px;
  }
  
  .stats-section {
    gap: var(--space-4);
  }
  
  .stat-card {
    padding: var(--space-6);
  }
}

/* 小手機優化 (小於 480px) */
@media (max-width: 480px) {
  .stats-section {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  
  .expense-item {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  
  .expense-amount {
    width: 100%;
    text-align: left;
    margin-right: 0;
  }
}