/*
 * 新幸福口腔网页端统一视觉基线。
 * 只负责外观与响应式层，不承载业务状态或权限判断；页面局部样式可以在此基础上扩展。
 */

:root {
  --clinic-navy: #16344b;
  --clinic-navy-strong: #0e2639;
  --clinic-teal: #087f78;
  --clinic-teal-soft: #e7f6f3;
  --clinic-blue-soft: #edf4f7;
  --clinic-gold: #b28a52;
  --clinic-gold-ink: #7d5a27;
  --clinic-gold-soft: #f7f0e5;
  --clinic-page: #f6f3ec;
  --clinic-panel: #fffdf9;
  --clinic-ink: #172b3a;
  --clinic-muted: #61717b;
  --clinic-line: #ddd7cb;
  --clinic-line-strong: #c9beb0;
  --clinic-danger: #b42318;
  --clinic-warning: #a85c00;
  --clinic-success: #087f78;
  --clinic-radius: 10px;
  --clinic-radius-sm: 7px;
  --clinic-shadow: 0 10px 28px rgba(22, 52, 75, .07);
  --clinic-focus: 0 0 0 3px rgba(8, 127, 120, .22);
}

/* Patient workspace primitives are loaded by patient pages directly so the
   module remains usable without depending on unrelated navigation changes. */
