/* Claude-AI-2026/05/12- 系統共用樣式 - 手機優先 */
:root {
  --nav-height: 56px;
  --bottom-height: 64px;
}

body {
  padding-top: var(--nav-height);
  padding-bottom: calc(var(--bottom-height) + 8px);
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
}

.main-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px;
}

/* Claude-AI-2026/05/12- 底部固定選單 */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: var(--bottom-height);
  z-index: 1030;
}
.bottom-nav .nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #6c757d;
  font-size: 0.72rem;
  gap: 2px;
}
.bottom-nav .nav-btn i { font-size: 1.4rem; }
.bottom-nav .nav-btn.active { color: #0d6efd; font-weight: 600; }
.bottom-nav .nav-btn:active { background: #f1f3f5; }

/* Claude-AI-2026/05/12- 卡片式列表 */
.card-list .card {
  margin-bottom: 12px;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  border: 1px solid #e9ecef;
}
.card-list .card-body { padding: 14px; }
.card-list .card-title { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.card-list .meta { font-size: 0.85rem; color: #6c757d; }

/* Claude-AI-2026/05/12- 課程等級徽章與顏色提示 */
.level-badge { font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; }

/* Claude-AI-2026/05/12- 今日醒目卡片 */
.card-today {
  border-left: 5px solid #ffc107;
  background: #fff8e1;
}

/* Claude-AI-2026/05/12- 衝突警告卡片 */
.card-conflict {
  border-left: 5px solid #dc3545;
  background: #fff5f5;
}
.card-conflict .card-title { color: #b02a37; }

/* Claude-AI-2026/05/12- 大按鈕 */
.btn-touch { min-height: 48px; font-size: 1rem; }
.btn-touch-sm { min-height: 40px; }

/* Claude-AI-2026/05/12- 表單欄位 */
.form-control, .form-select { min-height: 44px; font-size: 1rem; }
.form-label { font-weight: 600; font-size: 0.92rem; margin-bottom: 4px; }

/* Claude-AI-2026/05/12- 區塊標題 */
.section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #495057;
  margin: 16px 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-title .count {
  background: #e7f1ff;
  color: #0d6efd;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.78rem;
}

/* Claude-AI-2026/05/12- 排班表格 */
.schedule-table { font-size: 0.85rem; }
.schedule-table th { background: #f1f3f5; position: sticky; top: var(--nav-height); }

/* Claude-AI-2026/05/12- 教官 chip 多選 */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  margin: 3px 3px 0 0;
  border: 1px solid #ced4da;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  background: #fff;
}
.chip.selected {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

/* Claude-AI-2026/05/12- 多段日期區塊 */
.date-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.date-row .form-control { flex: 1; }

/* Claude-AI-2026/05/14- 代課設定區塊 */
.sub-row {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  align-items: center;
  flex-wrap: nowrap;
}
.sub-row .form-select,
.sub-row .form-control { flex: 1; min-height: 36px; font-size: 0.85rem; }
.sub-row > i { flex: 0 0 16px; font-size: 0.9rem; }
.sub-row .btn { flex: 0 0 32px; }

/* Claude-AI-2026/05/12- 登入頁 */
.login-wrap {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.login-card { width: 100%; max-width: 380px; }