/* Eyada — clinic management. Builds on /shared/tokens.css and /shared/base.css.
   Accent: Djerba's lagoon teal for the clinic, Sidi Bou Said blue for actions. */

:root { --ey: var(--djerba); --ey-wash: color-mix(in srgb, var(--djerba) 10%, var(--bg)); --side: 252px; --danger: var(--chechia); }
body.modal-open { overflow: hidden; }
.center { text-align: center; }
.spacer { flex: 1; }
.grow { flex: 1; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.danger-text { color: var(--danger); font-weight: 600; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-xs); border: 0; background: none; color: var(--muted); flex-shrink: 0; text-decoration: none; }
.icon-btn:hover { background: var(--surface); color: var(--text); }
.icon-btn .ico { width: 20px; height: 20px; }
.btn .ico { width: 20px; height: 20px; }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ey); }
:root[lang="ar"] .eyebrow { letter-spacing: 0; }

/* ---------- Welcome / onboarding ---------- */
.ey-welcome { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background:
  radial-gradient(1200px 600px at 50% -10%, var(--sky-1), transparent 60%), var(--surface); }
.ey-welcome-card { width: min(440px, 100%); display: grid; gap: 16px; justify-items: stretch; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px; box-shadow: var(--shadow-lg); }
.ey-welcome-card .field { text-align: start; }
.ey-welcome-card h1 { font-size: var(--fs-xl); }
.ey-welcome-card .lang { justify-self: center; }
.ey-arch { width: 120px; height: 140px; justify-self: center; display: grid; place-items: end center; padding-bottom: 26px; margin: 8px 0 12px; background: var(--ey); font-size: 1.6rem; font-weight: 600; }
.ey-center { min-height: 80vh; display: grid; place-items: center; padding: 24px; }

/* ---------- App shell ---------- */
body.in-app { background: var(--surface); }
#app { min-height: 100vh; }
body.in-app #app { display: grid; grid-template-columns: var(--side) 1fr; }
.ey-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px; background: var(--bg); border-inline-end: 1px solid var(--line); overflow-y: auto; }
.ey-side .brand { padding: 0 8px; }
.ey-clinic { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ey-wash); color: var(--ey); }
.ey-clinic .ico { width: 20px; height: 20px; }
.clinic-name { color: var(--text); font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clinic-switch { flex: 1; min-width: 0; border: 0; background: none; font-weight: 600; font-size: var(--fs-sm); color: var(--text); padding: 2px 0; }
.ey-nav { display: grid; gap: 2px; }
.ey-nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-weight: 500; }
.ey-nav-link:hover { background: var(--surface); }
.ey-nav-link.active { background: var(--text); color: var(--bg); }
.ey-side-foot { margin-top: auto; display: grid; gap: 12px; }
.ey-user { display: flex; align-items: center; gap: 10px; padding: 0 6px; min-width: 0; }
.ey-user > span:last-child { min-width: 0; display: grid; line-height: 1.3; }
.ey-user b, .ey-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.ey-user small { font-size: var(--fs-xs); }
.ey-side-foot .lang { justify-self: start; margin-inline-start: 6px; }
.sync-pill { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-align: start; }
.sync-pill .ico { width: 16px; height: 16px; }
.sync-pill.idle:not(.pending) .ico { color: var(--nabeul); }
.sync-pill.pending, .sync-pill.offline { color: var(--tozeur); border-color: color-mix(in srgb, var(--kairouan) 50%, var(--line)); }
.sync-pill.syncing .ico { animation: spin 1s linear infinite; }
.sync-pill.signedout, .sync-pill.error, .sync-pill.removed { color: var(--danger); }
@keyframes spin { to { transform: rotate(360deg); } }
.ey-main { min-width: 0; }
#view { outline: none; }
.ey-tabs, .ey-mtop { display: none; }
.ey-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 24px 0; padding: 12px 16px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--kairouan) 18%, var(--bg)); font-size: var(--fs-sm); }

