:root { --bg:#0b1220; --card:#121a2b; --ink:#E6EDF3; --muted:#CAD2DE; --accent:#60a5fa; }

*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI, Noto Sans TC, system-ui;background:#0d1117;color:var(--ink)}
.container{max-width:980px;margin:24px auto;padding:12px}
.card{background:#111827;border:1px solid #1f2937;border-radius:14px;padding:16px;margin-bottom:14px}
h1{font-size:22px;margin:0 0 12px} h2{font-size:18px;margin:0 0 10px}
label{font-size:14px;color:var(--muted)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #374151;background:#0b1320;color:#C8D7E4;border-radius:10px;outline:none}
.grid{display:grid;gap:10px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:10px;align-items:center}

/* —— 膠囊徽章（螢幕＋列印） —— */
.badge {
  --badge-py: 4px;
  --badge-px: 12px;
  --badge-radius: 999px;
  --badge-fs: 14px;
  --badge-fw: 600;
  --badge-minw: 50px;

  display: inline-block;
  padding: var(--badge-py) var(--badge-px);
  border-radius: var(--badge-radius);
  font-size: var(--badge-fs);
  font-weight: var(--badge-fw);
  line-height: 1.4;
  min-width: var(--badge-minw);
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* 數字對齊 */
  -webkit-font-smoothing: antialiased;
  border: 1px solid transparent;      /* 統一先給邊框，之後各色覆蓋 */
}

.badge--sm { --badge-py: 3px; --badge-px:10px; --badge-fs:13px; --badge-minw:44px; }
.badge--lg { --badge-py: 6px; --badge-px:14px; --badge-fs:15px; --badge-minw:56px; }

.badge.green  { background:#006000; color:#fff;     border-color:#008500; } /* 🟢 OK */
.badge.yellow { background:#F6EC28; color:#111827; border-color:#E0D20B; } /* 🟡 注意 */
.badge.red    { background:#dc2626; color:#fff;     border-color:#b11f1f; } /* 🔴 逾時 */
.badge.gray   { background:#334155; color:#cbd5e1;  border-color:#475569; } /* 無值/置中 */



.button{padding:10px 14px;border-radius:10px;background:#2563eb;border:none;color:white;cursor:pointer}
.button.ghost{background:#1f2937}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #293043;padding:6px 8px;text-align:center}
.helper{font-size:12px;color:#94a3b8}
.hr{height:1px;background:#1f2937;margin:10px 0}
.small{font-size:12px;color:#9ca3af}
.code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
input.invalid { outline: 2px solid #ef4444; }
/* 第一行的客製欄寬：日期 1fr、分隊 0.8fr、出勤 1.2fr */
.grid-basic { grid-template-columns: 1fr 0.8fr 1.2fr; }

/* 讓單一輸入元件不要撐滿整欄 */
.compact-control { width: auto !important; min-width: 160px; }
/* 第一行的客製欄寬（已加過）：.grid-basic { grid-template-columns: 1fr 0.8fr 1.2fr; } */
/* 讓第一行三欄頂端對齊，第三欄放四格時不會垂直置中 */
.align-start { align-items: start; }
/* 讓出勤人員四格更緊湊一點（可選） */
.crew-grid { gap: 8px; }
.date-row { display:flex; gap:8px; align-items:center; }
.icon-btn { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#1f2937; color:#fff; cursor:pointer; }
.icon-btn:hover { filter:brightness(1.1); }
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 12px;
}
.page-title{ margin:0; }

/* 🔹 按鈕群組：兩顆貼在一起 */
.page-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* 🔹 主按鈕 / 次要按鈕 ─ 統一造型 */
.btn-primary,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}

.btn-primary{
  background:#0ea5e9;
  color:#fff;
  border-color:#38bdf8;
}

.btn-secondary{
  background:#1f2937;
  color:#e5e7eb;
  border-color:#4b5563;
}.feedback-card h2 {
  margin-bottom: 10px;

}

.feedback-card p {
  margin: 0;
  line-height: 1.4;
}

.feedback-section {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
}

.feedback-section h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: #ffd700; /* 金黃色強調 */
}

.small {
  font-size: 0.85em;
  opacity: 0.7;
  margin-top: 10px;
}
.table.intervals td.center { text-align: center; }
.table.intervals td.mono, .table.intervals th.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; letter-spacing: .3px; font-variant-numeric: tabular-nums;  /* 補上等寬數字 */}
.subtle { margin-top: 8px; opacity: .85; line-height: 1.6; }
/* 新增：回饋信標題/內容的通用樣式（螢幕用） */
.feedback-section-title {
  background: rgba(255,255,255,0.06);
  padding: 6px 10px;
  border-left: 4px solid #ffd700; /* 黃色條 */
  font-weight: 700;
  margin-top: 12px;
  border-radius: 4px;
}
.feedback-section-content {
  background: transparent;
  padding: 6px 10px;
  margin-top: 4px;
  margin-bottom: 12px;
}
/* 回饋信：段落區塊 */
.feedback-block{
  border: 1px solid #2b3648;          /* 深色主題下的淡邊框 */
  background: rgba(255,255,255,0.04); /* 淡底色 */
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0;
}
.feedback-title{
  font-weight: 700;
  margin: 0 0 10px;
  padding-left: 8px;
  border-left: 4px solid #ffd700;     /* 左側色條（黃） */
  color: #ffd700;                     /* 標題字配合黃色 */
}
.feedback-body{
  line-height: 1.5;                   /* 回饋內容行距 */
  white-space: pre-wrap;              /* 讓換行自然顯示 */
  margin: 0 10px 0;
}
.header-info {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一欄自動寬度，第二欄填滿 */
  gap: 4px 50px; /* 上下 4px，左右 50px 間距 */
  font-size: 17px;
}

.header-info strong {
  min-width: 80px; /* 固定欄寬，標籤對齊 */
  display: inline-block;
}

/* 調整時間輸入寬度，避免空出的位置 */
input[type="time"] { 
  padding-right: 8px; 
}
/* 補：icon-btn 用到的邊框色變數 */
:root { --line:#394150; }
  /* 小圓圈轉轉 */
  .btn-spinner {
    width:14px; height:14px;
    border:2px solid #fff;          /* 跟你的 .button 白字搭配 */
    border-right-color: transparent; /* 缺口 */
    border-radius: 50%;
    display:inline-block;
    vertical-align:-2px;             /* 與文字對齊 */
    margin-right:6px;
    animation: btnspin .6s linear infinite;
  }
  @keyframes btnspin { to { transform: rotate(360deg); } }

  /* 鎖住時降低透明度（可選） */
  .button[disabled] { opacity:.8; cursor:not-allowed; }


@media print {
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .container { padding: 0; }
  .card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    break-inside: avoid;           /* 避免卡片被切半 */
    page-break-inside: avoid;
  }

  .hr { background: #e5e7eb !important; }

  .table th {
    background-color: #f2f2f2 !important;
    color: #000000 !important;
    border-color: #d1d5db !important;
  }
  .table td {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #e5e7eb !important;
  }
  .table tr:nth-child(even) td { background-color: #f9f9f9 !important; }
  .table { break-inside: avoid; page-break-inside: avoid; }

  .subtle, .small, label { color: #000000 !important; opacity: 0.9 !important; }

  input, select, textarea {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #d1d5db !important;
  }

  .btn-primary,
  .btn-secondary {
    display: none !important;
  }
  .page-header { gap: 8px !important; }

  /* 回饋信段落：列印時改為淺灰底＋灰色左條 */
  .feedback-section-title {
    background-color: #e6e6e6 !important;
    border-left: 4px solid #888 !important;
  }
  .feedback-section-content {
    background-color: #ffffff !important;
  }
  /* 回饋信：列印用灰階樣式 */
.feedback-block{
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
}
.feedback-title{
  color: #000000 !important;
  border-left: 4px solid #888 !important; /* 左條改灰色 */
}
.feedback-body{ color:#000 !important; }

}
.grid-basic > .span-2 {
  grid-column: span 2;
}
.grid.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px; /* 依你的設計調整 */
}
@media (max-width: 960px){
  .grid.grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .grid.grid-6 { grid-template-columns: repeat(2, 1fr); }
}