:root { --bg:#0f1420; --panel:#1a2233; --line:#2a3550; --fg:#e6ebf5; --muted:#8b98b5;
  --accent:#4f8cff; --accent2:#22b8a6; --danger:#e0576b; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,"PingFang TC","Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--fg); font-size:14px; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
main { padding:18px 22px 96px; }   /* 底部留白，避免最後一列被水平捲軸/視窗邊緣蓋住 */
.table-wrap { margin-bottom:8px; }

.topbar { display:flex; align-items:center; gap:16px; padding:10px 22px;
  background:var(--panel); border-bottom:1px solid var(--line); }
.topbar .brand { font-weight:700; }
.topbar .spacer { flex:1; }
.topbar .who { color:var(--muted); }

.flash { background:#2a3550; border:1px solid var(--accent); padding:8px 12px;
  border-radius:8px; margin-bottom:14px; }
.muted { color:var(--muted); } .small { font-size:12px; }
.empty { color:var(--muted); padding:24px; background:var(--panel); border-radius:10px; }

/* login */
.loginbox { max-width:340px; margin:8vh auto; background:var(--panel);
  padding:28px; border-radius:14px; border:1px solid var(--line); }
.loginbox h1 { font-size:20px; margin:0 0 4px; }
.loginbox label, .card label, .filters label { display:block; margin:10px 0; color:var(--muted); font-size:13px; }
input, select { width:100%; padding:9px 10px; margin-top:4px; background:#0d1424;
  border:1px solid var(--line); border-radius:8px; color:var(--fg); font-size:14px; }
.filters input, .filters select { width:auto; }
button { background:var(--accent); color:#fff; border:0; padding:9px 16px;
  border-radius:8px; cursor:pointer; font-size:14px; }
button:hover { filter:brightness(1.1); }
button.danger { background:var(--danger); padding:5px 10px; font-size:12px; }
.btn-link { align-self:center; }

/* layout */
.page-grid { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:18px; align-items:start; }
/* 手機/窄螢幕：單欄堆疊，AI 面板移到表格下方（不 sticky），篩選整齊 */
@media (max-width:1000px){
  .page-grid{ grid-template-columns:1fr; }
  main{ padding:14px 12px 72px; }
  .ai-col{ position:static; }
  .chat{ height:44vh; }
  .filters{ gap:10px; }
  .filters label{ width:100%; margin:6px 0; }
  .filters input, .filters select{ width:100%; }
  .filters button, .btn-link{ align-self:flex-start; }
  th, td{ padding:8px 7px; }
  .count .chip{ display:inline-block; margin:6px 8px 0 0; }
}
h2 { margin:4px 0 14px; }

.filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  background:var(--panel); padding:12px 14px; border-radius:10px; border:1px solid var(--line); }
.count { color:var(--muted); margin:10px 2px; }

