/* Korean UI text uses the font available on the staff device. Numbers line up in columns. */
.staff-workspace,.staff-auth {
  --ink:#242e39; --muted:#536170; --accent:#843456; --line:#d9e0e6; --bg:#f4f6f8;
  --tint:#f8eff3; --table-head:#eef2f5;
  font-family:var(--clinic-font,system-ui,sans-serif);
  letter-spacing:-.012em;
}
.staff-workspace { --content-width:76rem; --gutter:clamp(16px,2.5vw,32px); }
.staff-workspace .container { max-width:calc(var(--content-width) + var(--gutter) + var(--gutter)); padding:26px var(--gutter) 60px; }
.staff-workspace .topbar {
  flex-wrap:wrap; gap:10px 22px; min-height:66px; padding:10px max(var(--gutter),calc((100% - var(--content-width)) / 2));
  border-bottom-color:var(--line);
}
.topbar .clinic-brand { flex-wrap:nowrap; }
.topbar .clinic-brand span { padding-inline-start:12px; border-inline-start:1px solid var(--line); font-size:14px; font-weight:650; white-space:nowrap; }
.topbar nav { gap:4px; flex-wrap:wrap; margin-inline-start:auto; }
.topbar nav a,.topbar .text-button {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:7px 12px;
  border-radius:7px; font-size:15px; font-weight:650; line-height:1.4; white-space:nowrap; color:var(--ink);
}
.topbar nav svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.topbar nav a:hover,.topbar .text-button:hover { background:var(--tint); color:var(--accent); }
.topbar nav a[aria-current] { background:var(--accent); color:white; }
.topbar .staff-signout { border-inline-start:1px solid var(--line); padding-inline-start:8px; margin:0; }
.topbar .text-button { color:var(--muted); font-size:14px; font-weight:500; }
[data-security-alert-count] { padding:0 6px; border-radius:12px; background:#f3e5eb; color:#78314e; font-size:12px; font-variant-numeric:tabular-nums; }
@media(min-width:1100px) and (min-height:640px) {
  .staff-workspace .topbar { position:sticky; top:0; z-index:4; }
  html:has(.staff-workspace .topbar) { scroll-padding-top:78px; }
}
.staff-workspace :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible,.staff-auth :where(input,button,summary,a):focus-visible { outline:3px solid #16668a; outline-offset:2px; }
.staff-workspace .skip:focus { z-index:6; }
.staff-workspace h1 { font-size:clamp(25px,2.1vw,32px); font-weight:750; letter-spacing:-.045em; }
.staff-workspace h2 { font-size:20px; letter-spacing:-.035em; }
.staff-workspace .sub,.staff-workspace .muted { font-size:13px; line-height:1.5; }
.staff-workspace .button { min-height:40px; border-radius:7px; font-weight:600; }
.staff-workspace .button:not(.primary):not(.danger):hover { color:var(--accent); border-color:#bea1ae; background:#fcf7f9; }
.staff-workspace .button.primary:hover { background:#71304d; border-color:#71304d; }
.staff-workspace input:not([type=checkbox]),.staff-workspace select,.staff-workspace textarea { border-color:#aab6c1; border-radius:6px; color:var(--ink); }
.staff-workspace .filters { gap:12px; margin:18px 0; padding:16px 18px; align-items:end; }
.staff-workspace .filters > div { min-width:0; }
.staff-workspace .filters:not(.exercise-range) > div:has(input[type=text]) { flex:1 1 13rem; max-width:23rem; }
.staff-workspace .filters input:not([type=hidden]),.staff-workspace .filters select { width:100%; }
.staff-workspace .filters label,.staff-workspace .form-grid label { font-size:14px; color:#364453; }
.heading h1 small { font-size:14px; font-weight:500; color:var(--muted); }
.back-link { display:inline-block; margin-bottom:16px; font-size:14px; }
.work-location { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; font-size:14px; color:var(--muted); }
.work-location strong { color:var(--ink); }
.overview-table tr:target,.patient-roster tr:target { outline:2px solid var(--accent); outline-offset:-2px; background:#f9f3f6; }
.title-help,.work-tabs,.stage-grid { display:flex; align-items:center; gap:10px; }
.title-help h1,.title-help h2 { margin:4px 0; }
.work-tabs { gap:12px; flex-wrap:wrap; margin:0 0 18px; border-bottom:1px solid #cdd5dd; }
.work-tabs a { min-height:42px; padding:8px 8px 9px; border-bottom:3px solid transparent; text-decoration:none; color:var(--muted); font-weight:600; }
.work-tabs a:hover { color:var(--accent); }
.work-tabs a[aria-current] { border-bottom-color:var(--accent); color:var(--accent); font-weight:750; }
.customer-dialog { border:1px solid #b9c3cc; border-radius:14px; padding:0; width:min(1040px,calc(100% - 32px)); max-height:calc(100dvh - 40px); color:var(--ink); background:var(--bg); box-shadow:0 16px 60px #2224; }
.customer-dialog[open] { display:flex; flex-direction:column; }
.customer-dialog::backdrop { background:#19202b80; }
html:has(.customer-dialog) { scrollbar-gutter:stable; }
html:has(.customer-dialog[open]) { overflow:hidden; }
.dialog-bar { flex:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 20px; border-bottom:1px solid var(--line); background:white; }
.dialog-bar strong { display:flex; align-items:center; gap:9px; font-size:16px; }
.dialog-bar strong::before { content:""; width:4px; height:16px; border-radius:2px; background:var(--accent); }
.dialog-body { padding:20px; overflow:auto; overscroll-behavior:contain; min-height:100px; }
.dialog-body .standalone-return,.dialog-body .work-location,.dialog-body .back-link { display:none; }
@media(max-width:700px) {
  .customer-dialog { width:calc(100% - 12px); max-width:100%; max-height:calc(100dvh - 16px); }
  .dialog-bar,.dialog-body { padding:12px; }
}
.exercise-detail-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:12px; }
.exercise-detail-heading h1 { overflow-wrap:anywhere; }
.exercise-detail-heading h1 small { display:inline-block; font-size:13px; font-weight:500; letter-spacing:normal; color:var(--muted); }
.exercise-detail-heading p { grid-column:1/-1; margin:0 0 10px; }
.staff-workspace .exercise-range,.exercise-range > div { align-items:center; }
.exercise-range > div { display:flex; gap:10px; }
.exercise-range label { margin:0; white-space:nowrap; }
.work-panel,.work-disclosure { background:white; border:1px solid var(--line); border-radius:12px; padding:20px; margin:16px 0; }
.work-panel h2 { margin-top:0; }
.password-change-form { max-width:36rem; }
.password-change-form label { display:block; font-weight:650; margin-bottom:4px; }
.password-change-form input { width:100%; }
.work-disclosure summary,.row-action summary { font-weight:650; cursor:pointer; }
.work-disclosure summary small { margin-left:8px; font-weight:400; color:var(--muted); }
.profile-details { display:grid; grid-template-columns:max-content 1fr; gap:6px 20px; }
.profile-details dd { margin:0; }
.staff-workspace .stats,.stage-grid { gap:12px; margin:18px 0; }
.staff-workspace .stat,.stage-card { padding:14px 18px; }
.staff-workspace .stat span,.stage-card span { color:var(--muted); font-size:14px; font-weight:600; word-break:keep-all; }
.staff-workspace .stat strong,.stage-card strong { display:block; font-size:28px; line-height:1.32; margin-top:4px; font-variant-numeric:tabular-nums; }
.staff-workspace .stat-reading { display:flex; align-items:baseline; gap:5px; }
.staff-workspace .stat .stat-unit { font-size:13px; color:var(--muted); font-weight:500; }
.staff-workspace .stat small:not(:empty) { font-size:12px; }
.stage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.stage-card { width:100%; height:100%; background:white; border:1px solid var(--line); border-radius:10px; text-align:left; cursor:pointer; }
.stage-card span::before { content:""; display:inline-block; width:8px; height:8px; margin-inline-end:7px; vertical-align:1px; border-radius:50%; background:var(--stage-mark,#8493a2); }
.stage-card.stage-issued { --stage-mark:#556b9d; }
.stage-card.stage-installing { --stage-mark:#af7422; }
.stage-card.stage-installed { --stage-mark:#318265; }
.stage-card.stage-retry { --stage-mark:#a64353; }
.stage-card:hover,.stage-card[aria-pressed=true] { border-color:var(--accent); background:#fcf7f9; }
.stage-card[aria-pressed=true] { box-shadow:inset 0 0 0 1px var(--accent); }
.stage-card small { font-size:13px; font-weight:500; margin-left:5px; }
.stage-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-weight:650; background:#eef0f3; color:#394456; }
.stage-badge.stage-installing { background:#fff0d6; color:#774908; }
.stage-badge.stage-installed,.stage-badge.stage-linked { background:#e5f3eb; color:#215f43; }
.stage-badge.stage-issued { background:#edf0ff; color:#384e8a; }
.stage-badge.stage-retry { background:#f9e8e9; color:#883845; }
.staff-workspace .badge.none { background:#edf1f4; color:var(--muted); }
.staff-workspace .badge.pending { background:#fff0d6; color:#794b09; }
.install-steps { display:grid; grid-template-columns:repeat(4,1fr); list-style:none; padding:0; gap:10px; counter-reset:step; }
.install-steps li { counter-increment:step; border-top:2px solid var(--line); padding:10px 0; font-weight:650; }
.install-steps li::before { content:counter(step) ". "; color:var(--accent); }
.install-steps time { display:block; font-weight:400; color:var(--muted); font-size:13px; }
.row-action { margin:4px 0; }
.edit-period { display:grid; gap:8px; max-width:28rem; margin:12px 0; }
.edit-period input:not([type=checkbox]) { width:100%; }
.edit-period label { font-size:14px; }
.edit-period input[type=checkbox] { min-height:auto; }
.device-request { padding:12px 0; border-top:1px solid var(--line); }
.device-request h3 { margin:0 0 4px; font-size:16px; }
.device-request small { color:var(--muted); }
.help-tip { position:relative; display:inline-block; vertical-align:middle; font-size:14px; font-weight:400; }
.help-tip summary { list-style:none; display:grid; place-items:center; width:28px; height:28px; border:1px solid #c8bac2; border-radius:50%; background:white; color:var(--accent); cursor:pointer; font-weight:700; }
.help-tip summary::-webkit-details-marker { display:none; }
.help-bubble { position:absolute; z-index:5; top:calc(100% + 7px); left:0; width:min(290px,78vw); padding:12px 15px; border-radius:9px; box-shadow:0 4px 18px #2a152333; background:#372d36; color:white; line-height:1.6; text-align:left; }
.help-tip.align-end .help-bubble { left:auto; right:0; }
.staff-auth { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:20px; background:#f8f5f7; }
.staff-auth .container { margin:0; width:min(100%,420px); padding:0; }
.auth-card { background:white; border:1px solid #e7dfe4; border-radius:18px; padding:clamp(24px,6vw,40px); box-shadow:0 8px 32px #4323350d; }
.auth-card .clinic-logo { display:block; width:160px; height:auto; margin-bottom:24px; }
.auth-card .staff-login-form > p { display:grid; grid-template-columns:minmax(0,1fr); gap:5px; margin:16px 0; }
.auth-card .staff-login-form input,.auth-card .primary { width:100%; }
.auth-card .primary { margin-top:8px; }
.auth-card #mfa-qr { max-width:100%; height:auto; }
.auth-card code { overflow-wrap:anywhere; }
.staff-workspace .table-wrap { margin-top:12px; }
.staff-workspace table { font-variant-numeric:tabular-nums; }
.staff-workspace caption { padding:13px 16px; font-size:16px; }
.staff-workspace thead th { color:#394959; background:var(--table-head); font-size:14px; font-weight:700; word-break:keep-all; }
.staff-workspace tbody th { font-size:15px; }
.staff-workspace .patient-roster :is(td,th),.staff-workspace .grant-ledger :is(td,th) { padding:12px 16px; }
.staff-workspace .overview-table :is(td,th) { padding:10px 12px; }
.staff-workspace .overview-table :is(td,th):not(:first-child) { text-align:center; }
.staff-workspace .patient-roster tbody tr:nth-child(even),.staff-workspace .overview-table tbody tr:nth-child(even) { --row-bg:#f8fafb; }
.staff-workspace :is(.overview-table,.patient-roster) tbody tr { background:var(--row-bg,white); }
.staff-workspace :is(.overview-table,.patient-roster) tbody tr:focus-within { --row-bg:#f6edf1; }
.staff-workspace :is(.overview-table,.patient-roster) tbody tr:target { --row-bg:#f6edf1; }
.staff-workspace .overview-table tbody th { background:var(--row-bg,white); }
.staff-workspace :is(.overview-table,.matrix) thead th:first-child { position:sticky; left:0; z-index:1; box-shadow:1px 0 0 var(--line); }
.staff-workspace th small.sub { font-weight:400; letter-spacing:0; }
.staff-workspace .matrix .day-cell { min-height:68px; }
.staff-workspace .day-legend { margin:12px 0; }
.staff-workspace .day-legend li { font-size:13px; }
.staff-workspace .app-next-action :is(.button,strong) { display:inline-block; }
.staff-workspace .app-next-action > strong { color:#28634d; }
.staff-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin:12px 0 20px; font-variant-numeric:tabular-nums; }
.pagination-summary { color:var(--muted); font-size:14px; }
.pagination-links { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.pagination-link { display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:38px; padding:4px 10px; border:1px solid var(--line); border-radius:6px; background:white; color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
a.pagination-link:hover { background:var(--tint); border-color:#b99da9; color:var(--accent); }
.pagination-link[aria-current] { background:var(--accent); border-color:var(--accent); color:white; }
.pagination-link[aria-disabled=true] { background:transparent; color:#687484; border-color:transparent; }
.pagination-gap { color:var(--muted); padding:0 3px; }
@media(hover:hover) {
  .staff-workspace :is(.overview-table,.patient-roster) tbody tr:hover { --row-bg:#f6edf1; }
}
@media(max-width:1060px) {
  .staff-workspace .overview-table :is(th,td):last-child:not([colspan]) { position:sticky; right:0; z-index:1; box-shadow:-1px 0 0 var(--line); }
  .staff-workspace .overview-table td:last-child:not([colspan]) { background:var(--row-bg,white); }
}
@media(max-width:900px) {
  .staff-workspace .topbar { display:grid; grid-template-columns:1fr auto; grid-template-areas:"brand signout" "work work"; }
  .topbar .clinic-brand { grid-area:brand; justify-self:start; }
  .topbar nav { grid-area:work; margin:0; }
  .topbar .staff-signout { grid-area:signout; border:0; padding:0; justify-self:end; }
}
@media(max-width:700px) {
  .staff-workspace .container { padding-block:20px 40px; }
  .exercise-range > div { display:grid; gap:6px; }
  .staff-workspace .topbar { padding:10px 16px; gap:6px 14px; }
  .topbar nav { gap:2px; }
  .topbar nav a,.topbar .text-button { min-height:40px; padding:6px 8px; font-size:14px; gap:5px; }
  .topbar .clinic-brand .clinic-logo { width:clamp(110px,38vw,150px); }
  .topbar .clinic-brand span { padding-inline-start:8px; font-size:12px; }
  .topbar nav svg { width:16px; height:16px; }
  .heading { gap:8px; }
  .staff-workspace .stats,.stage-grid { gap:8px; margin:14px 0; }
  .staff-workspace .stat,.stage-card { padding:11px 13px; }
  .staff-workspace .stat strong,.stage-card strong { font-size:25px; }
  .staff-workspace .filters { padding:14px; gap:10px 12px; }
  .staff-workspace .filters:not(.exercise-range) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .staff-workspace .filters:not(.exercise-range) > div { max-width:none; }
  #daily-roster-filters > button { grid-column:1/-1; }
  .pagination-link { min-width:36px; min-height:40px; padding-inline:8px; }
  .work-tabs { margin-bottom:14px; }
  .stage-grid,.install-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-panel,.work-disclosure { padding:16px; }
  .help-bubble,.help-tip.align-end .help-bubble { position:fixed; top:auto; bottom:16px; left:16px; right:16px; width:auto; }
}
@media(max-width:600px) {
  .staff-workspace .overview-table :is(td,th):first-child:not([colspan]) { width:108px; max-width:108px; overflow-wrap:anywhere; }
  .staff-workspace .overview-table :is(td,th):last-child:not([colspan]) { width:100px; padding-inline:6px; }
  .staff-workspace .overview-table td:last-child .button { padding-inline:8px; font-size:13px; }
  .patient-roster,.grant-ledger { display:block; min-width:0; }
  .patient-roster caption,.grant-ledger caption,.patient-roster tbody,.grant-ledger tbody { display:block; }
  .patient-roster thead,.grant-ledger thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .patient-roster tbody tr,.grant-ledger tbody tr { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; padding:15px; border-top:1px solid var(--line); }
  .staff-workspace :is(.patient-roster,.grant-ledger) :is(td,th) { padding:0; border:0; min-width:0; overflow-wrap:anywhere; }
  .patient-roster td:nth-child(2),.patient-roster td:last-child { justify-self:end; }
  .patient-roster td:nth-child(3) { color:var(--muted); font-size:13px; }
  .patient-roster td[data-label]::before { content:attr(data-label); display:block; font-size:12px; font-weight:700; color:var(--muted); }
  .patient-roster .empty,.grant-ledger .empty,.grant-ledger td:last-child { grid-column:1/-1; }
  .grant-ledger td:nth-child(2) { grid-row:2; }
  .grant-ledger td:nth-child(3) { justify-self:end; }
}