/* ==========================================================================
   Qvora — clinical charting workspaces
   Dental chart (js/dentalOdontogram.js) and physiotherapy assessment
   (js/physioBodyChart.js). Uses the design tokens from qvora-tokens.css.
   The odontogram, periodontal grid and body figure always read left-to-right
   (clinical convention), also when the interface is in Arabic.
   ========================================================================== */

.dx-workspace { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); padding: 14px; min-width: 0; }
.dx-loading, .dx-inactive { padding: 24px; text-align: center; }
.dx-muted { color: var(--text-muted); font-size: 12px; }

/* top bar */
.dx-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.dx-tabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--surface-sunken, #f1f5f9); padding: 4px; border-radius: 10px; }
.dx-tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.dx-tab:hover { color: var(--text); }
.dx-tab.is-active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.dx-tab .ti { font-size: 16px; }
.dx-topbar-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-save-state { font-size: 12px; display: inline-flex; gap: 4px; align-items: center; color: var(--text-muted); }
.dx-save-state.is-saved { color: var(--success, #16a34a); }
.dx-save-state.is-pending { color: var(--warning, #d97706); }
.dx-save-state.is-error { color: var(--danger, #dc2626); }

/* KPI tiles */
.dx-kpis, .dx-perio-stats, .dx-plan-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.dx-kpi { background: var(--surface-sunken, #f8fafc); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx-kpi-val { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.dx-kpi-lbl { font-size: 11.5px; color: var(--text-muted); }
.dx-kpi.is-alert { border-color: #fecaca; background: #fef2f2; } .dx-kpi.is-alert .dx-kpi-val { color: #b91c1c; }
.dx-kpi.is-warn { border-color: #fde68a; background: #fffbeb; } .dx-kpi.is-warn .dx-kpi-val { color: #b45309; }
.dx-kpi.is-ok .dx-kpi-val { color: #15803d; }

/* toolbar + tools */
.dx-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dx-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.dx-seg-btn { border: 0; background: transparent; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-inline-end: 1px solid var(--border); }
.dx-seg-btn:last-child { border-inline-end: 0; }
.dx-seg-btn.is-active { background: var(--primary); color: var(--on-primary, #fff); }
.dx-seg-btn.is-plan.is-active { background: #dc2626; }
.dx-seg-sm .dx-seg-btn { padding: 4px 10px; }
.dx-material { width: auto; min-width: 140px; }
.dx-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-tool { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.dx-tool .ti { font-size: 18px; color: var(--text-muted); }
.dx-tool:hover:not(:disabled) { border-color: var(--primary); }
.dx-tool.is-active { border-color: var(--primary); background: var(--primary-soft, #eef2ff); color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft, #e0e7ff); }
.dx-tool.is-active .ti { color: var(--primary); }
.dx-tools.is-planned .dx-tool.is-active { border-color: #dc2626; background: #fef2f2; color: #b91c1c; box-shadow: 0 0 0 2px #fee2e2; }
.dx-tools.is-planned .dx-tool.is-active .ti { color: #dc2626; }
.dx-tool:disabled { opacity: .4; cursor: not-allowed; }
.dx-hint { margin: 0; font-size: 12.5px; color: var(--text-muted); }

/* odontogram */
.dx-chart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.dx-chart { position: relative; direction: ltr; background: linear-gradient(180deg, #fbfcfe, #f6f8fc); border: 1px solid var(--border); border-radius: 12px; padding: 16px 22px; overflow-x: auto; }
.dx-arch { display: flex; justify-content: center; align-items: stretch; gap: 0; min-width: 440px; }
.dx-quadrant { flex: 1 1 0; display: grid; grid-template-columns: repeat(var(--dx-n, 8), minmax(0, 1fr)); gap: 2px; max-width: 360px; }
.dx-midline { width: 2px; background: var(--border-strong, #cbd5e1); margin: 0 6px; border-radius: 2px; }
.dx-occlusal-plane { display: flex; justify-content: center; gap: 14px; min-width: 440px; margin: 6px 0; font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; border-top: 1px dashed var(--border-strong, #cbd5e1); padding-top: 4px; }
.dx-side-label { position: absolute; top: 8px; font-weight: 700; font-size: 12px; color: var(--text-muted); }
.dx-side-label-r { left: 8px; } .dx-side-label-l { right: 8px; }
.dx-tooth { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 3px 1px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.dx-tooth:hover { background: #fff; border-color: var(--border); }
.dx-tooth:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dx-tooth.is-selected { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft, #e0e7ff); }
.dx-num { font-size: 11px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.dx-side-wrap { width: 82%; max-width: 32px; aspect-ratio: 40 / 90; }
.dx-side { width: 100%; height: 100%; display: block; }
.dx-side.is-missing { opacity: .45; }
.dx-side.is-deep g { opacity: .55; }
.dx-occ-wrap { width: 72%; max-width: 28px; aspect-ratio: 1; }
.dx-occ { width: 100%; height: 100%; display: block; }
.dx-surface { stroke: #9ca3af; stroke-width: 1.2; cursor: pointer; transition: opacity .1s; }
.dx-surface:hover { opacity: .75; stroke: var(--primary); stroke-width: 1.8; }
.dx-surface.is-planned { stroke: #dc2626; stroke-width: 2.4; stroke-dasharray: 3 2; }
.dx-badges { display: flex; gap: 2px; min-height: 14px; }
.dx-badge { font-size: 9px; font-weight: 700; line-height: 14px; padding: 0 4px; border-radius: 7px; }
.dx-badge-plan { background: #dc2626; color: #fff; }
.dx-badge-mob { background: #fef3c7; color: #92400e; }
.dx-badge-file { background: #e0f2fe; color: #0369a1; }
.dx-badge-file .ti { font-size: 10px; }

/* legend + notes */
.dx-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-muted); }
.dx-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.dx-legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.dx-legend-dot.is-plan { background: transparent; border: 2px dashed #dc2626; }
.dx-notes label { font-weight: 600; font-size: 13px; display: block; margin-bottom: 4px; }

/* tooth panel */
.dx-inspector { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; max-height: calc(100vh - 120px); overflow-y: auto; }
.dx-insp-empty { text-align: center; color: var(--text-muted); padding: 30px 10px; }
.dx-insp-empty .ti { font-size: 28px; }
.dx-insp-head { display: flex; align-items: center; gap: 10px; }
.dx-insp-tooth { width: 36px; height: 72px; flex: none; }
.dx-insp-tooth svg { width: 100%; height: 100%; }
.dx-insp-num { font-weight: 700; font-size: 16px; }
.dx-insp-name { font-size: 12px; color: var(--text-muted); }
.dx-insp-head .dx-icon-btn { margin-inline-start: auto; }
.dx-icon-btn { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 16px; }
.dx-icon-btn:hover { background: var(--surface-hover, #f1f5f9); color: var(--danger, #dc2626); }
.dx-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; }
.dx-field-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.dx-checks { display: flex; flex-direction: column; gap: 4px; }
.dx-checks .form-check { font-size: 12.5px; margin: 0; display: flex; align-items: center; gap: 6px; }
.dx-surf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.dx-surf-row { display: flex; align-items: center; gap: 6px; }
.dx-surf-key { width: 20px; font-weight: 700; font-size: 12px; text-align: center; }
.dx-insp-section { border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dx-insp-section-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12.5px; }
.dx-insp-plan { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; }
.dx-insp-plan.is-planned, .dx-insp-plan.is-in_progress { border-inline-start: 3px solid #dc2626; }
.dx-insp-plan.is-completed { border-inline-start: 3px solid #16a34a; }
.dx-insp-plan-meta { display: flex; justify-content: space-between; margin-top: 3px; }
.dx-upload { position: relative; cursor: pointer; }
.dx-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dx-thumb { aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #0f172a; color: #fff; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.dx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dx-mini-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.dx-mini-history span { color: var(--text-muted); margin-inline-end: 4px; }

/* status pills */
.dx-status { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--neutral-soft, #f1f5f9); color: var(--text-muted); }
.dx-status.is-planned { background: #fee2e2; color: #b91c1c; }
.dx-status.is-in_progress { background: #fef3c7; color: #92400e; }
.dx-status.is-completed { background: #dcfce7; color: #166534; }
.dx-status.is-declined { background: #f1f5f9; color: #64748b; text-decoration: line-through; }

/* periodontal chart */
.dx-perio-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dx-perio-actions { display: flex; align-items: center; gap: 8px; }
.dx-dx-pill { display: inline-block; font-weight: 700; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--primary-soft, #eef2ff); color: var(--primary); }
.dx-perio-scroll { direction: ltr; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 14px; }
.dx-perio-table { border-collapse: separate; border-spacing: 0; font-size: 11px; }
.dx-perio-table th { box-shadow: 1px 0 0 var(--border); text-align: start; font-weight: 600; color: var(--text-muted); white-space: nowrap; padding: 2px 6px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.dx-perio-table thead th { text-align: center; color: var(--text); font-weight: 700; position: static; }
.dx-perio-table thead th.is-missing { color: var(--text-muted); text-decoration: line-through; }
.dx-perio-sep th, .dx-perio-sep td { border-top: 1px solid var(--border); padding-top: 4px; }
.dx-perio-cell { padding: 1px 3px; border-inline-start: 1px solid var(--border); white-space: nowrap; text-align: center; }
.dx-perio-cell.is-missing { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 4px, #eef2f7 4px, #eef2f7 8px); }
.dx-perio-table .dx-perio-in { display: inline-block; width: 21px; height: 24px; min-height: 0; padding: 0; text-align: center; font: inherit; font-size: 12px; font-weight: 700; border: 1px solid var(--border); border-radius: 4px; margin: 0 1px; font-variant-numeric: tabular-nums; }
.dx-perio-table .dx-perio-in:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.dx-perio-in.is-ok { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.dx-perio-in.is-mid { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.dx-perio-in.is-deep { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.dx-perio-in:disabled { background: transparent; border-color: transparent; }
.dx-bop { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #fca5a5; background: #fff; margin: 0 3px; padding: 0; cursor: pointer; vertical-align: middle; }
.dx-bop.is-on { background: #dc2626; border-color: #dc2626; }
.dx-bop:disabled { visibility: hidden; }
.dx-perio-table .dx-perio-sel { height: 24px; min-height: 0; width: auto; padding: 0 2px; background-image: none; font: inherit; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 2px; background: #fff; }

/* treatment plan */
.dx-plan-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.dx-phase { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dx-phase-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--surface-sunken, #f8fafc); font-weight: 700; font-size: 13px; }
.dx-phase-total { font-variant-numeric: tabular-nums; }
.dx-phase .table-wrap { border: 0; border-radius: 0; }
.dx-plan-table td { vertical-align: top; }
.dx-plan-table tr.is-declined td { opacity: .55; }
.dx-plan-table tr.is-completed td:first-child { box-shadow: inset 3px 0 0 #16a34a; }
.dx-plan-table tr.is-planned td:first-child, .dx-plan-table tr.is-in_progress td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.dx-plan-title { font-weight: 600; }
.dx-num-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.dx-row-actions .btn { padding: 2px 8px; }
.dx-danger:hover { color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }
.dx-inv-badge { margin-top: 3px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: 999px; padding: 0 8px; cursor: pointer; }
.dx-empty { text-align: center; color: var(--text-muted); padding: 28px 10px; border: 1px dashed var(--border); border-radius: 12px; }
.dx-empty .ti { font-size: 28px; }
.dx-complete-box { display: flex; flex-direction: column; gap: 2px; background: var(--surface-sunken, #f8fafc); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }

/* history */
.dx-history-bar { display: flex; gap: 10px; align-items: center; }
.dx-history-bar .form-select { width: auto; min-width: 160px; }
.dx-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dx-tl-item { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.dx-tl-date { color: var(--text-muted); font-size: 12px; display: flex; flex-direction: column; }
.dx-tl-title { font-weight: 700; }
.dx-tl-item.is-procedure_completed .dx-tl-title { color: #15803d; }
.dx-tl-item.is-procedure_planned .dx-tl-title { color: #b91c1c; }

/* ---------- physiotherapy ---------- */
.px-redflag { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; }
.px-pain-grid { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.px-body-pane { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #fbfcfe, #f6f8fc); }
.px-body-head { display: flex; flex-direction: column; gap: 6px; }
.px-body-wrap { direction: ltr; display: flex; justify-content: center; }
.px-body-svg { width: 100%; max-width: 300px; height: auto; }
.px-zone { fill: #e6ecf5; stroke: #aab6c8; stroke-width: 1; cursor: pointer; transition: fill .12s; }
.px-zone:hover { fill: #c7d2fe; stroke: var(--primary); }
.px-zone.is-painful { stroke: #b91c1c; }
.px-side-mark { font-size: 13px; font-weight: 700; fill: var(--text-muted); }
.px-pin { cursor: pointer; }
.px-pin text { font-size: 9px; font-weight: 700; fill: #fff; pointer-events: none; }
.px-pin:hover circle { stroke: #0f172a; }
.px-side-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.px-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--surface); overflow-x: auto; }
.px-rom-name { min-width: 150px; }
.px-rom-edit { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 4px; min-width: 300px; }
.px-side-tag { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--primary-soft, #eef2ff); color: var(--primary); }
.px-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 13.5px; }
.px-mt { margin-top: 6px; }
.px-inline { display: flex; gap: 6px; align-items: center; }
.px-inline .form-select { width: auto; min-width: 170px; }
.px-pain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.px-pain-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.px-pain-item:hover { background: var(--surface-hover, #f8fafc); border-color: var(--border); }
.px-pain-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13px; }
.px-vas-chip { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 13px; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.px-spark { width: 100%; max-width: 260px; height: 52px; }
.px-spark polyline { stroke: var(--primary); }
.px-spark circle { fill: var(--primary); }
.px-spark.is-good polyline { stroke: #16a34a; } .px-spark.is-good circle { fill: #16a34a; }
.px-spark.is-bad polyline { stroke: #dc2626; } .px-spark.is-bad circle { fill: #dc2626; }
.px-spark-empty { padding: 10px 0; }
.px-lib-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.px-lib-bar label { font-weight: 600; font-size: 13px; }
.px-lib-bar .form-select { width: auto; min-width: 150px; }
.px-table td, .px-table th { vertical-align: middle; }
.px-c { text-align: center; }
.px-workspace .px-num { width: 76px; min-width: 0; text-align: center; margin: 0 auto; padding-inline: 4px; }
.px-bar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: #eef2f7; overflow: hidden; vertical-align: middle; }
.px-bar span { display: block; height: 100%; background: var(--primary); }
.px-bar.is-ok span { background: #16a34a; } .px-bar.is-mid span { background: #f59e0b; } .px-bar.is-low span { background: #dc2626; }
.px-pct { font-size: 12px; font-weight: 700; margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
.px-lag { font-size: 12px; font-weight: 700; color: #b91c1c; }
.px-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; }
.px-grade.is-g5 { color: #166534; } .px-grade.is-g4 { color: #15803d; } .px-grade.is-g3 { color: #b45309; }
.px-grade.is-g2, .px-grade.is-g1, .px-grade.is-g0 { color: #b91c1c; font-weight: 700; }
.px-res-positive.is-active { background: #dc2626 !important; }
.px-res-negative.is-active { background: #16a34a !important; }
.px-res-not_tested.is-active { background: #64748b !important; }
.px-outcomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.px-outcome { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.px-outcome-name { font-weight: 700; font-size: 13px; }
.px-outcome-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.px-outcome-row .px-num { margin: 0; }
.px-interp { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--primary-soft, #eef2ff); color: var(--primary); }
.px-outcome-meta { font-size: 12px; color: var(--text-muted); }
.px-outcome-hint { font-size: 11px; }
.px-change { font-weight: 700; margin-inline-start: 4px; }
.px-change.is-good { color: #15803d; } .px-change.is-bad { color: #b91c1c; }
.px-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.px-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text); }
.px-chip:hover { border-color: var(--primary); }
.px-chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.px-chip.is-flag.is-on { background: #dc2626; border-color: #dc2626; }
.px-warn-text { color: #b91c1c; font-size: 12.5px; font-weight: 600; margin: 0; }
.px-freq { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.px-freq label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.px-pkg { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.px-pkg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.px-pkg-progress { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; font-size: 12.5px; }
.px-log { font-size: 12.5px; }
.px-mini { display: inline-block; font-size: 11.5px; background: var(--surface-sunken, #f1f5f9); border-radius: 6px; padding: 1px 6px; margin: 1px; }
.px-vas-head { display: flex; justify-content: space-between; align-items: center; }
.px-vas-out { min-width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; }
.px-vas-range { width: 100%; accent-color: #ef4444; }
.px-vas-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }

/* the chart panel stacks under the chart when the host is narrow (patient file, small screens) */
@container (max-width: 1020px) {
  .dx-chart-grid { grid-template-columns: 1fr; }
  .dx-inspector { position: static; max-height: none; }
  .px-pain-grid { grid-template-columns: 1fr; }
}

/* narrow screens */
@media (max-width: 1100px) {
  .dx-chart-grid { grid-template-columns: 1fr; }
  .dx-inspector { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .px-pain-grid { grid-template-columns: 1fr; }
  .dx-tool { min-width: 58px; font-size: 10.5px; }
  .dx-tab span { display: none; }
  .dx-tab.is-active span { display: inline; }
}

/* ---------- in-app file viewer (js/fileViewer.js) ---------- */
body.qv-viewer-open { overflow: hidden; }
.qv-viewer { position: fixed; inset: 0; z-index: 3000; background: rgba(8, 12, 22, .94); display: flex; flex-direction: column; color: #e2e8f0; }
.qv-viewer[hidden] { display: none; }
.qv-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: rgba(15, 23, 42, .9); border-bottom: 1px solid rgba(148, 163, 184, .2); flex-wrap: wrap; }
.qv-viewer-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.qv-viewer-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.qv-viewer-count { font-size: 12px; color: #475569; }
.qv-viewer-tools, .qv-viewer-end { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.qv-viewer-tools[hidden] { display: none; }
.qv-viewer button, .qv-viewer-dl { background: transparent; border: 1px solid transparent; color: #e2e8f0; border-radius: 8px; padding: 6px 8px; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.qv-viewer button:hover, .qv-viewer-dl:hover { background: rgba(148, 163, 184, .18); color: #fff; }
.qv-viewer button.is-on { background: #2f54eb; border-color: #2f54eb; }
.qv-viewer-zoom { font-size: 12px; min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.qv-viewer-slider { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; font-size: 16px; }
.qv-viewer-slider input { width: 90px; accent-color: #2f54eb; }
.qv-viewer-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.qv-viewer-canvas { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: grab; touch-action: none; }
.qv-viewer-canvas.is-dragging { cursor: grabbing; }
.qv-viewer-img { max-width: 92%; max-height: 92%; user-select: none; transition: filter .1s; transform-origin: center; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.qv-viewer-pdf { width: min(1100px, 96%); height: 96%; border: 0; background: #fff; border-radius: 6px; }
.qv-viewer-msg { text-align: center; color: #cbd5e1; }
.qv-viewer-msg .ti { font-size: 42px; }
.qv-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(15, 23, 42, .7) !important; font-size: 26px !important; padding: 10px !important; border-radius: 50% !important; }
.qv-viewer-nav.is-prev { left: 14px; } .qv-viewer-nav.is-next { right: 14px; }
.qv-viewer-nav[hidden] { display: none !important; }
.qv-viewer-thumbs { display: flex; gap: 6px; justify-content: center; padding: 8px; overflow-x: auto; background: rgba(15, 23, 42, .9); }
.qv-viewer-thumbs[hidden] { display: none; }
.qv-viewer-thumb { width: 56px; height: 56px; padding: 0 !important; overflow: hidden; border: 2px solid transparent !important; background: #0f172a !important; justify-content: center; flex: none; }
.qv-viewer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qv-viewer-thumb.is-active { border-color: #2f54eb !important; }
.qv-view-btn { background: none; border: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.qv-view-btn:hover { text-decoration: underline; }

/* fee schedule banner + X-ray thumbnails */
.dx-fee-banner { display: flex; align-items: center; gap: 12px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a; border-radius: 12px; padding: 10px 14px; flex-wrap: wrap; }
.dx-fee-banner > .ti { font-size: 22px; }
.dx-fee-banner > div { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.dx-fee-note { display: flex; align-items: center; gap: 6px; margin: 0; }
.dx-thumb-wrap { position: relative; }
.dx-thumb-wrap .dx-thumb { width: 100%; }
.dx-thumb-del { position: absolute; top: -6px; inset-inline-end: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #0f172a; color: #fff; font-size: 11px; display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.dx-thumb-wrap:hover .dx-thumb-del, .dx-thumb-del:focus { display: inline-flex; }
@media (hover: none) { .dx-thumb-del { display: inline-flex; } }

/* Visit lock — view-only charts */
.qv-readonly-banner { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; margin-bottom: .75rem;
  border: 1px solid #fcd34d; background: #fffbeb; color: #92400e; border-radius: 8px; font-size: .86rem; font-weight: 500; }
.qv-readonly-banner .ti { font-size: 1.05rem; }
.dx-workspace.is-readonly .dx-tooth, .dx-workspace.is-readonly .px-zone { cursor: default; }
.dx-workspace.is-readonly .px-zone:hover { fill-opacity: inherit; }
.dx-workspace.is-readonly input:disabled, .dx-workspace.is-readonly select:disabled, .dx-workspace.is-readonly textarea:disabled { background: #f8fafc; color: #334155; opacity: 1; }
.qv-visit-closed-hide { display: none !important; }

/* Doctor prices (doctor profile › Prices tab) and price-list editor */
.doctor-prices .dp-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 .75rem; }
.doctor-prices .dp-toolbar input[type=search] { max-width: 260px; }
.doctor-prices .dp-toolbar select { max-width: 200px; }
.doctor-prices .dp-toolbar .btn { margin-inline-start: auto; }
.dp-table .dp-cat td { background: #f1f5f9; font-weight: 600; font-size: .8rem; color: #475569; text-transform: none; }
.dp-table .dp-name { font-weight: 500; }
.dp-table .dp-code { font-size: .72rem; color: #475569; direction: ltr; unicode-bidi: isolate; }
.dp-table .dp-num { text-align: end; white-space: nowrap; }
.dp-table .dp-input { width: 120px; display: inline-block; text-align: end; }
.dp-table .dp-input.is-dirty { border-color: #f59e0b; background: #fffbeb; }
.pl-bulk { display: flex; gap: .5rem; align-items: center; margin: .25rem 0 .5rem; flex-wrap: wrap; }
.pl-bulk select { max-width: 220px; }
.price-list-entry-row .entry-std { white-space: nowrap; font-size: .75rem; }
.pl-toolbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-inline-start: auto; }
/* Specialty tabs (dental / physiotherapy) hidden for other clinic types — beats the tab display rule */
.folder-tabs .tab[hidden], .encounter-tab-btn[hidden] { display: none !important; }

/* Medical documents — form per document type (visit workspace) */
.qv-docform-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 8px 0 12px; }
.qv-docform-field { display: flex; flex-direction: column; gap: 4px; }
.qv-docform-field.is-wide { grid-column: 1 / -1; }
.qv-docform-field[hidden] { display: none !important; }
.qv-docform-field label { font-size: 12.5px; font-weight: 600; }
.qv-docform-check { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; margin-top: 22px; }
.qv-docform-check input { width: auto; }
.qv-docform-days { font-size: 18px; font-weight: 700; padding: 6px 0; }
.qv-docform-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 700px) { .qv-docform-fields { grid-template-columns: 1fr; } }


/* ---- Batch 3: touch-sized odontogram, physio body map zoom + VAS scale ---- */
/* Teeth about 20% larger (touch target >= 44px tall); the chart scrolls sideways if the screen is narrow. */
.dx-arch, .dx-occlusal-plane { min-width: 530px; }
.dx-quadrant { max-width: 430px; }
.dx-tooth { min-height: 44px; padding: 5px 2px; }
.dx-side-wrap { max-width: 38px; }
.dx-occ-wrap { max-width: 34px; }
.dx-num { font-size: 12.5px; }
.dx-surface:hover { stroke-width: 2.2; }

.px-body-wrap { position: relative; }
.px-zoom-ctl { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.px-zoom-ctl .btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface, #fff); }
.px-body-svg { touch-action: none; cursor: crosshair; }
.px-body-svg.is-zoomed { cursor: grab; }
.px-vas-legend { display: inline-flex; border-radius: 6px; overflow: hidden; }
.px-vas-swatch { min-width: 26px; padding: 3px 0; text-align: center; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.55); }
.px-vas-range { accent-color: #f97316; }

/* Quick Visit: consultation and prescription side by side (first column on the right in Arabic) */
.qv-quick-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.qv-quick-col { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); min-width: 0; }
.qv-quick-title { margin: 0 0 10px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.qv-quick-finish { margin-top: 12px; display: flex; justify-content: flex-end; }
.qv-quick-finish .btn { min-height: 44px; }
@media (max-width: 1100px) { .qv-quick-visit { grid-template-columns: 1fr; } }

/* DICOM viewer: presets and the measurement caliper */
.qv-viewer-dicomtools { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; }
.qv-viewer-dicomtools button { font-size: 12px; padding: 4px 8px; }
.qv-viewer-dicomtools button.is-on { background: #2f54eb; color: #fff; }
.qv-viewer-measure { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.qv-measure-line { stroke: #ffd400; stroke-width: 2; }
.qv-measure-dot { fill: #ffd400; stroke: #000; stroke-width: 1; }
.qv-measure-text { fill: #ffd400; font-size: 14px; font-weight: 700; paint-order: stroke; stroke: #000; stroke-width: 3px; }