/* ════════════════════════════════════════════════
   style.css — 心臟超音波填寫（A4 橫向）
   ════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #ecf0f4; color: #222;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
               "Microsoft JhengHei", "Heiti TC", "Noto Sans CJK TC", sans-serif;
  font-size: 13px; line-height: 1.4;
}
h1, h2, h3, h4 { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: 13px; }
a { color: #1c64f2; text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
       background: #f3f4f6; padding: 1px 4px; border-radius: 3px; }

/* ══════════════ 登入頁 ══════════════ */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
}
.login-card {
  background: #fff; border-radius: 12px;
  padding: 36px 32px; box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  width: 360px; max-width: calc(100vw - 32px);
}
.login-card h1 { font-size: 20px; text-align: center; color: #1e3a5f; }
.login-card .subtitle { text-align: center; color: #888; margin: 4px 0 20px; }
.login-card form { display: flex; flex-direction: column; gap: 16px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #555; }
.login-card input[type="password"], .login-card input[type="text"] {
  padding: 10px 12px; border: 1px solid #d0d7de; border-radius: 6px;
  font-size: 15px; outline: none;
}
.login-card input:focus { border-color: #1c64f2; box-shadow: 0 0 0 3px rgba(28,100,242,0.15); }
.login-card .btn-primary { margin-top: 6px; padding: 11px; background: #1c64f2; color: #fff;
  border: 0; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 15px; }
.login-card .btn-primary:hover { background: #1351c4; }
.login-card .btn-link { text-align: center; padding: 10px; color: #666;
  border: 1px solid #d0d7de; border-radius: 6px; }
.login-card .error { background: #fee2e2; color: #991b1b;
  padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 8px; }
.login-card .success { background: #d1fae5; color: #065f46;
  padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 8px; }

/* ══════════════ 工具列 ══════════════ */
.toolbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  background: #1e3a5f; color: #fff;
  padding: 8px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.toolbar .brand { font-size: 15px; font-weight: 600; letter-spacing: 1px; }
.toolbar .actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.btn {
  padding: 5px 10px; border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08); color: #fff;
  border-radius: 4px; cursor: pointer; font-size: 12px;
  text-decoration: none; display: inline-block;
}
.btn:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
.btn-primary { background: #2196f3; border-color: #2196f3; }
.btn-primary:hover { background: #1976d2; }
.btn-warn { background: #ef5350; border-color: #ef5350; }
.btn-warn:hover { background: #c62828; }
.btn-link { background: transparent; border-color: transparent; color: #cfe2ff; }
.btn-sm { padding: 2px 6px; font-size: 11px; }

/* ══════════════ 報告主體（A4 橫向） ══════════════ */
.report {
  max-width: 1500px;
  margin: 12px auto;
  padding: 0 12px 80px;
  display: flex; flex-direction: column; gap: 10px;
}

/* 上半 50/50 */
.top-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.top-half > div {
  background: #fff; border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.block-title {
  font-size: 13px; color: #1e3a5f; font-weight: 600;
  border-bottom: 2px solid #e3f2fd; padding-bottom: 4px; margin-bottom: 8px;
}

.kv-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.kv-grid label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; color: #555;
}
.kv-grid input, .kv-grid select {
  padding: 4px 6px; border: 1px solid #cfd8dc; border-radius: 3px;
  font-size: 12px; background: #fff;
}
.kv-grid input:focus, .kv-grid select:focus {
  outline: none; border-color: #2196f3; box-shadow: 0 0 0 2px rgba(33,150,243,0.15);
}

.summary-grid { display: flex; flex-direction: column; gap: 5px; }
.sg-row, .sg-block { display: flex; gap: 6px; align-items: center; }
.sg-block { align-items: flex-start; flex-direction: row; }
.sg-row > span, .sg-block > span {
  flex: 0 0 60px; font-size: 11px; color: #555;
}
.sg-row > input, .sg-row > select {
  flex: 1; padding: 4px 6px; border: 1px solid #cfd8dc; border-radius: 3px;
  font-size: 12px; background: #fff;
}
.sg-block > textarea {
  flex: 1; padding: 4px 6px; border: 1px solid #cfd8dc; border-radius: 3px;
  font-size: 12px; resize: vertical; line-height: 1.4;
}
.sg-block > textarea:focus, .sg-row > input:focus, .sg-row > select:focus {
  outline: none; border-color: #2196f3; box-shadow: 0 0 0 2px rgba(33,150,243,0.15);
}

/* ══════════════ 下半 4 欄 ══════════════ */
.bottom-half {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}
.col-block {
  background: #fff; border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;  /* allow shrink */
}
.sec-wrap { display: flex; flex-direction: column; gap: 2px; }
.sec-title {
  font-size: 12px; font-weight: 600; color: #1e3a5f;
  background: #e3f2fd; padding: 3px 6px; border-radius: 3px;
}

/* ══════════════ 量測表格 ══════════════ */
table.measure-table {
  width: 100%; border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}
table.measure-table th, table.measure-table td {
  border: 1px solid #d8dee4;
  padding: 1px 2px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}
table.measure-table thead th {
  background: #f5f7fa; color: #1e3a5f;
  font-weight: 600;
  font-size: 10px; padding: 2px 3px;
}
table.measure-table th.col-label { width: 30%; text-align: left; }
table.measure-table th.col-cells { width: 55%; }
table.measure-table th.col-avg   { width: 15%; }

table.measure-table th.row-label {
  text-align: left; background: #fafbfc;
  font-weight: 500; font-size: 10.5px;
  padding: 1px 4px;
  white-space: nowrap; text-overflow: ellipsis;
}
table.measure-table th.row-label .unit {
  color: #888; font-weight: normal; font-size: 9px;
  margin-left: 2px;
}

/* 5 個輸入 cell */
table.measure-table td input[type="number"],
table.measure-table td input[type="text"],
table.measure-table td select {
  width: 100%; padding: 0 1px; border: 1px solid transparent;
  background: #ffffff; text-align: center;
  font-size: 10.5px; outline: none;
  min-width: 0;
}
table.measure-table td input:focus,
table.measure-table td select:focus {
  background: #fffde7; border-color: #ffc107;
}

/* 手動 vs 自動底色區分 */
table.measure-table td:not(.calc-cell):not(.avg-cell) {
  background: #f7fbff;  /* 淡藍 = 手動 */
}
table.measure-table td.calc-cell,
table.measure-table td.avg-cell {
  background: #fffce8;  /* 淡黃 = 自動 */
  font-weight: 600;
  color: #1565c0;
  font-style: italic;
}
table.measure-table tr.row-calc th.row-label {
  background: #fff8e1;
  color: #5d4037;
}

/* 平均欄 */
table.measure-table td.avg-cell {
  background: #f3f3f3;  /* avg 用更淡的灰 */
  font-style: normal;
  color: #444;
  font-size: 10px;
}

/* 隱藏空白行（篩選） */
tr.row-empty { display: none; }
.sec-empty { display: none; }

/* 數字 spinner 隱藏 */
table.measure-table input::-webkit-outer-spin-button,
table.measure-table input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
table.measure-table input[type="number"] { -moz-appearance: textfield; }

/* ══════════════ 底列：衍生壓力 + 圖片區 ══════════════ */
.bottom-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}
.pressure-block, .image-block {
  background: #fff; border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.image-placeholder {
  min-height: 80px;
  border: 2px dashed #cfd8dc;
  border-radius: 4px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 8px;
  background: #fafbfc;
}
.image-placeholder img {
  max-width: 100%; max-height: 100px;
  margin: 2px 0;
}
.image-caption {
  font-size: 10px; color: #888; margin-top: 6px; font-style: italic;
}

/* ══════════════ Modal ══════════════ */
.modal {
  position: fixed; ins

/* ══════════════ 選項管理 UI ══════════════ */
.mgr-tabs {
  display: flex; gap: 4px; padding: 6px 16px 0;
  border-bottom: 1px solid #eee;
}
.mgr-tab {
  padding: 6px 12px; border: 1px solid #cfd8dc;
  border-radius: 4px 4px 0 0;
  background: #f5f7fa; color: #555;
  cursor: pointer; font-size: 12px;
  border-bottom: 0;
}
.mgr-tab.active { background: #fff; color: #1e3a5f; font-weight: 600; border-color: #1e3a5f; }
.mgr-tab:hover { background: #e3f2fd; }

.mgr-group {
  border: 1px solid #e0e0e0; border-radius: 4px;
  padding: 8px; margin-bottom: 10px; background: #fafbfc;
}
.mgr-group-head {
  display: flex; gap: 6px; margin-bottom: 6px;
  align-items: center;
}
.mgr-group-name {
  flex: 1; padding: 4px 6px; font-weight: 600;
  border: 1px solid #cfd8dc; border-radius: 3px;
  background: #fff; color: #1e3a5f;
}
.mgr-items { display: flex; flex-direction: column; gap: 3px; }
.mgr-row {
  display: flex; gap: 3px; align-items: center;
}
.mgr-item-text {
  flex: 1; padding: 4px 6px;
  border: 1px solid #cfd8dc; border-radius: 3px;
  font-size: 12px; background: #fff;
}
.mgr-mini {
  padding: 2px 6px; font-size: 11px;
  background: #fff; color: #555;
  border: 1px solid #cfd8dc; border-radius: 3px;
  cursor: pointer; min-width: 22px;
}
.mgr-mini:hover { background: #e3f2fd; color: #1e3a5f; }
.mgr-add {
  margin-top: 6px;
  padding: 6px 12px;
  background: #e3f2fd; color: #1e3a5f;
  border: 1px dashed #1e3a5f; border-radius: 4px;
  cursor: pointer; font-size: 12px;
}
.mgr-add:hover { background: #bbdefb; }
.mgr-add-group { display: block; margin-top: 10px; }

/* ══════════════ 摘要區「+」按鈕 ══════════════ */
.options-edit-btn {
  padding: 0 8px;
  border: 1px solid #1e3a5f !important;
  background: #1e3a5f !important;
  color: #fff !important;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  height: 22px;
  align-self: flex-start;
  margin-top: 2px;
}
.options-edit-btn:hover { background: #2196f3 !important; }

/* 摘要 sg-block 改為支援按鈕在右邊 */
.sg-block { position: relative; }
.sg-block .options-edit-btn {
  position: absolute; top: 0; right: 0;
  font-size: 12px; padding: 1px 7px; height: 18px;
}