/* ---------- Pages ---------- */
.ey-page { max-width: 1120px; margin: 0 auto; padding: 28px 28px 64px; display: grid; gap: 20px; align-content: start; }
.ey-page.narrow { max-width: 820px; }
.ey-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ey-page-head h1 { font-size: var(--fs-xl); line-height: 1.25; }
.ey-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.day-nav { display: flex; align-items: center; gap: 4px; }
.day-nav .input { width: auto; min-height: 40px; padding: 6px 10px; }
.toolbar { display: flex; gap: 10px; align-items: center; }
.toolbar .input { width: auto; min-height: 48px; }
.section-title { font-size: var(--fs-lg); margin-top: 8px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: var(--fs-sm); justify-self: start; }
.back-link .ico { width: 18px; height: 18px; }
.card { border-radius: var(--r-md); padding: 20px; display: grid; gap: 12px; align-content: start; }
.card h2 { font-size: var(--fs-lg); }
.card h3 { font-size: var(--fs-md); }
.card h4 { font-size: var(--fs-sm); color: var(--muted); margin: 8px 0 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.row-end { display: flex; justify-content: flex-end; gap: 10px; }
.row-end.wrap { flex-wrap: wrap; }

.search-box { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 48px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.search-box:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 18%, transparent); }
.search-box .ico { color: var(--muted); width: 20px; height: 20px; }
.search-box input { flex: 1; border: 0; outline: 0; background: none; min-height: 46px; min-width: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 2px; }
.stat b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--fs-xs); color: var(--muted); }
.stat.warn { border-color: color-mix(in srgb, var(--kairouan) 60%, var(--line)); background: color-mix(in srgb, var(--kairouan) 8%, var(--bg)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { text-decoration: none; }

/* Status chips */
.st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; background: var(--surface); }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-scheduled { color: var(--sidi-bou-said); background: var(--sidi-wash); }
.st-arrived { color: var(--tozeur); background: color-mix(in srgb, var(--kairouan) 18%, var(--bg)); }
.st-in_progress { color: var(--ey); background: var(--ey-wash); }
.st-done { color: var(--nabeul); background: color-mix(in srgb, var(--nabeul) 12%, var(--bg)); }
.st-cancelled, .st-no_show { color: var(--muted); }

/* ---------- Agenda ---------- */
.waiting { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; display: grid; gap: 12px; }
.waiting h2 { font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; color: var(--tozeur); }
.waiting h2 .ico { width: 20px; height: 20px; }
.waiting-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.wait-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); }
.wait-card.in-room { background: var(--ey-wash); }
.wait-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); font-weight: 700; flex-shrink: 0; }
.wait-n .ico { width: 18px; height: 18px; color: var(--ey); }
.wait-name { flex: 1; min-width: 0; display: grid; color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.3; }
.wait-name small { font-weight: 400; font-size: var(--fs-xs); }
.wait-name, .wait-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-list { display: grid; gap: 8px; }
.visit-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); border-inline-start: 4px solid var(--type); }
.visit-row.off { opacity: .55; }
.visit-time { width: 54px; display: grid; text-align: center; line-height: 1.2; font-variant-numeric: tabular-nums; }
.visit-time small { color: var(--muted); font-size: var(--fs-xs); }
.visit-main { flex: 1; min-width: 0; display: grid; }
.visit-name { color: var(--text); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visit-name:hover { text-decoration: underline; }
.visit-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Patients ---------- */
.plist { display: grid; gap: 6px; }
.prow { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); text-decoration: none; }
.prow:hover { border-color: var(--text); }
.prow-main { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.prow-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-side .chip .ico { width: 14px; height: 14px; }
.pfile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.pfile-head .avatar { font-size: var(--fs-lg); }
.pfile-id { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.pfile-id h1 { font-size: var(--fs-xl); line-height: 1.25; }
.alert-strip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--chechia) 10%, var(--bg)); color: var(--danger); font-weight: 600; font-size: var(--fs-sm); }
.alert-strip.in-dialog { margin: 0 24px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--muted); text-decoration: none; font-weight: 500; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.tabs a .ico { width: 18px; height: 18px; }
.tabs a.active { color: var(--text); border-bottom-color: var(--ey); }
.tabs .count { font-size: var(--fs-xs); background: var(--surface-2); border-radius: var(--r-pill); padding: 0 7px; }
#tab-body { display: grid; gap: 14px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 12px; font-size: var(--fs-sm); padding: 6px 0; border-bottom: 1px dashed var(--line); }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--muted); }
.kv b { font-weight: 500; }
.mini-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); padding: 6px 0; border: 0; background: none; text-align: start; width: 100%; color: inherit; min-width: 0; }
.mini-row .ico { width: 18px; height: 18px; color: var(--ey); }
.mini-row.link:hover { color: var(--link); }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.list-head h2 { font-size: var(--fs-lg); }
.timeline { display: grid; gap: 10px; }
.tl-item { display: flex; gap: 16px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); }
.tl-item.clickable { cursor: pointer; }
.tl-item.clickable:hover { border-color: var(--text); }
.tl-date { width: 92px; flex-shrink: 0; display: grid; align-content: start; font-size: var(--fs-sm); }
.tl-date small { color: var(--muted); }
.tl-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.tl-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; }
.doc-list { display: grid; gap: 10px; }
.doc-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; display: grid; gap: 8px; }
.doc-card header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rx-lines { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: var(--fs-sm); }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.file-card { display: grid; gap: 6px; padding: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); text-decoration: none; min-width: 0; }
.file-card:hover { border-color: var(--text); }
.file-card[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.file-thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--surface); border-radius: var(--r-xs); overflow: hidden; color: var(--muted); }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-thumb .ico { width: 32px; height: 32px; }
.file-name { font-size: var(--fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone { border: 2px dashed var(--line); border-radius: var(--r-md); padding: 18px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.dropzone.over { border-color: var(--ey); background: var(--ey-wash); color: var(--text); }

.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; font-size: var(--fs-sm); }
.table th, .table td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; background: var(--surface); }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tr.low td:first-child { box-shadow: inset 3px 0 0 var(--kairouan); }
.table a { color: var(--text); }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper .icon-btn { width: 30px; height: 30px; font-size: 1.1rem; font-weight: 600; }
.stepper b { min-width: 2.5ch; text-align: center; }
.qty-input { width: 90px; min-height: 40px; text-align: end; }

/* ---------- Empty states ---------- */
.ey-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 40px 16px; background: var(--bg); border: 1px dashed var(--line); border-radius: var(--r-md); }
.ey-empty-art { width: 64px; height: 76px; display: grid; place-items: center; color: #fff; background: var(--ey); border-radius: 50% 50% 10px 10px / 40% 40% 10px 10px; box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--line); }
.ey-empty-art .ico { width: 28px; height: 28px; }
.ey-empty h3 { font-size: var(--fs-md); }
.ey-empty p { max-width: 42ch; font-size: var(--fs-sm); }

/* ---------- Dialogs ---------- */
.ey-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(13, 22, 38, .45); animation: fade .15s; }
.ey-dialog { width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--bg); border-radius: var(--r-md); box-shadow: var(--shadow-lg); animation: rise .18s; }
.ey-dialog.wide { width: min(820px, 100%); }
.ey-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 12px; }
.ey-dialog-head h2 { font-size: var(--fs-lg); line-height: 1.3; }
.ey-dialog-body { padding: 8px 24px 16px; overflow-y: auto; display: grid; gap: 14px; }
.ey-dialog-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.form-grid.nested { padding: 14px; border-radius: var(--r-sm); background: var(--surface); }
.span-2 { grid-column: 1 / -1; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset legend { font-weight: 600; font-size: var(--fs-sm); color: var(--ey); padding: 0; margin-bottom: 10px; }
form#pform { gap: 22px; }
.field textarea { min-height: 0; resize: vertical; }
.input.compact { width: auto; min-height: 38px; padding: 4px 10px; }
.picker { display: grid; gap: 6px; }
.picker-list { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; }
.picker-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: var(--r-xs); background: none; text-align: start; width: 100%; }
.picker-item:hover, .picker-item:focus-visible { background: var(--surface); }
.picker-item > span { display: grid; min-width: 0; line-height: 1.3; }
.picker-item.new { color: var(--link); font-weight: 500; }
.picker-item .ico { width: 20px; height: 20px; }
.picked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); }
.picked > span { flex: 1; display: grid; line-height: 1.3; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg); justify-self: start; }
.seg label, .seg a { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span, .seg a { display: block; padding: 7px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; color: var(--muted); text-decoration: none; }
.seg input:checked + span, .seg a.on { background: var(--text); color: var(--bg); }
.seg input:focus-visible + span { outline: 2.5px solid var(--link); }
.small-seg a { padding: 5px 12px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.check { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-xs); cursor: pointer; font-size: var(--fs-sm); }
.check:has(input:checked) { border-color: var(--ey); background: var(--ey-wash); }

/* Consultation */
.vitals { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.vital { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.vital span { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.vital input { border: 0; background: none; padding: 0; width: 100%; font-weight: 600; outline: 0; direction: ltr; }
.vital.bmi b { font-weight: 700; }
.consult-docs { display: flex; gap: 8px; flex-wrap: wrap; }

/* Prescription editor */
.drug-search { display: grid; gap: 4px; }
.rx-edit { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: rx; }
.rx-line { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); display: grid; gap: 8px; counter-increment: rx; }
.rx-line-head { display: flex; align-items: center; gap: 8px; }
.rx-line-head b::before { content: counter(rx) ". "; color: var(--muted); }
.rx-line-head b { flex: 1; }
.rx-line-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.rx-line-grid .input { min-height: 42px; }
.rx-line-grid .span-3 { grid-column: 1 / -1; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.quick .chip { border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-weight: 500; }
.quick .chip:hover { border-color: var(--ey); }
.rx-empty { padding: 12px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-sm); }

/* Team */
.team { display: grid; gap: 4px; }
.member { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.member:last-child { border-bottom: 0; }
.member .grow { display: grid; line-height: 1.3; }
.invite-form { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-sm); background: var(--surface); }
.copy-box { display: flex; gap: 8px; }
.copy-box .input { min-height: 42px; direction: ltr; }
.history { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.history li { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.history dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0 0; font-size: var(--fs-sm); }
.history dt { color: var(--muted); }
.history dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Phones and tablets ---------- */
@media (max-width: 1000px) {
  :root { --side: 220px; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body.in-app #app { display: block; }
  .ey-side { display: none; }
  .ey-mtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 15; }
  .ey-mtop .brand > span { overflow: hidden; text-overflow: ellipsis; max-width: 55vw; font-size: var(--fs-sm); }
  .ey-mtop .sync-pill { padding: 6px 10px; }
  .ey-mtop .sync-pill:not(.pending):not(.offline):not(.signedout):not(.error) span { display: none; }
  .ey-tabs { display: flex; position: fixed; inset: auto 0 0 0; z-index: 20; background: var(--bg); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .ey-tab { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; font-size: .6875rem; font-weight: 500; color: var(--muted); text-decoration: none; border-radius: var(--r-xs); }
  .ey-tab.active { color: var(--ey); }
  .ey-tab .ico { width: 22px; height: 22px; }
  .ey-page { padding: 18px 16px 96px; gap: 16px; }
  .ey-page-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .ey-head-actions { flex-wrap: nowrap; }
  .day-nav { flex: 1; min-width: 0; }
  .day-nav .input { flex: 1; min-width: 0; }
  .ey-head-actions .btn span { display: none; }
  .ey-head-actions .btn { padding: 0 14px; }
  .visit-row { flex-wrap: wrap; gap: 10px; }
  .visit-row .avatar { display: none; }
  .visit-side { width: 100%; justify-content: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .rx-line-grid { grid-template-columns: 1fr 1fr; }
  .rx-line-grid > :first-child { grid-column: 1 / -1; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .tl-item { flex-direction: column; gap: 6px; }
  .ey-modal { padding: 0; place-items: end stretch; }
  .ey-dialog, .ey-dialog.wide { width: 100%; max-height: 92vh; border-radius: var(--r-md) var(--r-md) 0 0; }
  .ey-dialog-head, .ey-dialog-body, .ey-dialog-foot { padding-inline: 16px; }
  .alert-strip.in-dialog { margin: 0 16px; }
  .ey-banner { margin: 12px 16px 0; }
  .table th, .table td { padding: 8px 10px; }
}

/* ---------- Printing (A5) ---------- */
#print-area { display: none; }
@media print {
  @page { size: A5; margin: 12mm 12mm 14mm; }
  body.printing > :not(#app), body.printing #app > :not(#print-area) { display: none !important; }
  body.printing #app { display: block !important; }
  body.printing #print-area { display: block; }
  body.printing { background: #fff; color: #000; font-size: 11pt; }
  .sheet { font-family: var(--font); line-height: 1.45; }
  .lh { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1.5px solid #000; }
  .lh-text { font-size: 10pt; }
  .lh-text.ar { text-align: right; }
  .doc-meta { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 4px; font-size: 10.5pt; }
  .doc-title { font-size: 15pt; text-align: center; margin: 14px 0 10px; letter-spacing: .04em; }
  .doc-rx { padding-inline-start: 20px; display: grid; gap: 10px; margin: 12px 0; }
  .doc-rx .qty { float: inline-end; }
  .doc-exams { columns: 2; margin: 12px 0; padding-inline-start: 20px; }
  .doc-body { text-align: justify; margin: 12px 0; }
  .doc-note { margin: 10px 0; font-size: 10pt; }
  .doc-sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 24px; break-inside: avoid; }
  .doc-sign .qr { display: flex; gap: 8px; align-items: flex-end; font-size: 7.5pt; }
  .doc-sign .qr svg { width: 22mm; height: 22mm; }
  .doc-sign .sig { min-width: 45mm; min-height: 22mm; text-align: center; font-size: 9pt; border-top: 1px dotted #000; padding-top: 2px; align-self: flex-end; }
  .doc-foot { position: fixed; bottom: 0; left: 0; right: 0; text-align: center; font-size: 8.5pt; border-top: 1px solid #000; padding-top: 3px; }
}

/* ---------- Week view ---------- */
.ey-page.wide { max-width: 1400px; }
.week-scroll { overflow: auto; max-height: calc(100vh - 200px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.week { min-width: 760px; }
.wk-head, .wk-body { display: grid; grid-template-columns: 56px repeat(var(--days), minmax(0, 1fr)); }
.wk-head { position: sticky; top: 0; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--line); }
.wk-day { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 10px 4px; color: var(--text); text-decoration: none; border-inline-start: 1px solid var(--line); }
.wk-day small { color: var(--muted); text-transform: capitalize; }
.wk-day b { font-size: var(--fs-lg); }
.wk-day.today b { background: var(--ey); color: #fff; border-radius: var(--r-pill); padding: 0 9px; }
.wk-day .count { font-size: var(--fs-xs); background: var(--surface-2); border-radius: var(--r-pill); padding: 0 7px; }
.wk-times { position: relative; }
.wk-times span { position: absolute; inset-inline-end: 8px; transform: translateY(-50%); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.wk-times span:first-child { transform: none; }
.wk-col { position: relative; border-inline-start: 1px solid var(--line); cursor: copy; }
.wk-col.today { background: var(--ey-wash); }
.wk-line { position: absolute; inset-inline: 0; border-top: 1px dashed var(--line); pointer-events: none; }
.wk-now { position: absolute; inset-inline: 0; border-top: 2px solid var(--chechia); z-index: 2; pointer-events: none; }
.wk-now::before { content: ""; position: absolute; inset-inline-start: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--chechia); }
.wk-appt { position: absolute; z-index: 1; display: block; overflow: hidden; padding: 3px 6px; margin-inline-start: 1px; border: 0; border-inline-start: 3px solid var(--type); border-radius: 6px;
  background: color-mix(in srgb, var(--type) 14%, var(--bg)); color: var(--text); text-align: start; font-size: var(--fs-xs); line-height: 1.3; cursor: pointer; }
.wk-appt:hover { background: color-mix(in srgb, var(--type) 24%, var(--bg)); z-index: 2; }
.wk-appt b { font-variant-numeric: tabular-nums; }
.wk-appt small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-appt span { font-weight: 600; }
.wk-appt.st-done { opacity: .7; }
.wk-appt.st-arrived, .wk-appt.st-in_progress { box-shadow: inset 0 0 0 1.5px var(--type); }
.wk-appt.off { opacity: .45; text-decoration: line-through; }
.wk-untimed { position: absolute; top: 2px; inset-inline: 2px; display: grid; gap: 2px; z-index: 2; }
.wk-appt.mini { position: static; width: 100%; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Specialty setup ---------- */
.profile-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.profile-card { position: relative; cursor: pointer; }
.profile-card input { position: absolute; opacity: 0; }
.profile-card > span { display: grid; gap: 4px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); height: 100%; text-align: start; }
.profile-card .ico { color: var(--ey); width: 26px; height: 26px; }
.profile-card small { font-size: var(--fs-xs); line-height: 1.4; }
.profile-card input:checked + span { border-color: var(--ey); box-shadow: inset 0 0 0 1.5px var(--ey); background: var(--ey-wash); }
.profile-card input:focus-visible + span { outline: 2.5px solid var(--link); }
.profile-card input:disabled + span { cursor: default; }

/* Consultation blocks and acts */
.consult-block { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; display: grid; gap: 10px; }
.consult-block legend { padding: 0 6px; margin: 0; }
.consult-inline { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface); }
.consult-inline .ico { width: 18px; height: 18px; color: var(--ey); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-3 { grid-column: 1 / -1; }
.act-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.act-pick select { flex: 2 1 220px; width: auto; min-height: 42px; }
.act-pick input { flex: 1 1 80px; width: auto; min-height: 42px; }
.acts-table td { padding: 6px 10px; }
.table tfoot td { background: var(--surface); font-weight: 500; }
.table tr.muted-row td { color: var(--muted); }

/* ---------- Dental chart ---------- */
.odonto { display: grid; gap: 6px; padding: 8px 0; overflow-x: auto; }
.odonto-row { display: flex; justify-content: center; gap: 10px; }
.odonto-row.lower { padding-top: 6px; border-top: 1px dashed var(--line); }
.quad { display: flex; gap: 2px; }
.quad + .quad { padding-inline-start: 10px; border-inline-start: 1px dashed var(--line); }
.tooth { display: grid; justify-items: center; gap: 1px; width: 46px; padding: 4px 0; border: 1.5px solid transparent; border-radius: 8px; background: none; color: var(--muted); font-size: .6875rem; font-variant-numeric: tabular-nums; position: relative; }
.tooth svg { width: 32px; height: 38px; }
.lower .tooth svg { transform: scaleY(-1); }
.tooth:hover { background: var(--surface); }
.tooth.sel { border-color: var(--ey); }
.tooth.planned::after { content: ""; position: absolute; top: 2px; inset-inline-end: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--kairouan); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i, .status-btn i { width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--bg)); border: 1.5px solid var(--c, var(--line)); }
.legend i.extract, .status-btn i.extract { background: var(--bg); border-style: dashed; }
.legend i.missing, .status-btn i.missing { background: var(--bg); }
.legend .plan-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kairouan); border: 0; }
.status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.status-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--r-xs); background: var(--bg); font-size: var(--fs-sm); text-align: start; }
.status-btn.on { border-color: var(--ey); background: var(--ey-wash); font-weight: 600; }
.tooth-plan { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.tooth-plan h3 { font-size: var(--fs-sm); }

/* ---------- Obstetrics ---------- */
.preg-card { border-color: color-mix(in srgb, var(--chechia) 30%, var(--line)); }
.preg-bar { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.preg-bar span { position: absolute; inset-block: 0; inset-inline-start: 0; background: linear-gradient(90deg, var(--kairouan), var(--chechia)); border-radius: inherit; }
.preg-bar i { position: absolute; inset-block: 0; width: 2px; background: var(--bg); }
.milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.milestones li { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: var(--r-xs); font-size: var(--fs-sm); }
.milestones li.past { color: var(--muted); }
.milestones li.past .ms-label { text-decoration: line-through; text-decoration-color: var(--line); }
.milestones li.now { background: color-mix(in srgb, var(--kairouan) 16%, var(--bg)); font-weight: 600; }
.ms-weeks { font-variant-numeric: tabular-nums; color: var(--ey); font-weight: 600; }
.ob-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { padding: 6px 12px; border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-sm); }

@media (max-width: 760px) {
  .week-scroll { max-height: none; }
  .form-grid.three { grid-template-columns: 1fr 1fr; }
  .status-grid { grid-template-columns: 1fr 1fr; }
  .milestones li { grid-template-columns: 70px 1fr; }
  .milestones .ms-date { grid-column: 2; }
  .tooth { width: 30px; }
  .tooth svg { width: 20px; height: 24px; }
  .odonto-row { gap: 4px; justify-content: flex-start; }
}
@media print {
  .doc-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 10pt; }
  .doc-table th, .doc-table td { border-bottom: 1px solid #999; padding: 4px 6px; text-align: start; }
  .doc-table .num { text-align: end; }
  .doc-table tfoot td { border-top: 1.5px solid #000; }
}
.ey-dialog-body > *, .consult-block > * { min-width: 0; }
@media (max-width: 760px) { .card { overflow-x: auto; } }

/* ---------- Month view ---------- */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg); }
.mo-head { padding: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-align: center; background: var(--surface); text-transform: capitalize; }
.mo-day { min-height: 104px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-top: 1px solid var(--line); border-inline-start: 1px solid var(--line); color: var(--text); text-decoration: none; overflow: hidden; }
.mo-day:nth-child(7n + 1) { border-inline-start: 0; }
.mo-day:hover { background: var(--surface); }
.mo-day.other { color: var(--muted); background: color-mix(in srgb, var(--surface) 50%, var(--bg)); }
.mo-day.today .mo-n { background: var(--ey); color: #fff; border-radius: var(--r-pill); padding: 0 7px; }
.mo-n { font-weight: 600; font-size: var(--fs-sm); align-self: flex-start; }
.mo-appt { font-size: .6875rem; padding: 1px 5px; border-radius: 4px; border-inline-start: 3px solid var(--type); background: color-mix(in srgb, var(--type) 12%, var(--bg)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-more { font-size: .6875rem; color: var(--muted); }
.wk-col.over { background: color-mix(in srgb, var(--ey) 14%, var(--bg)); }
.wk-appt[draggable="true"] { cursor: grab; }

/* ---------- Waiting-room board ---------- */
.quick-add { width: min(320px, 100%); position: relative; }
.quick-add .picker-list { position: absolute; z-index: 20; inset-inline: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
.quick-add .picker-list:empty { display: none; }
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; }
.bd-col { background: var(--surface-2); border-radius: var(--r-md); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 300px; }
.bd-col.over { outline: 2px dashed var(--ey); background: var(--ey-wash); }
.bd-col h2 { font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.bd-col .count { font-size: var(--fs-xs); background: var(--bg); border-radius: var(--r-pill); padding: 0 8px; }
.bd-list { display: grid; gap: 8px; align-content: start; flex: 1; }
.bd-card { background: var(--bg); border-radius: var(--r-sm); padding: 10px 12px; border-inline-start: 4px solid var(--type); box-shadow: var(--shadow-sm); display: grid; gap: 4px; cursor: grab; }
.bd-card.dragging { opacity: .5; }
.bd-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bd-q { min-width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); font-weight: 700; font-size: var(--fs-xs); flex-shrink: 0; }
.bd-name { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-actions:empty { display: none; }

/* ---------- Drugs and documents ---------- */
.toolbar.wrap { flex-wrap: wrap; }
.drug-row { cursor: pointer; }
.star { font-size: 1.2rem; color: var(--line); }
.star.on { color: var(--kairouan); }
.global-search { position: relative; }
.global-search .search-box { min-height: 40px; padding: 0 10px; }
.global-search .search-box input { min-height: 38px; font-size: var(--fs-sm); }
.global-search .picker-list { position: absolute; z-index: 30; inset-inline: 0; top: 44px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); width: 320px; }
.global-search .picker-list:empty { display: none; }
.narrow-only { display: none; }

/* ---------- Revenue chart ---------- */
.chart { width: 100%; height: auto; }
.chart text { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.chart .axis { stroke: var(--line); }
.chart .bar-billed { fill: color-mix(in srgb, var(--sidi-bou-said) 30%, var(--bg)); }
.chart .bar-received { fill: var(--nabeul); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline: 8px 4px; vertical-align: -1px; }
.legend-dot.billed { background: color-mix(in srgb, var(--sidi-bou-said) 30%, var(--bg)); }
.legend-dot.received { background: var(--nabeul); }

/* ---------- Printing settings ---------- */
.logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-box { width: 120px; height: 72px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: var(--r-xs); overflow: hidden; background: #fff; }
.logo-box img { max-width: 100%; max-height: 100%; }
@media print {
  .lh-logo { max-height: 22mm; max-width: 40mm; object-fit: contain; }
}

@media (max-width: 760px) {
  .narrow-only { display: flex; }
  .board { grid-template-columns: repeat(4, minmax(240px, 85vw)); }
  .mo-day { min-height: 64px; padding: 4px; }
  .mo-appt { display: none; }
  .mo-day:has(.mo-appt)::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ey); }
  .quick-add { width: 100%; }
}
.member .grow .chip { justify-self: start; }

/* ---------- Custom print layouts ---------- */
.ey-dialog.full { width: min(1200px, 100%); height: calc(100vh - 32px); }
.ld { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ld-main { display: grid; grid-template-columns: 1fr 280px; gap: 16px; min-height: 0; flex: 1; }
.ld-stage { overflow: auto; background: var(--surface-2); border-radius: var(--r-sm); padding: 16px; display: flex; justify-content: center; align-items: flex-start; }
.ld-page { position: relative; flex-shrink: 0; background: #fff center / 100% 100% no-repeat; box-shadow: var(--shadow-lg); color: #000; font-family: var(--font); line-height: 1.35; direction: ltr; }
.ld-block { position: absolute; min-height: 12px; border: 1px dashed rgba(14, 154, 164, .55); border-radius: 3px; cursor: move; user-select: none; touch-action: none; background: rgba(255, 255, 255, .55); }
.ld-block.sel { border: 1.5px solid var(--djerba); box-shadow: 0 0 0 3px rgba(14, 154, 164, .18); z-index: 2; }
.ld-block.hidden-block { opacity: .3; }
.ld-tag { position: absolute; top: -15px; inset-inline-start: -1px; font-size: 10px; line-height: 14px; padding: 0 5px; border-radius: 3px 3px 0 0; background: var(--djerba); color: #fff; white-space: nowrap; font-family: var(--font); display: none; }
.ld-block.sel .ld-tag, .ld-block:hover .ld-tag { display: block; }
.ld-content { overflow: hidden; pointer-events: none; }
.ld-content .lh-logo { max-width: 100%; max-height: 60px; }
.ld-content svg { width: 100%; height: auto; max-width: 66px; }
.ld-content ol, .ld-content ul { margin: 0; padding-inline-start: 1.2em; }
.ld-content table { width: 100%; border-collapse: collapse; }
.ld-resize { position: absolute; inset-inline-end: -5px; bottom: -5px; width: 10px; height: 10px; border-radius: 2px; background: var(--djerba); cursor: ew-resize; display: none; }
.ld-block.sel .ld-resize { display: block; }
.ld-side { display: grid; gap: 12px; align-content: start; overflow-y: auto; }
.ld-side h3 { font-size: var(--fs-md); margin-top: 6px; }
.ld-side .form-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.ld-side input[type=number] { min-height: 40px; }
.ld-guide { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ld-guide small { flex-basis: 100%; }
.layout-list { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) { .ld-main { grid-template-columns: 1fr; } }
@media print {
  .lp { position: relative; overflow: hidden; font-family: var(--font); line-height: 1.35; color: #000; }
  .lp-block { position: absolute; }
  .lp-block ol, .lp-block ul { margin: 0; padding-inline-start: 1.2em; }
  .lp-block .lh-logo { max-width: 100%; max-height: 30mm; }
  .lp-qr svg { width: 100%; height: auto; }
  .lp-qr .qr { display: block; }
  .lp-qr small { display: block; font-size: 6pt; margin-top: 1mm; }
  .lp-title { font-weight: 600; }
  .lp-block .doc-table { margin: 0; }
}

/* ---------- Prescribing: templates, safety, APCI, dictation ---------- */
.rx-tools { display: flex; gap: 8px; align-items: flex-start; }
.rx-tools select { width: auto; max-width: 220px; min-height: 48px; }
.safety { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--kairouan) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--kairouan) 40%, var(--line)); }
.safety-item { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); }
.safety-item .ico { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.safety-item.major { color: var(--danger); }
.safety-item.caution { color: var(--tozeur); }
.apci-box { display: grid; gap: 6px; align-content: end; }
.has-mic { position: relative; }
.has-mic > input, .has-mic > textarea { padding-inline-end: 44px; }
.mic { position: absolute; inset-inline-end: 6px; bottom: 6px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--muted); }
.mic .ico { width: 18px; height: 18px; }
.mic.on { background: var(--chechia); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--chechia) 25%, transparent); } }
.access-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.access-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.warn-text { color: var(--tozeur); }

/* ---------- Pediatrics ---------- */
.growth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.growth-chart { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; }
.growth-chart figcaption { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }
.growth-chart svg { width: 100%; height: auto; }
.growth-chart text { font-size: 10px; fill: var(--muted); font-family: var(--font); }
.growth-chart .grid { stroke: var(--line); stroke-dasharray: 2 3; }
.growth-chart .pct { fill: none; stroke: color-mix(in srgb, var(--sidi-bou-said) 45%, var(--bg)); stroke-width: 1.2; }
.growth-chart .pct.outer { stroke: color-mix(in srgb, var(--chechia) 40%, var(--bg)); }
.growth-chart .pct.p50 { stroke: var(--nabeul); stroke-width: 1.8; }
.growth-chart .pct-label { font-size: 9px; }
.growth-chart .child { fill: none; stroke: var(--text); stroke-width: 2; }
.growth-chart .child-dot { fill: var(--text); stroke: var(--bg); stroke-width: 1.5; }
.pct-chip { font-size: var(--fs-xs); color: var(--muted); margin-inline-start: 4px; }
.pct-chip.out { color: var(--danger); font-weight: 600; }
.vac-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vac { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface); }
.vac .grow { display: grid; line-height: 1.3; }
.vac-state .ico { width: 20px; height: 20px; }
.vac.done .vac-state { color: var(--nabeul); }
.vac.late .vac-state { color: var(--danger); }
.vac.next .vac-state { color: var(--muted); }

/* ---------- Cardiology ---------- */
.chip.toggle { border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-weight: 500; }
.chip.toggle.on { background: var(--chechia); border-color: var(--chechia); color: #fff; }
.mini-row.column { flex-direction: column; align-items: flex-start; gap: 2px; border-bottom: 1px dashed var(--line); }

/* ---------- Ophthalmology ---------- */
.eye-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.eye-table th { font-weight: 600; text-align: start; padding: 4px 6px; color: var(--muted); font-size: var(--fs-xs); }
.eye-table tbody th { color: var(--text); white-space: nowrap; }
.eye-table td { padding: 3px; }
.eye-in { min-height: 38px; padding: 6px 8px; text-align: center; direction: ltr; }
@media (max-width: 760px) {
  .eye-table, .eye-table tbody, .eye-table tr { display: block; }
  .eye-table thead { display: none; }
  .eye-table tr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
  .eye-table tbody th { grid-column: 1 / -1; }
  .rx-tools { flex-direction: column; align-items: stretch; }
  .rx-tools select { max-width: none; }
}

/* ---------- Printed care form and glasses ---------- */
@media print {
  .bs-act { display: flex; justify-content: space-between; gap: 8px; }
  .bs-acts { margin: 8px 0; border-top: 1px solid #999; padding-top: 6px; }
  .bs-total { text-align: end; }
  .doc-table.glasses th, .doc-table.glasses td { text-align: center; }
}

/* ---------- Online booking (Maw'id) ---------- */
.st-requested { color: var(--tozeur); background: color-mix(in srgb, var(--kairouan) 22%, var(--bg)); }
.wk-appt.st-requested { outline: 1.5px dashed var(--kairouan); outline-offset: -2px; }
.chip.mawid { background: color-mix(in srgb, var(--nabeul) 16%, var(--bg)); color: var(--nabeul); }
.requests { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-md); background: color-mix(in srgb, var(--kairouan) 12%, var(--bg)); border: 1px solid color-mix(in srgb, var(--kairouan) 40%, var(--line)); }
.requests h2 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.request-days { display: flex; flex-wrap: wrap; gap: 6px; }
.request-days .chip { text-decoration: none; }
.booking-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.booking-types .check { display: flex; align-items: center; gap: 8px; }
.booking-types .check > span:first-of-type { flex: 1; }
.booking-hours { display: grid; gap: 6px; }
.booking-hours label { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; }
.booking-hours label > span { font-size: var(--fs-sm); text-transform: capitalize; }
#booking-card h2 { display: flex; align-items: center; gap: 8px; }

/* ---------- Image viewer (documents) ---------- */
.file-thumb { position: relative; }
.file-badge { position: absolute; inset-inline-start: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: var(--r-pill); background: rgba(10,14,22,.78); color: #fff; font-size: 11px; font-weight: 600; }
.file-badge + .file-badge { inset-inline-start: auto; inset-inline-end: 6px; }
.file-badge .ico { width: 12px; height: 12px; }
.vw { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); background: #0A0E16; color: #E9EEF6; outline: none; }
.vw .muted { color: #9AA6BA; }
.vw-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #1E2738; }
.vw-title { display: grid; min-width: 0; }
.vw-title b, .vw-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-title small { color: #9AA6BA; font-size: var(--fs-xs); }
.vw-spacer { flex: 1; }
.vw-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 0; background: none; color: inherit; text-decoration: none; flex-shrink: 0; }
.vw-btn:hover { background: #1A2333; }
.vw-btn[aria-pressed="true"] { background: #E9EEF6; color: #0A0E16; }
.vw-btn.small { width: 32px; height: 32px; }
.vw-btn .ico { width: 21px; height: 21px; }
.vw-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.vw.no-panel .vw-body { grid-template-columns: minmax(0, 1fr); }
.vw.no-panel .vw-panel { display: none; }
.vw-stage { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.vw-stage canvas { position: absolute; inset: 0; display: block; }
.vw-msg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 24px; color: #C9D2E0; }
.vw-msg .btn { color: #E9EEF6; border-color: #2A3548; background: #121a28; }
.vw-panel { border-inline-start: 1px solid #1E2738; overflow-y: auto; overflow-x: hidden; padding: 14px 16px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; background: #0D131E; }
.vw-panel h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: #9AA6BA; margin-bottom: 8px; }
:root[lang="ar"] .vw-panel h3 { text-transform: none; letter-spacing: 0; }
.vw-panel section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.vw-panel p { font-size: var(--fs-sm); }
.vw-panel .btn { color: #E9EEF6; border-color: #2A3548; background: #121a28; }
.vw-panel .btn-blue { background: var(--sidi-bou-said); border-color: transparent; }
.vw-panel .input { background: #0A0E16; color: #E9EEF6; border-color: #2A3548; min-height: 40px; }
.vw-ok { color: #7CF29A; }
.vw-warn { color: #FFD60A; }
.vw-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vw-row .input { flex: 1; min-width: 0; }
.vw-row select.input { flex: 0 0 76px; }
.vw-cal { display: grid; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid #2E5E3E; background: #0F1D16; }
.vw-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.vw-list li { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 8px; min-width: 0; }
.vw-list li.on { background: #13243A; box-shadow: inset 0 0 0 1px #4CC9F0; }
.vw-pick { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: #FFD60A; }
.vw-list li.on .vw-pick { color: #4CC9F0; }
.vw-pick .ico { width: 18px; height: 18px; }
.vw-label { flex: 1; min-width: 0; width: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; color: inherit; }
.vw-label:hover, .vw-label:focus { border-color: #2A3548; outline: none; background: #0A0E16; }
.vw-val { display: grid; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; white-space: nowrap; }
.vw-val small { font-weight: 400; color: #9AA6BA; font-size: 11px; }
.vw-info { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: var(--fs-sm); }
.vw-info dt { color: #9AA6BA; }
.vw-info dd { margin: 0; overflow-wrap: anywhere; }
.vw-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 8px 12px; border-top: 1px solid #1E2738; background: #0D131E; }
.vw-group { display: flex; align-items: center; gap: 2px; }
.vw-zoom { min-width: 54px; text-align: center; font-size: var(--fs-xs); color: #C9D2E0; font-variant-numeric: tabular-nums; }
.vw-frames input[type=range] { width: 160px; accent-color: #4CC9F0; }
@media (max-width: 760px) {
  .vw-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .vw-panel { border-inline-start: 0; border-top: 1px solid #1E2738; max-height: 38vh; }
  .vw-tools { gap: 4px 8px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .vw-frames input[type=range] { width: 100px; }
}

.ey-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ---------- Shared sessions and workstations ---------- */
.ey-shared { display: grid; gap: 6px; padding: 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--kairouan) 14%, var(--bg)); font-size: var(--fs-xs); }
.ey-shared span { display: flex; align-items: center; gap: 6px; }
.ey-shared .ico { width: 16px; height: 16px; }
.ws-card { gap: 14px; }
.ws-staff { display: grid; gap: 8px; }
.ws-person { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); text-align: start; }
.ws-person span:last-child { display: grid; }
.ws-person:disabled { opacity: .55; }
.ws-pin { text-align: center; font-size: 1.8rem; letter-spacing: .4em; min-height: 2.4rem; }
.ws-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ws-keys button { min-height: 56px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); font-size: var(--fs-lg); font-weight: 600; }

/* ---------- Dragging (waiting room, week) ---------- */
body.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.drag-grip { display: inline-grid; place-items: center; width: 22px; height: 28px; margin-inline-end: 2px; color: var(--muted); cursor: grab; touch-action: none; flex-shrink: 0; }
.drag-grip svg { width: 16px; height: 16px; fill: currentColor; }
.sort-drag { box-shadow: var(--shadow-lg); opacity: .95; cursor: grabbing; transform: rotate(-1deg); }
.sort-ph { border: 2px dashed color-mix(in srgb, var(--link) 55%, var(--line)); border-radius: var(--r-sm); background: color-mix(in srgb, var(--link) 6%, transparent); }
.wait-card.is-waiting, .bd-card { cursor: grab; }
.bd-top { display: flex; align-items: center; gap: 4px; }
.wk-appt.movable { cursor: grab; }
.wk-appt .drag-grip { position: absolute; top: 0; inset-inline-end: 0; width: 22px; height: 22px; display: none; }
.wk-resize { position: absolute; inset-inline: 0; bottom: 0; height: 7px; cursor: ns-resize; touch-action: none; }
.wk-appt.movable:hover .wk-resize { background: linear-gradient(transparent, color-mix(in srgb, var(--type) 45%, transparent)); }
.wk-dragging { z-index: 20; box-shadow: var(--shadow-lg); opacity: .92; cursor: grabbing; }
@media (pointer: coarse) {
  .wk-appt .drag-grip { display: grid; }
  .wk-resize { height: 14px; }
}

/* ---------- Lock screen (kept sessions) ---------- */
.ey-lock { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ey-lock .ey-welcome-card { box-shadow: var(--shadow-lg); }
.ey-shared.kept { background: color-mix(in srgb, var(--nabeul) 12%, var(--bg)); }

/* ---------- Orthodontics ---------- */
:root { --o-bone: #1F6FEB; --o-tooth: #5B6475; --o-soft: #D9480F; --o-plane: #2BA84A; --o-before: #98A2B3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --o-bone: #7CC6FE; --o-tooth: #C9D2E0; --o-soft: #FF9F68; --o-plane: #7CF29A; --o-before: #6B7588; } }
:root[data-theme="dark"] { --o-bone: #7CC6FE; --o-tooth: #C9D2E0; --o-soft: #FF9F68; --o-plane: #7CF29A; --o-before: #6B7588; }
.vw { --o-bone: #7CC6FE; --o-tooth: #FFFFFF; --o-soft: #FF9F68; --o-plane: #7CF29A; --o-before: #8892A6; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: var(--r-pill); font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--text); color: var(--bg); }
.vw .seg { background: #0A0E16; border-color: #2A3548; flex-wrap: wrap; border-radius: 12px; }
.vw .seg button { color: #9AA6BA; padding: 5px 10px; }
.vw .seg button.on { background: #E9EEF6; color: #0A0E16; }
.vw-txt { font-size: 13px; font-weight: 700; }
.ortho-kv .kv { grid-template-columns: 140px 1fr; }
.ortho-progress { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 14px 0 4px; }
.ortho-progress span { display: block; height: 100%; background: var(--sidi-bou-said); border-radius: inherit; }
.chip.ortho-phase.active { background: color-mix(in srgb, var(--sidi-bou-said) 16%, var(--bg)); color: var(--sidi-bou-said); }
.chip.ortho-phase.retention { background: color-mix(in srgb, var(--nabeul) 16%, var(--bg)); color: var(--nabeul); }
.ortho-log td { vertical-align: top; }
.ceph-list, .pset-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.ceph-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.ceph-thumb { padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.ceph-mini { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); }
.ceph-mini svg { width: 100%; height: 100%; }
.ceph-mini.empty .ico { width: 36px; height: 36px; }
.ceph-info { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ceph-info header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ceph-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-sm); color: var(--muted); }
.ceph-key b { color: var(--text); font-weight: 600; }
.ceph-key .flag-low b, .ceph-key .flag-high b { color: var(--chechia); }
.ceph-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ceph-svg { display: block; width: 100%; height: auto; max-height: 70vh; }
.ceph-table td small.ceph-meaning { display: block; color: var(--chechia); font-size: 11px; }
.ceph-table.compact th, .ceph-table.compact td { padding: 5px 6px; font-size: var(--fs-sm); }
.ceph-table tr.flag-low td b, .ceph-table tr.flag-high td b { color: var(--chechia); }
.vw .ceph-table { color: #E9EEF6; }
.vw .ceph-table th { color: #9AA6BA; background: none; border-color: #1E2738; }
.vw .ceph-table td { border-color: #1E2738; }
.vw .ceph-table tr.flag-low td b, .vw .ceph-table tr.flag-high td b, .vw .ceph-meaning { color: #FFB86B !important; }
.ceph-dev { position: relative; display: block; width: 54px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, transparent 0 33.3%, color-mix(in srgb, var(--nabeul) 35%, transparent) 33.3% 66.6%, transparent 66.6%); border: 1px solid var(--line); }
.ceph-dev i { position: absolute; top: -3px; width: 4px; height: 12px; margin-inline-start: -2px; border-radius: 2px; background: var(--text); }
.ceph-dev.low i, .ceph-dev.high i { background: var(--chechia); }
.vw .ceph-dev { border-color: #2A3548; }
.vw .ceph-dev i { background: #E9EEF6; }
.vw .ceph-dev.low i, .vw .ceph-dev.high i { background: #FFB86B; }
.ceph-goal { padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--sidi-bou-said) 12%, transparent); }
.ceph-now { padding: 12px; border-radius: 12px; background: #13243A; box-shadow: inset 0 0 0 1px #2E4A6E; }
.ceph-now p { margin: 0; }
.ceph-id { display: inline-block; min-width: 2.4em; padding: 1px 6px; border-radius: 6px; background: #4CC9F0; color: #0A0E16; text-align: center; direction: ltr; }
.ceph-lms li { padding: 2px 4px; }
.ceph-lm { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: baseline; text-align: start; border: 0; background: none; color: inherit; padding: 4px 2px; cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.ceph-lm b { min-width: 2.6em; direction: ltr; }
.ceph-lm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #C9D2E0; }
.vw-panel h4 { margin: 6px 0 2px; }
.ceph-tip { color: #9AA6BA; align-self: center; }
.vw .field.small { display: grid; gap: 4px; font-size: var(--fs-sm); }
.vw .field.small > span { color: #9AA6BA; }
.vw textarea.input { min-height: 70px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pick-card { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); text-align: start; cursor: pointer; color: inherit; font: inherit; min-width: 0; }
.pick-card:hover { border-color: var(--sidi-bou-said); }
.pick-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #0A0E16; }
.pick-card span { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; border: 1px solid var(--line); vertical-align: middle; }
.ey-dialog.xwide { width: min(1180px, 100%); }
.super-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; }
.super-side { display: grid; gap: 14px; align-content: start; }
.super-side .checks { grid-template-columns: 1fr; }
.super-main { display: grid; gap: 14px; min-width: 0; }
.super-svg { max-height: 60vh; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); }
@media (max-width: 760px) { .super-body { grid-template-columns: 1fr; } }
/* Simulation */
.vto .vw-stage { cursor: default; overflow: auto; touch-action: auto; }
.vto-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px; padding: 14px; min-height: 100%; align-content: start; }
.vto-pane { margin: 0; display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 12px; background: #0D131E; border: 1px solid #1E2738; }
.vto-pane figcaption { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: #9AA6BA; order: -1; }
.vto-svg { max-height: 68vh; }
.vto .legend { color: #9AA6BA; }
.vto-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vto-photos canvas { width: 100%; height: auto; border-radius: 8px; background: #000; }
.vto-empty { padding: 30px 10px; text-align: center; }
.vto-move { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: var(--fs-sm); }
.vto-move input { grid-column: 1 / -1; accent-color: #4CC9F0; width: 100%; }
.vto-move output { font-variant-numeric: tabular-nums; color: #4CC9F0; }
.vto-ratios .qty-input { width: 64px; }
.vw details summary { cursor: pointer; color: #C9D2E0; }
/* Photo series */
.pset-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.pset-card header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border: 0; border-radius: 10px; background: #0A0E16; cursor: pointer; }
.pset-cell { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: #141C2A; }
.pset-cell.center { background: transparent; }
.pset-cell canvas, .pslot-img canvas { max-width: 100%; max-height: 100%; }
.pset-meta { margin-bottom: 14px; }
.pslot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pslot-grid.extra { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.pslot { display: grid; grid-template-rows: auto auto; border: 1px dashed var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
.pslot.full { border-style: solid; }
.pslot.center { place-items: center; text-align: center; padding: 8px; border: 0; }
.pslot-img { aspect-ratio: 4 / 3; display: grid; place-items: center; background: #0A0E16; color: #6B7588; }
.pslot-img .ico { width: 28px; height: 28px; }
.pslot-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; min-width: 0; }
.pslot-bar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pslot-bar label.icon-btn { cursor: pointer; }
@media (max-width: 760px) { .pslot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pslot.center { display: none; } .ceph-card { grid-template-columns: 84px minmax(0, 1fr); } }
.adj-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; }
.adj-stage { position: relative; align-self: start; touch-action: none; user-select: none; cursor: crosshair; background: #0A0E16; border-radius: 8px; overflow: hidden; line-height: 0; }
.adj-stage canvas { width: 100%; height: auto; display: block; }
.adj-crop { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); outline: 2px solid #4CC9F0; pointer-events: none; }
.adj-tools { display: grid; gap: 14px; align-content: start; }
.adj-tools input[type=range] { width: 100%; }
@media (max-width: 760px) { .adj-body { grid-template-columns: 1fr; } }
@media print {
  .photo-layout { width: 100%; }
  .pl-break { break-before: page; }
  .pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 60mm; gap: 3mm; }
  .pl-grid.extra { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 88mm; }
  .pl-cell { margin: 0; position: relative; display: grid; place-items: center; overflow: hidden; background: #000; border-radius: 2mm; }
  .pl-cell img { width: 100%; height: 100%; object-fit: contain; }
  .pl-cell figcaption { position: absolute; left: 2mm; bottom: 1.5mm; font-size: 7pt; color: #fff; text-shadow: 0 0 2px #000; }
  .pl-center { background: #fff; color: #000; display: flex; flex-direction: column; gap: 1.5mm; text-align: center; border: .3mm solid #000; padding: 4mm; }
  .pl-center b { font-size: 14pt; }
  .ceph-report .ceph-rep-head { display: flex; justify-content: space-between; gap: 10mm; border-bottom: .4mm solid #000; padding-bottom: 3mm; margin-bottom: 4mm; }
  .ceph-rep-title { text-align: end; }
  .ceph-rep-title h1 { font-size: 15pt; margin: 0; }
  .ceph-rep-body { display: grid; grid-template-columns: 78mm 1fr; gap: 6mm; align-items: start; }
  .ceph-fig { width: 100%; height: auto; display: block; border-radius: 2mm; }
  .ceph-rep-sec { break-inside: avoid; margin-bottom: 4mm; }
  .ceph-rep-sec h2 { font-size: 11pt; margin: 0 0 1.5mm; }
  .ceph-report .table th, .ceph-report .table td, .super-print .table th, .super-print .table td, .vto-print .table th, .vto-print .table td { padding: 1mm 1.5mm; font-size: 8.5pt; }
  .ceph-report .ceph-dev { width: 16mm; }
  .ceph-rep-notes { margin-top: 4mm; }
  .super-print-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6mm; align-items: start; }
  .super-print .super-svg, .vto-print .ceph-svg { max-height: 150mm; border: 0; }
  .vto-print-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; align-items: start; margin: 4mm 0; }
  .vto-print-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm; }
  .vto-print-photos img { width: 100%; }
  .sheet .legend i { width: 3mm; height: 3mm; }
}
/* A dialog opened from a full-screen view (orthodontics) goes over it. */
body:has(.vw) .ey-modal { z-index: 90; }
.super-group { display: grid; gap: 6px; }
.vto .vw-tools { display: none; }
.ortho-screen .vw-body { grid-template-columns: minmax(0, 1fr) 380px; }
.ortho-screen.no-panel .vw-body { grid-template-columns: minmax(0, 1fr); }
.vw-panel .ceph-table { width: 100%; }
.vw-panel .ceph-table th:last-child, .vw-panel .ceph-table td:last-child { width: 34px; padding-inline: 2px; }
.vw-panel .ceph-dev { width: 30px; }
.vto-pane, .vto-photos > * { min-width: 0; }
.vto-photos canvas { max-width: 100%; }
.vto .vw-stage canvas { position: static; inset: auto; }
.vto-photos.mode-after, .vto-photos.mode-before { grid-template-columns: minmax(0, 1fr); }
.vto-photos.mode-after .before, .vto-photos.mode-before .after { display: none; }
.vto-mode { margin-bottom: 4px; }
@media print {
  /* Printed pages are always light, whatever the screen theme. */
  html.printing { background: #fff !important; color-scheme: light !important; }
  .pl-cell:not(:has(img)):not(.pl-center) { background: #f2f2f2; }
  .pl-cell:not(:has(img)) figcaption { color: #666; text-shadow: none; }
  body.printing #print-area { --bg: #fff; --text: #000; --muted: #444; --line: #bbb; color: #000; color-scheme: light; }
  .sheet .table, .sheet .table th, .sheet .table td { background: #fff !important; color: #000 !important; border-color: #bbb !important; }
  .sheet .table { border: .3mm solid #bbb; border-radius: 0; }
  .sheet .table tr.flag-low td b, .sheet .table tr.flag-high td b, .sheet .ceph-meaning { color: #B3261E !important; }
  .sheet .muted { color: #444 !important; }
  .sheet .ceph-dev { border-color: #999; }
  .sheet .ceph-dev i { background: #000; }
  .sheet .ceph-dev.low i, .sheet .ceph-dev.high i { background: #B3261E; }
  .sheet .ceph-goal { background: #EEF3FB; color: #000; }
  .sheet .super-svg, .sheet .ceph-svg { --o-bone: #1F6FEB; --o-tooth: #333; --o-soft: #D9480F; --o-plane: #2BA84A; --o-before: #888; background: #fff; }
}
.norms-wrap { overflow-x: auto; }
.norms-table td, .norms-table th { padding: 4px 8px; }
.norms-table .qty-input { width: 72px; min-height: 34px; }

/* ---------- Tooth surfaces ---------- */
:root { --amalgam: #7D8794; }
.tooth svg.surf { width: 18px; height: 18px; }
.lower .tooth svg.surf { transform: none; }
.surf-legend b { font-weight: 600; }
.surf-code { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--ey); direction: ltr; unicode-bidi: isolate; }
.surf-editor { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.surf-big { position: relative; width: 150px; height: 150px; padding: 22px; }
.surf-big svg.surf-lg { width: 100%; height: 100%; }
.surf-big polygon { cursor: pointer; }
.surf-big polygon:hover { opacity: .8; }
.surf-labels span { position: absolute; transform: translate(-50%, -50%); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); pointer-events: none; }
.surf-big .surf-labels { position: absolute; inset: 22px; }
.surf-paints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.surf-pick { display: inline-flex; gap: 2px; }
.surf-chip { position: relative; }
.surf-chip input { position: absolute; opacity: 0; }
.surf-chip span { display: grid; place-items: center; width: 30px; height: 36px; border: 1.5px solid var(--line); border-radius: 6px; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; }
.surf-chip input:checked + span { background: var(--ey); border-color: var(--ey); color: #fff; }
.surf-chip input:focus-visible + span { outline: 2px solid var(--link); }
tr.sub-price td:first-child { padding-inline-start: 24px; color: var(--muted); }
@media (max-width: 760px) { .surf-editor { grid-template-columns: 1fr; justify-items: center; } .surf-paints { grid-template-columns: 1fr 1fr; } }

/* ---------- Periodontal chart ---------- */
.perio-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 10px; }
.perio-bar .seg { flex-wrap: wrap; }
.perio-cmp { display: inline-flex; gap: 8px; align-items: center; }
.perio-cmp select { width: auto; min-height: 36px; }
.perio-scroll { overflow-x: auto; padding-bottom: 6px; }
.perio-grid { border-collapse: collapse; margin: 0 auto 14px; font-size: 11px; font-variant-numeric: tabular-nums; direction: ltr; }
.perio-grid th, .perio-grid td { padding: 0; text-align: center; }
.perio-grid .pc-label { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--bg); text-align: end; padding-inline-end: 8px; font-weight: 500; color: var(--muted); white-space: nowrap; min-width: 92px; }
.perio-grid td.pc, .perio-grid td.pc-dot { width: 16px; min-width: 16px; height: 20px; border: 1px solid var(--line); }
.perio-grid td.pc-wide { height: 20px; border: 1px solid var(--line); }
.perio-grid td.off { background: var(--surface); }
.perio-grid input { width: 100%; height: 20px; border: 0; padding: 0; text-align: center; background: transparent; color: inherit; font: inherit; }
.perio-grid input:focus { outline: 2px solid var(--ey); outline-offset: -2px; background: var(--ey-wash); }
.perio-grid td.warn { background: color-mix(in srgb, var(--kairouan) 22%, transparent); font-weight: 700; }
.perio-grid td.bad { background: color-mix(in srgb, var(--chechia) 30%, transparent); font-weight: 700; color: var(--chechia); }
.perio-grid .dot { display: block; width: 10px; height: 10px; margin: auto; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: none; cursor: pointer; }
.perio-grid .dot.bop.on { background: var(--chechia); border-color: var(--chechia); }
.perio-grid .dot.pl.on { background: var(--tozeur); border-color: var(--tozeur); }
.perio-grid .dot:disabled { cursor: default; }
.pc-nums th { padding: 4px 0; }
.pc-tooth { display: grid; width: 100%; padding: 2px 0; border: 0; border-radius: 6px; background: none; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; line-height: 1.1; }
.pc-tooth small { font-size: 9px; color: var(--sidi-bou-said); font-weight: 600; }
.pc-tooth.absent { color: var(--muted); text-decoration: line-through; }
.pc-tooth:hover:not(:disabled) { background: var(--surface); }
.pc-tooth:disabled { cursor: default; }
.pc-graph td { padding: 2px 0; }
svg.pg { display: block; }
.pg-grid { stroke: var(--line); stroke-width: .5; }
.pg-grid.cej { stroke: var(--muted); stroke-dasharray: 3 2; stroke-width: .8; }
.pg-crown { fill: color-mix(in srgb, var(--muted) 12%, transparent); stroke: var(--muted); stroke-width: .8; }
.pg-root { fill: color-mix(in srgb, var(--muted) 8%, transparent); stroke: var(--muted); stroke-width: .7; }
.pg-root.implant { fill: color-mix(in srgb, var(--sidi-bou-said) 18%, transparent); stroke: var(--sidi-bou-said); }
.pg-pocket { fill: color-mix(in srgb, var(--sidi-bou-said) 22%, transparent); stroke: none; }
.pg-gm { fill: none; stroke: var(--chechia); stroke-width: 1.6; }
.pg-pd { fill: none; stroke: var(--sidi-bou-said); stroke-width: 1.6; }
.pg-prev { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 3; }
.pg-bop { fill: var(--chechia); }
.pg-absent { font-size: 22px; fill: var(--muted); text-anchor: middle; dominant-baseline: middle; }
.perio-sum { margin: 6px 0; }
.perio-meta { margin-bottom: 8px; }
@media print {
  .perio-print-head { display: flex; justify-content: space-between; gap: 10mm; border-bottom: .4mm solid #000; padding-bottom: 2mm; margin-bottom: 3mm; }
  .perio-print-head h1 { font-size: 14pt; margin: 0; text-align: end; }
  .perio-print .perio-grid { font-size: 7pt; margin-bottom: 3mm; }
  .perio-print .perio-grid td.pc, .perio-print .perio-grid td.pc-dot { height: 3.6mm; min-width: 0; width: auto; }
  .perio-print svg.pg { width: 100%; height: auto; }
  .perio-print .kv { padding: 1mm 0; font-size: 9pt; }
}
/* The editor scrolls as a whole: a grid body would squeeze the scrollable chart. */
.ey-dialog-body.perio-edit { display: block; }
.perio-edit > * + * { margin-top: 14px; }

/* ---------- Payment plans ---------- */
.plans-card { margin-bottom: 16px; }
.plan { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.plan + .plan { margin-top: 10px; }
.plan header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.plan.cancelled { opacity: .65; }
.plan-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.plan-bar span { display: block; height: 100%; background: var(--nabeul); border-radius: inherit; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.plan-chip { background: color-mix(in srgb, var(--nabeul) 14%, var(--bg)); color: var(--nabeul); font-size: var(--fs-xs); }
.plan-sched input.input { min-height: 34px; padding-block: 4px; }
.plan-sched input[type=date] { width: auto; }
.plan-trts { grid-template-columns: 1fr; }
tr.pl-overdue td { color: var(--chechia); }
@media print {
  .plan-sign { display: flex; justify-content: space-between; gap: 20mm; margin-top: 10mm; }
  .plan-sign span { flex: 1; min-height: 20mm; border-top: .3mm dotted #000; padding-top: 1mm; font-size: 9pt; text-align: center; }
}

/* ---------- Lab work ---------- */
.lab-list { display: grid; gap: 8px; }
.lab-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.lab-main { display: grid; gap: 2px; min-width: 0; }
.lab-main b { margin-inline-end: 6px; }
.lab-side { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip.lab-st.sent { background: color-mix(in srgb, var(--sidi-bou-said) 14%, var(--bg)); color: var(--sidi-bou-said); }
.chip.lab-st.tryIn { background: color-mix(in srgb, var(--kairouan) 18%, var(--bg)); color: var(--kairouan); }
.chip.lab-st.back { background: color-mix(in srgb, var(--nabeul) 16%, var(--bg)); color: var(--nabeul); }
.chip.lab-st.fitted, .chip.lab-st.cancelled { color: var(--muted); }
.lab-filter { margin-bottom: 12px; }
.lab-item { padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
@media print { .lab-doc th { width: 40mm; text-align: start; font-weight: 600; } .lab-doc td, .lab-doc th { padding: 2mm 1mm; border-bottom: .2mm solid #bbb; } }
.lab-line { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }