/* style.css - 響應式 + 自動深淺色 + 可觸控 + 多媒體友善 */
:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#6b7280;
  --primary:#2563eb;
  --border:#e5e7eb;
  --card:#ffffff;
  --card-shadow:0 10px 20px rgba(0,0,0,.06);
  --cyan:#06b6d4; --green:#22c55e; --amber:#f59e0b; --red:#ef4444;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --fg:#e6e8ec;
    --muted:#a1a1aa;
    --primary:#60a5fa;
    --border:#262b3a;
    --card:#0f172a;
    --card-shadow:0 10px 20px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  line-height:1.55;
}
.site-header{padding:12px 16px; border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(37,99,235,.06), transparent);}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px}
.logo{flex:0 0 auto}
h1{font-size:20px; margin:0 0 4px}
.subtitle{margin:0; color:var(--muted); font-size:14px}
.user-nav{display:flex; align-items:center; gap:8px}
.pill{display:inline-flex; align-items:center; padding:3px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px}
.muted{color:var(--muted)}
.container{max-width:1100px; margin:20px auto; padding:0 14px}
.container.narrow{max-width:520px}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--card-shadow); padding:16px; margin-bottom:16px}
.toolbar{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.form-grid{display:grid; gap:12px; grid-template-columns:1fr}
.form-grid label{display:grid; gap:6px}
input,select,button{font:inherit}
input[type="text"],input[type="password"],input[type="number"],input[type="datetime-local"],select{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--fg);
}
input[readonly]{background:rgba(127,127,127,.08)}
.actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--fg); cursor:pointer}
.btn.small{padding:6px 10px; font-size:12px}
.btn.primary{background:var(--primary); color:#fff; border-color:var(--primary)}
.btn.ghost{background:transparent}
.alert{padding:10px 12px; border-radius:10px}
.alert-error{background:#fef2f2; color:#b91c1c; border:1px solid #fecaca}
.alert-info{background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe}
@media (prefers-color-scheme: dark){
  .alert-error{background:#291314; color:#fecaca; border-color:#7f1d1d}
  .alert-info{background:#111827; color:#bfdbfe; border-color:#1e3a8a}
}
.grid-2-1{display:grid; gap:16px; grid-template-columns:1.4fr 1fr}
@media (max-width: 820px){ .grid-2-1{grid-template-columns:1fr} }
.table-wrap{width:100%; overflow:auto}
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{padding:10px 8px; border-bottom:1px solid var(--border); white-space:nowrap}
.table thead th{position:sticky; top:0; background:var(--card); z-index:1}
.stat-box{display:grid; gap:4px; place-items:center; border:1px dashed var(--border); border-radius:12px; padding:18px}
.stat-value{font-size:32px; font-weight:700}
.stat-label{color:var(--muted); font-size:12px}
.stats-grid{display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){ .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.flex-row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.flex-row.wrap{flex-wrap:wrap}
.mt8{margin-top:8px}
.site-footer{padding:18px 20px; color:var(--muted); border-top:1px solid var(--border); margin-top:20px}
button,.btn{touch-action:manipulation}

/* 體位色籤 */
.chip{display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid transparent; color:#0b1220}
.chip-cyan{background:rgba(6,182,212,.15); border-color:rgba(6,182,212,.35)}
.chip-green{background:rgba(34,197,94,.15);  border-color:rgba(34,197,94,.35)}
.chip-amber{background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.35)}
.chip-red{background:rgba(239,68,68,.15);    border-color:rgba(239,68,68,.35)}

/* 小螢幕優化 */
@media (max-width:480px){
  h1{font-size:18px}
  .subtitle{font-size:13px}
}