/* 患者管理 - 简洁医疗风 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f4f6f8; color: #1a202c; min-height: 100vh;
}
a { color: #2563eb; text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 16px; }
.topbar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 10px 16px; }
.topbar .inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar .brand { font-weight: 700; font-size: 16px; color: #0f766e; }
.topbar nav { display: flex; gap: 2px; background: #f1f5f9; padding: 3px; border-radius: 10px; flex-wrap: wrap; }
.topbar nav a { margin: 0; font-size: 13px; padding: 5px 12px; border-radius: 8px; color: #475569;
  border: none; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background .12s ease, color .12s ease; }
.topbar nav a:hover { background: #e2e8f0; color: #0f766e; }
.topbar nav a.active { background: #0f766e; color: #fff; font-weight: 600; }
.topbar .spacer { flex: 1; }
.card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card h2 { font-size: 17px; margin-bottom: 12px; color: #0f766e; }
.card h3 { font-size: 15px; margin: 14px 0 8px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #edf2f7; vertical-align: top; }
th { color: #64748b; font-weight: 600; white-space: nowrap; }
tr:hover td { background: #f8fafc; }
input, select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px;
  width: 100%; margin-bottom: 10px; background: #fff;
}
label { display: block; font-size: 13px; color: #475569; margin: 8px 0 3px; }
button, .btn {
  background: #0f766e; color: #fff; border: 0; padding: 9px 16px; border-radius: 8px;
  font-size: 14px; cursor: pointer;
}
button:hover, .btn:hover { background: #115e59; }
.btn-gray { background: #64748b; }
.btn-gray:hover { background: #475569; }
.btn-danger { background: #dc2626; }
.btn-danger:hover { background: #b91c1c; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-xs { padding: 2px 8px; font-size: 12px; }
.btn-outline { background: #fff; color: #0f766e; border: 1px solid #0f766e; }
.btn-outline:hover { background: #f0fdfa; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.b-pending { background: #fef3c7; color: #92400e; }
.b-confirmed { background: #dcfce7; color: #166534; }
.b-rejected, .b-cancelled { background: #fee2e2; color: #991b1b; }
.b-completed { background: #e0e7ff; color: #3730a3; }
.b-open { background: #fef3c7; color: #92400e; }
.b-done { background: #dcfce7; color: #166534; }
.b-expired { background: #fee2e2; color: #991b1b; }
.b-skipped { background: #e2e8f0; color: #334155; }
.b-overdue { background: #dc2626; color: #fff; }
.alert { padding: 10px 14px; border-radius: 8px; margin: 10px 0; font-size: 14px; }
.alert-ok { background: #dcfce7; color: #166534; }
.alert-warn { background: #fef3c7; color: #92400e; }
.alert-err { background: #fee2e2; color: #991b1b; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.photo-grid figure { margin: 0; position: relative; }
.photo-grid img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; display: block; }
.photo-grid figcaption { font-size: 11px; color: #64748b; margin-top: 3px; word-break: break-all; }
.muted { color: #64748b; font-size: 13px; }
.small { font-size: 13px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 180px; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { background: #e2e8f0; color: #334155; }
.tabs button.active { background: #0f766e; color: #fff; }
.tabpane { display: none; }
.tabpane.active { display: block; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
a.stat-link { display: block; text-decoration: none; transition: transform .08s, box-shadow .08s; }
a.stat-link:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.10); }
a.stat-link:active { transform: translateY(0); }
.stat .num { font-size: 26px; font-weight: 700; color: #0f766e; }
.stat .num.warn-num { color: #b45309; }
.stat .lbl { font-size: 13px; color: #64748b; margin-top: 4px; }
.hero { text-align: center; padding: 30px 10px; }
.hero h1 { font-size: 22px; margin-bottom: 8px; color: #0f766e; }
.hero p { color: #64748b; font-size: 14px; margin-bottom: 6px; }
.login-box { max-width: 380px; margin: 60px auto; }
ul.timeline { list-style: none; }
ul.timeline li { border-left: 2px solid #0f766e; padding: 0 0 16px 16px; position: relative; }
ul.timeline li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #0f766e; }
ul.timeline li .date { font-weight: 600; }
.photo-view { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 50; }
.photo-view img { max-width: 92vw; max-height: 88vh; border-radius: 8px; }
.photo-view .close { position: absolute; top: 16px; right: 24px; color: #fff; font-size: 30px; cursor: pointer; }
/* v2: 随访审核 */
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; background: #e2e8f0; color: #334155; margin-left: 4px; }
.tag-warn { background: #fef3c7; color: #92400e; }
.tag-ok { background: #dcfce7; color: #166534; }
.tag-red { background: #fee2e2; color: #991b1b; }
.badge-red { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; background: #dc2626; color: #fff; vertical-align: middle; }
.btn-ok { background: #16a34a; }
.btn-ok:hover { background: #15803d; }
.btn-red { background: #dc2626; }
.btn-red:hover { background: #b91c1c; }
/* 照片分类标注按钮 (标注页/患者详情页共用) */
.tag-row { display: flex; gap: 4px; margin-top: 8px; }
.tag-btn { border: 1px solid #cbd5e1; background: #fff; color: #1e293b; border-radius: 6px;
  font-size: 12px; padding: 3px 6px; cursor: pointer; }
.tag-btn:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
.note-box { background: #f8fafc; border-left: 3px solid #0f766e; padding: 8px 12px; border-radius: 6px; margin: 8px 0; font-size: 14px; white-space: pre-wrap; }
.note-box.warn { border-left-color: #d97706; }
.gallery { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.gallery img { border-radius: 8px; border: 1px solid #e2e8f0; }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.form-row > div { flex: 1; min-width: 150px; }
@media (max-width: 640px) { .wrap { padding: 10px; } table { font-size: 13px; } }

/* ---- Phase 6 视觉增强 (2026-09-03) ---- */
body { background: linear-gradient(180deg,#eef7f6 0%, #f4f6f8 220px); }
.card { border: 1px solid #eef0f3; box-shadow: 0 2px 10px rgba(15,23,42,.05); transition: box-shadow .18s; }
.wrap { animation: fadeUp .22s ease-out; }
@keyframes fadeUp { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform:none;} }
button, .btn { transition: background .15s, transform .08s; }
button:active, .btn:active { transform: scale(.98); }
.topbar { box-shadow: 0 1px 6px rgba(15,23,42,.05); position: sticky; top: 0; z-index: 20; }
input, select, textarea { border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color:#0f766e !important; box-shadow: 0 0 0 3px rgba(15,118,110,.15); }
table { border-radius: 10px; overflow: hidden; }
.tag, .tag-ok, .tag-warn, .tag-red { border-radius: 20px; }
@media (max-width: 640px) {
  .topbar .brand { font-size: 14px; }
  .topbar nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .topbar nav a { white-space: nowrap; }
  .card { padding: 16px; }
  .ph-th { width: 76px; height: 76px; }
}
/* v18: 派生阶段/类型徽章 (行内, 非缩略图角标) */
.phase-badge{display:inline-block;font-size:11px;line-height:1.4;padding:1px 8px;border-radius:10px;margin-left:6px;background:#e0f2fe;color:#0369a1;vertical-align:middle;font-weight:600}

/* ---- 移动端适配 v2026-09-04 (Kimi k3 一审后修订) ---- */
/* 宽表格横向滚动容器 (全局: PC 防溢出 + 手机可横滚) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; margin-bottom: 4px;
  background: linear-gradient(90deg, #fff 70%, rgba(15,23,42,.05)) right / 24px 100% no-repeat; }
.table-scroll > table { min-width: 600px; }
.table-scroll.ts-wide > table { min-width: 780px; }  /* 预约管理 10 列表 */
@media (max-width: 640px) {
  html, body { overflow-x: clip; }
  @supports not (overflow: clip) { html, body { overflow-x: hidden; } }
  a, button, .btn, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  .topbar { position: static; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .topbar .inner { gap: 8px; }
  /* 导航: 网格整排全显 (替代单行横滑) — 覆盖旧 nowrap/overflow-x:auto 规则 */
  .topbar nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px;
    width: 100%; flex-wrap: wrap; overflow: visible; background: transparent; padding: 0; border-radius: 0; }
  .topbar nav a { font-size: 12px; padding: 7px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: center; background: #f1f5f9; border-radius: 8px; }
  .topbar nav a.active { background: #0f766e; }
  .card { padding: 14px; margin-bottom: 12px; }
  table { font-size: 13px; }
  /* iOS: 输入框 16px 防聚焦自动放大; 触控目标加大 */
  input, select, textarea { font-size: 16px; min-height: 42px; padding: 8px 10px; line-height: 1.3; }
  select { padding-right: 28px; }
  .form-row { gap: 8px; }
  .form-row > div { min-width: 100%; }   /* 表单多列 → 单列堆叠 */
  button, .btn { min-height: 42px; }
  .btn-sm { min-height: 34px; padding: 4px 12px; }
  .tabs button { font-size: 13px; padding: 7px 10px; }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
}

/* ===== 患者详情分区卡片 (2026-09-04) ===== */
.ph-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.ph-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.chip{background:#f1f5f9;border:1px solid #e2e8f0;color:#334155;border-radius:999px;padding:2px 10px;font-size:12px;white-space:nowrap}
.chip-form{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.chip-his{background:#dcfce7;border-color:#86efac;color:#166534}
.pf-grid{display:flex;flex-direction:column;gap:12px}
.pf-sec{border:1px solid #e2e8f0;border-radius:10px;padding:10px 14px 12px;margin:0;min-width:0}
.pf-sec legend{font-size:13px;font-weight:600;color:#475569;padding:0 6px}
.pf-sec input,.pf-sec select{width:100%;box-sizing:border-box}
.pf-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.pf-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 4px}

/* 列表诊断列 (2026-09-04) */
.diag-cell{color:#0f766e;font-size:13px}

@media (max-width: 640px) {
  .pf-row2{grid-template-columns:1fr}
  .ph-chips{flex-wrap:wrap}
}

/* 手术日详情页: 宽表窄屏整表横滑, 防列挤压截断 (2026-09-04) */
@media (max-width: 640px) {
  .sched-scroll table { min-width: 880px; }
  /* 行内输入紧凑化: 防 42px 全局 input 撑高行距造成"挤"感 */
  .sched-scroll table input[type="number"],
  .sched-scroll table input[type="time"],
  .sched-scroll table input[type="text"] {
    min-height: 30px; height: 30px; padding: 2px 6px; font-size: 15px; box-sizing: border-box;
  }
  .sched-scroll table input[type="number"] { width: 52px; }
  .sched-scroll table input[type="time"] { width: 96px; }
  .sched-scroll table td { padding: 6px 6px; vertical-align: middle; }
  .sched-scroll table td:first-child { white-space: nowrap; }
  .sched-scroll table td:nth-child(3) { white-space: nowrap; }   /* 患者列不折行 */
  .sched-scroll table .btn-xs { min-height: 28px; padding: 1px 7px; font-size: 12px; }
}

/* 复选框复位: 防全局 input min-height:42px 撑爆勾选框挤压 label 文字 (2026-09-04) */
input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; min-height: 18px !important;
  padding: 0 !important; margin: 0; accent-color: #0f766e; vertical-align: middle; flex: none;
}
.opt-check { display: inline-flex !important; align-items: center; gap: 5px; white-space: nowrap; }
/* 移动端顶栏: 顶行信息 + 导航独占第二行横向滑动 (2026-09-07) */
@media (max-width:820px){
  .topbar .inner{flex-wrap:wrap; overflow:visible}
  .topbar nav{order:99; width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar .brand{white-space:nowrap; flex:none}
  .topbar .spacer{display:none}
  .topbar nav a{flex:none}
}