:root {
  --ink: #16282c; --ink-2: #4c6166; --ink-3: #7b8d91;
  --bg: #f4f3ee; --surface: #fff; --line: #e2e2da; --line-2: #efeee8; --surface-2: #fafaf6; --hover: #f7f8f3; --line-strong: #d3d4cb;
  --brand: #14474f; --brand-2: #1c6b73; --brand-soft: #e3f0ef;
  --side: #10363c; --side-ink: #c5d8d9;
  --red: #b3372d; --red-soft: #fbeae7; --green: #2c7a4b; --green-soft: #e5f3ea; --amber: #93650d; --amber-soft: #fbf1da;
  --blue: #2f64a0; --blue-soft: #e6eef8;
  --chart-1: #1c7c84; --chart-2: #d0893a;
  --radius: 10px; --shadow: 0 1px 2px rgba(20, 40, 45, .05);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif; }
a { color: var(--brand-2); text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 22px; font-weight: 650; letter-spacing: -.2px; }
h3 { font-size: 15px; font-weight: 620; }
small { font-size: 12px; }
.muted { color: var(--ink-3); font-weight: 400; }
.grow { flex: 1; min-width: 0; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.neg { color: var(--red); }
.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* shell */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 216px; flex: none; background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; color: #fff; font-weight: 620; line-height: 1.2; }
.nav { flex: 1; overflow-y: auto; padding: 4px 8px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; margin-bottom: 1px; border-radius: 8px; color: var(--side-ink); }
.nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav a.active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; }
.side-foot { padding: 10px 12px 12px; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 8px; }
.who { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.lang { display: inline-flex; border: 1px solid rgba(127, 150, 155, .5); border-radius: 7px; overflow: hidden; width: fit-content; }
.lang button { background: none; border: 0; color: inherit; padding: 3px 11px; font: inherit; font-size: 12px; cursor: pointer; }
.lang button.on { background: var(--brand-2); color: #fff; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 12px 24px 0; }
.icon-btn.menu-btn, .scrim { display: none; }
#view { padding: 16px 24px 48px; max-width: 1320px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--hover); border-color: var(--ink-3); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn.primary, .kpi.hero { box-shadow: 0 1px 2px rgba(10, 50, 55, .25); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger.ghost { background: none; color: var(--red); border-color: transparent; }
.btn.danger.ghost:hover { background: var(--red-soft); }
.btn.small { padding: 3px 9px; font-size: 12.5px; }
.btn.small .i { width: 15px; height: 15px; }
.btn.block, .btn.wide-btn { width: 100%; }
.btn.wide-btn { margin-top: 12px; }
.btn:disabled { opacity: .55; cursor: default; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font-size: 18px; cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--line-2); color: var(--ink); }
.icon-btn.light { color: var(--side-ink); }
.icon-btn.light:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.link { font-size: 13px; }
input, select, textarea { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 7px; padding: 6px 9px; width: 100%; min-width: 0; }
input[type=checkbox] { width: auto; accent-color: var(--brand); }
input[type=color] { padding: 2px; height: 33px; }
input.num, .num input { text-align: end; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
input.invalid { border-color: var(--red); }
textarea { resize: vertical; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.toolbar label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.toolbar input[type=date], .toolbar select { width: auto; }
.sum { color: var(--ink-2); font-size: 13px; }
.sum b { color: var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg.wrap { flex-wrap: wrap; }
.seg button { background: none; border: 0; border-inline-end: 1px solid var(--line); padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.seg button:last-child { border-inline-end: 0; }
.seg button:hover { background: var(--line-2); }
.seg button.on { background: var(--brand); color: #fff; }
.search-box { position: relative; display: flex; align-items: center; flex: 1; min-width: 200px; max-width: 460px; }
.search-box > .i { position: absolute; inset-inline-start: 10px; color: var(--ink-3); pointer-events: none; }
.search-box input { padding-inline-start: 34px; }
.global-results, .picker-list { position: absolute; top: calc(100% + 4px); inset-inline: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 24px rgba(20, 40, 45, .14); z-index: 40; overflow: hidden; }
.global-results a, .picker-list button { display: block; width: 100%; padding: 8px 12px; text-align: start; background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; }
.global-results a:hover, .picker-list button:hover { background: var(--brand-soft); }
.picker { position: relative; }
.picker-new { border-top: 1px solid var(--line) !important; color: var(--brand-2) !important; font-weight: 600 !important; display: flex !important; align-items: center; gap: 6px; }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.card.flush { padding: 0; overflow: hidden; }
.card.narrow { max-width: 460px; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.card > h3 { margin-bottom: 10px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cols-2 > .card { margin-bottom: 0; }
.cols-2 { margin-bottom: 14px; }
.cols-2.wide-first { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.stack { display: grid; gap: 12px; margin-bottom: 14px; }
.stack .card { margin: 0; }
.section-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.section-title { margin: 18px 0 8px; }
.sub { font-size: 13px; font-weight: 620; margin: 14px 0 6px; color: var(--ink-2); }
.hint { color: var(--ink-3); font-size: 12.5px; margin: 8px 0; }
.empty { padding: 26px 12px; text-align: center; color: var(--ink-3); }
.empty.small { padding: 10px; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; display: flex; flex-direction: column; gap: 2px; color: inherit; box-shadow: var(--shadow); }
.kpi span { font-size: 12.5px; color: var(--ink-2); }
.kpi strong { font-size: 22px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.kpi small { color: var(--ink-3); }
a.kpi:hover { border-color: var(--brand-2); }
.kpi.hero { background: var(--brand); border-color: var(--brand); color: #fff; }
.kpi.hero span, .kpi.hero small { color: #bcd9d8; }
.kpis.small .kpi strong { font-size: 18px; }

/* tables */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th { font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: start; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
table.data th.num { text-align: end; }
table.data td { padding: 8px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td, li.clickable:hover { background: var(--hover); }
td.actions { text-align: end; white-space: nowrap; }
.amount { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.owes { color: var(--red); }
.credit { color: var(--blue); }
.settled { color: var(--green); }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); font-size: 12px; font-weight: 550; white-space: nowrap; }
.st-confirmed, .st-arrived, .ps-ready, .pl-accepted { background: var(--green-soft); color: var(--green); }
.st-done, .ps-fitted, .pl-done { background: var(--brand-soft); color: var(--brand); }
.st-missed, .ps-repair { background: var(--amber-soft); color: var(--amber); }
.st-cancelled, .ps-cancelled, .pl-refused { background: var(--red-soft); color: var(--red); }
.ps-at_lab, .ps-try_in, .ps-impression { background: var(--blue-soft); color: var(--blue); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 3px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; color: var(--ink-2); }

/* lists */
.timeline, .remind, .plain { list-style: none; margin: 0; padding: 0; }
.appt-row, .remind li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line-2); }
.appt-row:last-child, .remind li:last-child { border-bottom: 0; }
.time { font-weight: 620; font-variant-numeric: tabular-nums; min-width: 44px; white-space: nowrap; }
.status-cancelled, .status-missed { opacity: .55; }
.plain li { padding: 4px 0; border-bottom: 1px solid var(--line-2); }
.plain li:last-child { border-bottom: 0; }
.plain.scroll { max-height: 240px; overflow-y: auto; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.total-row { margin-top: 10px; }
.alert-list { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; }
.alert-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--blue-soft); color: var(--ink); }
.alert-row .i { color: var(--blue); }
.alert-row.warn { background: var(--amber-soft); }
.alert-row.warn .i { color: var(--amber); }
.alert-row.good { background: var(--green-soft); }
.alert-row.good .i { color: var(--green); }
.med-alert-box { display: flex; gap: 10px; background: var(--red-soft); border: 1px solid #efc9c3; color: #6e1f18; border-radius: var(--radius); padding: 9px 13px; margin-bottom: 12px; }
.med-alert-box .i { color: var(--red); margin-top: 2px; }
.med-alert { margin: 0; }
.med-alert .med-alert-box { margin-bottom: 0; }

/* chart */
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font-size: 12.5px; color: var(--ink-2); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; }
.plot { position: relative; height: 200px; margin-inline-start: 62px; margin-bottom: 22px; }
.grid { position: absolute; inset: 0; }
.gridline { position: absolute; inset-inline: 0; border-top: 1px solid var(--line-2); }
.gridline span { direction: ltr; unicode-bidi: isolate; position: absolute; inset-inline-end: calc(100% + 8px); top: -8px; font-size: 11px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cols { position: absolute; inset: 0; display: flex; align-items: stretch; }
.col { position: relative; flex: 1; min-width: 0; outline: none; display: flex; flex-direction: column; justify-content: flex-end; }
.col:hover, .col:focus { background: rgba(20, 71, 79, .04); }
.bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; padding: 0 3px; }
.bar { flex: 0 1 14px; min-width: 3px; border-radius: 4px 4px 0 0; }
.col-label { position: absolute; top: calc(100% + 5px); inset-inline: 0; text-align: center; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.tip { display: none; position: absolute; bottom: 60%; inset-inline-start: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12px; padding: 7px 10px; border-radius: 7px; z-index: 5; white-space: nowrap; pointer-events: none; }
[dir=rtl] .tip { transform: translateX(50%); }
.col:hover .tip, .col:focus .tip { display: block; }
.rank-bar { height: 4px; background: var(--line-2); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.rank-bar i { display: block; height: 100%; background: var(--chart-1); border-radius: 3px; }
table.rank td { border-bottom: 0; padding: 6px 0; }
table.rank td.num { padding-inline-start: 14px; vertical-align: top; }

/* agenda */
.agenda-wrap { overflow-x: auto; }
.agenda { display: grid; grid-template-columns: 52px repeat(var(--days), minmax(120px, 1fr)); min-width: fit-content; }
.agenda-title { font-weight: 620; }
.corner, .day-head { position: sticky; top: 0; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 8px 6px; font-size: 13px; text-align: center; z-index: 3; }
.day-head.is-today { background: var(--brand-soft); color: var(--brand); }
.hours { position: relative; }
.hours div { position: absolute; inset-inline: 0; text-align: center; font-size: 11px; color: var(--ink-3); transform: translateY(1px); }
.day-col { position: relative; border-inline-start: 1px solid var(--line-2); background-image: linear-gradient(var(--line-2) 1px, transparent 1px); cursor: copy; }
.day-col.today-col { background-color: var(--surface-2); }
.appt { position: absolute; inset-inline: 3px; padding: 2px 6px; border: 0; border-inline-start: 3px solid var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-radius: 5px; font: inherit; font-size: 12px; line-height: 1.25; color: var(--ink); text-align: start; overflow: hidden; cursor: pointer; z-index: 1; }
.appt:hover { background: color-mix(in srgb, var(--c) 24%, var(--surface)); z-index: 2; }
.appt small { display: block; font-size: 11px; color: var(--ink-2); }
.appt.st-cancelled, .appt.st-missed { opacity: .45; text-decoration: line-through; }
.appt.st-done { opacity: .7; }

/* forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.one { grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field > label { font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.field small { color: var(--ink-3); }
.req { color: var(--red); margin-inline-start: 2px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.form-grid.one .span-2 { grid-column: auto; }
.form-section { grid-column: 1 / -1; margin-top: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--brand); font-weight: 650; }
.form-section:first-child { margin-top: 0; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.checks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.checks legend { font-size: 12.5px; font-weight: 550; color: var(--ink-2); padding: 0; margin-bottom: 4px; }
dialog { border: 0; border-radius: 13px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 24px 60px rgba(10, 30, 35, .3); color: var(--ink); }
dialog.wide { width: min(780px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(14, 35, 40, .42); }
dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.dlg-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.dlg-head h3 { font-size: 16px; }
.dlg-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.dlg-body.confirm { font-size: 15px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 11px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
.toast { position: relative; background: var(--ink); color: #fff; padding: 9px 15px; border-radius: 9px; box-shadow: 0 8px 24px rgba(10, 30, 35, .25); max-width: 420px; }
.toast.ok { background: var(--green); }
.toast.error { background: var(--red); }
#toasts { position: fixed; bottom: 18px; inset-inline-end: 18px; display: grid; gap: 8px; z-index: 100; }
.toast.in-dialog { position: fixed; bottom: 18px; inset-inline-end: 18px; }

/* session form */
.visit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.visit-side { position: sticky; top: 12px; display: grid; gap: 12px; margin: 0; }
.visit-side h3 { margin: 0; }
.ledger { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; align-items: center; }
.ledger dt { color: var(--ink-2); font-size: 13px; }
.ledger dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.ledger dd input { width: 110px; padding: 3px 7px; }
.ledger .strong { font-weight: 680; color: var(--ink); font-size: 15px; }
.pay-box { background: var(--brand-soft); border-radius: 9px; padding: 10px; display: grid; gap: 7px; }
.pay-box label { font-weight: 620; color: var(--brand); font-size: 13px; }
.pay-row { display: flex; gap: 6px; align-items: center; }
input.big { font-size: 19px; font-weight: 680; }
.balance-box { padding-top: 2px; }
.side-list h4 { font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }
.ops td { padding: 4px 6px 4px 0; border: 0 !important; }
[dir=rtl] .ops td { padding: 4px 0 4px 6px; }
.tooth-col { width: 110px; }
.price-col { width: 120px; }
.patient-link { font-weight: 620; font-size: 15px; }

/* patient file */
.patient-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 19px; font-weight: 680; flex: none; }
.patient-id { flex: 1; min-width: 200px; }
.patient-id h1 { font-size: 19px; }
.patient-balance { display: flex; flex-direction: column; align-items: flex-end; padding-inline: 8px; }
.patient-balance span:first-child { font-size: 12px; color: var(--ink-3); }
.patient-balance .amount { font-size: 18px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tabs a { padding: 8px 13px; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 550; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--brand); border-bottom-color: var(--brand); }
.info { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; }
.info dt { color: var(--ink-3); font-size: 13px; }
.info dd { margin: 0; white-space: pre-wrap; }

/* dental chart */
.odonto-wrap { overflow-x: auto; }
.odonto { width: fit-content; margin: 0 auto; padding: 4px; }
.arch { display: flex; justify-content: center; }
.arch.lower { border-top: 1.5px dashed #b9c5c5; margin-top: 8px; padding-top: 8px; }
.quad { display: flex; gap: 3px; padding: 0 5px; }
.quad:first-child { border-right: 1.5px dashed #b9c5c5; }
.tooth { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 46px; padding: 3px 1px; background: none; border: 1px solid transparent; border-radius: 7px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.tooth:hover { background: var(--brand-soft); border-color: var(--brand-2); }
.tooth-svg { width: 38px; height: 38px; display: block; }
.zone { fill: #fff; stroke: #8fa2a5; stroke-width: 1.2; stroke-linejoin: round; }
.z-caries { fill: #d9483b; }
.z-filled { fill: #4a86c8; }
.z-crown { fill: #e0b23d; }
.z-bridge { fill: #c98a2e; }
.z-implant { fill: #6b7c8f; }
.z-denture { fill: #d99ab5; }
.z-root_canal { fill: #b9a2dc; }
.z-to_extract { fill: #fbe0dc; }
.z-fracture { fill: #fff3d6; }
.z-mobile { fill: #e4efe0; }
.cross { fill: none; stroke: #4c6166; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cross.red { stroke: #b3372d; }
.s-missing .zone { fill: #eceee8; stroke: #c3cbc9; }
.odonto-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-2); }
.leg { display: inline-flex; align-items: center; gap: 5px; }
.leg .tooth-svg { width: 18px; height: 18px; }
.surface-pick { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 12px; }
.surface-pick .lbl { font-size: 12.5px; font-weight: 550; color: var(--ink-2); }

/* prostheses */
.stepper { display: flex; list-style: none; margin: 0 0 10px; padding: 0; overflow-x: auto; }
.stepper li { flex: 1; min-width: 86px; position: relative; }
.stepper button { width: 100%; background: none; border: 0; border-top: 3px solid var(--line); padding: 6px 2px; font: inherit; font-size: 12px; color: var(--ink-3); cursor: pointer; text-align: start; }
.stepper button:hover { color: var(--ink); }
.stepper .done button { border-top-color: var(--brand-2); color: var(--ink-2); }
.stepper .now button { border-top-color: var(--brand); color: var(--brand); font-weight: 680; }
.prosthesis-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; }

/* documents */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.doc { padding: 8px; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.doc-thumb { grid-column: 1 / -1; height: 130px; border-radius: 7px; background: #20292b; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 700; }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-info { display: flex; flex-direction: column; min-width: 0; }

/* auth */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--side); }
.auth-card { width: min(400px, 100%); background: var(--surface); border-radius: 14px; padding: 24px; display: grid; gap: 8px; }
.auth-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: var(--ink-2); }
.auth-card .form-grid { margin-top: 10px; }

@media (max-width: 1050px) {
  .visit-layout { grid-template-columns: minmax(0, 1fr); }
  .visit-side { position: static; }
  .cols-2, .cols-2.wide-first { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; transform: translateX(-100%); transition: transform .18s; }
  [dir=rtl] .sidebar { transform: translateX(100%); }
  .nav-open .sidebar { transform: none !important; }
  .nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(14, 35, 40, .4); z-index: 15; }
  .icon-btn.menu-btn { display: inline-flex; }
  .topbar { padding: 10px 16px 0; }
  #view { padding: 12px 16px 40px; }
  .form-grid, .form-grid.three { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3 { grid-column: auto; }
  .clip { max-width: 180px; }
  .patient-balance { align-items: flex-start; padding: 0; }
  table.data td, table.data th { padding: 7px 8px; }
}

/* ==== Fonts: bundled so the app looks the same offline ==== */
@font-face { font-family: "Inter"; src: url(vendor/fonts/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url(vendor/fonts/inter-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cairo"; src: url(vendor/fonts/cairo-arabic-wght-normal.woff2) format("woff2"); font-weight: 200 1000; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
body { font-family: "Inter", "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif; font-feature-settings: "cv11", "ss03"; -webkit-font-smoothing: antialiased; }
[dir=rtl] body { font-family: "Cairo", "Inter", "Segoe UI", Tahoma, system-ui, sans-serif; }
[dir=rtl] h1 { letter-spacing: 0; }

/* ==== Dark theme ==== */
:root[data-theme=dark] {
  --ink: #e5eded; --ink-2: #a8babc; --ink-3: #7c9093;
  --bg: #0e1b1e; --surface: #162528; --surface-2: #1b2d31; --hover: #1f3338; --line: #2a3e42; --line-2: #213337; --line-strong: #37504f;
  --brand: #2a8f98; --brand-2: #45b0b8; --brand-soft: #173a3f; --side: #0a1619; --side-ink: #a9c0c2;
  --red: #ef8377; --red-soft: #3c1f1c; --green: #6cc98f; --green-soft: #17352a; --amber: #e0b35a; --amber-soft: #352a13; --blue: #86b1e6; --blue-soft: #18293f;
  --chart-1: #2fb0bb; --chart-2: #e09a4b; --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
[data-theme=dark] .med-alert-box { border-color: #5a2e28; color: #f4c3bc; }
[data-theme=dark] .btn.primary, [data-theme=dark] .seg button.on { color: #fff; }
[data-theme=dark] .avatar { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 60% 80%); }

/* ==== Sidebar ==== */
.sidebar { background: linear-gradient(180deg, var(--side), color-mix(in srgb, var(--side) 88%, #1f7a80)); }
.nav-group { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--side-ink) 62%, transparent); margin: 14px 10px 5px; }
[dir=rtl] .nav-group { letter-spacing: 0; font-size: 12px; }
.nav-group:first-child { margin-top: 2px; }
.nav a { position: relative; transition: background .12s, color .12s; }
.nav a.active::before { content: ""; position: absolute; inset-inline-start: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: #58c6c9; }
[dir=rtl] .nav a.active::before { border-radius: 3px 0 0 3px; }

/* ==== Motion ==== */
@media (prefers-reduced-motion: no-preference) {
  #view > * { animation: rise .24s ease both; }
  #view > *:nth-child(2) { animation-delay: .03s; }
  #view > *:nth-child(3) { animation-delay: .06s; }
  dialog[open] { animation: pop .16s ease; }
  .card, .kpi { transition: border-color .15s, box-shadow .15s, transform .15s; }
  a.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20, 60, 65, .1); }
  .bar { animation: grow .5s cubic-bezier(.2, .8, .3, 1) both; transform-origin: bottom; }
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes pop { from { opacity: 0; transform: scale(.98) translateY(6px); } }
@keyframes grow { from { transform: scaleY(0); } }

/* ==== Dashboard ==== */
.hero-banner { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 26px; margin-bottom: 14px; border-radius: 16px; color: #fff; overflow: hidden; background: radial-gradient(circle at 88% -10%, #2d9aa1 0, transparent 46%), radial-gradient(circle at 12% 120%, #1c6d74 0, transparent 50%), #103a41; }
.hero-banner::after { content: ""; position: absolute; inset-inline-end: 230px; bottom: -46px; width: 190px; height: 190px; opacity: .09; background: center / contain no-repeat url(tooth.svg); pointer-events: none; }
.hero-text { position: relative; z-index: 1; display: grid; gap: 4px; }
.hero-text h1 { font-size: 25px; font-weight: 680; }
.hero-date { font-size: 13px; color: #a9d3d3; text-transform: capitalize; }
.hero-sub { color: #cfe5e4; margin-bottom: 10px; }
.btn.on-dark { background: #fff; border-color: #fff; color: #103a41; }
.btn.on-dark:hover { background: #e7f4f3; border-color: #e7f4f3; }
.btn.glass { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.btn.glass:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); }
.hero-stat { position: relative; z-index: 1; display: grid; gap: 1px; padding: 14px 20px; min-width: 210px; border-radius: 13px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.hero-stat span, .hero-stat small { color: #bcdcdb; font-size: 12.5px; }
.hero-stat strong { font-size: 27px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.kpi.with-icon { position: relative; padding-inline-start: 62px; min-height: 92px; justify-content: center; overflow: hidden; }
.kpi-icon { position: absolute; inset-inline-start: 14px; top: 16px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; }
.kpi-icon.teal { background: var(--brand-soft); color: var(--brand-2); }
.kpi-icon.red { background: var(--red-soft); color: var(--red); }
.kpi-icon.blue { background: var(--blue-soft); color: var(--blue); }
.kpi-icon.amber { background: var(--amber-soft); color: var(--amber); }
.spark { position: absolute; inset-inline-end: 12px; bottom: 12px; width: 62px; height: 20px; }
.spark-line { fill: none; stroke: var(--chart-1); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: var(--chart-1); opacity: .12; }
.cols-1 { margin-bottom: 14px; }
.donut-wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.donut { position: relative; width: 148px; height: 148px; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-arc { fill: none; stroke-width: 13; }
.donut-arc:hover { stroke-width: 15; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-center strong { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.donut-center small { color: var(--ink-3); font-size: 11px; }
.donut-legend { flex: 1; min-width: 170px; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.donut-legend li { display: flex; align-items: center; gap: 7px; }
.donut-legend .swatch { margin: 0; flex: none; }
.donut-legend b { font-variant-numeric: tabular-nums; }
.donut-legend small { min-width: 30px; text-align: end; }

/* ==== People ==== */
.avatar { width: 46px; height: 46px; border-radius: 50%; background: hsl(var(--h) 55% 91%); color: hsl(var(--h) 55% 27%); display: inline-grid; place-items: center; font-size: 16px; font-weight: 680; flex: none; letter-spacing: .3px; }
.avatar.sm { width: 30px; height: 30px; font-size: 11.5px; }
.avatar.lg { width: 56px; height: 56px; font-size: 19px; }
.who-cell { display: inline-flex; align-items: center; gap: 9px; }
.patient-head { background: linear-gradient(120deg, var(--surface), color-mix(in srgb, var(--brand-soft) 45%, var(--surface))); }
.patient-balance { min-width: 124px; gap: 2px; }
.progress { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 7px; width: 100%; }
.progress i { display: block; height: 100%; border-radius: 4px; background: var(--chart-1); transition: width .3s; }
.story { list-style: none; margin: 0; padding: 0; position: relative; }
.story::before { content: ""; position: absolute; inset-inline-start: 14px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.story li { position: relative; display: flex; align-items: center; gap: 11px; padding: 6px 0; }
.story-dot { position: relative; z-index: 1; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.story-dot .i { width: 15px; height: 15px; }
.story-payment .story-dot { background: var(--green-soft); color: var(--green); }
.story-prosthesis .story-dot { background: var(--amber-soft); color: var(--amber); }
.story-text { display: flex; flex-direction: column; min-width: 0; }
.story-text .clip { font-weight: 550; max-width: 100%; }

/* ==== Empty states ==== */
.empty-art { width: 76px; height: 76px; display: block; margin: 0 auto 8px; }
.ea-bg { fill: var(--brand-soft); }
.ea-tooth { fill: var(--surface); stroke: var(--brand-2); stroke-width: 2.4; stroke-linejoin: round; }
.ea-line { fill: none; stroke: var(--brand-2); stroke-width: 2.2; stroke-linecap: round; }
.empty p { margin: 0; }

/* ==== 3D mouth ==== */
.chart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 216px; gap: 16px; align-items: start; }
.chart-main { min-width: 0; }
.m3d { position: relative; height: 520px; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 46%, #2f5d65 0, #173a41 55%, #0c2428 100%); touch-action: none; }
.m3d.small { height: 360px; }
.m3d canvas { display: block; cursor: grab; }
.m3d canvas:active { cursor: grabbing; }
.m3d-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #bcdcdb; }
.m3d-tip { position: absolute; z-index: 3; pointer-events: none; padding: 5px 10px; border-radius: 7px; background: rgba(8, 24, 28, .92); color: #fff; font-size: 12.5px; white-space: nowrap; }
.m3d-side-tag { position: absolute; top: 12px; z-index: 2; padding: 2px 9px; font-size: 11.5px; border-radius: 99px; color: #cfe5e4; background: rgba(255, 255, 255, .08); pointer-events: none; }
.m3d-side-tag.left { left: 12px; }
.m3d-side-tag.right { right: 12px; }
.m3d-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 13px; }
.range { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.range input { width: 100px; padding: 0; accent-color: var(--brand-2); border: 0; }
.chart-card:fullscreen { background: var(--bg); padding: 18px; overflow: auto; margin: 0; }
.chart-card:fullscreen .m3d { height: calc(100vh - 170px); }
.chart-side { display: grid; gap: 10px; }
.health-score { padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); display: grid; }
.health-score strong { font-size: 27px; color: var(--brand-2); font-weight: 700; line-height: 1.1; }
.health-score strong small { font-size: 14px; font-weight: 550; opacity: .75; }
.health-score span { font-size: 12.5px; color: var(--ink-2); }
.status-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; font-size: 13px; }
.status-legend li { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; }
.status-legend li.dim { opacity: .5; }
.status-legend .leg .tooth-svg { width: 19px; height: 19px; display: block; }
.tooth-input { display: flex; align-items: center; gap: 3px; }
.tooth-input input { min-width: 0; }
.tooth-pick { color: var(--brand-2); background: var(--brand-soft); }
.tooth-pick:hover { background: var(--brand-2); color: #fff; }
.tooth-col { width: 148px; }
.picker3d { display: grid; gap: 10px; }
.picker-views { justify-self: center; }
.fdi-grid { display: grid; gap: 4px; justify-items: center; overflow-x: auto; }
.fdi-row { display: flex; gap: 3px; align-items: center; }
.fdi-row i { width: 2px; height: 22px; background: var(--line-strong); margin: 0 4px; }
.fdi-row button { width: 32px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.fdi-row button:hover { border-color: var(--brand-2); }
.fdi-row button.on { background: #1f8fd6; border-color: #1f8fd6; color: #fff; }
.picker-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.picker-count { font-weight: 620; color: var(--brand-2); }

/* ==== Sign-in ==== */
.auth { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr); padding: 0; place-items: stretch; background: var(--bg); }
.auth-art { position: relative; min-height: 100vh; overflow: hidden; background: radial-gradient(ellipse 80% 65% at 50% 42%, #2f6068 0, #143940 56%, #0a2125 100%); color: #fff; }
.auth-stage { position: absolute; inset: 0 0 90px; }
.auth-copy { position: absolute; inset-inline: 44px; bottom: 36px; }
.auth-copy h2 { margin: 0 0 4px; font-size: 24px; font-weight: 680; letter-spacing: -.3px; }
.auth-copy p { color: #bcdcdb; }
.auth-side { display: grid; place-items: center; padding: 24px 16px; }
.auth-card { box-shadow: 0 10px 40px rgba(15, 45, 50, .1); border: 1px solid var(--line); }

/* ==== Import and backup ==== */
.import-card { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.import-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-2); flex: none; }
.import-card .grow { min-width: 220px; }
.import-card h3 { margin-bottom: 2px; }
.import-card .hint { margin: 0; max-width: 62ch; }
.preview { max-height: 170px; border: 1px solid var(--line); border-radius: 8px; }
.import-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.import-result div { text-align: center; padding: 12px; border-radius: 10px; background: var(--surface-2); display: grid; }
.import-result strong { font-size: 26px; }
.import-result span { font-size: 12.5px; color: var(--ink-2); }
.progress-dlg { display: grid; gap: 8px; padding: 22px; }

@media (max-width: 1050px) {
  .chart-layout { grid-template-columns: minmax(0, 1fr); }
  .status-legend { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .hero-banner::after { display: none; }
}
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-art { display: none; }
  .auth-side { min-height: 100vh; }
}
@media (max-width: 760px) {
  .m3d { height: 380px; }
  .hero-banner { padding: 18px; }
  .hero-stat { width: 100%; }
  .hero-text h1 { font-size: 21px; }
  .import-result strong { font-size: 21px; }
}