/* Clinic additions to the shared UI kit: native dialogs used for Modify / Reject / chart editing / row editing. */
dialog { border: 0; padding: 0; background: transparent; max-width: 560px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(15, 27, 43, .5); }
dialog .card { margin: 0; max-height: 86vh; overflow: auto; }
dialog .opt label { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; margin: 0; }
dialog .opt input[type=radio] { margin-top: 3px; }
.tbl form { display: inline; margin: 0; }
.tbl td.right .btn + form, .tbl td.right form + form, .tbl td.right .btn + .btn { margin-left: 4px; }
.tooth-chart .tooth.editable rect { cursor: pointer; }
.checkline + .checkline { margin-top: 4px; }
@media print { .tabs, dialog { display: none !important; } .tab-pane { display: block !important; } }
/* Tablet widths: keep the four worklist figures on two rows instead of one long column. */
@media (max-width: 1100px) and (min-width: 700px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Feature programme additions */
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.brief h4 { margin-bottom: 4px; } .brief .grid > div { min-width: 0; }
.tbl td .tiny.nowrap { white-space: nowrap; }
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .inline-form select, .inline-form input { width: auto; }
.page-head .sub .chip { margin: 1px 0; }
.cost-tbl { table-layout: fixed; } .cost-tbl th:first-child, .cost-tbl td:first-child { width: 38%; overflow-wrap: anywhere; } .cost-tbl td, .cost-tbl th { padding-left: 6px; padding-right: 6px; font-size: 12.5px; }

/* Patient-facing pages (token links) */
.pub { max-width: 820px; margin: 0 auto; padding: 22px 16px 48px; } .pub.narrow { max-width: 560px; }
.pub-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .pub .brand { color: var(--ink); padding: 0; } .pub .brand .brand-sub { color: var(--muted); }
.pub .lang { display: flex; gap: 6px; } .pub .card + .card { margin-top: 14px; } .pub h2 { font-size: 17px; }
.pub-item { padding: 10px 0; border-bottom: 1px solid var(--line-2); } .pub-item:last-child { border-bottom: none; }
.pub .tooth-chart { max-width: 100%; } .pub .tooth.selected rect { stroke: var(--teal); stroke-width: 3; fill: var(--teal-100); }
.rtl .checkline { flex-direction: row-reverse; justify-content: flex-start; } .rtl .flex.between { flex-direction: row-reverse; } .rtl .tbl th, .rtl .tbl td { text-align: right; } .rtl .tbl td.num, .rtl .tbl th.num { text-align: left; }
.sat { display: flex; gap: 6px; justify-content: space-between; } .sat-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 11.5px; text-align: center; font-weight: 500; }
.sat-opt input { position: absolute; opacity: 0; } .sat-opt span { font-size: 26px; } .sat-opt:has(input:checked) { border-color: var(--teal); background: var(--teal-50); }
.q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; } @media (max-width: 520px) { .q-grid { grid-template-columns: 1fr; } }
.signature-pad { cursor: crosshair; display: block; } .sig-thumb { height: 44px; background: #fff; border: 1px solid var(--line); border-radius: 6px; vertical-align: middle; }
.qr-box { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .qr-box .qr { margin: 0; border: 1px solid var(--line-2); border-radius: 8px; padding: 4px; background: #fff; }
.link-url { font-family: var(--mono); font-size: 11px; word-break: break-all; color: var(--muted); }
.rtl .tooth-chart, .rtl .tooth-chart svg { direction: ltr; }

/* Imaging: measurement overlay, compare dialog */
.viewer .measure-layer { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.viewer .meas polyline { stroke: #3FB8B8; } .viewer .meas circle { fill: #3FB8B8; } .viewer .meas text { fill: #fff; font-family: var(--mono); font-weight: 600; paint-order: stroke; stroke: rgba(11,20,28,.85); stroke-width: 3px; }
.viewer .meas.temp polyline { stroke: var(--amber); stroke-dasharray: 6 4; } .viewer .meas.temp circle { fill: var(--amber); }
.viewer.measuring .stage { cursor: crosshair; } .viewer .toolbar .btn.active { background: var(--teal); color: #fff; } .viewer .measure-hint { background: var(--amber) !important; color: var(--navy-900) !important; }
dialog.wide { max-width: 960px; } .cmp-canvas { width: 100%; height: auto; display: block; background: #0B141C; border-radius: 8px; }

/* Perio chart, tooth history */
.perio-grid .c.tooth-cell { background: transparent; text-align: left; padding-left: 4px; font-weight: 600; } .perio-grid .c.tooth-cell a { color: var(--ink); } .perio-grid .c small { font-size: 9.5px; }
.perio-grid .c { min-width: 0; } @media (max-width: 700px) { .perio-grid { font-size: 11px; grid-template-columns: 44px repeat(6, 1fr); } }

/* Practice operations: scorecard, payments, sterilisation, team */
.ops-form .field { min-width: 0; } .ops-form input, .ops-form select { max-width: 100%; }
input[type="datetime-local"], input[type="time"], input[type="month"] { width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 13.5px; background: #fff; color: var(--ink); }
input[type="date"] { max-width: 100%; box-sizing: border-box; }
.bucket-list .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.bucket-list .row:last-child { border-bottom: none; } .bucket-list .row.on { font-weight: 600; }