/* Compact treatment work area beside/above the pearl arch. Scoped to .dtx-tx*. */
.dtx-tx-grid{--dtx-card:var(--paper,#fff);--dtx-soft:var(--ink-50,#f4f8fa);--dtx-line:var(--ink-100,#e2eaf0);--dtx-text:var(--ink-800,#122430);--dtx-muted:var(--ink-500,#4a6478);--dtx-accent:var(--teal-700,#0d5c7a);--dtx-accent-soft:var(--teal-50,#ecfeff);--dtx-warn:var(--amber,#d97706);--dtx-gold:var(--brass,#b08438);
  display:flex;flex-direction:column;gap:10px;min-width:0;color:var(--dtx-text)}
body.theme-dark .dtx-tx-grid{--dtx-card:rgba(20,45,60,.92);--dtx-soft:rgba(255,255,255,.05);--dtx-line:rgba(255,255,255,.12);--dtx-text:#e6f0f5;--dtx-muted:#afc4cf;--dtx-accent:#67e8f9;--dtx-accent-soft:rgba(103,232,249,.12);--dtx-warn:#fbbf24;--dtx-gold:#d4a847}
.qf-section-title.dtx-hide-title{display:none}
.dtx-tx-grid #qf-selected-teeth-area.dtx-tx-area{margin:0;min-width:0}
.dtx-tx-grid .dtx-arch-area{min-width:0;margin:0}
/* The deferred placeholder keeps the arch's space so the page never jumps. */
.dtx-tx-grid .dtx-arch-area[aria-busy=true]{min-height:420px}
.dtx-tx-grid .qf-chart-deferred{padding:0;border:0;background:none}
.dtx-tx-grid .pt-chart-wrap{padding:0;border:0;background:none;box-shadow:none;margin:0}

.dtx-tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.dtx-tx-work-card{background:var(--dtx-card);border:1px solid var(--dtx-line);border-radius:16px;padding:8px 10px;min-height:96px;box-sizing:border-box;display:flex;flex-direction:column;gap:7px;min-width:0}
.dtx-tx-empty{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:78px;text-align:center}
.dtx-tx-empty b{font-size:15px}.dtx-tx-empty small{color:var(--dtx-muted);font-size:12px;line-height:1.7}
.dtx-tx-head{display:flex;align-items:center;gap:8px;min-width:0}
.dtx-tooth{font-weight:800;font-size:16px;color:var(--dtx-accent);white-space:nowrap}
.dtx-tx-kind{font-size:12.5px;color:var(--dtx-muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtx-remove{margin-inline-start:auto;min-width:44px;min-height:40px;border:1px solid var(--dtx-line);border-radius:10px;background:transparent;color:var(--dtx-muted);font:inherit;cursor:pointer}

.dtx-procs,.dtx-tabs{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px;min-width:0;-webkit-overflow-scrolling:touch}
.dtx-procs::-webkit-scrollbar,.dtx-tabs::-webkit-scrollbar{display:none}
.dtx-chip{flex:none;min-height:40px;padding:6px 12px;border:1px solid var(--dtx-line);border-radius:999px;background:var(--dtx-card);color:var(--dtx-text);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.dtx-chip.on{background:var(--dtx-accent);border-color:transparent;color:#fff;font-weight:700}
body.theme-dark .dtx-chip.on{color:#06303d}
.dtx-kind{display:flex;gap:6px}
.dtx-tab{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:44px;padding:5px 11px;border:1px solid var(--dtx-line);border-radius:12px;background:var(--dtx-soft);color:var(--dtx-text);font:inherit;cursor:pointer;text-align:start}
.dtx-tab b{font-size:14px}.dtx-tab span{font-size:11px;color:var(--dtx-muted);white-space:nowrap}
.dtx-tab.on{border-color:var(--dtx-accent);background:var(--dtx-accent-soft);box-shadow:inset 0 0 0 1px var(--dtx-accent)}

.dtx-row{display:flex;gap:8px;align-items:flex-end;min-width:0;flex-wrap:wrap}
.dtx-row>.dtx-kind{align-self:flex-end}
.dtx-field{display:flex;flex-direction:column;gap:3px;min-width:0}
.dtx-field>label,.dtx-follow>label,.dtx-paid>label{font-size:12px;font-weight:700;color:var(--dtx-muted)}
.dtx-row>.dtx-cost{flex:1 1 150px}
.dtx-tx .sf-money-row .qf-amt-input{font-size:17px;min-height:44px;padding:6px 10px;box-sizing:border-box}
.dtx-tx .sf-money .sf-hint{display:none}
.dtx-tx .sf-keypad{grid-template-columns:repeat(4,minmax(0,1fr))}
.dtx-tx .sf-keypad button:last-child{grid-column:auto}
.dtx-row-tail{align-items:center}
.dtx-sessions{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--dtx-muted)}
.dtx-sessions button{min-width:40px;min-height:40px;border:1px solid var(--dtx-line);border-radius:10px;background:var(--dtx-card);color:var(--dtx-text);font:inherit;font-size:17px;cursor:pointer}
.dtx-sessions b{color:var(--dtx-text)}
.dtx-follow{display:flex;align-items:center;gap:6px;flex:1 1 170px;min-width:0}
.dtx-follow input[type=date]{flex:1;min-width:0;font:inherit;font-size:16px;min-height:40px;padding:4px 8px;border:1px solid var(--dtx-line);border-radius:10px;background:var(--dtx-card);color:inherit;box-sizing:border-box}
.dtx-hint{display:block;font-size:11.5px;line-height:1.6;color:var(--dtx-muted)}
.dtx-warn{display:block;font-size:12px;line-height:1.6;color:var(--dtx-warn);font-weight:700}

.dtx-prior{border:1px dashed var(--dtx-gold);border-radius:12px;padding:8px 10px;background:var(--dtx-soft);font-size:12.5px;display:flex;flex-direction:column;gap:4px}
.dtx-prior small{color:var(--dtx-muted)}
.dtx-prior-actions{display:flex;gap:6px;flex-wrap:wrap}
.dtx-prior-on{font-weight:700;color:var(--dtx-accent)}
.dtx-link{border:0;background:none;color:var(--dtx-accent);text-decoration:underline;font:inherit;font-size:12.5px;min-height:36px;padding:0 6px;cursor:pointer}

.dtx-sum{display:flex;flex-direction:column;gap:6px;background:var(--dtx-soft);border:1px solid var(--dtx-line);border-radius:14px;padding:8px 10px}
.dtx-sum-line{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--dtx-muted)}
.dtx-sum-line b{font-size:15px;color:var(--dtx-text);white-space:nowrap}
.dtx-sum-line span:last-child b{color:var(--dtx-accent)}
.dtx-paid{display:flex;align-items:center;gap:8px}
.dtx-paid>label{flex:none}
.dtx-paid>.sf-money{flex:1;min-width:0}
.dtx-pay{display:flex;flex-direction:column;gap:6px}
.dtx-pay[hidden]{display:none}
.dtx-pay-choices{display:flex;gap:6px;flex-wrap:wrap}
.dtx-pay-when{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:6px;direction:ltr}
.dtx-pay-when input{font:inherit;font-size:16px;min-height:44px;min-width:0;padding:6px 8px;border:1px solid var(--dtx-line);border-radius:10px;background:var(--dtx-card);color:inherit;box-sizing:border-box}
.dtx-approve{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:var(--dtx-accent);color:#fff;font:inherit;font-weight:700;cursor:pointer}
body.theme-dark .dtx-approve{color:#06303d}
.dtx-pay-set{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:12px;background:var(--dtx-accent-soft);font-size:13px;font-weight:700}

.dtx-chip:focus-visible,.dtx-tab:focus-visible,.dtx-remove:focus-visible,.dtx-link:focus-visible,.dtx-approve:focus-visible{outline:3px solid var(--teal-500,#0891b2);outline-offset:2px}

/* Wide screens: arch and work area side by side; the work area follows the scroll. */
@media (min-width:760px){
  .dtx-tx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.95fr);grid-template-areas:"arch work";align-items:start;gap:14px}
  .dtx-tx-grid .dtx-arch-area{grid-area:arch}
  .dtx-tx-grid .dtx-tx-area{grid-area:work;position:sticky;top:0;z-index:1}
}

/* The note sheet inherits the clinic theme in dark mode. */
body.theme-dark .sf-overlay .sf-panel{background:#14303c;color:#e6f0f5;border-color:rgba(255,255,255,.12)}
body.theme-dark .sf-panel button,body.theme-dark .sf-panel textarea,body.theme-dark .sf-panel input,body.theme-dark .sf-panel select,body.theme-dark .sf-money button,body.theme-dark .sf-keypad{background:rgba(255,255,255,.06);color:#e6f0f5;border-color:rgba(255,255,255,.14)}
body.theme-dark .sf-panel .selected,body.theme-dark .sf-panel .sf-primary{background:#67e8f9;color:#06303d}
body.theme-dark .sf-hint{color:#afc4cf}

/* Folded procedure row and compact controls; specific enough to keep the work area short
   under the clinic presentation layer without touching its global button rules. */
#qf-body .dtx-procs-folded{align-items:center}
#qf-body .dtx-tx .dtx-chip{min-height:40px;padding:6px 12px;font-size:13px;border-radius:999px}
#qf-body .dtx-tx .sf-money-row .qf-amt-input{height:44px;min-height:44px;font-size:17px}
#qf-body .dtx-tx .sf-money-row>button{width:44px;height:44px;min-height:44px;padding:0}
#qf-body .dtx-pay-choices{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#qf-body .dtx-pay-choices .dtx-chip{justify-content:center;padding:6px 8px}

#qf-body .dtx-tx-head{flex-wrap:nowrap}
#qf-body .dtx-tx-head .dtx-kind{display:flex;gap:4px}
#qf-body .dtx-tx-head .dtx-chip{padding:6px 10px}
.dtx-cost{display:flex;align-items:center;gap:8px}
.dtx-cost>label{flex:none;font-size:12px;font-weight:700;color:var(--dtx-muted);max-width:5.5em;line-height:1.35}
.dtx-cost>.sf-money{flex:1;min-width:0}
body.theme-dark #qf-body .dtx-tx .qf-amt-input,body.theme-dark #qf-body .dtx-tx .qf-amt-input:focus{background:rgba(255,255,255,.07);color:#f4f8fa;border-color:rgba(103,232,249,.45)}
body.theme-dark #qf-body .dtx-tx .sf-money-row>button,body.theme-dark #qf-body .dtx-tx .sf-keypad,body.theme-dark #qf-body .dtx-tx .sf-keypad button{background:rgba(255,255,255,.06);color:#e6f0f5;border-color:rgba(255,255,255,.14)}
.dtx-persist{display:flex;flex-direction:column;gap:6px;margin:0 0 10px;padding:10px 12px;border:1px solid var(--amber,#d97706);border-radius:14px;background:var(--amber-lt,#fef3c7);color:#5b3a06}
.dtx-persist span{font-size:12.5px;line-height:1.7}
.dtx-persist button{align-self:flex-start;min-height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--amber,#d97706);color:#fff;font:inherit;font-weight:700;cursor:pointer}
body.theme-dark .dtx-persist{background:rgba(217,119,6,.16);color:#fde68a}