:root {
    --ink: #162322;
    --muted: #64706f;
    --line: #d9e1df;
    --paper: #f7faf8;
    --panel: #ffffff;
    --brand: #007c89;
    --brand-dark: #005b64;
    --accent: #ffc857;
    --danger: #b42318;
    --table-header-bg: color-mix(in srgb, var(--brand) 8%, white);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); }
a { color: var(--brand-dark); text-decoration: none; font-weight: 650; }
a:focus-visible, button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button, .button { border: 0; background: var(--brand); color: white; min-height: 40px; padding: 0 16px; border-radius: 6px; font-weight: 750; cursor: pointer; display: inline-flex; align-items: center; }
button:hover, .button:hover { background: var(--brand-dark); color: white; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
.button.quiet { background: #eef4f2; color: var(--ink); }
.button.quiet:hover { background: #dce9e6; color: var(--ink); }
.button.danger { background: #fff0ed; color: var(--danger); }
.button.danger:hover { background: #ffd8d2; color: var(--danger); }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font: inherit; background: white; color: var(--ink); }
input[type="checkbox"] { width: auto; }
textarea { min-height: 96px; resize: vertical; }
label { display: grid; gap: 6px; font-size: 0.9rem; font-weight: 700; }
h1 { font-size: 2rem; margin: 0; }
h2 { margin: 0 0 8px; }
table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.78rem; text-transform: uppercase; color: var(--brand-dark); background: var(--table-header-bg); letter-spacing: 0; }
tr:last-child td { border-bottom: 0; }
tr:target { scroll-margin-top: 18px; }
tr:target td { background: #fff8e1; box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
tr:target td:first-child { box-shadow: inset 5px 0 0 var(--brand), inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cell-label { display: block; margin: -14px -16px 10px; padding: 10px 16px; color: var(--brand-dark); background: var(--table-header-bg); border-bottom: 1px solid var(--line); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0; }
tbody tr:first-child .cell-label { display: none; }
.tool-panel:target { scroll-margin-top: 96px; border-color: var(--accent); box-shadow: inset 5px 0 0 var(--brand), 0 0 0 3px rgba(255, 200, 87, 0.28); }

.topbar { min-height: 72px; padding: 0 28px; background: white; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; position: sticky; top: 0; z-index: 20; }
.brand { display: inline-flex; align-items: center; color: var(--ink); min-width: 180px; flex: 0 0 auto; }
.brand-logo { width: clamp(170px, 22vw, 230px); max-width: 100%; height: auto; display: block; }
.auth-logo { width: 240px; max-width: 100%; height: auto; display: block; margin: 0 auto 14px; }
.global-search { display: flex; align-items: center; gap: 8px; flex: 1 1 300px; max-width: 460px; margin: 0; min-width: 220px; }
.global-search input { min-width: 180px; }
.user-chip { display: grid; gap: 2px; min-width: 150px; max-width: 220px; padding: 8px 12px; border-left: 4px solid var(--accent); background: #f7faf8; border-radius: 6px; }
.user-chip span { color: var(--brand-dark); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.user-chip strong { overflow: hidden; color: var(--ink); font-size: 0.86rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.topbar nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.topbar nav a { min-height: 40px; display: inline-flex; align-items: center; border-radius: 6px; padding: 0 2px; }
.topbar nav a:hover { background: color-mix(in srgb, var(--brand) 8%, white); }
.topbar form { margin: 0; }
.topbar button { background: #eef4f2; color: var(--ink); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.page { max-width: 1180px; margin: 0 auto; padding: 34px 24px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.muted { color: var(--muted); margin: 6px 0 0; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.metrics a, .tool-panel { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.metrics strong { display: block; color: var(--brand-dark); font-size: 2.4rem; line-height: 1; }
.metrics span { color: var(--muted); font-weight: 750; }
.dashboard-overview { display: grid; gap: 24px; }
.dashboard-secondary-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -10px; }
.dashboard-secondary-nav a { min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; padding: 0 14px; background: white; color: var(--ink); }
.dashboard-secondary-nav a:hover, .dashboard-secondary-nav a:focus { border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); background: color-mix(in srgb, var(--brand) 8%, white); text-decoration: none; }
.dashboard-secondary-nav a.active { border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand-dark); box-shadow: inset 0 -3px 0 var(--brand); }
.dashboard-filter-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.dashboard-filter-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.dashboard-filter-summary { grid-column: 1 / -1; margin: 2px 0 0; color: var(--brand-dark); font-size: 0.92rem; font-weight: 800; }
.dashboard-filter-error { grid-column: 1 / -1; margin: 0; color: var(--danger); font-size: 0.9rem; font-weight: 800; }
.dashboard-report-panel { display: grid; gap: 16px; }
.dashboard-report-list { display: grid; gap: 12px; }
.dashboard-report-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fbfdfc; }
.dashboard-report-row h3 { margin: 0; font-size: 1rem; }
.dashboard-report-row p { margin: 5px 0 8px; color: var(--muted); line-height: 1.4; }
.dashboard-insight-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 12px; align-items: end; margin: 16px 0; }
.dashboard-insight-form label { margin: 0; }
.dashboard-insight-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.dashboard-insight-metric { display: grid; gap: 12px; align-content: start; background: white; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; padding: 16px; }
.dashboard-insight-metric h3 { margin: 8px 0 6px; font-size: 1rem; }
.dashboard-insight-metric strong { color: var(--brand-dark); font-size: 1.35rem; line-height: 1.1; overflow-wrap: anywhere; }
.dashboard-insight-metric p { margin: 8px 0 0; color: var(--muted); line-height: 1.4; }
.dashboard-insight-metric ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; }
.dashboard-insight-metric small { display: block; color: var(--muted); line-height: 1.35; }
.dashboard-section { display: grid; gap: 14px; }
.dashboard-section-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.dashboard-section header h2 { margin: 0; color: var(--ink); font-size: 1.2rem; }
.dashboard-section-description { margin: 5px 0 0; max-width: 720px; color: var(--muted); line-height: 1.45; }
.dashboard-empty-state { margin: 0; border: 1px solid color-mix(in srgb, #16a34a 24%, var(--line)); border-left: 5px solid #16a34a; border-radius: 8px; background: #f6fff8; padding: 12px 14px; color: var(--ink); font-weight: 750; }
.dashboard-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.dashboard-card { min-width: 0; display: grid; grid-template-rows: auto auto auto minmax(2.8em, auto) auto; gap: 10px; align-content: start; min-height: 190px; background: white; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; padding: 18px; color: var(--ink); box-shadow: 0 10px 24px rgba(12, 32, 31, 0.05); }
.dashboard-card-neutral { border-left-color: var(--brand); }
.dashboard-card-info { border-left-color: #2563eb; background: #f8fbff; }
.dashboard-card-success, .dashboard-card-positive { border-left-color: #16a34a; background: #f8fff9; }
.dashboard-card-warning { border-left-color: #d97706; background: #fffaf0; }
.dashboard-card-danger { border-left-color: var(--danger); background: #fff7f5; }
.dashboard-card-muted { border-left-color: #9ca3af; background: #fafafa; }
.dashboard-card-restricted { border-left-color: #6b7280; background: #f8faf9; }
.dashboard-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 24px; }
.dashboard-card-status, .dashboard-card-period { border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; background: rgba(255, 255, 255, 0.72); color: var(--brand-dark); font-size: 0.72rem; font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.dashboard-card-warning .dashboard-card-status { color: #92400e; border-color: #f4c979; }
.dashboard-card-danger .dashboard-card-status { color: var(--danger); border-color: #f4b4ad; }
.dashboard-card-success .dashboard-card-status, .dashboard-card-positive .dashboard-card-status { color: #166534; border-color: #9bd7aa; }
.dashboard-card-info .dashboard-card-status { color: #1d4ed8; border-color: #a8c7ff; }
.dashboard-card-title { margin: 0; color: var(--muted); font-size: 0.82rem; font-weight: 900; line-height: 1.25; text-transform: uppercase; }
.dashboard-card-value { color: var(--brand-dark); font-size: clamp(1.8rem, 2vw, 2.25rem); line-height: 1.05; overflow-wrap: anywhere; }
.dashboard-card-description { margin: 0; color: var(--muted); line-height: 1.4; }
.dashboard-card-action, .dashboard-card-restricted-note { align-self: end; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; width: fit-content; border-radius: 6px; padding: 0 12px; background: #eef4f2; color: var(--brand-dark); font-size: 0.88rem; font-weight: 850; }
.dashboard-card-action:hover, .dashboard-card-action:focus { background: #dce9e6; color: var(--brand-dark); text-decoration: none; }
.dashboard-card-restricted-note { color: var(--muted); background: #edf0ef; }
.dashboard-card-list { display: grid; gap: 8px; }
.dashboard-card-list span { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-weight: 750; }
.dashboard-card-list strong { color: var(--brand-dark); font-size: 1rem; white-space: nowrap; }
.dashboard-worklist-row-warning td { background: #fffaf0; }
.dashboard-worklist-row-danger td { background: #fff7f5; }
.dashboard-worklist-row-success td { background: #f8fff9; }
.dashboard-worklist-row-info td { background: #f8fbff; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-head h2 { margin: 0; }
.toolbar { display: flex; gap: 10px; margin-bottom: 18px; max-width: 520px; }
.toolbar.wide-toolbar { max-width: none; flex-wrap: wrap; align-items: end; }
.toolbar.wide-toolbar label { min-width: 160px; flex: 1 1 160px; }
.toolbar.wide-toolbar button, .toolbar.wide-toolbar .button { flex: 0 0 auto; }
.page:has(.appointments-page) { max-width: 1680px; }
.diary-toolbar { align-items: end; }
.diary-filter-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 18px; }
.diary-filter-summary span { background: #e7f6f4; color: var(--brand-dark); border-radius: 999px; padding: 6px 10px; font-size: 0.84rem; font-weight: 800; }
.pagination-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 4px 0 14px; }
.pagination { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pagination span { color: var(--muted); font-weight: 800; }
.button.disabled { opacity: 0.45; pointer-events: none; cursor: default; }
.billing-page { max-width: 100%; }
.patient-billing-review { display: grid; gap: 18px; }
.billing-review-list { display: grid; gap: 18px; }
.invoice-review-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 12px; }
.invoice-review-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.compact-details { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.invoice-review-lines small, .invoice-review-lines .label-link { display: block; margin-top: 4px; }
.line-edit-form { display: grid; grid-template-columns: minmax(160px, 1.5fr) minmax(90px, 0.8fr) auto; gap: 6px; align-items: center; }
.removed-line { color: var(--muted); background: #f8faf9; }
.payment-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: stretch; min-width: 0; max-width: 260px; }
#billing-results { max-width: 100%; overflow-x: hidden; }
#billing-results table { min-width: 0; table-layout: fixed; }
.billing-table th, .billing-table td { padding: 12px 10px; overflow-wrap: anywhere; word-break: normal; }
.billing-table th:nth-child(1), .billing-table td:nth-child(1) { width: 21%; }
.billing-table th:nth-child(2), .billing-table td:nth-child(2) { width: 9%; }
.billing-table th:nth-child(3), .billing-table td:nth-child(3),
.billing-table th:nth-child(4), .billing-table td:nth-child(4),
.billing-table th:nth-child(5), .billing-table td:nth-child(5) { width: 7%; }
.billing-table th:nth-child(6), .billing-table td:nth-child(6) { width: 7%; }
.billing-table th:nth-child(7), .billing-table td:nth-child(7) { width: 7%; }
.billing-table th:nth-child(8), .billing-table td:nth-child(8) { width: 22%; }
.billing-table th:nth-child(9), .billing-table td:nth-child(9) { width: 13%; }
.billing-table input, .billing-table select, .billing-table button, .billing-table .button { min-width: 0; }
.billing-table .inline-check { white-space: normal; }
.inline-check { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 8px; font-weight: 650; white-space: nowrap; }
.compact-history { min-width: 190px; }
.compact-history .timeline-item { padding: 8px 0; }
.compact-history .timeline-item p { margin: 2px 0; }
.compact-action { display: grid; grid-template-columns: minmax(110px, 1fr) auto; gap: 6px; align-items: center; margin-top: 8px; }
.compact-action select { min-width: 120px; }
.compact-action:has(select) { grid-template-columns: 120px minmax(120px, 1fr) auto; }
.billing-table .compact-action,
.billing-table .compact-action:has(select) { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.item-form { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(140px, 1fr) 100px 110px auto; gap: 8px; align-items: end; margin: 12px 0; }
.item-edit-form { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(110px, 0.8fr) 90px 110px auto; gap: 8px; align-items: end; }
.delete-form { margin-top: 8px; }
.inline-role-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 320px; }
.inline-role-form label, .check-grid label { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 8px; font-weight: 650; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.inline-actions form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.inline-actions select { min-width: 150px; }
.check-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.field-label { width: 100%; color: var(--muted); font-size: 0.9rem; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 780px; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.form-grid.compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; border: 0; padding: 0; margin: 14px 0 20px; }
.form-grid fieldset.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.form-grid fieldset.checkbox-group legend { padding: 0 6px; color: var(--brand-dark); font-size: 0.82rem; font-weight: 900; text-transform: uppercase; }
.form-grid fieldset.checkbox-group label { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 8px; font-weight: 700; }
.wide { grid-column: 1 / -1; }
.settings-form { display: grid; gap: 16px; margin-top: 14px; }
.settings-card { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 18px; margin: 0; background: color-mix(in srgb, var(--paper) 72%, white); }
.settings-card legend { padding: 0 6px; color: var(--brand-dark); font-size: 0.82rem; font-weight: 900; text-transform: uppercase; }
.settings-card .form-grid.compact-form { margin: 0; background: transparent; }
.settings-card .muted.compact { display: block; margin-top: 6px; line-height: 1.35; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.diary-settings-grid { display: grid; gap: 22px; align-items: start; }
.diary-settings-grid .tool-panel { overflow: hidden; }
.diary-settings-form { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); align-items: end; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.diary-settings-form .wide { grid-column: auto; }
.settings-table-wrap { width: 100%; overflow-x: auto; padding-bottom: 2px; }
.compact-table th, .compact-table td { padding: 10px 12px; }
.settings-edit-table { min-width: 820px; border: 0; border-radius: 0; }
.settings-edit-table th:first-child, .settings-edit-table td:first-child { padding-left: 0; }
.settings-edit-table th:last-child, .settings-edit-table td:last-child { padding-right: 0; }
.settings-edit-table input { min-width: 92px; padding: 8px 10px; }
.working-hours-table { min-width: 680px; }
.blocked-time-table { min-width: 1120px; }
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.table-actions form { margin: 0; }
.table-actions button, .table-actions .button { min-height: 36px; padding: 0 12px; }
.details { display: grid; grid-template-columns: 180px 1fr; gap: 12px 20px; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 22px; max-width: 760px; }
.details dt { color: var(--muted); font-weight: 750; }
.details dd { margin: 0; }
body:has(.patient-page) .page { max-width: none; padding: 0; }
.patient-page { min-height: calc(100vh - 74px); }
.patient-record-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; align-items: start; }
.patient-record-main { min-width: 0; display: grid; gap: 22px; padding: 28px clamp(18px, 3vw, 38px); max-width: 1320px; width: 100%; }
.patient-overview { display: grid; gap: 18px; scroll-margin-top: 96px; }
.patient-overview:target .patient-demographics-panel { border-color: var(--accent); box-shadow: inset 5px 0 0 var(--brand), 0 0 0 3px rgba(255, 200, 87, 0.28); }
.patient-overview .summary-strip { margin-bottom: 0; }
.patient-overview .details { max-width: none; }
.patient-demographics-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); background: white; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.patient-personal-details { max-width: none; border: 0; border-radius: 0; padding: 22px; }
.patient-gp-details { min-width: 0; display: grid; align-content: start; gap: 10px; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 70%, white); padding: 22px; }
.patient-gp-details h2 { margin: -4px 0 0; color: var(--brand-dark); font-size: 1.05rem; }
.patient-gp-details p { margin: 0; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.patient-page .record-layout, .patient-page .timeline-grid { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.patient-page .section-title { margin-top: 8px; margin-bottom: -8px; }
.patient-page .page-head { margin: 0; }
.patient-page .tool-panel { min-width: 0; overflow: hidden; }
.patient-page .timeline-item, .patient-page .plain-list li, .patient-page p, .patient-page small, .patient-page a, .patient-page strong, .patient-page dd { overflow-wrap: anywhere; }
.patient-page input, .patient-page select, .patient-page textarea { min-width: 0; }
.patient-page .item-form, .patient-page .item-edit-form { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.patient-page .item-form button, .patient-page .item-edit-form button { width: fit-content; }
.patient-page .summary-strip { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.patient-subnav { position: sticky; top: 74px; z-index: 5; display: grid; gap: 18px; align-content: start; max-height: calc(100vh - 74px); min-height: calc(100vh - 74px); overflow: auto; background: linear-gradient(180deg, white 0%, color-mix(in srgb, var(--paper) 76%, white) 100%); border-right: 1px solid var(--line); padding: 22px 16px; }
.patient-back-link { min-height: 42px; width: fit-content; color: var(--muted); font-size: 0.82rem; font-weight: 850; text-transform: none; }
.patient-back-link::before { content: "<"; margin-right: 8px; }
.patient-back-link:hover, .patient-back-link:focus { color: var(--brand-dark); background: transparent; text-decoration: underline; }
.patient-sidebar-profile { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; background: white; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; padding: 14px; box-shadow: 0 10px 26px rgba(12, 32, 31, 0.05); }
.patient-sidebar-profile strong { display: inline; margin-right: 8px; font-size: 1rem; }
.patient-sidebar-profile small { display: block; color: var(--muted); line-height: 1.45; }
.patient-avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, white); color: var(--brand-dark); font-size: 1.45rem; font-weight: 900; text-transform: uppercase; }
.patient-subnav-title { color: var(--ink); font-size: 0.8rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.patient-subnav-links { display: grid; gap: 5px; }
.patient-subnav-group { display: flex; gap: 10px; align-items: center; margin: 14px 0 4px; color: var(--muted); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.patient-subnav-group::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.patient-subnav a { min-height: 44px; display: flex; align-items: center; border-radius: 8px; padding: 0 12px; color: var(--ink); font-size: 0.9rem; font-weight: 850; }
.patient-subnav a:not(.patient-back-link) { position: relative; gap: 10px; border: 1px solid transparent; }
.patient-subnav a:not(.patient-back-link)::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; background: color-mix(in srgb, var(--brand) 22%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 6%, white); }
.patient-subnav a:hover, .patient-subnav a:focus { background: color-mix(in srgb, var(--brand) 10%, white); color: var(--brand-dark); text-decoration: none; }
.patient-subnav a:not(.patient-back-link):hover, .patient-subnav a:not(.patient-back-link):focus { border-color: color-mix(in srgb, var(--brand) 24%, var(--line)); transform: translateX(2px); }
.patient-subnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.patient-record-shell:not(:has(:target)) .patient-subnav a[href="#patient-overview"],
.patient-record-shell:has(#patient-overview:target) .patient-subnav a[href="#patient-overview"],
.patient-record-shell:has(#medical-history:target) .patient-subnav a[href="#medical-history"],
.patient-record-shell:has(#add-alert:target) .patient-subnav a[href="#add-alert"],
.patient-record-shell:has(#add-clinical-note:target) .patient-subnav a[href="#add-clinical-note"],
.patient-record-shell:has(#create-treatment-plan:target) .patient-subnav a[href="#create-treatment-plan"],
.patient-record-shell:has(#clinical-notes:target) .patient-subnav a[href="#clinical-notes"],
.patient-record-shell:has(#patient-appointments:target) .patient-subnav a[href="#patient-appointments"],
.patient-record-shell:has(#patient-appointment-treatments:target) .patient-subnav a[href="#patient-appointment-treatments"],
.patient-record-shell:has(#patient-invoices:target) .patient-subnav a[href="#patient-invoices"],
.patient-record-shell:has(#treatment-plans-panel:target) .patient-subnav a[href="#treatment-plans-panel"],
.patient-record-shell:has(#patient-payments:target) .patient-subnav a[href="#patient-payments"],
.patient-record-shell:has(#patient-nhs-claims:target) .patient-subnav a[href="#patient-nhs-claims"],
.patient-record-shell:has(#patient-nhs-events:target) .patient-subnav a[href="#patient-nhs-events"],
.patient-record-shell:has(#register-document:target) .patient-subnav a[href="#register-document"],
.patient-record-shell:has(#patient-documents:target) .patient-subnav a[href="#patient-documents"],
.patient-record-shell:has(#patient-communications:target) .patient-subnav a[href="#patient-communications"],
.patient-record-shell:has(#patient-audit:target) .patient-subnav a[href="#patient-audit"] { background: color-mix(in srgb, var(--brand) 12%, white); border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); box-shadow: inset 4px 0 0 var(--brand); color: var(--brand-dark); }
.patient-record-shell:not(:has(:target)) .patient-subnav a[href="#patient-overview"]::before,
.patient-record-shell:has(#patient-overview:target) .patient-subnav a[href="#patient-overview"]::before,
.patient-record-shell:has(#medical-history:target) .patient-subnav a[href="#medical-history"]::before,
.patient-record-shell:has(#add-alert:target) .patient-subnav a[href="#add-alert"]::before,
.patient-record-shell:has(#add-clinical-note:target) .patient-subnav a[href="#add-clinical-note"]::before,
.patient-record-shell:has(#create-treatment-plan:target) .patient-subnav a[href="#create-treatment-plan"]::before,
.patient-record-shell:has(#clinical-notes:target) .patient-subnav a[href="#clinical-notes"]::before,
.patient-record-shell:has(#patient-appointments:target) .patient-subnav a[href="#patient-appointments"]::before,
.patient-record-shell:has(#patient-appointment-treatments:target) .patient-subnav a[href="#patient-appointment-treatments"]::before,
.patient-record-shell:has(#patient-invoices:target) .patient-subnav a[href="#patient-invoices"]::before,
.patient-record-shell:has(#treatment-plans-panel:target) .patient-subnav a[href="#treatment-plans-panel"]::before,
.patient-record-shell:has(#patient-payments:target) .patient-subnav a[href="#patient-payments"]::before,
.patient-record-shell:has(#patient-nhs-claims:target) .patient-subnav a[href="#patient-nhs-claims"]::before,
.patient-record-shell:has(#patient-nhs-events:target) .patient-subnav a[href="#patient-nhs-events"]::before,
.patient-record-shell:has(#register-document:target) .patient-subnav a[href="#register-document"]::before,
.patient-record-shell:has(#patient-documents:target) .patient-subnav a[href="#patient-documents"]::before,
.patient-record-shell:has(#patient-communications:target) .patient-subnav a[href="#patient-communications"]::before,
.patient-record-shell:has(#patient-audit:target) .patient-subnav a[href="#patient-audit"]::before { background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, white); }
.compact-details { grid-template-columns: 110px 1fr; max-width: none; margin-top: 14px; }
.mono-reference { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; overflow-wrap: anywhere; }
.tenant-preview { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-left: 6px solid var(--brand); background: var(--paper); border-radius: 8px; padding: 16px; }
.tenant-preview strong { color: var(--brand-dark); font-size: 1.2rem; overflow-wrap: anywhere; }
.tenant-preview span { background: var(--accent); color: var(--ink); border-radius: 999px; padding: 6px 10px; font-size: 0.82rem; font-weight: 850; }
.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.summary-strip.payment-diagnostics-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; }
.alert-banner { display: grid; gap: 10px; margin-bottom: 18px; }
.alert-banner article { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: #fff8e1; border: 1px solid #f6cf69; border-left: 6px solid var(--accent); border-radius: 8px; padding: 14px; }
.alert-banner article.severity-critical { background: #fff0ed; border-color: #f1a59c; border-left-color: var(--danger); }
.alert-banner article.severity-warning { background: #fff8e1; border-left-color: var(--accent); }
.alert-banner article.severity-info { background: #e7f6f4; border-left-color: var(--brand); }
.summary-strip div, .summary-strip a { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: grid; gap: 6px; color: inherit; }
.summary-strip a:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, white); color: inherit; }
.summary-strip span { color: var(--muted); font-size: 0.82rem; font-weight: 750; text-transform: uppercase; }
.summary-strip strong { color: var(--brand-dark); font-size: 1.05rem; overflow-wrap: anywhere; }
.payment-diagnostics-strip code { display: block; min-height: 58px; align-content: center; background: color-mix(in srgb, var(--brand) 6%, white); border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.badge { display: inline-flex; border-radius: 999px; background: #e7f6f4; color: var(--brand-dark); padding: 4px 10px; font-size: 0.8rem; font-weight: 800; }
.follow-up-summary-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.follow-up-filter-bar { align-items: end; }
.follow-up-results { overflow: hidden; }
.follow-up-table { table-layout: fixed; }
.follow-up-table th:nth-child(1), .follow-up-table td:nth-child(1) { width: 15%; }
.follow-up-table th:nth-child(2), .follow-up-table td:nth-child(2) { width: 23%; }
.follow-up-table th:nth-child(3), .follow-up-table td:nth-child(3) { width: 17%; }
.follow-up-table th:nth-child(4), .follow-up-table td:nth-child(4) { width: 19%; }
.follow-up-table th:nth-child(5), .follow-up-table td:nth-child(5) { width: 13%; }
.follow-up-table th:nth-child(6), .follow-up-table td:nth-child(6) { width: 13%; }
.follow-up-table td { overflow-wrap: anywhere; }
.follow-up-table .cell-label { display: none; }
.follow-up-patient-actions,
.follow-up-primary-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.follow-up-patient-actions .button,
.follow-up-primary-actions .button { min-height: 36px; padding: 0 12px; justify-content: center; }
.follow-up-badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.follow-up-status-overdue,
.follow-up-priority-urgent { background: #fff0ed; color: #8f1d12; }
.follow-up-status-due-soon,
.follow-up-priority-high { background: #fff8e1; color: #7a4d00; }
.follow-up-status-booked { background: #e7f6f4; color: var(--brand-dark); }
.follow-up-status-contacted { background: #eef2ff; color: #3730a3; }
.follow-up-priority-low { background: #f3f4f6; color: #374151; }
.follow-up-contact-actions,
.follow-up-row-actions { align-items: stretch; }
.follow-up-row-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.follow-up-row-actions .button,
.follow-up-row-actions form:not(.dismiss-action) button { width: 100%; justify-content: center; }
.follow-up-row-actions .dismiss-action { min-width: 0; }
.due-date-action { grid-template-columns: minmax(120px, 1fr); margin-top: 10px; }
.dismiss-action { display: grid; gap: 8px; min-width: 160px; }
.follow-up-panel-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.follow-up-panel-summary div { border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper) 62%, white); padding: 12px; display: grid; gap: 4px; }
.follow-up-panel-summary span { color: var(--muted); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.follow-up-panel-summary strong { color: var(--brand-dark); }
.follow-up-card-list { display: grid; gap: 12px; margin: 12px 0; }
.follow-up-card { display: grid; gap: 10px; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; background: white; padding: 12px; }
.follow-up-card header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.follow-up-card p { margin: 0; }
.follow-up-manual-form { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(110px, 0.8fr) 150px minmax(180px, 1.2fr) minmax(160px, 1fr) auto; gap: 10px; align-items: end; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.follow-up-manual-form .wide { grid-column: 1 / -2; }
.follow-up-booking-context { grid-column: 1 / -1; display: grid; gap: 8px; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; background: white; padding: 14px; }
.follow-up-booking-context h2 { font-size: 1rem; margin: 0; color: var(--brand-dark); }
.section-title { margin-top: 30px; margin-bottom: 14px; font-size: 1.2rem; }
.diary { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.chair-lane { background: #f0f6f4; border: 1px solid var(--line); border-radius: 8px; padding: 14px; min-height: 180px; }
.chair-lane h2 { font-size: 1rem; margin: 0 0 12px; }
.week-diary { display: grid; grid-template-columns: repeat(7, minmax(210px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.week-day { background: #f0f6f4; border: 1px solid var(--line); border-radius: 8px; padding: 12px; min-height: 220px; }
.week-day header { display: flex; justify-content: space-between; gap: 10px; align-items: start; margin-bottom: 12px; }
.week-day header strong { display: block; color: var(--brand-dark); }
.week-day header span { color: var(--muted); font-size: 0.85rem; }
.week-day header a { font-size: 0.85rem; }
.week-day .time-lane-body { display: grid; grid-template-rows: none; grid-auto-rows: auto; gap: 8px; min-height: clamp(560px, calc(100vh - 390px), 900px); align-content: start; background: linear-gradient(to bottom, rgba(217, 225, 223, 0.9) 1px, transparent 1px) 0 0 / 100% 72px; padding-top: 44px; }
.week-day .time-tick { display: none; }
.week-day .empty-lane { grid-row: auto; margin-top: 4px; }
.week-day .appointment-card.timed-card { grid-row: auto !important; margin: 0; }
.week-day .appointment-card.compact-card { grid-template-columns: 58px minmax(0, 1fr) auto; min-height: 76px; }
.week-day .appointment-card.compact-card .badge { align-self: start; grid-column: auto; }
.time-lane-body { display: grid; grid-template-rows: repeat(40, minmax(18px, 1fr)); gap: 0; min-height: 760px; position: relative; background: linear-gradient(to bottom, rgba(217, 225, 223, 0.9) 1px, transparent 1px) 0 0 / 100% 72px; border-radius: 6px; overflow: visible; }
.time-tick { grid-row: var(--tick-row); grid-column: 1; border-top: 1px solid rgba(100, 112, 111, 0.18); color: var(--muted); font-size: 0.72rem; line-height: 1; padding-top: 3px; z-index: 0; }
.time-tick span { display: block; width: 48px; background: #f0f6f4; padding-right: 6px; }
.slot-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; width: 48px; margin-top: 4px; opacity: 0; transition: opacity 0.16s ease; }
.time-lane-body:hover .slot-links, .slot-links:focus-within { opacity: 1; }
.slot-links a { display: inline-flex; justify-content: center; background: rgba(0, 120, 128, 0.1); border-radius: 999px; color: var(--brand-dark); font-size: 0.66rem; font-weight: 800; padding: 3px 4px; text-decoration: none; }
.slot-links a:hover { background: rgba(0, 120, 128, 0.18); }
.empty-lane { grid-row: 2 / span 4; grid-column: 1; align-self: start; background: rgba(255, 255, 255, 0.74); border-radius: 6px; padding: 10px; z-index: 1; }
.appointment-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; background: white; border-left: 5px solid var(--brand); border-radius: 8px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px; margin-bottom: 12px; position: relative; cursor: pointer; }
.appointment-card:nth-of-type(even) { background: color-mix(in srgb, var(--brand) 5%, white); border-left-color: var(--brand-dark); }
.appointment-card:nth-of-type(3n) { background: color-mix(in srgb, var(--accent) 12%, white); border-left-color: var(--accent); }
.appointment-card.compact-card { grid-template-columns: 54px 1fr; gap: 10px; padding: 10px; }
.appointment-card.compact-card .badge, .appointment-card.compact-card .appointment-actions { grid-column: 1 / -1; }
.appointment-card.timed-card { grid-row: var(--row-start) / span var(--row-span); grid-column: 1; margin: 4px 4px 4px 52px; min-height: 0; z-index: 1; box-shadow: 0 8px 18px rgba(12, 32, 31, 0.08); overflow: visible; }
.appointment-card:hover, .appointment-card:focus { border-right-color: var(--brand); border-top-color: var(--brand); border-bottom-color: var(--brand); box-shadow: 0 14px 30px rgba(12, 32, 31, 0.16); outline: 2px solid color-mix(in srgb, var(--brand) 22%, transparent); outline-offset: 2px; z-index: 12; }
.appointment-card.detail-open { z-index: 40; }
.appointment-card.status-cancelled { border-left-color: #9ca3af; opacity: 0.72; }
.appointment-card.status-arrived { border-left-color: var(--accent); }
.appointment-card.status-seen { border-left-color: #16a34a; }
.appointment-card.status-fta { border-left-color: var(--danger); }
.appointment-time { display: grid; align-content: start; gap: 2px; color: var(--muted); }
.appointment-time strong { color: var(--ink); font-size: 1.05rem; }
.appointment-main { display: grid; align-content: start; gap: 4px; min-width: 0; }
.appointment-main span { color: var(--muted); }
.appointment-hover-detail { position: absolute; left: var(--appointment-detail-left, calc(100% + 10px)); top: var(--appointment-detail-top, 0); width: var(--appointment-detail-width, min(420px, 78vw)); max-width: calc(100vw - 32px); max-height: min(620px, 84vh); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 12px; padding: 16px; background: white; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; box-shadow: 0 18px 46px rgba(12, 32, 31, 0.2); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease; pointer-events: none; cursor: default; }
.appointment-card.detail-open .appointment-hover-detail { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.timed-diary .appointment-hover-detail { position: fixed; left: 50%; top: 50%; width: min(420px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 32px)); transform: translate(-50%, calc(-50% + 4px)); z-index: 45; }
.timed-diary .appointment-card.detail-open .appointment-hover-detail { transform: translate(-50%, -50%); }
.appointment-detail-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.appointment-detail-header strong, .appointment-hover-detail > strong { color: var(--brand-dark); font-size: 1rem; }
.appointment-detail-close { min-height: 34px; padding: 0 10px; font-size: 0.78rem; }
.appointment-hover-detail dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 7px 10px; margin: 0; }
.appointment-hover-detail dt { color: var(--muted); font-size: 0.78rem; font-weight: 850; text-transform: uppercase; }
.appointment-hover-detail dd { margin: 0; overflow-wrap: anywhere; }
.reminder-chip { color: var(--brand-dark); font-weight: 800; }
.reminder-chip.action-required { color: var(--danger); }
.appointment-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.appointment-actions form { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.appointment-actions select { min-width: 130px; }
.appointment-hover-detail .appointment-actions { grid-column: auto; align-items: stretch; border-top: 1px solid var(--line); display: grid; gap: 10px; padding-top: 12px; }
.appointment-hover-detail .appointment-actions form { align-items: stretch; display: grid; gap: 8px; }
.appointment-hover-detail .appointment-actions select, .appointment-hover-detail .appointment-actions button, .appointment-hover-detail .appointment-actions .icon-link { width: 100%; }
.appointment-reminder-actions,
.appointment-whatsapp-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.appointment-whatsapp-actions { border-top: 1px dashed var(--line); padding-top: 10px; }
.appointment-whatsapp-actions .muted { grid-column: 1 / -1; margin: 0; }
.appointment-hover-detail .appointment-reminder-actions form,
.appointment-hover-detail .appointment-whatsapp-actions form { display: block; }
.manual-copy-result { display: grid; gap: 8px; }
.manual-copy-result textarea { width: 100%; resize: vertical; }
.linked-treatment-items { border-top: 1px solid var(--line); display: grid; gap: 10px; padding-top: 12px; }
.appointment-treatment-item { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; padding: 10px; }
.appointment-treatment-item.completed-treatment-corrected { border-left: 5px solid #d97706; background: #fffbeb; }
.appointment-treatment-item.completed-treatment-voided { border-left: 5px solid #dc2626; background: #fff7f5; }
.appointment-treatment-item-header { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.appointment-treatment-item dl { grid-template-columns: 112px minmax(0, 1fr); }
.appointment-treatment-panel { display: grid; gap: 14px; }
.patient-treatment-appointment-list { display: grid; gap: 14px; }
.patient-treatment-appointment { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 12px; padding: 14px; }
.patient-treatment-appointment-head { align-items: start; display: flex; gap: 12px; justify-content: space-between; }
.patient-treatment-appointment-head strong,
.patient-treatment-appointment-head span { display: block; }
.patient-treatment-page { display: grid; gap: 18px; }
.treatment-complete-form { border-top: 1px solid var(--line); display: grid; gap: 8px; padding-top: 10px; }
.checkbox-label { align-items: center; display: flex; gap: 8px; }
.checkbox-label input { width: auto; }
.treatment-link-form, .treatment-unlink-form { display: grid; gap: 8px; }
.treatment-link-form select, .treatment-link-form button, .treatment-complete-form textarea, .treatment-complete-form input, .treatment-complete-form button, .treatment-unlink-form input, .treatment-unlink-form button { width: 100%; }
.treatment-complete-form .checkbox-label input { width: auto; }
.appointment-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.appointment-quick-actions button { min-height: 40px; background: color-mix(in srgb, var(--brand) 10%, white); color: var(--brand-dark); }
.appointment-quick-actions button:hover { background: color-mix(in srgb, var(--brand) 18%, white); color: var(--brand-dark); }
.appointment-quick-actions button[data-status-quick="CANCELLED"],
.appointment-quick-actions button[data-status-quick="FTA"] { background: #fff0ed; color: var(--danger); }
.appointment-quick-actions button[data-status-quick="CANCELLED"]:hover,
.appointment-quick-actions button[data-status-quick="FTA"]:hover { background: #ffe2dd; color: var(--danger); }
.status-reason-panel { display: grid; grid-template-columns: minmax(180px, 1fr); gap: 8px; width: min(360px, 100%); }
.status-reason-panel[hidden] { display: none; }
.quick-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-reasons button { min-height: 30px; padding: 0 9px; background: #eef4f2; color: var(--brand-dark); font-size: 0.76rem; }
.quick-reasons button:hover { background: #dce9e6; color: var(--brand-dark); }
.status-update-form .form-message { width: 100%; }
.icon-link { min-height: 36px; display: inline-flex; align-items: center; }
.auth { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(145deg, #eef7f5, #f9fbfb); padding: 24px; }
.auth-panel { width: min(420px, 100%); background: white; border: 1px solid var(--line); border-radius: 8px; padding: 32px; box-shadow: 0 22px 60px rgba(12, 32, 31, 0.12); }
.auth-panel > .muted { text-align: center; margin: 0 0 18px; }
.auth-panel > a { display: block; margin-top: 18px; text-align: center; }
.inline-form { display: flex; justify-content: center; margin-top: 14px; }
.link-button { min-height: auto; padding: 0; background: transparent; color: var(--brand-dark); font: inherit; font-weight: 650; }
.link-button:hover { background: transparent; color: var(--brand); text-decoration: underline; }
.stack { display: grid; gap: 16px; margin-top: 24px; }
.alert, .notice { border-radius: 6px; padding: 12px 14px; font-weight: 700; }
.alert { background: #fff0ed; color: var(--danger); }
.notice { background: color-mix(in srgb, var(--brand) 10%, white); color: var(--brand-dark); }
.notice { background: #edf8ef; color: #166534; }
.form-message { margin: 0; color: #166534; font-weight: 750; }
.form-message.error { color: var(--danger); }
.qr-panel { display: flex; align-items: center; gap: 24px; max-width: 680px; }
.qr-panel img { width: 240px; height: 240px; }
code { display: inline-block; background: #eef4f2; border: 1px solid var(--line); border-radius: 6px; padding: 10px; overflow-wrap: anywhere; }
.record-layout { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1.15fr); gap: 18px; margin-top: 22px; align-items: start; }
.compact { margin-top: 14px; }
.timeline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.timeline { display: grid; gap: 12px; }
.timeline-item { border-bottom: 1px solid var(--line); padding: 12px 0; }
.timeline-item:last-child { border-bottom: 0; }
.timeline-item strong { display: block; }
.timeline-item time, .timeline-item small { color: var(--muted); font-size: 0.85rem; }
.timeline-item p { margin: 6px 0; }
.label-link { display: inline-flex; width: fit-content; margin-bottom: 4px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 10%, white); color: var(--brand-dark); padding: 3px 8px; font-size: 0.78rem; font-weight: 900; }
.plain-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.plain-list li { display: grid; gap: 8px; border-left: 3px solid var(--line); padding-left: 10px; }
.patient-subnav a.active { background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand-dark); border-left: 4px solid var(--brand); padding-left: 12px; border-radius: 6px; }
.patient-chart-page { min-width: 0; }
.chart-controls-panel { display: grid; gap: 18px; }
.chart-toggle-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chart-toggle { display: inline-flex; align-items: center; min-height: 38px; border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; background: white; color: var(--muted); font-weight: 850; }
.chart-toggle.active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand-dark); }
.chart-toggle.disabled { background: #eef4f2; color: var(--muted); opacity: 0.72; }
.chart-undo-notice { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.chart-undo-notice form { margin: 0; }
.odontogram-panel { overflow: hidden; }
.odontogram-panel { display: grid; gap: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 12px 0 18px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.9rem; font-weight: 750; }
.chart-legend i { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--line); display: inline-block; }
.legend-existing-treatment { background: #dbeafe; border-color: #2563eb !important; }
.legend-missing { background: repeating-linear-gradient(45deg, #fff, #fff 3px, #94a3b8 4px, #94a3b8 6px); }
.legend-caries { background: #fee2e2; border-color: #dc2626 !important; }
.legend-restoration { background: #dbeafe; border-color: #2563eb !important; }
.legend-defective-restoration { background: #fee2e2; border-color: #dc2626 !important; }
.legend-fracture { background: #fee2e2; border-color: #dc2626 !important; }
.legend-tooth-wear { background: #fef9c3; border-color: #ca8a04 !important; }
.legend-crown { background: #dbeafe; border-color: #2563eb !important; }
.legend-root-canal { background: linear-gradient(90deg, white 42%, #2563eb 42%, #2563eb 58%, white 58%); border-color: #2563eb !important; }
.legend-implant { background: #dbeafe; border-color: #2563eb !important; border-radius: 999px !important; }
.legend-bridge { background: linear-gradient(180deg, transparent 42%, #2563eb 42%, #2563eb 58%, transparent 58%); border-color: #2563eb !important; }
.legend-retained-root { background: #f1f5f9; border-color: #475569 !important; }
.legend-unerupted { background: transparent; border-style: dashed !important; border-color: #64748b !important; }
.legend-partial-erupted { background: #ecfccb; border-style: dashed !important; border-color: var(--brand) !important; }
.legend-exfoliated { background: #f8fafc; border-color: #64748b !important; opacity: 0.72; }
.legend-retained-deciduous { background: color-mix(in srgb, var(--brand) 16%, white); border-color: var(--brand-dark) !important; }
.legend-extraction-planned { background: #fee2e2; border-color: #b91c1c !important; }
.legend-proposed-treatment { background: #fee2e2; border-color: #dc2626 !important; }
.fast-chart-toolbar { display: grid; gap: 8px; align-items: stretch; }
.chart-mode-switches { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.multi-tooth-toggle,
.quick-chart-toggle { display: flex; align-items: center; gap: 10px; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #f8fafc; color: var(--ink); font-weight: 850; }
.multi-tooth-toggle input,
.quick-chart-toggle input { width: 20px; height: 20px; flex: 0 0 auto; }
.quick-chart-hint { margin: 0; font-weight: 750; }
.chart-form-workspace { display: grid; gap: 16px; align-items: start; }
.recent-chart-actions { display: grid; gap: 6px; align-content: center; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: white; }
.recent-action-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 38px; align-items: center; }
.recent-action-button { min-height: 36px; border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); background: color-mix(in srgb, var(--brand) 8%, white); color: var(--brand-dark); padding: 0 12px; }
.recent-action-button:hover,
.recent-action-button:focus-visible { background: var(--brand); color: white; }
.odontogram-svg { width: 100%; min-width: 760px; height: auto; display: block; background: linear-gradient(180deg, #fbfefd, color-mix(in srgb, var(--paper) 76%, white)); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.arch-label { fill: var(--brand-dark); font-size: 17px; font-weight: 900; }
.midline { stroke: var(--line); stroke-width: 2; stroke-dasharray: 8 8; }
.tooth-group .tooth-shape { fill: white; stroke: #94a3b8; stroke-width: 2; pointer-events: none; }
.tooth-outline { fill: none; stroke: #64748b; stroke-width: 2; pointer-events: none; }
.tooth-group.dentition-deciduous .tooth-shape { fill: color-mix(in srgb, var(--brand) 7%, white); stroke-dasharray: 4 3; }
.tooth-group.dentition-deciduous .tooth-outline { stroke-dasharray: 4 3; }
.tooth-group.dentition-deciduous .tooth-label { fill: var(--brand-dark); font-size: 14px; }
.chart-clickable-tooth { cursor: pointer; outline: none; }
.chart-clickable-tooth:hover .tooth-outline,
.chart-clickable-tooth:focus .tooth-outline,
.chart-clickable-tooth.is-selected .tooth-outline { filter: drop-shadow(0 8px 12px rgb(15 23 42 / 0.18)); stroke: var(--brand); stroke-width: 4; }
.chart-clickable-tooth:focus .tooth-label { fill: var(--brand-dark); }
.tooth-group.has-data .tooth-shape,
.tooth-group[class*="state-"] .tooth-shape { stroke: var(--brand-dark); stroke-width: 3; }
.tooth-label { fill: var(--ink); font-size: 15px; font-weight: 900; }
.state-missing .tooth-shape,
.state-missing .tooth-surface { fill: #f8fafc; stroke: #64748b; stroke-dasharray: 5 4; opacity: 0.8; }
.state-caries .tooth-outline { stroke: #dc2626; }
.state-restoration .tooth-outline,
.state-completed-treatment .tooth-outline { stroke: #2563eb; }
.state-defective-restoration .tooth-outline,
.state-fracture .tooth-outline { stroke: #dc2626; }
.state-tooth-wear .tooth-shape { fill: #fefce8; stroke: #ca8a04; }
.state-crown .tooth-outline { stroke: #2563eb; stroke-width: 5; }
.state-root-canal .tooth-outline,
.state-implant .tooth-outline { stroke: #2563eb; }
.state-bridge .tooth-outline { stroke: #2563eb; }
.state-retained-root .tooth-shape { fill: #f8fafc; stroke: #475569; }
.state-unerupted .tooth-outline { stroke: #64748b; stroke-dasharray: 3 4; }
.state-partial-erupted .tooth-shape { fill: #f7fee7; stroke: var(--brand); stroke-dasharray: 8 4; }
.state-exfoliated .tooth-shape { fill: #f8fafc; stroke: #64748b; opacity: 0.55; }
.state-retained-deciduous .tooth-shape { fill: color-mix(in srgb, var(--brand) 14%, white); stroke: var(--brand-dark); }
.state-extraction-planned .tooth-outline,
.state-proposed-treatment .tooth-outline { stroke: #dc2626; }
.missing-mark { stroke: #475569; stroke-width: 4; stroke-linecap: round; }
.state-dot { stroke: white; stroke-width: 1.5; }
.tooth-surface { fill: rgba(255, 255, 255, 0.94); stroke: #94a3b8; stroke-width: 1.4; pointer-events: all; transition: fill 0.16s ease, stroke 0.16s ease, stroke-width 0.16s ease; }
.tooth-surface:hover { stroke: var(--brand-dark); stroke-width: 2.5; }
.tooth-surface:focus-visible { outline: none; stroke: var(--accent); stroke-width: 4; }
.tooth-surface.is-selected-surface { stroke: #16a34a; stroke-width: 4; stroke-dasharray: 3 2; }
.surface-selection-clone { fill: transparent; stroke: #16a34a; stroke-width: 5; stroke-dasharray: 3 2; pointer-events: none; }
.surface-mark { fill: color-mix(in srgb, var(--brand) 58%, white); stroke: white; stroke-width: 1.3; opacity: 0.94; }
.surface-state-empty { fill: rgba(255, 255, 255, 0.94); }
.surface-state-caries { fill: #dc2626; }
.surface-state-restoration { fill: #2563eb; }
.surface-state-completed-treatment { fill: #2563eb; }
.surface-state-defective-restoration,
.surface-state-fracture { fill: #dc2626; }
.surface-state-tooth-wear { fill: #ca8a04; }
.surface-state-surface { fill: #94a3b8; }
.surface-state-proposed-treatment { fill: #dc2626; }
.caries-dot { fill: #dc2626; }
.restoration-dot { fill: #2563eb; }
.defective-restoration-dot { fill: #dc2626; stroke: white; stroke-width: 1.5; }
.fracture-mark { fill: none; stroke: #dc2626; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.wear-mark { fill: none; stroke: #ca8a04; stroke-width: 4; stroke-linecap: round; }
.retained-root-mark { fill: #475569; stroke: white; stroke-width: 1.5; }
.unerupted-mark { fill: none; stroke: #64748b; stroke-width: 3; stroke-dasharray: 4 4; }
.partial-erupted-mark { fill: none; stroke: var(--brand); stroke-width: 3; stroke-dasharray: 8 4; }
.exfoliated-mark { fill: none; stroke: #64748b; stroke-width: 3; stroke-linecap: round; }
.retained-deciduous-mark { fill: color-mix(in srgb, var(--brand) 45%, white); stroke: white; stroke-width: 1.5; }
.extraction-planned-mark { fill: none; stroke: #b91c1c; stroke-width: 4; stroke-linecap: round; }
.root-canal-mark { stroke: #2563eb; stroke-width: 2.8; stroke-linecap: round; }
.implant-mark { fill: none; stroke: #2563eb; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bridge-mark { stroke: #2563eb; stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.quick-action-menu { display: grid; gap: 12px; width: 100%; border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line)); border-left: 6px solid var(--brand); border-radius: 8px; background: white; padding: 14px; box-shadow: 0 14px 32px rgb(15 23 42 / 0.1); align-self: start; }
.quick-action-menu[hidden] { display: none; }
.quick-action-menu.anchored-below { width: 100%; }
.quick-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.quick-action-head h3 { margin: 2px 0 0; color: var(--brand-dark); }
.quick-action-close { display: none; }
.quick-action-empty { margin: 0; border: 1px dashed color-mix(in srgb, var(--brand) 32%, var(--line)); border-radius: 8px; padding: 10px 12px; background: color-mix(in srgb, var(--brand) 7%, white); color: var(--muted); font-weight: 800; }
.quick-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-action-button { justify-content: space-between; gap: 8px; min-height: 46px; border: 1px solid var(--line); background: #f8fafc; color: var(--ink); padding: 0 12px; text-align: left; }
.quick-action-button:hover,
.quick-action-button:focus-visible,
.quick-action-button.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, white); color: var(--brand-dark); }
.quick-action-button:disabled { background: #f1f5f9; color: var(--muted); border-color: var(--line); cursor: default; }
.quick-action-button kbd { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line)); border-radius: 5px; background: white; color: var(--brand-dark); font: inherit; font-size: 0.78rem; font-weight: 900; }
.quick-action-confirm { margin: 0; color: var(--ink); font-weight: 850; }
.quick-action-save-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.quick-action-save-form button { justify-content: center; min-height: 44px; }
.chart-edit-drawer { border: 1px solid var(--line); border-left: 6px solid var(--brand); border-radius: 8px; background: white; padding: 18px; box-shadow: 0 18px 38px rgb(15 23 42 / 0.12); max-width: 520px; }
.chart-edit-drawer[hidden] { display: none; }
.chart-edit-drawer h3 { margin: 2px 0 0; color: var(--brand-dark); }
.selected-surface-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--muted); font-weight: 750; }
.surface-badge { min-width: 28px; min-height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand-dark); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); font-size: 0.82rem; font-weight: 900; }
.stacked-form { display: grid; gap: 10px; }
.surface-picker { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px 12px; }
.surface-picker legend { padding: 0 6px; color: var(--brand-dark); font-weight: 900; }
.surface-picker label { display: flex; align-items: center; gap: 8px; min-height: 34px; font-weight: 800; }
.surface-picker input { width: 18px; height: 18px; }
.surface-picker small { grid-column: 1 / -1; color: var(--muted); }
.surface-picker.disabled { background: #f5f8f7; color: var(--muted); }

@media (min-width: 900px) {
    .chart-form-workspace { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); }
    .chart-edit-drawer { grid-column: 1; max-width: none; }
    .quick-action-menu { grid-column: 2; position: sticky; top: 14px; }
}

.chart-treatment-items-panel { border-left: 6px solid var(--accent); }
.chart-treatment-plan-groups { display: grid; gap: 16px; }
.chart-treatment-plan-group { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.chart-treatment-plan-group > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px; background: color-mix(in srgb, var(--accent) 12%, white); border-bottom: 1px solid var(--line); }
.chart-treatment-plan-group h3 { margin: 3px 0 0; color: var(--brand-dark); }
.chart-treatment-tooth-group { display: grid; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); }
.chart-treatment-tooth-group:last-child { border-bottom: 0; }
.chart-treatment-tooth-group h4 { margin: 0; color: var(--brand-dark); }
.chart-treatment-status-group { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: color-mix(in srgb, var(--paper) 80%, white); }
.chart-treatment-status-group.item-status-accepted { border-color: color-mix(in srgb, var(--brand) 28%, var(--line)); background: color-mix(in srgb, var(--brand) 8%, white); }
.chart-treatment-status-group.item-status-declined,
.chart-treatment-status-group.item-status-cancelled { border-color: #f1c7c1; background: #fff7f5; }
.chart-treatment-item-card { display: grid; gap: 12px; border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 8px; padding: 12px; background: #fff; }
.chart-treatment-item-card.item-status-accepted { border-left-color: var(--brand); }
.chart-treatment-item-card.item-status-completed { border-left-color: #16a34a; background: #f7fff9; }
.chart-treatment-item-card.item-status-declined,
.chart-treatment-item-card.item-status-cancelled { border-left-color: #dc2626; background: #fffafa; }
.chart-treatment-item-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.chart-treatment-item-summary > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.chart-treatment-item-summary strong { color: var(--ink); overflow-wrap: anywhere; }
.chart-treatment-item-summary small { color: var(--muted); font-weight: 800; white-space: nowrap; }
.chart-treatment-edit-form,
.chart-treatment-status-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.chart-treatment-edit-form label:first-child,
.chart-treatment-status-form label:last-of-type { grid-column: 1 / -1; }
.chart-treatment-edit-form textarea { min-height: 72px; resize: vertical; }
.chart-treatment-status-form button,
.chart-treatment-edit-form button { min-height: 42px; }
.item-status-badge.status-draft { background: #e0f2fe; color: #075985; }
.item-status-badge.status-accepted { background: color-mix(in srgb, var(--brand) 18%, white); color: var(--brand-dark); }
.item-status-badge.status-completed { background: #dcfce7; color: #166534; }
.item-status-badge.status-declined,
.item-status-badge.status-cancelled { background: #fee2e2; color: #991b1b; }
.completed-treatment-audit { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 6px; padding: 10px; background: color-mix(in srgb, var(--paper) 82%, white); }
.completed-treatment-audit.status-corrected { border-color: #f59e0b; background: #fffbeb; }
.completed-treatment-audit.status-voided { border-color: #fca5a5; background: #fff7f5; }
.completed-treatment-audit small { color: var(--muted); font-weight: 750; overflow-wrap: anywhere; }
.charge-status-panel { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 7px; margin-top: 8px; padding: 10px; background: color-mix(in srgb, var(--brand) 5%, white); }
.charge-status-panel > a { width: fit-content; }
.draft-charge-form { border-top: 1px solid var(--line); display: grid; gap: 8px; padding-top: 10px; }
.draft-charge-form button { width: fit-content; }
.charge-status-badge.status-ready { background: #e7f6f4; color: var(--brand-dark); }
.charge-status-badge.status-draft { background: #e0f2fe; color: #075985; }
.charge-status-badge.status-finalised { background: #dcfce7; color: #166534; }
.charge-status-badge.status-blocked { background: #f3f4f6; color: #4b5563; }
.invoice-charge-list { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 7px; margin-top: 8px; padding: 10px; background: color-mix(in srgb, var(--paper) 82%, white); }
.invoice-charge-list p { display: grid; gap: 2px; margin: 0; }
.invoice-charge-list span:not(.label-text) { color: var(--muted); font-size: 0.86rem; font-weight: 700; }
.perio-chart-panel { display: grid; gap: 18px; }
.perio-score-form { display: grid; gap: 14px; }
.sextant-score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.sextant-score-card { display: grid; gap: 9px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: color-mix(in srgb, var(--paper) 70%, white); }
.sextant-score-card h3 { margin: 0; color: var(--brand-dark); font-size: 1rem; }
.checkbox-line { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 850; }
.perio-history { display: grid; gap: 12px; }
.perio-history-card { border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; padding: 14px; background: #fff; display: grid; gap: 12px; }
.perio-history-card.status-corrected { border-left-color: #d97706; background: #fffbeb; }
.perio-history-card.status-voided { border-left-color: #dc2626; background: #fff7f5; }
.perio-history-card header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.perio-history-card header > div { display: grid; gap: 5px; }
.perio-history-card header span { color: var(--muted); font-weight: 750; }
.perio-history-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px !important; }
.perio-score-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.perio-score-summary > div { display: grid; gap: 5px; border-left: 3px solid var(--brand); padding: 8px 10px; background: color-mix(in srgb, var(--brand) 6%, white); border-radius: 6px; }
.perio-score-summary span { color: var(--muted); font-size: 0.85rem; font-weight: 900; }
.perio-score-summary small { color: var(--muted); overflow-wrap: anywhere; }
.perio-score-badge { display: inline-flex; align-items: center; justify-content: center; width: 38px; min-height: 32px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, white); color: var(--brand-dark); font-weight: 900; }
.perio-status-badge.status-active { background: color-mix(in srgb, var(--brand) 14%, white); color: var(--brand-dark); }
.perio-status-badge.status-corrected { background: #fef3c7; color: #92400e; }
.perio-status-badge.status-voided { background: #fee2e2; color: #991b1b; }
.perio-detail-panel { border: 1px solid var(--line); border-left: 6px solid var(--brand); border-radius: 8px; background: #fff; padding: 16px; display: grid; gap: 16px; }
.perio-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.perio-detail-header h3 { margin: 2px 0 0; color: var(--brand-dark); }
.perio-detail-header > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.perio-detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.perio-detail-meta > div { border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper) 80%, white); padding: 12px; min-width: 0; }
.perio-detail-meta p { margin: 6px 0 0; overflow-wrap: anywhere; }
.perio-detail-meta small { display: block; margin-top: 6px; color: var(--muted); overflow-wrap: anywhere; }
.perio-action-forms { display: grid; gap: 14px; }
.perio-correction-form,
.perio-void-form { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: color-mix(in srgb, var(--paper) 82%, white); }
.perio-correction-form h4,
.perio-void-form h4,
.perio-revision-history h4 { margin: 0; color: var(--brand-dark); }
.perio-void-form { border-color: #fecaca; background: #fff7f5; }
.perio-revision-history { border-top: 1px solid var(--line); padding-top: 12px; }
.perio-revision-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.perio-revision-list li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #fff; }
.perio-revision-list strong,
.perio-revision-list p { margin: 0 0 5px; overflow-wrap: anywhere; }
.bewe-risk-none { background: #e8f3f0; color: var(--brand-dark); }
.bewe-risk-low { background: #dcfce7; color: #166534; }
.bewe-risk-medium { background: #fef3c7; color: #92400e; }
.bewe-risk-high { background: #fee2e2; color: #991b1b; }
.chart-entry-groups { display: grid; gap: 14px; }
.chart-entry-group { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.chart-entry-group > header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--brand) 9%, white); border-bottom: 1px solid var(--line); }
.chart-entry-group > header strong { color: var(--brand-dark); font-size: 1.15rem; }
.chart-entry-card { display: grid; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); }
.chart-entry-card:last-child { border-bottom: 0; }
.chart-entry-summary { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.chart-entry-summary > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chart-entry-summary small { color: var(--muted); font-weight: 750; white-space: nowrap; }
.chart-entry-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; margin: 0; }
.chart-entry-meta div { min-width: 0; }
.chart-entry-meta dt { color: var(--muted); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.chart-entry-meta dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.chart-entry-correction-form { display: grid; gap: 7px; border-top: 1px solid var(--line); padding-top: 10px; }
.chart-entry-correction-form > div { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px; align-items: center; }
.completed-treatment-correction-form textarea { min-height: 72px; resize: vertical; }
.completed-treatment-void-form { border-color: #fecaca; background: #fff7f5; padding: 10px; border-radius: 8px; }
.chart-entry-history-disclosure { border-top: 1px solid var(--line); padding-top: 10px; }
.chart-entry-history-disclosure summary,
.chart-previous-values summary { cursor: pointer; color: var(--brand-dark); font-weight: 900; }
.chart-history-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.chart-revision-list,
.chart-revision-timeline { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.chart-revision-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 0.9rem; }
.chart-revision-list strong { color: var(--ink); }
.chart-history-cards { display: grid; gap: 14px; }
.chart-history-card { border: 1px solid var(--line); border-left: 6px solid var(--brand); border-radius: 8px; background: white; padding: 16px; display: grid; gap: 14px; }
.chart-history-card.status-corrected,
.chart-history-card.status-voided { border-left-color: #d97706; background: #fffaf0; }
.chart-history-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.chart-history-card h3 { margin: 2px 0 0; color: var(--brand-dark); }
.chart-status-badge.status-corrected { background: #fef3c7; color: #92400e; }
.chart-status-badge.status-voided { background: #fee2e2; color: #991b1b; }
.chart-snapshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.chart-snapshot { border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper) 82%, white); padding: 12px; min-width: 0; }
.chart-snapshot strong { display: block; color: var(--brand-dark); overflow-wrap: anywhere; }
.chart-snapshot p { margin: 6px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.correction-snapshot { border-color: #f59e0b; background: #fffbeb; }
.chart-previous-values { border-top: 1px solid var(--line); padding-top: 10px; }
.chart-revision-timeline { border-top: 1px solid var(--line); padding-top: 10px; }
.chart-revision-timeline li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; }
.chart-revision-event { display: inline-flex; width: fit-content; border-radius: 999px; padding: 5px 10px; background: color-mix(in srgb, var(--brand) 11%, white); color: var(--brand-dark); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.chart-revision-event.corrected,
.chart-revision-event.voided { background: #fef3c7; color: #92400e; }
.chart-revision-timeline strong,
.chart-revision-timeline p { margin: 0 0 4px; overflow-wrap: anywhere; }
.chart-revision-timeline small { color: var(--muted); }
.inline-correction-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px; align-items: center; }
.danger-button { background: #fee2e2; color: #b91c1c; }
.danger-button:hover { background: #fecaca; color: #7f1d1d; }
.ai-safety-stack { display: grid; gap: 10px; margin: 12px 0; }
.ai-safety-banner { display: grid; gap: 4px; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; background: white; padding: 12px 14px; }
.ai-safety-banner p { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.ai-safety-kicker { color: var(--brand-dark); font-size: 0.74rem; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.ai-safety-banner-draft { border-left-color: var(--brand); background: #f8fbff; }
.ai-safety-banner-warning, .ai-safety-banner-review { border-left-color: #d97706; background: #fffaf0; }
.ai-safety-banner-clinical, .ai-safety-banner-imaging { border-left-color: var(--danger); background: #fff7f5; }
.ai-source-links { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper) 78%, white); padding: 12px 14px; }
.ai-source-links ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ai-source-links li { display: grid; gap: 2px; }
.ai-source-links small { color: var(--muted); overflow-wrap: anywhere; }
.ai-draft-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ai-draft-controls form { margin: 0; }
.ai-imaging-metadata-panel { display: grid; gap: 14px; }
.ai-suggestion-list { display: grid; gap: 12px; }
.ai-suggestion-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: color-mix(in srgb, var(--paper) 72%, white); }
.ai-suggestion-item p { margin: 4px 0 0; overflow-wrap: anywhere; }
.ai-suggestion-item .inline-actions { justify-content: flex-end; margin-top: 0; }
.ai-suggestion-edit { min-width: min(360px, 100%); }
.ai-suggestion-edit summary.button { display: inline-flex; cursor: pointer; list-style: none; }
.ai-suggestion-edit summary.button::-webkit-details-marker { display: none; }
.ai-suggestion-edit .form-grid { margin-top: 10px; min-width: min(360px, 90vw); }
.inline-button-form { display: inline-flex; margin: 0; }
.print-only { display: none; }
.ai-communication-draft-form,
.ai-communication-inline-form,
.ai-draft-review-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.ai-communication-draft-form .wide,
.ai-communication-inline-form .wide,
.ai-draft-review-form .wide { grid-column: 1 / -1; }
.ai-draft-review { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ai-draft-review textarea,
.manual-copy-output textarea { width: 100%; }
  .manual-copy-output { margin-top: 16px; }
  .ai-admin-summary-panel { max-width: 980px; }
  .ai-treatment-plan-explanation-panel { max-width: 1040px; }
.ai-draft-output { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: white; margin: 12px 0; }
.ai-draft-output h3 { margin-top: 0; }
.ai-draft-output h5 { margin: 0 0 8px; color: var(--brand-dark); font-size: 0.95rem; }
.ai-draft-output p { white-space: pre-wrap; line-height: 1.55; margin-bottom: 0; }
.ai-actions-section-list { display: grid; gap: 18px; margin-top: 16px; }
.ai-action-section { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.ai-action-section > header,
.ai-action-item article > header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.ai-action-section h3,
.ai-action-item h4 { margin: 0; color: var(--brand-dark); }
.ai-action-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ai-action-item { border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; background: white; padding: 14px; }
.ai-action-item article { display: grid; gap: 10px; }
.ai-action-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-action-meta span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; color: var(--brand-dark); font-size: 0.78rem; font-weight: 850; }
.ai-action-title,
.ai-action-next { margin: 0; }
.ai-action-reasons { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--muted); }
.dictation-control { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 12px; background: color-mix(in srgb, var(--paper) 82%, white); display: grid; gap: 10px; margin: 12px 0; }
.dictation-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dictation-control button[data-dictation-start] { background: #f59e0b; color: #1f1300; }
.dictation-control button[data-dictation-start]:hover { background: #d97706; color: white; }
.dictation-control button[data-dictation-stop] { background: #dc2626; color: white; }
.dictation-control button[data-dictation-stop]:hover { background: #b91c1c; color: white; }
.dictation-control button[data-dictation-start]:disabled,
.dictation-control button[data-dictation-stop]:disabled { opacity: 0.48; filter: grayscale(0.28); }
.dictation-control [data-dictation-status] { margin: 0; }
.dictation-transcript textarea { width: 100%; min-height: 90px; margin-top: 8px; background: white; }
.clinical-dictation-draft { display: grid; gap: 12px; }
.clinical-dictation-draft-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.clinical-dictation-draft-grid section { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 12px; }
.clinical-dictation-draft-grid h3 { margin: 0 0 8px; font-size: 0.96rem; }
.clinical-dictation-draft-grid p,
.clinical-dictation-draft-grid ul,
.clinical-dictation-draft-grid dl { margin: 0; }
.clinical-dictation-draft-grid dd { overflow-wrap: anywhere; }
.note-fields { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; margin: 10px 0; }
.note-fields dt { color: var(--muted); font-weight: 800; }
.note-fields dd { margin: 0; }
.onboarding-page,
.onboarding-form-page { display: grid; gap: 18px; }
.onboarding-hero-head { scroll-margin-top: 96px; }
.onboarding-status-badge { min-height: 36px; align-items: center; }
.onboarding-next-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; border-left: 6px solid var(--brand); }
.onboarding-next-action h2 { margin-bottom: 0; color: var(--brand-dark); }
.onboarding-progress-panel { display: grid; gap: 14px; }
.progress-meter { height: 12px; border-radius: 999px; background: #e5eeeb; overflow: hidden; border: 1px solid var(--line); }
.progress-meter span { display: block; min-width: 0; max-width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.onboarding-summary-strip { margin-bottom: 0; }
.onboarding-form-list { display: grid; gap: 14px; }
.onboarding-form-card,
.form-section-card { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 18px; display: grid; gap: 14px; }
.onboarding-form-card header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.onboarding-form-card h3 { margin: 4px 0 0; color: var(--brand-dark); }
.compact-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; }
.compact-details div { min-width: 0; }
.compact-details dt { color: var(--muted); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.compact-details dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.diagnostic-stack { display: grid; gap: 12px; margin: 14px 0; }
.diagnostic-stack article { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.compact-list { margin: 12px 0 0; padding-left: 20px; }
.compact-list li { margin: 4px 0; }
.status-not_started { background: #f3f4f6; color: #4b5563; }
.status-in_progress, .status-draft { background: #e0f2fe; color: #075985; }
.status-submitted { background: #fef3c7; color: #92400e; }
.status-reviewed { background: #dcfce7; color: #166534; }
.status-needs_update { background: #fee2e2; color: #991b1b; }
.status-archived { background: #e5e7eb; color: #374151; }
.status-active { background: #dcfce7; color: #166534; }
.status-used { background: #e0f2fe; color: #075985; }
.status-expired, .status-revoked { background: #fee2e2; color: #991b1b; }
.status-sent { background: #dcfce7; color: #166534; }
.status-simulated, .status-created, .status-draft { background: #e0f2fe; color: #075985; }
.status-failed, .status-blocked, .status-cancelled { background: #fee2e2; color: #991b1b; }
.form-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.form-progress span { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 28%, white); }
.onboarding-answer-form { display: grid; gap: 16px; }
.validation-summary { border: 1px solid #f6cf69; border-left: 6px solid var(--accent); border-radius: 8px; background: #fff8e1; padding: 16px 18px; }
.validation-summary h2 { margin: 0 0 8px; color: var(--brand-dark); font-size: 1.05rem; }
.validation-summary ul { margin: 0; padding-left: 20px; }
.validation-summary li { margin: 4px 0; }
.field-invalid { border-color: #f1a59c !important; background: #fff7f5 !important; }
.field-invalid input,
.field-invalid select,
.field-invalid textarea { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12); }
.large-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 12px 0; }
.large-check-grid.single-column { grid-template-columns: 1fr; }
.large-check-grid label,
.checkbox-line { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: color-mix(in srgb, var(--paper) 72%, white); min-height: 52px; }
.large-check-grid input[type="checkbox"],
.checkbox-line input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
.consent-choice-group { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: color-mix(in srgb, var(--paper) 74%, white); }
.consent-choice-group .large-check-grid { margin: 0; }
.marketing-consent-block { border-color: #f6cf69; background: #fffdf3; }
.section-step { width: fit-content; border-radius: 999px; padding: 5px 10px; background: color-mix(in srgb, var(--brand) 10%, white); color: var(--brand-dark); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.section-navigation { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 12px; }
.generated-link-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.generated-link-panel .copy-status { align-self: center; margin: 0; font-weight: 800; }
.link-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; }
.status-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: color-mix(in srgb, var(--paper) 72%, white); display: grid; gap: 6px; }
.status-card strong { color: var(--brand-dark); font-size: 1.05rem; overflow-wrap: anywhere; }
.status-card p { margin: 0; color: var(--muted); line-height: 1.4; }
.onboarding-communication-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
.onboarding-communication-actions form { margin: 0; }
.communication-history-table td { overflow-wrap: anywhere; }
.onboarding-link-list { display: grid; gap: 12px; }
.onboarding-link-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: color-mix(in srgb, var(--paper) 70%, white); display: grid; gap: 12px; }
.onboarding-link-card header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.empty-state { border: 1px dashed color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 8px; padding: 18px; background: color-mix(in srgb, var(--paper) 82%, white); display: grid; gap: 8px; align-items: start; }
.empty-state h3 { margin: 0; color: var(--brand-dark); font-size: 1.02rem; }
.empty-state p { margin: 0; color: var(--muted); }
.alert-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.compact-alerts { margin-bottom: 0; }
.public-onboarding-page { min-height: calc(100vh - 74px); }
.public-onboarding-shell { width: min(940px, 100%); margin: 0 auto; display: grid; gap: 18px; padding: clamp(18px, 4vw, 38px) clamp(14px, 4vw, 28px); }
.public-form-shell { max-width: 860px; }
.public-onboarding-head { display: grid; gap: 8px; }
.public-onboarding-head h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
.public-welcome-card { border: 1px solid var(--line); border-left: 6px solid var(--brand); border-radius: 8px; background: white; padding: clamp(18px, 4vw, 28px); }
.public-welcome-card p { margin: 0; max-width: 720px; color: var(--muted); font-size: 1.03rem; line-height: 1.55; }
.public-progress-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.public-progress-panel > div { border-left: 4px solid var(--brand); padding-left: 12px; }
.public-progress-panel strong { display: block; color: var(--brand-dark); font-size: 1.35rem; }
.public-progress-panel span { color: var(--muted); font-weight: 850; }
.public-progress-meter { margin-top: -8px; }
.appointment-response-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.appointment-response-actions .public-form-card { align-content: start; }
.appointment-response-summary .details { margin: 0; }
.public-form-list { display: grid; gap: 14px; }
.public-form-card { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 18px; display: grid; gap: 12px; }
.public-form-card header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.public-form-card h2 { margin: 4px 0 0; color: var(--brand-dark); font-size: 1.15rem; }
.public-form-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.form-section-nav { position: sticky; top: 18px; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 12px; }
.form-section-nav a { min-height: 44px; display: flex; align-items: center; border-radius: 6px; padding: 0 12px; color: var(--ink); font-weight: 850; }
.form-section-nav a:hover,
.form-section-nav a:focus,
.form-section-nav a.active { background: color-mix(in srgb, var(--brand) 10%, white); color: var(--brand-dark); }
.form-section-card:target { scroll-margin-top: 18px; border-color: var(--accent); box-shadow: inset 5px 0 0 var(--brand), 0 0 0 3px rgba(255, 200, 87, 0.22); }
.public-help-panel { display: grid; gap: 4px; }
.public-answer-form .form-section-card { padding: clamp(16px, 4vw, 24px); }
.public-answer-form input,
.public-answer-form select,
.public-answer-form textarea,
.public-answer-form button,
.public-answer-form .button { min-height: 48px; font-size: 1rem; }
.public-answer-form .large-check-grid label,
.public-answer-form .checkbox-line { min-height: 58px; align-items: center; }
.public-submit-card { margin-bottom: 72px; }
.public-sticky-actions { position: sticky; bottom: 0; z-index: 12; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px -18px -18px; padding: 12px 18px; background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); }
.public-sticky-actions button { justify-content: center; }
.public-state-panel { min-height: 280px; align-content: center; text-align: center; }
.public-body { min-height: 100vh; background: #f6fbfa; background: var(--paper, #f6fbfa); }
.public-page { max-width: none; margin: 0; padding: 0; }
.public-topbar {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px clamp(16px, 4vw, 36px);
    background: white;
    border-bottom: 1px solid var(--line);
}
.public-brand-lockup {
    width: min(940px, 100%);
    display: flex;
    align-items: center;
    gap: 14px;
    color: #071317;
    color: var(--ink, #071317);
}
.public-brand-logo {
    max-width: 190px;
    max-height: 54px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
}
.public-brand-lockup div {
    min-width: 0;
    display: grid;
    gap: 2px;
    border-left: 4px solid var(--accent);
    padding-left: 14px;
}
.public-brand-lockup strong {
    color: #00616b;
    color: var(--brand-dark, #00616b);
    font-size: 1.05rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.public-brand-lockup span {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 800;
}
.public-body .public-onboarding-page {
    min-height: calc(100vh - 86px);
    display: grid;
    align-items: center;
}
.public-body .public-state-panel {
    position: relative;
    min-height: 310px;
    padding: clamp(28px, 6vw, 54px);
    border-top: 6px solid #008996;
    border-top-color: var(--brand, #008996);
    box-shadow: 0 18px 44px rgba(12, 32, 31, 0.08);
}
.public-state-panel .label-text {
    width: fit-content;
    margin: 0 auto 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 10%, white);
    color: var(--brand-dark);
}
.public-state-panel h1 {
    color: var(--ink);
    font-size: clamp(2rem, 5vw, 2.75rem);
}
.public-state-panel p {
    max-width: 620px;
    margin: 10px auto 0;
    font-size: 1.05rem;
    line-height: 1.55;
}
.review-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.error-panel { max-width: 680px; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 34px; display: grid; gap: 14px; }
.error-panel h1 { font-size: 2.2rem; }
.error-code { color: var(--brand-dark); font-size: 0.85rem; font-weight: 900; letter-spacing: 0.08em; }
.submission-review-page { max-width: 1100px; }
.print-document { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 34px; display: grid; gap: 26px; }
.print-header { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid var(--line); padding-bottom: 20px; }
.print-header div:first-child { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.print-header img.print-logo { width: 260px; height: auto; }
.print-header h2, .print-header p { margin: 0; text-align: right; }
.onboarding-print-document { gap: 22px; }
.print-section { display: grid; gap: 10px; break-inside: avoid; }
.print-section h2 { color: var(--brand-dark); font-size: 1.12rem; margin: 0; }
.print-details { max-width: none; margin: 0; }
.answer-section-list { display: grid; gap: 16px; }
.answer-section { display: grid; gap: 8px; break-inside: avoid; }
.answer-section h3 { margin: 0; color: var(--ink); font-size: 1rem; }
.estimate-title { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.estimate-title h1, .estimate-title h2, .estimate-title p { margin: 4px 0; }
.label-text { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.estimate-section { display: grid; gap: 10px; }
.receipt-warning { background: #fff8e1; border: 1px solid #f6cf69; border-left: 6px solid var(--accent); border-radius: 8px; padding: 14px 16px; }
.receipt-warning strong { color: var(--brand-dark); display: block; margin-bottom: 4px; }
.receipt-warning p { margin: 4px 0; }
.estimate-table tfoot th { background: #f7faf8; font-size: 1rem; }
.numeric { text-align: right; }
.acceptance-box { border-top: 1px solid var(--line); padding-top: 20px; }
.signature-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-top: 20px; }
.signature-grid div { border-bottom: 1px solid var(--ink); min-height: 54px; display: flex; align-items: end; }
.signature-grid span { color: var(--muted); font-size: 0.85rem; padding-bottom: 6px; }

body:has(.clinical-workspace-page) .page { max-width: 1540px; }
.clinical-workspace-page { display: grid; gap: 18px; }
.clinical-workspace-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr); gap: 16px; align-items: stretch; }
.clinical-patient-card,
.clinical-appointment-card,
.clinical-alert-panel { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 18px; }
.clinical-patient-card { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "back patient" "actions actions"; gap: 14px 16px; align-items: start; border-left: 6px solid var(--brand); }
.clinical-patient-card .patient-back-link { grid-area: back; align-self: center; white-space: nowrap; }
.clinical-patient-main { grid-area: patient; min-width: 0; }
.clinical-patient-card h1 { margin-top: 2px; overflow-wrap: break-word; word-break: normal; }
.clinical-patient-card p { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; color: var(--muted); font-weight: 750; }
.clinical-patient-card p span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; background: color-mix(in srgb, var(--paper) 76%, white); }
.clinical-header-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.clinical-appointment-card { display: grid; gap: 12px; align-content: start; border-top: 5px solid var(--accent); }
.clinical-appointment-card > strong { color: var(--brand-dark); font-size: 1.05rem; }
.clinical-appointment-card dl { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.clinical-appointment-card dt { color: var(--muted); font-weight: 850; }
.clinical-appointment-card dd { margin: 0; overflow-wrap: anywhere; }
.clinical-summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.clinical-summary-strip > *,
.clinical-summary-strip a { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; display: grid; gap: 4px; color: var(--ink); }
.clinical-summary-strip span { color: var(--muted); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.clinical-summary-strip strong { color: var(--brand-dark); overflow-wrap: anywhere; }
.clinical-summary-strip small { color: var(--muted); overflow-wrap: anywhere; }
.clinical-alert-panel { border-left: 6px solid var(--danger); }
.clinical-alert-panel.no-alerts { border-left-color: var(--brand); }
.clinical-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 18px; align-items: start; }
.clinical-main-column,
.clinical-side-column { display: grid; gap: 18px; min-width: 0; }
.clinical-side-column { position: sticky; top: 90px; max-height: calc(100vh - 108px); overflow: auto; align-self: start; }
.clinical-note-panel { padding-bottom: 0; }
.template-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.template-bar .button { min-height: 38px; padding: 0 12px; }
.template-bar .selected { background: color-mix(in srgb, var(--brand) 16%, white); color: var(--brand-dark); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 30%, var(--line)); }
.clinical-note-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.clinical-note-form textarea { min-height: 112px; }
.clinical-note-form .wide { grid-column: 1 / -1; }
.sticky-form-actions { position: sticky; bottom: 0; z-index: 3; grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; margin: 8px -22px 0; padding: 12px 22px; background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); }
.sticky-form-actions button { min-width: 150px; justify-content: center; }
.outcome-grid { display: grid; grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.outcome-grid button { justify-content: center; }
.treatment-plan-summary header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.treatment-plan-summary .plain-list { margin-top: 10px; }
.treatment-plan-summary .plain-list li { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.treatment-plan-summary .plain-list li:last-child { border-bottom: 0; }
.amendment-list { display: grid; gap: 8px; margin-top: 10px; border-left: 4px solid var(--accent); padding-left: 10px; }
.amendment-list article { background: color-mix(in srgb, var(--paper) 78%, white); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.amendment-form { display: grid; gap: 8px; margin-top: 12px; }
.clinical-side-column .timeline-item { overflow-wrap: anywhere; }
.examination-summary-panel .chart-entry-meta { margin: 12px 0; }
body:has(.clinical-examination-page) .page { max-width: 1680px; }
.clinical-examination-page { gap: 16px; }
.examination-workspace-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr); }
.exam-section-nav { position: sticky; top: 74px; z-index: 6; margin: -2px 0 0; padding: 8px 0; background: color-mix(in srgb, var(--paper) 86%, white); }
.examination-form { align-items: start; }
.examination-side-column { top: 90px; }
.tooth-finding-panel,
.recommendation-panel { overflow: visible; }
.exam-tooth-grid { display: grid; gap: 8px; margin: 8px 0 14px; }
.exam-tooth-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.exam-tooth-button { min-height: 38px; justify-content: center; padding: 0; border: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 6%, white); color: var(--brand-dark); font-weight: 900; }
.exam-tooth-button:hover,
.exam-tooth-button.selected { border-color: var(--brand); background: var(--brand); color: white; }
.exam-tooth-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exam-panel-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper) 70%, white); }
.exam-panel-form .wide { grid-column: 1 / -1; }
.exam-panel-form button { justify-content: center; width: fit-content; }
.exam-card-list,
.exam-history-list { display: grid; gap: 12px; }
.exam-list-card { display: grid; gap: 10px; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; padding: 12px; background: white; overflow-wrap: anywhere; }
.exam-list-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.exam-list-card p { margin: 0; }
.exam-inline-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: end; }
.exam-inline-edit .wide { grid-column: 1 / -1; }
.exam-inline-edit button { justify-content: center; width: fit-content; }
.examination-print-document .details { max-width: none; }
.clinical-bpe-page { gap: 16px; }
.bpe-screening-form { display: contents; }
.bpe-panel { display: grid; gap: 14px; }
.bpe-safety-note { border-left: 5px solid var(--accent); padding: 10px 12px; background: #fffdf3; border-radius: 8px; }
.bpe-sextant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bpe-sextant-grid.compact { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bpe-sextant-card { display: grid; gap: 10px; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; padding: 12px; background: white; min-width: 0; }
.bpe-sextant-card header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.bpe-sextant-card h3 { margin: 2px 0 0; color: var(--brand-dark); font-size: 1rem; }
.bpe-sextant-card p { margin: 0; overflow-wrap: anywhere; }
.bpe-score-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bpe-score-buttons label { min-width: 0; }
.bpe-score-buttons input { position: absolute; opacity: 0; pointer-events: none; }
.bpe-score-buttons span { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--brand) 6%, white); color: var(--brand-dark); font-weight: 900; }
.bpe-score-buttons input:checked + span { background: var(--brand); color: white; border-color: var(--brand); }
.bpe-score-buttons input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.bpe-risk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bpe-factor-form { margin-top: 12px; }
.bpe-guidance-list { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 10px; margin: 0; }
.bpe-guidance-list dt { display: flex; align-items: center; justify-content: center; min-height: 34px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand-dark); font-weight: 900; }
.bpe-guidance-list dd { margin: 0; color: var(--muted); line-height: 1.45; }
.bpe-risk-suggestion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bpe-risk-suggestion > div { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: color-mix(in srgb, var(--paper) 74%, white); display: grid; gap: 4px; }
.bpe-risk-suggestion span { color: var(--muted); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.bpe-risk-suggestion strong { color: var(--brand-dark); }
.bpe-risk-low { background: #dcfce7; color: #166534; }
.bpe-risk-moderate { background: #fef3c7; color: #92400e; }
.bpe-risk-high { background: #fee2e2; color: #991b1b; }
.bpe-risk-very-high { background: #ffe4e6; color: #9f1239; }
.bpe-sticky-actions { margin-left: -22px; margin-right: -22px; }
.bpe-workspace-panel .chart-entry-meta,
.bpe-exam-status-panel .chart-entry-meta { margin: 12px 0; }
.bpe-print-document .details { max-width: none; }

.imaging-viewer-body { margin: 0; min-height: 100vh; background: #070b0d; color: white; }
.imaging-viewer-page { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr; gap: 16px; align-items: center; justify-items: center; padding: 72px 18px 24px; }
.imaging-viewer-close { position: fixed; top: 16px; right: 16px; z-index: 50; min-width: 44px; min-height: 44px; padding: 0 14px 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.36); border-radius: 8px; background: rgba(255, 255, 255, 0.94); color: #101820; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42); font-weight: 850; }
.imaging-viewer-close:hover,
.imaging-viewer-close:focus { background: white; color: #101820; text-decoration: none; }
.imaging-viewer-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.imaging-viewer-close-symbol { font-size: 1.7rem; line-height: 1; margin-top: -2px; }
.imaging-viewer-close-label { font-size: 0.92rem; }
.imaging-viewer-info { width: min(100%, 1040px); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr); gap: 14px; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; padding: 12px; background: rgba(255, 255, 255, 0.08); box-shadow: 0 12px 38px rgba(0, 0, 0, 0.32); }
.imaging-viewer-warning { display: grid; gap: 4px; border-left: 5px solid #f59e0b; padding: 2px 0 2px 12px; }
.imaging-viewer-warning strong { color: #fff7d6; }
.imaging-viewer-warning p { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.imaging-viewer-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
.imaging-viewer-meta dt { color: #b8d7d3; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.imaging-viewer-meta dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.imaging-viewer-enhancement { width: min(100%, 1180px); display: grid; grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.6fr); gap: 12px; align-items: start; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; padding: 12px; background: rgba(255, 255, 255, 0.1); box-shadow: 0 12px 38px rgba(0, 0, 0, 0.28); }
.imaging-viewer-mode { display: grid; gap: 4px; border-left: 5px solid #38bdf8; padding: 2px 0 2px 12px; }
.imaging-viewer-mode strong { color: #e0f7ff; }
.imaging-viewer-mode p,
.imaging-viewer-enhancement-status { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.imaging-viewer-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.imaging-viewer-controls label:not(.inline-check) { min-width: 132px; flex: 1 1 132px; color: #f4fbfa; font-size: 0.82rem; }
.imaging-viewer-controls input[type="range"] { min-height: 38px; padding: 0; accent-color: var(--accent); }
.imaging-viewer-controls .inline-check { min-height: 40px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; padding: 0 10px; background: rgba(255, 255, 255, 0.09); color: white; }
.imaging-viewer-button-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.imaging-viewer-button-group button,
.imaging-viewer-controls > button { min-height: 40px; padding: 0 12px; }
.imaging-viewer-enhancement .button.quiet { background: rgba(255, 255, 255, 0.9); color: #101820; }
.imaging-viewer-enhancement .button.quiet:hover,
.imaging-viewer-enhancement .button.quiet:focus { background: white; color: #101820; }
.imaging-viewer-enhancement-status { grid-column: 1 / -1; color: #d7f7f4; font-weight: 750; }
.imaging-viewer-enhancement.is-enhanced { border-color: rgba(56, 189, 248, 0.72); }
.imaging-viewer-surface { width: 100%; min-height: calc(100vh - 240px); margin: 0; display: grid; place-items: center; }
.imaging-viewer-image-frame { position: relative; width: 100%; min-height: calc(100vh - 420px); display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: grab; }
.imaging-viewer-image-frame.is-panning { cursor: grabbing; }
.imaging-viewer-image { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 430px); object-fit: contain; background: white; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); transform-origin: center center; will-change: filter, transform; user-select: none; }
.imaging-viewer-document { width: min(100%, 1200px); height: calc(100vh - 260px); min-height: 360px; border: 0; border-radius: 6px; background: white; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.imaging-viewer-file { width: min(100%, 520px); min-height: 260px; display: grid; place-items: center; gap: 14px; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: white; text-align: center; }
.imaging-viewer-file strong { font-size: 1.1rem; overflow-wrap: anywhere; }
.imaging-viewer-file span { font-size: 0.84rem; font-weight: 900; color: #d7f7f4; }
.imaging-viewer-file .inline-actions { justify-content: center; }
.imaging-viewer-file .button.quiet { background: rgba(255, 255, 255, 0.92); color: #101820; }

.imaging-page .summary-strip { margin-bottom: 0; }
.imaging-safety-warning { display: grid; gap: 4px; border: 1px solid #f4c979; border-left: 5px solid #d97706; border-radius: 8px; background: #fffaf0; color: #4a3413; padding: 12px 14px; }
.imaging-safety-warning strong { color: #92400e; }
.imaging-safety-warning p { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.original-file-indicator { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper) 70%, white); padding: 10px 12px; overflow-wrap: anywhere; }
.imaging-filter-form,
.imaging-upload-form,
.imaging-metadata-form,
.imaging-compare-select-form { max-width: none; }
.imaging-filter-form { align-items: end; }
.imaging-compare-select-form { align-items: end; }
.form-actions { align-items: end; }
.imaging-compare-enhancement { width: 100%; margin: 0; }
.imaging-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.imaging-compare-pane { min-width: 0; display: grid; gap: 12px; }
.imaging-compare-pane header { min-height: 96px; display: grid; align-content: start; gap: 4px; }
.imaging-compare-pane h3 { margin: 0; font-size: 1.06rem; line-height: 1.28; overflow-wrap: anywhere; }
.imaging-compare-pane p { margin: 0; color: var(--muted); }
.imaging-compare-frame { min-height: 420px; border: 1px solid var(--line); border-radius: 8px; background: #071013; }
.imaging-compare-image { max-height: 400px; box-shadow: none; }
.comparison-notes-field { margin-top: 16px; display: grid; gap: 6px; color: var(--text); font-weight: 800; }
.comparison-notes-field textarea { width: 100%; min-height: 96px; resize: vertical; }
.imaging-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.imaging-card { min-width: 0; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: start; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; background: white; padding: 14px; overflow: hidden; }
.asset-thumb { aspect-ratio: 1; width: 100%; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper) 72%, white); overflow: hidden; }
.asset-thumb [hidden] { display: none; }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-file-icon { width: 100%; height: 100%; display: grid; place-items: center; padding: 10px; color: var(--brand-dark); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, white), #fff8e1); font-size: 0.95rem; font-weight: 900; overflow-wrap: anywhere; text-align: center; }
.asset-card-body { min-width: 0; display: grid; gap: 10px; }
.asset-card-header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.asset-card-header h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.asset-card-header .muted { display: block; margin-top: 4px; font-size: 0.82rem; overflow-wrap: anywhere; }
.asset-badge-row,
.tooth-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.imaging-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.imaging-meta-grid dt,
.imaging-detail-meta dt,
.asset-linked-section .label-text,
.asset-notes-grid .label-text { color: var(--muted); font-size: 0.76rem; font-weight: 900; text-transform: uppercase; }
.imaging-meta-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.imaging-meta-grid small { display: block; margin-top: 2px; color: var(--muted); }
.asset-action-row { align-items: stretch; }
.asset-action-row .button,
.asset-action-row button { min-height: 36px; justify-content: center; padding: 0 12px; }
.imaging-preview-panel { overflow: hidden; }
.asset-preview-frame { min-height: 280px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; overflow: hidden; }
.asset-preview-frame img { width: 100%; max-height: 720px; object-fit: contain; display: block; background: white; }
.imaging-annotation-warning { border-left: 5px solid #38bdf8; padding: 12px 14px; border-radius: 8px; background: #eef8fb; color: #102027; }
.imaging-annotation-warning p { margin: 4px 0 0; }
.imaging-annotation-frame { position: relative; }
.imaging-annotation-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.imaging-annotation-overlay line,
.imaging-annotation-overlay rect,
.imaging-annotation-overlay ellipse { fill: none; stroke: #f59e0b; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.imaging-annotation-overlay path,
.imaging-annotation-overlay circle { fill: #f59e0b; stroke: #101820; stroke-width: 0.3; vector-effect: non-scaling-stroke; }
.imaging-annotation-overlay text { fill: #101820; stroke: white; stroke-width: 0.25; paint-order: stroke; font-size: 3px; font-weight: 800; }
.imaging-annotation-overlay.viewer-overlay { inset: auto; width: min(100%, 100vw); height: min(calc(100vh - 430px), 100%); max-height: calc(100vh - 430px); align-self: center; justify-self: center; }
.annotation-list { display: grid; gap: 12px; margin: 14px 0; }
.annotation-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; }
.annotation-item p { margin: 6px 0; }
.annotation-item small { color: var(--muted); overflow-wrap: anywhere; }
.annotation-edit summary { cursor: pointer; list-style: none; }
.annotation-edit summary::-webkit-details-marker { display: none; }
.annotation-create-form { margin-top: 14px; }
.asset-document-preview { width: 100%; min-height: 640px; border: 0; background: white; }
.viewer-placeholder { min-height: 280px; display: grid; place-items: center; gap: 8px; border: 1px dashed color-mix(in srgb, var(--brand) 36%, var(--line)); border-radius: 8px; padding: 24px; background: color-mix(in srgb, var(--paper) 70%, white); color: var(--brand-dark); text-align: center; }
.viewer-placeholder strong { font-size: 1.1rem; }
.viewer-placeholder span { font-weight: 900; }
.imaging-detail-meta { max-width: none; }
.asset-linked-section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.asset-linked-section p { margin: 4px 0 0; overflow-wrap: anywhere; }
.asset-notes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.asset-notes-grid p { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.appointment-imaging-panel,
.supporting-imaging-section { display: grid; gap: 14px; }
.compact-imaging-list { display: grid; gap: 10px; margin: 12px 0; }
.compact-imaging-card { min-width: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; padding: 10px; background: white; overflow-wrap: anywhere; }
.compact-imaging-card p { margin: 3px 0; color: var(--muted); }
.asset-file-icon.compact { min-height: 58px; border-radius: 6px; font-size: 0.78rem; }
.imaging-inline-upload-form { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin-top: 12px; }
.supporting-imaging-item { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: color-mix(in srgb, var(--paper) 72%, white); }
.supporting-imaging-item:target { border-color: var(--accent); box-shadow: inset 5px 0 0 var(--brand), 0 0 0 3px rgba(255, 200, 87, 0.28); }
.supporting-imaging-item header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.supporting-imaging-item h3 { margin: 0; font-size: 1rem; }
.supporting-imaging-actions { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.supporting-imaging-actions .compact-action { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 8px; align-items: end; margin: 0; }

@media (max-width: 760px) {
    .imaging-viewer-page { padding: 64px 10px 14px; }
    .imaging-viewer-close { top: 10px; right: 10px; width: 46px; padding: 0; }
    .imaging-viewer-close-label { display: none; }
    .imaging-viewer-info { grid-template-columns: 1fr; }
    .imaging-viewer-meta { grid-template-columns: 1fr; }
    .imaging-viewer-enhancement { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
    .imaging-viewer-controls { align-items: stretch; }
    .imaging-viewer-controls label:not(.inline-check) { min-width: min(100%, 150px); flex: 1 1 150px; }
    .imaging-viewer-button-group { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .imaging-viewer-button-group button,
    .imaging-viewer-controls > button { justify-content: center; }
    .imaging-viewer-controls > button { flex: 1 1 160px; }
    .imaging-viewer-controls .inline-check { flex: 1 1 150px; }
    .imaging-viewer-surface { min-height: 320px; }
    .imaging-viewer-image-frame { min-height: 300px; }
    .imaging-viewer-image { max-height: 300px; }
    .imaging-annotation-overlay.viewer-overlay { height: 300px; max-height: 300px; }
    .imaging-viewer-document { height: calc(100vh - 330px); min-height: 300px; }
    .imaging-card { grid-template-columns: 1fr; }
    .imaging-compare-grid,
    .imaging-compare-select-form { grid-template-columns: 1fr; }
    .imaging-compare-pane header { min-height: auto; }
    .imaging-compare-frame { min-height: 300px; }
    .imaging-compare-image { max-height: 280px; }
    .asset-thumb { max-width: 180px; }
    .imaging-meta-grid,
    .asset-linked-section,
    .asset-notes-grid { grid-template-columns: 1fr; }
    .asset-card-header { display: grid; }
    .asset-preview-frame,
    .viewer-placeholder { min-height: 220px; }
    .asset-document-preview { min-height: 420px; }
    .compact-imaging-card,
    .imaging-inline-upload-form,
    .supporting-imaging-actions .compact-action { grid-template-columns: 1fr; }
    .supporting-imaging-item header { display: grid; }
}

@media (max-width: 1180px) {
    .topbar { display: grid; grid-template-columns: auto minmax(260px, 1fr) auto; align-items: center; padding: 12px 18px; }
    .brand { min-width: 0; }
    .brand-logo { width: clamp(140px, 20vw, 190px); }
    .global-search { grid-column: 2; max-width: none; width: 100%; }
    .user-chip { grid-column: 3; max-width: 180px; }
    .topbar nav { grid-column: 1 / -1; justify-content: flex-start; gap: 8px; overflow-x: auto; padding-top: 8px; scrollbar-width: thin; flex-wrap: nowrap; }
    .topbar nav a, .topbar nav button { min-height: 44px; padding: 0 12px; background: #eef4f2; border-radius: 8px; white-space: nowrap; }
    .topbar nav form { flex: 0 0 auto; }
    .summary-strip.payment-diagnostics-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .clinical-workspace-header,
    .clinical-workspace-grid { grid-template-columns: 1fr; }
    .clinical-side-column { position: static; max-height: none; overflow: visible; }
    .clinical-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exam-section-nav { position: static; }
    .bpe-sextant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .patient-record-shell { grid-template-columns: 1fr; }
    .patient-record-main { padding: 18px 14px; }
    .patient-subnav { position: static; min-height: auto; max-height: none; display: grid; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; }
    .patient-sidebar-profile { padding: 4px 0 10px; }
    .patient-subnav-title { display: none; }
    .patient-subnav-links { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
    .patient-subnav-group { display: none; }
    .patient-subnav a:not(.patient-back-link) { flex: 0 0 auto; min-height: 42px; background: #eef4f2; white-space: nowrap; }
    .patient-subnav a:hover, .patient-subnav a:focus { background: color-mix(in srgb, var(--brand) 14%, white); }
}

@media (max-width: 760px) {
    body.appointment-detail-open { overflow: hidden; }
    body.appointment-detail-open::after { content: ""; position: fixed; inset: 0; background: rgba(12, 32, 31, 0.32); z-index: 35; }
    body { overflow-x: hidden; }
    button, .button, input, select, textarea { min-height: 44px; }
    .topbar { grid-template-columns: 1fr; align-items: stretch; padding: 12px; gap: 10px; }
    .brand { justify-content: center; }
    .brand-logo { width: min(190px, 72vw); }
    .global-search { grid-column: 1; max-width: none; width: 100%; min-width: 0; }
    .global-search input { min-width: 0; }
    .user-chip { grid-column: 1; max-width: none; min-width: 0; }
    .topbar nav { grid-column: 1; margin: 0 -12px; padding: 4px 12px 2px; }
    .topbar nav a, .topbar nav button { min-height: 46px; }
    .page { padding: 22px 14px; }
    h1 { font-size: 1.7rem; }
    .metrics, .form-grid, .form-grid.compact-form, .summary-strip, .settings-grid { grid-template-columns: 1fr; }
    .dashboard-filter-form { grid-template-columns: 1fr; padding: 14px; }
    .dashboard-filter-actions { align-items: stretch; flex-direction: column; }
    .dashboard-filter-actions button, .dashboard-filter-actions .button { justify-content: center; width: 100%; }
    .dashboard-insight-form { grid-template-columns: 1fr; }
    .dashboard-insight-form button { width: 100%; }
    .dashboard-section-header { display: grid; }
    .dashboard-card-grid { grid-template-columns: 1fr; }
    .dashboard-card { min-height: 0; padding: 16px; }
    .dashboard-card-action, .dashboard-card-restricted-note { width: 100%; }
    .dashboard-card-list span { align-items: flex-start; flex-direction: column; gap: 3px; }
    .dashboard-report-row { align-items: stretch; flex-direction: column; }
    .dashboard-report-row .button { justify-content: center; width: 100%; }
    .dashboard-worklist-page .tool-panel { overflow-x: visible; }
    .dashboard-worklist-table { display: block; border: 0; background: transparent; overflow: visible; }
    .dashboard-worklist-table thead { display: none; }
    .dashboard-worklist-table tbody { display: grid; gap: 14px; }
    .dashboard-worklist-table tr { display: grid; background: white; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 8px; overflow: hidden; }
    .dashboard-worklist-table td { display: block; width: auto; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
    .dashboard-worklist-table .cell-label { display: block; }
    .dashboard-worklist-table .button { justify-content: center; width: 100%; }
    .dashboard-worklist-table tr.dashboard-worklist-row-warning { border-left-color: #d97706; }
    .dashboard-worklist-table tr.dashboard-worklist-row-danger { border-left-color: var(--danger); }
    .dashboard-worklist-table tr.dashboard-worklist-row-success { border-left-color: #16a34a; }
    .dashboard-worklist-table tr.dashboard-worklist-row-info { border-left-color: #2563eb; }
    .summary-strip.payment-diagnostics-strip { grid-template-columns: 1fr; }
    .page-head, .toolbar, .qr-panel { flex-direction: column; align-items: stretch; }
    .page-head .actions, .actions { align-items: stretch; flex-direction: column; }
    .page-head .button, .actions .button, .actions button { justify-content: center; width: 100%; }
    .tool-panel { padding: 16px; overflow-x: auto; }
    .clinical-patient-card { grid-template-columns: 1fr; grid-template-areas: "back" "patient" "actions"; align-items: stretch; }
    .clinical-header-actions { justify-content: stretch; flex-direction: column; }
    .clinical-header-actions .button { justify-content: center; }
    .clinical-summary-strip,
    .clinical-note-form,
    .exam-panel-form,
    .exam-inline-edit,
    .outcome-grid,
    .bpe-sextant-grid,
    .bpe-risk-grid,
    .bpe-risk-suggestion { grid-template-columns: 1fr; }
    .clinical-note-form .wide { grid-column: 1; }
    .exam-panel-form .wide,
    .exam-inline-edit .wide { grid-column: 1; }
    .exam-tooth-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .exam-panel-form button,
    .exam-inline-edit button { width: 100%; }
    .sticky-form-actions { margin: 8px -16px 0; padding: 12px 16px; flex-direction: column; }
    .sticky-form-actions button { width: 100%; }
    .template-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .template-bar .button { flex: 0 0 auto; }
    .odontogram-panel { overflow-x: auto; }
    .odontogram-svg { min-width: 640px; }
    .fast-chart-toolbar,
    .chart-mode-switches { grid-template-columns: 1fr; }
    .chart-mode-switches { display: grid; }
    .recent-action-list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
    .recent-action-button { flex: 0 0 auto; min-height: 44px; }
    .quick-action-menu,
    .quick-action-menu.anchored-below { width: 100%; }
    .quick-action-menu.is-mobile-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: min(78vh, 620px); overflow: auto; border-left: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line)); border-top: 6px solid var(--brand); border-radius: 14px 14px 0 0; padding: 16px; box-shadow: 0 -18px 40px rgb(15 23 42 / 0.24); }
    .quick-action-close { display: inline-flex; }
    .quick-action-grid { grid-template-columns: 1fr; }
    .quick-action-save-form { flex-direction: column; align-items: stretch; }
    .quick-action-save-form button { width: 100%; }
    .chart-edit-drawer { max-width: none; }
    .chart-entry-summary { flex-direction: column; }
    .chart-entry-summary small { white-space: normal; }
    .chart-entry-correction-form > div { grid-template-columns: 1fr; }
    .chart-treatment-plan-group > header,
    .chart-treatment-item-summary { flex-direction: column; }
    .chart-treatment-item-summary small { white-space: normal; }
    .chart-treatment-edit-form,
    .chart-treatment-status-form { grid-template-columns: 1fr; }
    .sextant-score-grid,
    .perio-score-summary { grid-template-columns: 1fr; }
    .perio-history-card header { flex-direction: column; }
    .perio-history-actions { justify-content: flex-start; }
    .perio-detail-header { flex-direction: column; }
    .perio-detail-header > div:last-child { justify-content: flex-start; }
    .perio-action-forms,
    .perio-revision-list li { grid-template-columns: 1fr; }
    .chart-history-mini { grid-template-columns: 1fr; }
    .chart-revision-timeline li { grid-template-columns: 1fr; }
    .compact-table { min-width: 720px; }
    .details { grid-template-columns: 1fr; }
    .patient-demographics-panel { grid-template-columns: 1fr; }
    .patient-gp-details { border-left: 0; border-top: 1px solid var(--line); }
    .patient-record-main { gap: 16px; }
    .patient-page .section-title { margin-bottom: 0; }
    .record-layout, .timeline-grid { grid-template-columns: 1fr; }
    .week-diary { grid-template-columns: 1fr; overflow-x: visible; }
    .week-day .time-lane-body { min-height: auto; padding-top: 0; background: transparent; }
    .alert-banner article { grid-template-columns: 1fr; }
    .payment-form { grid-template-columns: 1fr; min-width: 0; }
    .item-form, .item-edit-form { grid-template-columns: 1fr; }
    .generated-link-panel,
    .onboarding-next-action,
    .public-form-layout,
    .appointment-response-actions,
    .public-progress-panel,
    .public-sticky-actions { grid-template-columns: 1fr; }
    .form-section-nav { position: static; grid-template-columns: 1fr; }
    .section-navigation { justify-content: stretch; }
    .section-navigation .button { flex: 1 1 160px; justify-content: center; }
    .onboarding-communication-actions,
    .onboarding-communication-actions form,
    .onboarding-communication-actions button { align-items: stretch; flex-direction: column; width: 100%; }
    .public-form-card header,
    .onboarding-link-card header { flex-direction: column; align-items: flex-start; }
    .public-topbar { min-height: auto; justify-content: flex-start; }
    .public-brand-lockup { align-items: flex-start; flex-direction: column; gap: 10px; }
    .public-brand-logo { max-width: min(210px, 80vw); max-height: 64px; }
    .public-brand-lockup div { width: 100%; }
    .public-body .public-onboarding-page { min-height: calc(100vh - 122px); align-items: start; }
    .public-body .public-state-panel { min-height: 260px; }
    .public-submit-card { margin-bottom: 110px; }
    .diary-settings-form { grid-template-columns: 1fr; }
    .diary-settings-form .wide { grid-column: 1; }
    .appointment-card { grid-template-columns: 58px 1fr; }
    .appointment-card .badge { grid-column: 1 / -1; width: fit-content; }
    .appointment-hover-detail,
    .timed-diary .appointment-hover-detail { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: min(76vh, 640px); z-index: 45; transform: translateY(18px); border-radius: 12px; }
    .timed-diary .appointment-card.detail-open .appointment-hover-detail { transform: translateY(0); }
    .appointment-hover-detail dl { grid-template-columns: 1fr; }
    .appointment-actions, .appointment-actions form { align-items: stretch; flex-direction: column; }
    .auth-panel { padding: 26px 22px; }
    .auth-logo { width: 220px; }
    table { display: block; overflow-x: auto; }
}

@media (max-width: 1040px) {
    #billing-results { overflow-x: hidden; }
    .billing-table { display: block; border: 0; background: transparent; }
    .billing-table thead { display: none; }
    .billing-table tbody { display: grid; gap: 14px; }
    .billing-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: white; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    .billing-table td { display: block; width: auto !important; min-width: 0; border-bottom: 1px solid var(--line); }
    .billing-table td:nth-child(1),
    .billing-table td:nth-child(8),
    .billing-table td:nth-child(9) { grid-column: 1 / -1; }
    .billing-table tbody tr:first-child .cell-label { display: block; }
    .billing-table .payment-form { max-width: none; }
    .billing-table .compact-history { min-width: 0; }
    .billing-table tr:target td { background: #fff8e1; }
    .follow-up-results { overflow: visible; }
    .follow-up-table { display: block; border: 0; background: transparent; }
    .follow-up-table thead { display: none; }
    .follow-up-table tbody { display: grid; gap: 14px; }
    .follow-up-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: white; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    .follow-up-table td { display: block; width: auto !important; min-width: 0; border-bottom: 1px solid var(--line); }
    .follow-up-table td:nth-child(2),
    .follow-up-table td:nth-child(6) { grid-column: 1 / -1; }
    .follow-up-table .cell-label { display: block; }
    .follow-up-table .compact-action,
    .follow-up-table .table-actions,
    .follow-up-table .dismiss-action { grid-template-columns: 1fr; align-items: stretch; }
    .follow-up-manual-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .follow-up-manual-form .wide,
    .follow-up-manual-form button { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .billing-table tr { grid-template-columns: 1fr; }
    .follow-up-table tr,
    .follow-up-manual-form { grid-template-columns: 1fr; }
    .invoice-review-head, .line-edit-form { grid-template-columns: 1fr; display: grid; }
}

@media print {
    body { background: white; }
    .topbar, .patient-subnav, .no-print, .print-hidden, .clinical-header-actions, .exam-section-nav, .sticky-form-actions, .amendment-form, .dashboard-filter-form, .dashboard-card-action { display: none !important; }
    .print-only { display: block !important; }
    .page { max-width: none; padding: 0; }
    .patient-record-shell { display: block; }
    .patient-record-main { max-width: none; padding: 0; }
    .print-document { border: 0; border-radius: 0; padding: 0; }
    .dashboard-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .dashboard-card, .dashboard-empty-state { break-inside: avoid; box-shadow: none; }
    .clinical-workspace-header,
    .clinical-workspace-grid { display: block; }
    .clinical-alert-panel { break-inside: avoid; margin-bottom: 14px; }
    a { color: var(--ink); }
    table { border-radius: 0; }
}