.ops-shell{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start}.ops-main,.ops-aside{min-width:0}.ops-aside{position:sticky;top:82px}.ops-kicker{color:#0f766e;font-size:12px;font-weight:700;letter-spacing:.06em}.ops-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.ops-title h1{margin:4px 0 0;color:#102a43;font-size:26px}.ops-pill{display:inline-block;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700;color:#0f766e;background:#ecfdf5}.ops-pill.warning{color:#9a3412;background:#fff7ed}.ops-aside-card,.ops-section{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}.ops-aside-card{margin-bottom:12px}.ops-aside-card h2,.ops-section h2{margin:0 0 10px;color:#102a43;font-size:16px}.ops-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:end;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;margin:12px 0}.ops-filter label{min-width:140px;flex:1;color:var(--muted);font-size:12px}.ops-empty{background:#fff;border:1px dashed #9fb3c8;border-radius:12px;padding:32px 20px;color:var(--muted);text-align:center}.patient-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}.patient-summary-grid .ops-aside-card{margin:0}.patient-summary-grid strong{display:block;margin-top:6px;color:#102a43;font-size:20px}.patient360{max-width:1280px;margin:0 auto}.patient360-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px;background:linear-gradient(135deg,#fff,#eef6fc);border:1px solid #cfe0f2;border-radius:14px;box-shadow:var(--shadow)}.patient360-hero h1{margin:2px 0 6px;color:#102a43;font-size:28px}.patient360-avatar{width:62px;height:62px;overflow:hidden;border-radius:50%;background:#d9eaf7;color:var(--brand);display:grid;place-items:center;font-size:24px;font-weight:700}.patient360-avatar img{width:100%;height:100%;object-fit:cover}.patient360-actions,.patient360-statuses,.patient360-quick-actions{display:flex;flex-wrap:wrap;gap:8px}.patient360-statuses{margin-top:9px}.patient360-statuses span{border:1px solid #cceae5;background:#fff;border-radius:999px;color:#35525a;padding:5px 8px;font-size:12px}.patient360-profile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}.patient360-profile>div{border-left:3px solid #cfe0f2;background:rgba(255,255,255,.72);padding:8px 10px;min-width:0}.patient360-profile span{display:block;color:var(--muted);font-size:12px}.patient360-profile strong{display:block;margin-top:3px;color:#243b53;overflow-wrap:anywhere}.patient360-completeness{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;margin:12px 0;padding:12px 14px;border:1px solid #f4d5a6;border-radius:10px;background:#fffaf0}.patient360-tabs{display:flex;gap:4px;overflow-x:auto;margin:16px 0 -2px;border-bottom:1px solid var(--line)}.patient360-tabs button{flex:0 0 auto;min-height:42px;padding:9px 13px;border:0;border-bottom:3px solid transparent;border-radius:7px 7px 0 0;color:#52616f;background:transparent;font-weight:600}.patient360-tabs button[aria-selected=true]{color:#0f766e;background:#f0fdfa;border-bottom-color:#14b8a6}.tab-badge{display:inline-grid;min-width:18px;height:18px;margin-left:5px;place-items:center;border-radius:999px;color:#fff;background:#d97706;font-size:11px}.patient-followup-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.patient360-treatment,.patient360-upload{border:1px solid var(--line);border-radius:10px;background:#fff;padding:14px;margin:10px 0}.patient360-treatment{display:grid;gap:6px}.patient360-treatment span,.patient360-treatment p{color:var(--muted);margin:0}.patient360-timeline{border-left:2px solid #9fb3c8;display:grid;gap:12px;padding-left:16px}.patient360-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.patient-workspace-table{min-width:760px}.patient-workspace-table th{text-align:center}.patient-workspace-table td{text-align:left}.patient-workspace-mobile{display:none}.patient-list-card{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow)}
@media(max-width:980px){.ops-shell{grid-template-columns:1fr}.ops-aside{position:static}}@media(max-width:760px){.patient-summary-grid,.patient-followup-columns{grid-template-columns:1fr}.patient360-hero{grid-template-columns:auto minmax(0,1fr)}.patient360-actions{grid-column:1/-1}.patient360-profile{grid-template-columns:repeat(2,minmax(0,1fr))}.patient360-form{grid-template-columns:1fr 1fr}.patient-workspace-desktop{display:none}.patient-workspace-mobile{display:grid;gap:10px}}

body {
  background: linear-gradient(180deg, #f8f5ef 0, var(--clinic-page) 320px);
  color: var(--clinic-ink);
  line-height: 1.5;
}
header {
  min-height: 62px;
  padding: 11px 24px;
  position: sticky;
  background: linear-gradient(100deg, #0e2639, var(--clinic-navy));
  border-bottom: 1px solid rgba(211, 184, 132, .42);
  box-shadow: 0 5px 20px rgba(14, 38, 57, .18);
}
.brand { gap: 11px; letter-spacing: .02em; }
.brand-mark {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(224, 202, 160, .68);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.035);
}
.brand-subtitle { letter-spacing: .01em; }
.userbar { color: rgba(255,255,255,.9); }

.app-sidebar { padding: 16px 12px; background: #fffdf9; border-right-color: var(--clinic-line); }
.sidebar-title { margin: 4px 10px 12px; color: var(--clinic-gold-ink); letter-spacing: .08em; }
.nav-section { margin-bottom: 8px; }
.nav-section-toggle { min-height: 40px; border: 1px solid transparent; border-radius: var(--clinic-radius-sm); color: #405563; }
.nav-section-toggle:hover,
.nav-section.is-active .nav-section-toggle { border-color: #e8ddca; background: #faf5eb; color: var(--clinic-navy); }
.app-sidebar a { min-height: 38px; padding: 8px 12px 8px 20px; border: 1px solid transparent; color: #2d485a; }
.app-sidebar a:hover { border-color: #e7dfd2; background: #faf7f1; color: var(--clinic-navy); }
.app-sidebar a.is-active { background: #e7f5f2; box-shadow: inset 3px 0 0 var(--clinic-teal); color: #075e59; }

main { padding: clamp(18px, 2.2vw, 30px); }
.page-head, .ops-title { margin-bottom: 18px; }
.page-head h1, .ops-title h1, .hero-panel h1 { letter-spacing: -.02em; color: #102f45; }
.page-desc, .muted { color: var(--clinic-muted); }
.ops-kicker { color: var(--clinic-teal); letter-spacing: .06em; }

.panel, .metric, .module-card, .ops-summary-card, .ops-section, .ops-aside-card,
.record-list-card, .patient-create-card, .patient360-hero, .appointment-list-summary,
.appointment-list-filter, .appointment-list-card {
  border-color: var(--clinic-line);
  border-radius: var(--clinic-radius);
  box-shadow: var(--clinic-shadow);
}
.panel { padding: 18px; }
.hero-panel { background: linear-gradient(135deg, #fffefa 0%, #f8f1e6 100%); border: 1px solid #e2d5bf; border-top: 3px solid var(--clinic-gold); border-radius: var(--clinic-radius); }
.mini-status-panel { background: var(--clinic-navy); border-radius: var(--clinic-radius); }
.metric, .ops-summary-card { text-align: left; }
.metric { padding: 15px 16px; }
.metric strong, .ops-summary-card strong { font-variant-numeric: tabular-nums; color: var(--clinic-navy); }
.module-card { min-height: 0; border-top: 3px solid transparent; background: #fffdf9; }
.module-card:hover { border-color: var(--clinic-line-strong); border-top-color: var(--clinic-gold); transform: none; }
.module-card h2, .section-title, .ops-section h2, .ops-aside-card h2 { color: #173e57; }
.badge-soft { border-color: #e5d4ba; color: #7d5a27; background: var(--clinic-gold-soft); }
.status-pill, .ops-pill { border-color: #c7e8e2; color: #076b65; background: var(--clinic-teal-soft); }

button, .button, .btn {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--clinic-radius-sm);
  background: var(--clinic-navy);
  font-weight: 700;
  line-height: 1.25;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
button:hover, .button:hover, .btn:hover { background: var(--clinic-navy-strong); }
.button.light, .btn.light { border-color: #bcd5e5; background: #fff; color: var(--clinic-navy); }
.button.light:hover, .btn.light:hover { border-color: var(--clinic-gold); background: var(--clinic-gold-soft); color: #654517; }
.button.secondary, .btn.secondary { background: #486579; }
.button.danger, .action-cancel { background: var(--clinic-danger); }
.action-departed { background: #6d28d9; }
button[disabled], .button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-height: 38px;
  padding: 8px 10px;
  border-color: var(--clinic-line-strong);
  border-radius: var(--clinic-radius-sm);
  background: #fffefa;
  color: var(--clinic-ink);
  text-align: left;
}
textarea { min-height: 78px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #7890a0; opacity: 1; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: none;
  border-color: var(--clinic-teal);
  box-shadow: var(--clinic-focus);
}
input[aria-invalid="true"], .has-error > input, .has-error > select, .has-error > textarea {
  border-color: var(--clinic-danger);
  background: #fff8f7;
}
.has-error > span:first-child { color: var(--clinic-danger); }
.has-error > input[type="checkbox"] { outline: 2px solid var(--clinic-danger); outline-offset: 2px; }
.field-help, .patient-create-hint { color: var(--clinic-muted); }
.field-error, .errorlist { color: var(--clinic-danger); font-weight: 600; }

.toolbar, .ops-filter { gap: 10px; justify-content: flex-start; text-align: left; }
.toolbar label, .ops-filter label { color: #496273; text-align: left; }
.toolbar label { min-width: min(180px, 100%); }
.page-actions, .actions, .quick-actions, .card-actions { align-items: center; }
.messages li, .appointment-list-notice, .message {
  border-radius: var(--clinic-radius-sm);
  border-color: #bee1dc;
  background: #edf9f6;
  color: #075e59;
}
.empty-panel, .ops-empty, .appointment-list-empty {
  border-color: #b7cbd9;
  background: #fbfdfe;
  color: var(--clinic-muted);
}

.table-scroll, .table-wrap { border: 1px solid var(--clinic-line); border-radius: var(--clinic-radius-sm); background: #fffdf9; }
table { font-size: 14px; }
th, td { padding: 10px 12px; border-color: #e2ebf0; vertical-align: middle; }
th { background: #f1eee7; color: #405563; font-size: 13px; font-weight: 700; white-space: nowrap; text-align: center; }
td { text-align: left; }
tbody tr:hover { background: #fbf7ef; }
.number-cell, .record-field.money strong { font-variant-numeric: tabular-nums; }
.pagination { gap: 8px; align-items: center; }
.pagination a { border: 1px solid #bcd5e5; border-radius: var(--clinic-radius-sm); color: var(--clinic-navy); padding: 7px 11px; text-decoration: none; }
.pagination a:hover { background: var(--clinic-teal-soft); border-color: var(--clinic-teal); }

/* Patient workspace: facts stay scannable; editing remains a separate, explicit action. */
.patient360-hero { background: linear-gradient(135deg, #fffefa 0%, #f6efe4 100%); border-top: 3px solid var(--clinic-gold); }
.patient360-profile > div { border-color: #e2d9ca; }
.patient360-profile strong { color: #173e57; font-variant-numeric: tabular-nums; }
.patient360-statuses span, .ops-detail-facts span { border-color: #cfe9e5; }
.patient-create-card { background: #fff; }
.patient-create-group { border-color: var(--clinic-line); }
.patient-create-group legend { color: #173e57; font-weight: 800; }

/* Appointments: retain precise board geometry; styling only adjusts surrounding controls and state clarity. */
.appointment-board .toolbar, .appointment-board .board-workflow { align-items: end; }
.appointment-board .day-navigator, .appointment-board .filters, .appointment-board .status-chips,
.appointment-board .calendar-panel, .appointment-board .drawer { border-color: var(--clinic-line); border-radius: var(--clinic-radius); box-shadow: var(--clinic-shadow); }
.appointment-board .board-workflow,
.appointment-board .calendar-panel,
.appointment-board .drawer,
.appointment-board .appointment-grid { background: #fffdf9; }
.appointment-board .board-head { background: #f4f0e8; color: #173e57; box-shadow: inset 0 -1px 0 #e4d7c1; }
.appointment-board .lane { background-color: #fff; }
.appointment-board .appointment-card { box-shadow: 0 3px 10px rgba(22, 52, 75, .13); }
.appointment-board .appointment-card.is-selected { outline-color: var(--clinic-teal); }
.appointment-board .drawer { background: #fff; }
.appointment-board .drawer h2 { color: #173e57; }
.appointment-board .drawer-tab[aria-selected="true"] { color: #075e59; border-bottom-color: var(--clinic-teal); }
.appointment-board .status-chip.active { outline: 2px solid rgba(8, 127, 120, .28); outline-offset: 1px; }
.appointment-board .axis-quarter-label, .appointment-board .axis-hour-label { font-variant-numeric: tabular-nums; }
.appointment-list-summary h2 { color: #173e57; }
.appointment-list-card h2 { color: #173e57; }

/* Daily records: the core row is read-first; finance/audit details remain progressively disclosed. */
.daily-entry-panel { border-top: 3px solid var(--clinic-gold); }
.entry-record-row { border-color: var(--clinic-line); background: #fffdf9; }
.entry-card-title { color: #173e57; }
.record-field { border-color: #e4ddd2; background: #fffdf9; }
.record-field strong { color: #173e57; }
.daily-record-table-wrap details summary, details > summary { color: var(--clinic-navy); font-weight: 700; cursor: pointer; }

/* Form geometry: operational fields are sized by the information they carry,
   not by their position in a page.  These classes deliberately do not target
   the appointment board's time/lane DOM. */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.form-grid > label, .form-grid > p, .form-grid .form-field { display: grid; min-width: 0; gap: 6px; color: #496273; font-size: 13px; text-align: left; }
.form-grid input, .form-grid select, .form-grid textarea { box-sizing: border-box; width: 100%; }
.form-grid input[type="checkbox"], .form-grid input[type="radio"] { width: auto; }
.form-field-short { grid-column: span 3; }
.form-field-medium { grid-column: span 4; }
.form-field-wide { grid-column: span 6; }
.form-field-full { grid-column: 1 / -1; }

/* Search is wide enough for a name/project, while dates and state controls
   remain compact so the first row reads as one deliberate filter sentence. */
.form-filter-grid { display: grid; grid-template-columns: minmax(190px, 1.35fr) minmax(136px, .8fr) minmax(136px, .8fr) auto; gap: 10px 12px; align-items: end; justify-content: stretch; text-align: left; }
.form-filter-grid > label { min-width: 0; width: auto; }
.form-filter-grid .filter-search { min-width: min(280px, 100%); }
.form-filter-grid .filter-date, .form-filter-grid .filter-short { min-width: 136px; }
.form-filter-grid .filter-actions { align-self: end; }

.form-stack { display: grid; grid-template-columns: minmax(0, 760px); gap: 14px; max-width: 920px; }
.form-stack > label { display: grid; gap: 6px; color: #496273; font-size: 13px; }
.form-stack > label input, .form-stack > label select, .form-stack > label textarea { width: 100%; box-sizing: border-box; }

.catalog-entry-grid { max-width: 1120px; }
.catalog-entry-grid > :nth-child(1), .catalog-entry-grid > :nth-child(2), .catalog-entry-grid > :nth-child(5), .catalog-entry-grid > :nth-child(6), .catalog-entry-grid > :nth-child(7) { grid-column: span 3; }
.catalog-entry-grid > :nth-child(3), .catalog-entry-grid > :nth-child(4) { grid-column: span 6; }
.quote-entry-grid { max-width: 1120px; }
.quote-entry-grid > :nth-child(1), .quote-entry-grid > :nth-child(2), .quote-entry-grid > :nth-child(5), .quote-entry-grid > :nth-child(6), .quote-entry-grid > :nth-child(7), .quote-entry-grid > :nth-child(8) { grid-column: span 3; }
.quote-entry-grid > :nth-child(3), .quote-entry-grid > :nth-child(4) { grid-column: span 6; }
.object-form-grid > p { grid-column: span 4; margin: 0; }

.entry-fields label { text-align: left; }
.entry-fields input, .entry-fields select, .entry-fields textarea { box-sizing: border-box; width: 100%; }
.entry-fields .entry-check-field input { width: auto; }

@media (max-width: 980px) {
  header { padding-inline: 16px; }
  main { padding: 18px; }
  .page-head, .ops-title { align-items: flex-start; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-board .appointment-layout { gap: 12px; }
}

@media (max-width: 760px) {
  header { min-height: 56px; padding: 9px 14px; }
  .brand-subtitle { display: none; }
  .userbar { font-size: 13px; }
  main { padding: 14px; }
  .page-head, .ops-title { display: block; }
  .page-actions, .actions, .quick-actions { gap: 8px; }
  .page-head > :last-child, .ops-title > .button { margin-top: 12px; }
  .panel { padding: 14px; }
  .module-grid { grid-template-columns: 1fr; }
  .toolbar, .ops-filter { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .toolbar label, .ops-filter label { min-width: 0; width: 100%; }
  .toolbar > .button, .toolbar > button, .filter-actions { width: 100%; }
  .filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .table-scroll, .table-wrap { border-radius: var(--clinic-radius-sm); }
  .patient360-profile { grid-template-columns: 1fr 1fr; }
  .appointment-list-actions, .appointment-list-actions-cell { flex-wrap: wrap; }
  .appointment-board .calendar-help { display: none; }
  .appointment-board .drawer { position: static; }
  .form-grid, .form-filter-grid { grid-template-columns: 1fr; }
  .form-field-short, .form-field-medium, .form-field-wide, .form-field-full, .catalog-entry-grid > *, .quote-entry-grid > * { grid-column: 1 / -1; }
  .object-form-grid > p { grid-column: 1 / -1; }
  .form-filter-grid .filter-search, .form-filter-grid .filter-date, .form-filter-grid .filter-short { min-width: 0; }
  .form-stack { grid-template-columns: 1fr; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Patient operations: keep task urgency, workflow state, and reporting groups
   explicit without changing the underlying task or metric definitions. */
.ops-workspace { max-width: 1320px; margin: 0 auto; }
.ops-workspace .ops-subnav, .fu .ops-subnav { width: auto; max-width: 100%; flex: 0 1 auto; box-sizing: border-box; }
.ops-workspace .ops-subnav { margin-top: 0; }
.ops-workspace .filter-actions { display: flex; gap: 8px; align-items: end; }
.ops-workspace .pagination { display: flex; justify-content: center; margin: 18px 0; }
.ops-task-statuses { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ops-pill.overdue { color: #9a3412; background: #fff1e8; border-color: #f2c8ae; }
.ops-pill.today { color: #7d5a27; background: var(--clinic-gold-soft); border-color: #e5d4ba; }
.ops-pill.later { color: #075e59; background: var(--clinic-teal-soft); border-color: #c7e8e2; }
.ops-pill.closed, .ops-pill.status { color: #405563; background: #f1f4f6; border-color: #d7e0e5; }
.ops-task-card.overdue .priority-bar { background: var(--clinic-warning); }
.ops-task-card.today .priority-bar { background: var(--clinic-gold); }
.ops-task-card.closed .priority-bar { background: #90a4ae; }
.ops-task-card h2 a { color: inherit; }
.ops-execution-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ops-summary-note { margin: -4px 0 18px; color: var(--clinic-muted); }
.ops-breakdown { margin: 20px 0; }
.ops-breakdown h2 { margin: 0 0 10px; color: #173e57; font-size: 17px; }
.ops-breakdown table { width: 100%; }
.ops-outcomes { margin-top: 20px; }
.ops-outcomes > p:not(.muted) { display: flex; justify-content: space-between; gap: 16px; margin: 8px 0; padding-bottom: 8px; border-bottom: 1px solid var(--clinic-line); }

/* Existing-treatment-record workbench: read and complete records without
   implying that an appointment is proof of attendance. */
.treatment-record-workbench { max-width: 1320px; margin: 0 auto; }
.treatment-record-filter label { min-width: 180px; }
.treatment-record-filter .filter-actions { display: flex; gap: 8px; }
.treatment-record-resultbar { margin: 12px 0; color: var(--clinic-muted); }
.treatment-record-resultbar strong { color: var(--clinic-navy); font-size: 20px; font-variant-numeric: tabular-nums; }
.treatment-record-table { min-width: 920px; width: 100%; }
.treatment-record-table td small { display: block; margin-top: 3px; color: var(--clinic-muted); }
.treatment-record-table .ops-pill + .ops-pill { margin-left: 4px; }
.treatment-record-mobile { display: none; }
.treatment-record-workbench .pagination { display: flex; justify-content: center; margin: 18px 0; }

@media (max-width: 900px) {
  .ops-execution-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .ops-workspace .filter-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ops-execution-summary { grid-template-columns: 1fr; }
  .treatment-record-filter .filter-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .treatment-record-desktop { display: none; }
  .treatment-record-mobile { display: grid; gap: 10px; }
}

/* Dashboard layout editor: only safe summary/module cards opt in through
   data attributes. The board, clinical forms and data tables stay fixed. */
.dashboard-layout-actions,
.dashboard-layout-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dashboard-layout-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #bdded9;
  border-radius: var(--clinic-radius-sm);
  background: #f0faf7;
  color: #075e59;
  font-size: 13px;
}

.dashboard-layout-toolbar[hidden] { display: none; }
.dashboard-layout-toolbar-actions { margin-left: auto; }
.dashboard-layout-status { min-height: 1.2em; color: var(--clinic-muted); }

.dashboard-card-group {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.ops-summary.dashboard-card-group { margin: 16px 0; }

.dashboard-card-group > .dashboard-layout-card {
  grid-column: span var(--dashboard-card-span, var(--dashboard-default-span, 3));
  min-width: 0;
}

.dashboard-card-group > .metric { --dashboard-card-span: 3; }
.dashboard-card-group > .module-card,
.dashboard-card-group > .ops-summary-card { --dashboard-card-span: 4; }

.dashboard-layout.is-layout-editing .dashboard-layout-card {
  position: relative;
  cursor: grab;
  outline: 2px dashed transparent;
  outline-offset: 2px;
  touch-action: none;
}

.dashboard-layout.is-layout-editing .dashboard-layout-card:hover,
.dashboard-layout.is-layout-editing .dashboard-layout-card:focus-within {
  outline-color: rgba(8, 127, 120, .48);
}

.dashboard-layout.is-layout-editing .dashboard-layout-card.is-layout-dragging {
  cursor: grabbing;
  opacity: .68;
  outline-color: var(--clinic-teal);
}

.dashboard-card-controls {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  display: none;
  gap: 4px;
  padding: 4px;
  border: 1px solid #b9d7d2;
  border-radius: 7px;
  background: rgba(255, 253, 249, .96);
  box-shadow: 0 4px 12px rgba(22, 52, 75, .12);
}

.dashboard-layout.is-layout-editing .dashboard-card-controls { display: flex; }

.dashboard-card-control,
.dashboard-card-resize {
  display: inline-grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid #c8d8d4;
  border-radius: 5px;
  background: #fff;
  color: var(--clinic-navy);
  font-size: 16px;
  line-height: 1;
}

.dashboard-card-control:hover,
.dashboard-card-resize:hover { border-color: var(--clinic-teal); background: var(--clinic-teal-soft); }
.dashboard-card-control[data-dashboard-card-action="hide"] { color: var(--clinic-danger); }

.dashboard-card-resize {
  position: absolute;
  z-index: 3;
  right: 7px;
  bottom: 7px;
  display: none;
  cursor: nwse-resize;
  touch-action: none;
  color: #496273;
  font-size: 13px;
}

.dashboard-layout.is-layout-editing .dashboard-card-resize { display: inline-grid; }
.dashboard-layout.is-layout-editing .dashboard-layout-card a { cursor: grab; }

@media (max-width: 760px) {
  .dashboard-layout-actions { margin-top: 12px; }
  .dashboard-layout-actions [data-dashboard-layout-edit],
  .dashboard-layout-toolbar { display: none !important; }
  .dashboard-card-group { grid-template-columns: 1fr; }
  .dashboard-card-group > .dashboard-layout-card { grid-column: 1 / -1; }
}

/* Compact public shell: explicit selectors never size page-local header/nav. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-header { display: grid; grid-template-columns: 246px minmax(0, 1fr) 246px; gap: 16px; height: 48px; min-height: 48px; padding: 0; box-sizing: border-box; color: var(--clinic-ink); background: var(--clinic-panel); border-bottom: 1px solid var(--clinic-line); box-shadow: 0 2px 8px #16344b0c; }
.site-header .brand { align-self: stretch; padding: 0 16px; min-width: 0; color: #fff; background: var(--clinic-navy-strong); gap: 8px; white-space: nowrap; font-size: 15px; letter-spacing: 0; }
.site-header .brand-mark { width: 28px; height: 28px; flex: 0 0 28px; }
.site-header .brand-name { white-space: nowrap; }
.site-patient-tools { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.site-patient-search { display: flex; align-items: center; gap: 6px; flex: 0 1 520px; width: 100%; max-width: 520px; min-width: 0; }
.site-patient-search input { min-width: 0; height: 38px; padding: 6px 10px; text-align: left; }
.site-patient-search button, .site-header .site-new-patient { flex: 0 0 auto; min-height: 38px; box-sizing: border-box; padding: 6px 10px; white-space: nowrap; margin: 0; }
.site-header .userbar { justify-self: end; min-width: 0; max-width: 216px; padding-right: 16px; box-sizing: border-box; color: var(--clinic-ink); }
.site-header .site-account-link { display: block; min-width: 0; min-height: 38px; line-height: 38px; margin: 0; color: var(--clinic-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 3px solid var(--clinic-teal); outline-offset: 2px; }
.layout > .site-sidebar { width: 176px; flex: 0 0 176px; padding: 12px 8px; }
.site-sidebar .nav-section-links > a { padding: 8px 8px 8px 22px; min-height: 38px; box-sizing: border-box; font-size: 13px; font-weight: 400; white-space: normal; overflow-wrap: anywhere; }
.site-sidebar .nav-section-links > a.is-active { font-weight: 600; }
.site-sidebar .nav-section-toggle { padding: 8px 10px; font-size: 14px; font-weight: 700; color: var(--clinic-navy-strong); background: var(--clinic-page); }
.account-profile { max-width: 640px; margin: 0 auto; }
.account-profile-form { display: grid; gap: 16px; }
.account-profile-field { display: grid; gap: 6px; }
.account-profile-field input { text-align: left; min-height: 44px; }
.account-profile-field .errorlist { margin: 0; padding-left: 20px; }
.account-readonly { overflow-wrap: anywhere; }
.account-security { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.account-security h2 { width: 100%; margin: 0; font-size: 18px; }
.account-security form { margin: 0; }
.global-search-results { max-width: 1040px; margin: 0 auto; }
.global-patient-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.global-patient-result > div { min-width: 0; overflow-wrap: anywhere; }
.global-patient-result p { margin: 4px 0 0; }
.global-patient-result > a { flex: 0 0 auto; }
@media (max-width: 1050px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; height: auto; min-height: 48px; padding: 0 12px 8px 0; }
  .site-header .brand { grid-column: 1; grid-row: 1; justify-self: start; min-height: 48px; }
  .site-header .userbar { grid-column: 2; grid-row: 1; max-width: min(200px, 28vw); padding-right: 0; }
  .site-patient-tools { grid-column: 1 / -1; grid-row: 2; margin: 8px 0 0 12px; }
  .site-patient-search { flex: 1; max-width: none; }
}
@media (max-width: 760px) {
  .layout > .site-sidebar { width: auto; flex: 0 0 auto; padding: 10px 12px; }
  .site-header .brand { padding: 0 10px; font-size: 13px; gap: 6px; }
  .site-header .brand-mark { width: 24px; height: 24px; flex-basis: 24px; }
  .site-header .site-account-link { font-size: 13px; }
  .site-patient-tools { gap: 6px; }
  .site-patient-search input { font-size: 13px; }
  .site-patient-search button, .site-header .site-new-patient { padding: 6px 8px; font-size: 13px; }
  .global-patient-result { padding: 12px; }
}
/* Navigation owns listing-page titles; object and form headings stay untouched. */
.compact-nav-heading { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; }
.compact-nav-decoration { display:none !important; }
.compact-nav-title-row { margin-top:0 !important; margin-bottom:8px !important; min-height:0 !important; }
.compact-nav-title-row > div:has(> .compact-nav-heading):not(:has(p:not(.compact-nav-decoration))) { margin:0; padding:0; }
.compact-current-page { display:none; }
.compact-page-notes { font-size:12px; color:#627d98; margin:0 0 8px; }
.compact-page-notes summary { cursor:pointer; }
@media(max-width:760px) { .compact-current-page { display:block; color:var(--brand-strong); font-weight:600; font-size:13px; margin:0 0 8px; } }

/* Approved compact-web baseline, expanded to staff pages (2026-10-15).
 * Screen only. Preserve brand/status colors, print output and appointment-grid geometry.
 * Existing workbench/directory keep their accepted page-specific compact styles.
 */
@media screen {
body:has(.site-header){font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC","SimHei",Arial,sans-serif;}
body:has(.site-header) :is(button,input,select,textarea,.button,.btn){font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC","SimHei",Arial,sans-serif;}
}
@media screen and (min-width:761px) {
body:has(.site-header){font-size:12px;}
body:has(.site-header) .site-header :is(.brand,.userbar,.site-patient-search input,.site-patient-search button,.site-new-patient){font-size:12px;}
body:has(.site-header) .site-header .brand{font-size:13px;}
body:has(.site-header) .layout>.site-sidebar{padding:8px 6px;}
body:has(.site-header) .sidebar-title{margin:4px 10px 8px;letter-spacing:0;font-size:12px;}
body:has(.site-header) .site-sidebar .nav-section{margin-bottom:4px;}
body:has(.site-header) .site-sidebar .nav-section-toggle{font-size:13px;min-height:38px;padding:6px 10px;}
body:has(.site-header) .site-sidebar .nav-section-links{gap:0;padding:0;}
body:has(.site-header) .site-sidebar .nav-section-links>a{font-size:13px;min-height:38px;padding:6px 8px 6px 20px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main{padding:12px;font-size:12px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(.fu,.pw-workspace,.patient-detail-v1,.clinic-admin,.case-workspace,.ops-main){font-size:12px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(h1,.page-head h1,.ops-title h1,.hero-panel h1){font-size:16px!important;line-height:1.5;font-weight:700;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(h2,.section-title,.entry-card-title,.admin-task-title){font-size:14px!important;font-weight:700;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(h3,h4,h5,h6,legend){font-size:13px!important;font-weight:600;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(p,label,td,dd,dt,li){font-size:12px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(button,.button,.btn,input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:12px!important;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(button,.button,.btn){min-height:38px;box-sizing:border-box;padding:6px 10px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]),select){min-height:38px;padding:6px 8px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(td,th){padding:5px 8px;line-height:20px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main th{font-size:11px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(small,.help,.field-help,.pw-note,.page-desc,.ops-summary-note){font-size:11px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(.metric strong,.ops-summary-card strong,.stats b,.treatment-record-resultbar strong,.pw-money-summary strong){font-size:16px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(.page-head,.ops-title){gap:10px;margin-bottom:10px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(.panel,.ops-section,.ops-aside-card,.pw-panel,.pw-identity,.pw-filter,.patient360-hero,.patient360-upload,.patient360-treatment,.entry-record-row,.record-list-card,.arrival-section,.fu .card,.clinic-admin fieldset.module){padding:12px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(.grid,.module-grid,.patient-summary-grid,.management-grid,.arrival-grid,.case-fields,.fu .fields,.fu .filters,.fu .followup-search-form){gap:10px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(.patient360-profile span,.patient360-profile strong,.record-field strong,.record-field span,.patient-phone-value,.pw-facts dt,.pw-facts dd){font-size:12px;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(.patient360-tabs button,.pw-tabs button,.management-tabs,.pw-group-link){font-size:13px!important;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(.pw-patient-name,.workspace-patient-link strong,.recent-web-title,.patient-name,.fu .row strong,.arrival-identity strong){font-size:14px!important;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(.patient360-hero h1,.pw-identity-text h1){font-size:18px!important;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main .clinic-admin :is(.form-row,#toolbar,.paginator){padding:8px 0;}
}
@media screen and (max-width:760px) {
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]),select,textarea){font-size:16px!important;}
body:has(.site-header):not(:has(.compact-web-page,.appointment-board)) main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]),select,button,.button,.btn){min-height:44px;}
body:has(.site-header) .site-patient-search input{font-size:16px;min-height:44px;height:44px;}
body:has(.site-header) :is(.site-patient-search button,.site-new-patient){min-height:44px;}
}