.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
table { width:100%; border-collapse:collapse; }
th, td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#141c2e; position:sticky; top:0; font-size:12px; color:var(--muted); }
tr:hover td { background:#182135; }
td.op { width:30%; min-width:220px; font-size:13px; }
td.cat { color:var(--accent2); white-space:nowrap; font-size:12px; }
.cat-select { width:auto; max-width:150px; margin-top:0; padding:5px 6px; font-size:12px;
  color:var(--accent2); text-overflow:ellipsis; }
th:nth-child(9), td:nth-child(9) { white-space:nowrap; }
.cat-select.manual { border-color:#d99a3d; color:#e8b45e; }
td.note { white-space:nowrap; }
.note-input { width:120px; margin-top:0; padding:5px 8px; font-size:12px; }
.note-input:focus { width:200px; }
td.mm { white-space:nowrap; }
td.urgent { color:var(--danger); font-weight:700; }
td.opmin { text-align:right; white-space:nowrap; color:var(--muted); }
.mm-select { width:auto; margin-top:0; padding:5px 6px; font-size:12px; color:var(--muted); }
.mm-select.mm-morbidity { border-color:#d99a3d; color:#e8b45e; }
.mm-select.mm-mortality { border-color:var(--danger); color:var(--danger); }
.saved { border-color:#2ecc71 !important; box-shadow:0 0 0 2px rgba(46,204,113,.25); transition:box-shadow .2s; }
.save-error { border-color:var(--danger) !important; }
/* 讓左側關鍵欄（日期/房/急/姓名/年紀/病歷號）不換行、一定看得到；診斷收窄自動換行 */
th:nth-child(1), td:nth-child(1),
th:nth-child(2), td:nth-child(2),
th:nth-child(3), td:nth-child(3),
th:nth-child(4), td:nth-child(4),
th:nth-child(5), td:nth-child(5),
th:nth-child(6), td:nth-child(6) { white-space:nowrap; }
td:nth-child(1) { font-weight:600; }
/* 姓名欄收窄；過長外文姓名允許換行，避免撐開整欄 */
th:nth-child(4), td:nth-child(4) { width:1%; min-width:76px;
  white-space:normal; overflow-wrap:anywhere; }
td:nth-child(7) { width:16%; min-width:140px; font-size:13px; }
table.mini td, table.mini th { font-size:13px; }

/* AI */
.ai-col { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; position:sticky; top:14px; }
.ai-col h3 { margin:0 0 4px; }
.chat { height:46vh; overflow-y:auto; margin:10px 0; display:flex; flex-direction:column; gap:8px; }
.msg { padding:8px 11px; border-radius:10px; font-size:13px; line-height:1.5; }
.msg.you { align-self:flex-end; background:#26324e; }
.msg.ai { background:#12233a; border:1px solid var(--line); }
.msg .rows { margin-top:6px; font-size:12px; color:var(--muted); }
.msg .rows div { padding:2px 0; border-top:1px dashed var(--line); }
#askform { display:flex; gap:8px; }
#askform input { flex:1; }
.engine-tag { font-size:11px; color:var(--muted); }
.show-left { display:inline-block; margin-top:8px; font-size:12px; padding:4px 10px;
  background:#1d2c49; border:1px solid var(--accent); border-radius:6px; }
.chip { display:inline-block; margin-left:10px; padding:3px 10px; font-size:12px;
  background:#1d2c49; border:1px solid var(--accent2); border-radius:12px; color:var(--accent2); }
.chip a { color:var(--muted); margin-left:4px; text-decoration:none; }

/* stats */
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
.bar-row { display:grid; grid-template-columns:150px 1fr 40px; align-items:center; gap:8px; margin:5px 0; font-size:13px; }
.bar-label { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar { background:#0d1424; border-radius:6px; height:16px; overflow:hidden; }
.bar-fill { display:block; height:100%; background:var(--accent); }
.bar-fill.alt { background:var(--accent2); }
.bar-n { text-align:right; }

.detail-title { margin-top:26px; }
.total-badge { float:right; font-size:13px; font-weight:600; color:#e8b45e;
  background:#2a2417; border:1px solid #d99a3d; border-radius:6px; padding:2px 10px; }
table.detail { width:100%; margin-top:8px; }
table.detail th { position:static; }
table.detail td, table.detail th { text-align:center; padding:6px 8px; }
table.detail td.sub-label { text-align:left; }
table.detail td.morb { color:#e8b45e; font-weight:600; }
table.detail td.mort { color:var(--danger); font-weight:600; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px; max-width:720px; }
.card h3 { margin-top:0; }
code { background:#0d1424; padding:1px 5px; border-radius:4px; }

/* 中等螢幕（如 13" MacBook）：收窄 AI 欄與表格欄位，避免橫向捲動。
   ⚠ 加 min-width:1001px，才不會在手機覆蓋掉下面的單欄規則 */
@media (min-width:1001px) and (max-width:1560px){
  .page-grid{ grid-template-columns:minmax(0,1fr) 340px; }
  td.op{ min-width:170px; }
  td:nth-child(7){ min-width:110px; }
  .note-input{ width:70px; }
  .cat-select{ max-width:100px; }
  .mm-select{ padding:5px 2px; }
  th, td{ padding:8px 5px; }
}