/* App-level CSS: base resets, shared helpers, and the mobile-first layout classes used by the apps. */
body { margin: 0; background: var(--color-bg); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }
.ph-duotone { line-height: 1; display: inline-block; }
button, input, select, textarea { font-family: inherit; }
[dir=rtl] *:not([class*="ph-"]) { font-family: "Noto Naskh Arabic", "Source Serif 4", serif !important; letter-spacing: 0 !important; text-transform: none !important; }
[dir=rtl] .flip { transform: scaleX(-1); }
input[type=range] { accent-color: var(--color-accent); width: 100%; }
.app { min-height: 100vh; min-height: 100dvh; font-family: var(--font-body); color: var(--color-text); font-size: 16px; position: relative; }
.hov-row:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.hov-pain:hover { background: var(--color-accent-2-100); }
.hov-border:hover { border-color: var(--color-accent) !important; }
.tr-row:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }

/* ---- sign-in ---- */
.si { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 72px 16px 32px; position: relative; }
.si-lang { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; min-height: 44px; font-size: 16px; gap: 8px; }
.si-card { width: 420px; max-width: 100%; padding: 24px; gap: 22px; }
.si-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (min-width: 640px) { .si-card { padding: 32px; } }

/* ---- patient shell: full-viewport column (a centered 480px column on wider screens) ---- */
.pframe { height: 100vh; height: 100dvh; max-width: 480px; margin: 0 auto; background: var(--color-bg); display: flex; flex-direction: column; position: relative; overflow: hidden; font-family: var(--font-body); color: var(--color-text); }
.pbody { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.p-bar { display: flex; align-items: center; gap: 8px; margin-bottom: -16px; }
.p-brand { margin-inline-end: auto; display: flex; align-items: center; gap: 8px; font: 600 20px var(--font-heading); }
@media (min-width: 520px) { body.patient { background: var(--color-surface); } .pframe { box-shadow: var(--shadow-lg); } }

/* ---- therapist (mobile-first; breakpoints 640 / 900 / 1100) ---- */
.t-bar { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 8px 16px; }
.t-bar .t-nav, .t-me { display: none; }
.t-me { font-size: 16px; }
.t-page { margin: 0 auto; padding: 12px 16px 48px; display: flex; flex-direction: column; gap: 32px; }
.t-wide { max-width: none; gap: 16px; }
.t-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.t-head.top { align-items: flex-start; }
.t-h1 { font-size: clamp(28px, 6.5vw, 44px); line-height: 1.1; }
.t-h1.s { font-size: clamp(26px, 5vw, 36px); }
.t-actions { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.t-actions .btn { flex: 1 1 auto; }

.alert-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
.alert-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.alert-actions .btn { flex: 1 1 140px; }

.t-filters { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.t-search { position: relative; flex: 1 1 200px; }
.t-select { flex: 1 1 160px; width: auto; }

.ptable { display: flex; flex-direction: column; font-size: 16px; }
.prow.phead { display: none; }
.prow { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 14px 10px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); cursor: pointer; }
.prow [data-label] { grid-column: 1 / -1; display: flex; gap: 8px; }
.prow [data-label]::before { content: attr(data-label); color: var(--color-neutral-700); min-width: 140px; font-size: 14px; }
.prow .c-name a { font-weight: 600; font-size: 17px; color: var(--color-text); }

.t-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.t-statv { font: 600 clamp(34px, 8vw, 48px)/1 var(--font-heading); font-variant-numeric: tabular-nums; }
.t-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
.adh { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.srow { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; align-items: center; text-align: start; padding: 12px 8px; border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--color-text); border-radius: var(--radius-md); }

.cmd-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cmd-row .input { flex: 1 1 220px; min-width: 0; }
.t-3col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.rv-mid { order: 1; } .rv-side { order: 2; } .rv-tl { order: 3; }
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; }

@media (min-width: 640px) {
  .t-bar { padding: 12px 24px; gap: 8px 20px; }
  .t-bar .t-nav, .t-me { display: inline; }
  .t-actions { width: auto; }
  .t-actions .btn { flex: none; }
  .t-filters { width: auto; }
  .t-search { flex: none; width: 260px; }
  .t-select { flex: none; width: 220px; }
  .t-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .t-bar { padding: 12px 48px; gap: 8px 24px; }
  .t-page { padding: 24px 48px 64px; gap: 48px; }
  .t-wide { gap: 16px; }
  .alert-card { flex-direction: row; align-items: center; gap: 24px; padding: 20px 24px; }
  .alert-sev { width: 130px; flex: none; }
  .alert-actions { flex: none; }
  .alert-actions .btn { flex: none; }
  .prow.phead { display: grid; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); cursor: default; padding: 10px; }
  .prow { grid-template-columns: 1.5fr 1.6fr .5fr 1fr .8fr 1.5fr 1.1fr; gap: 12px; }
  .prow [data-label] { display: block; grid-column: auto; }
  .prow [data-label]::before { display: none; }
  .c-status { order: 5; }
  .prow > :last-child { order: 6; }
  .adh { grid-template-columns: repeat(14, minmax(0, 1fr)); }
  .srow { grid-template-columns: 1.3fr .8fr 1fr .8fr 1.2fr; gap: 12px; padding: 14px 8px; }
}
@media (min-width: 1100px) {
  .t-split { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; }
  .t-3col { grid-template-columns: 320px minmax(0, 1fr) 360px; gap: 32px; }
  .t-3col.rv { grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 40px; }
  .rv-mid, .rv-side, .rv-tl { order: 0; }
  .t-page.t-wide { padding: 8px 32px 48px; }
}

/* P5 live session: avatar over camera on phones, side by side on laptops / landscape */
.ses-panels { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ses-av { flex: none; height: 248px; }
.ses-cam { flex: 1; min-height: 150px; }
@media (min-width: 760px) {
  .pframe.wide { max-width: 1100px; }
  .ses-panels { flex-direction: row; }
  .ses-av, .ses-cam { flex: 1; height: auto; min-height: 0; }
}
.t-3col button[style*="flex:1"] { min-width: 0; }