/* Styles for the follow-up screens (Today, Unscheduled Tx, patient window, follow-up settings). */

/* ---------- User chip ---------- */
.topbar { gap: 20px; }
.topbar nav { margin-left: auto; }
.user-chip { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 5px 12px; cursor: pointer; display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.user-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #5fd08e; }
.user-chip.unset { background: #f5b83d; color: #3a2b00; border-color: #f5b83d; font-weight: 600; }
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.user-pick { padding: 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; cursor: pointer; font-weight: 600; }
.user-pick:hover, .user-pick.on { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Shared ---------- */
.wide-page { max-width: 1500px; margin: 0 auto; }
.today-page { max-width: 960px; margin: 0 auto; }
.filter-panel .lbl, .popover .lbl, .form-body .lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #4b5563; margin: 0 0 6px; }
.sub { color: var(--muted); font-size: 12.5px; }
.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-align: left; }
.link:hover { text-decoration: underline; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 5px; background: #eceef1; color: #3f4650; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid #dfe2e6; }
.badge.green { background: #19b48a; border-color: #19b48a; color: #fff; border-radius: 999px; }
.badge.solid-green { background: #17a86f; border-color: #17a86f; color: #fff; padding: 6px 14px; }
.badge.red { background: #e5484d; border-color: #e5484d; color: #fff; border-radius: 999px; }
.badge.amber { background: #f7c04a; border-color: #f7c04a; color: #3a2b00; border-radius: 999px; }
.badge.small { font-size: 11px; padding: 1px 6px; }
.date-chip { display: inline-block; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: #f7f8fa; font-size: 13px; white-space: nowrap; }
.flag { color: #c77700; font-size: 12.5px; font-weight: 600; }
.none { color: #e5484d; }
.phones { white-space: nowrap; letter-spacing: -2px; }
.phones .plus { letter-spacing: 0; margin-left: 4px; background: #17a86f; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 6px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 100; background: #1d7a46; color: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-width: 420px; }
.toast.error { background: var(--danger); }
.error-inline { color: var(--danger); font-size: 12px; margin-top: 4px; }

/* ---------- Unscheduled list ---------- */
.filter-panel { padding: 16px 18px; margin-bottom: 16px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; align-items: end; }
.filter-grid .apply .btn { width: 100%; padding: 9px; background: #17a86f; border-color: #17a86f; }
.mode { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mode .lbl { margin: 0; flex-basis: 100%; }
.mode label { font-size: 14px; display: flex; gap: 5px; align-items: center; }
.money-in { display: flex; }
.money-in span { border: 1px solid var(--line-strong); border-right: 0; border-radius: 6px 0 0 6px; padding: 8px 10px; background: #f7f8fa; }
.money-in input { border-radius: 0 6px 6px 0; }
.ms { position: relative; }
.ms summary { list-style: none; border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 30px 8px 10px; background: #fff; cursor: pointer; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms summary::-webkit-details-marker { display: none; }
.ms summary::after { content: "\25BE"; position: absolute; right: 10px; top: 8px; color: var(--muted); }
.ms-pop { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; min-width: 240px; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px; }
.ms-list { max-height: 260px; overflow: auto; }
.ms-list label { display: flex; gap: 8px; padding: 5px 6px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.ms-list label:hover { background: var(--accent-soft); }
.ms-search { margin-bottom: 6px; }
.list-summary { padding: 12px 16px; color: var(--muted); font-size: 14px; }
.list-summary.right { text-align: right; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-strong); background: #f9fafb; vertical-align: bottom; white-space: nowrap; }
table.data th .sub { font-weight: 400; font-size: 11px; }
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data td.r { text-align: right; }
table.data tr.col-filters td { background: #f9fafb; padding: 6px 12px; }
table.data tr.col-filters input { padding: 6px 8px; font-size: 13px; }
table.data tbody tr:hover { background: #fafbfd; }
table.data.compact td, table.data.compact th { padding: 7px 10px; font-size: 13px; }
.sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink); }
.sort.on { color: var(--accent); }
.note-cell { max-width: 520px; white-space: pre-line; }
.popover { position: absolute; z-index: 60; width: 280px; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 14px; display: grid; gap: 10px; }
.popover .row { display: flex; gap: 8px; }

/* ---------- Today ---------- */
.today-card { padding: 20px 22px; }
.today-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.today-head h2 { font-size: 20px; font-weight: 400; margin: 0; }
.today-head .who { display: flex; gap: 8px; align-items: center; }
.others { background: #eceef1; border-radius: 999px; font-size: 11px; padding: 1px 7px; cursor: help; }
.progress-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.progress { height: 6px; background: #e6e8eb; border-radius: 99px; margin: 6px 0 18px; overflow: hidden; }
.progress div { height: 100%; background: #19b48a; border-radius: 99px; transition: width .3s; }
table.data.today .chk { width: 36px; }
table.data.today tr.done { background: #fbfcfb; }

/* ---------- Modal / patient window ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(17, 24, 39, .45); display: flex; justify-content: center; align-items: flex-start; padding: 24px 16px; overflow-y: auto; }
.modal { background: #f5f6f8; border-radius: 12px; width: 100%; max-width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
/* A patient search list must be able to hang past the bottom of the window, so round the ends instead of clipping. */
.modal:has(.pat-picker) { overflow: visible; }
.modal:has(.pat-picker) > .modal-head { border-radius: 12px 12px 0 0; }
.modal:has(.pat-picker) > .modal-foot { border-radius: 0 0 12px 12px; }
.modal.wide { max-width: 940px; }
.modal.wide:has(#ad-table) { max-width: 1240px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.modal-head.blue { background: linear-gradient(90deg, #2563eb, #3b82f6); color: #fff; border: 0; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-head p { margin: 2px 0 0; font-size: 13px; opacity: .85; }
.icon-btn { background: rgba(255,255,255,.2); border: 0; color: inherit; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 16px; }
.modal-head:not(.blue) .icon-btn { background: #eceef1; }
.modal-body { padding: 16px; display: grid; gap: 14px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.card-head h3 { margin: 0; font-size: 15px; }
.pat-top { display: flex; gap: 14px; }
.avatar { width: 56px; height: 56px; border-radius: 12px; background: #e3e8fb; display: grid; place-items: center; font-size: 26px; flex: none; }
.pat-name { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pill { background: #eef1f5; border-radius: 999px; padding: 3px 10px; font-size: 13px; color: var(--ink); text-decoration: none; }
.pill:hover { background: var(--accent-soft); }
.kv { display: flex; justify-content: space-between; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; font-size: 14px; }
.count-pill { border: 1px solid #9fdcc0; background: #effaf4; color: #147a50; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.fu-state { font-size: 14px; margin-bottom: 12px; }
.action-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.green { background: #17a86f; border-color: #17a86f; }
.attempt-form { padding: 0; overflow: hidden; }
.form-head { display: flex; gap: 12px; align-items: center; padding: 14px 18px; background: #f7f8fa; border-bottom: 1px solid var(--line); }
.form-head h3 { margin: 0; font-size: 15px; }
.form-head p { margin: 0; }
.form-icon { width: 40px; height: 40px; border-radius: 10px; background: #17a86f; color: #fff; display: grid; place-items: center; font-size: 18px; }
.form-body { padding: 16px 18px; display: grid; gap: 8px; }
.form-body .lbl { margin-top: 6px; text-transform: none; font-size: 13.5px; letter-spacing: 0; }
.next-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.next-row input { max-width: 180px; }
.form-foot { display: flex; justify-content: center; gap: 10px; padding: 14px; border-top: 1px solid var(--line); background: #fafbfc; }
.tabs-card { padding: 0; overflow: hidden; }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 10px 10px 0; background: #fafbfc; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; cursor: pointer; font-weight: 600; color: var(--muted); font-size: 13.5px; }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); background: #fff; border-radius: 6px 6px 0 0; }
.tab .n { background: #e5484d; color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; }
.tab .n.zero { background: #cfd4da; }
.tab-body { padding: 8px 12px 12px; overflow-x: auto; }
.pager { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 10px; font-size: 13px; color: var(--muted); }

/* ---------- Settings: follow-ups ---------- */
.interval { display: inline-flex; gap: 6px; }
.interval input { width: 72px; }
.interval select { width: 110px; }
.interval-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.interval-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.interval-list .num { width: 24px; height: 24px; border-radius: 50%; background: #6d5bd0; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.status-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.status-table td { padding: 4px 6px 4px 0; }
.status-table td:last-child { width: 1%; }
@media print { .user-chip, .toast, .modal-backdrop { display: none !important; } }

/* ---------- Tasks ---------- */
.nav-badge { background: #e5484d; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 6px; margin-left: 4px; }
.tasks-page { max-width: 1000px; margin: 0 auto; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.page-head h1.page { margin: 0; }
.task-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.seg { display: inline-flex; background: #e6e9ee; border-radius: 8px; padding: 3px; }
.seg a { padding: 6px 14px; border-radius: 6px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; }
.seg a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.task-filters { display: flex; gap: 8px; }
.task-filters input { width: 240px; }
.task-filters select { width: 160px; }
.task-panel { padding: 6px 16px 14px; }
h3.task-group { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 4px; }
.task-list { list-style: none; margin: 0; padding: 0; }
.task { display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.task.high { box-shadow: inset 3px 0 0 #e5484d; padding-left: 10px; }
.task.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-check input { width: 18px; height: 18px; margin-top: 2px; cursor: pointer; }
.task-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.task-title { font-weight: 600; color: var(--ink); }
.task-notes { flex-basis: 100%; }
.task-pats { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.pat-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent); border: 1px solid #cfd9e8; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.pat-tag button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 11px; }
.task-side { text-align: right; flex: none; display: grid; gap: 3px; justify-items: end; }
.badge.prio { background: #fde8e8; border-color: #f5b5b5; color: #b42318; font-size: 11px; }
.modal-foot { display: flex; gap: 8px; align-items: center; padding: 12px 16px; background: #fff; border-top: 1px solid var(--line); }
.modal-foot .spacer { flex: 1; }
.task-form { display: grid; gap: 6px; }
.flbl { font-weight: 600; font-size: 13.5px; margin-top: 6px; }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.tk-grid .flbl { display: block; margin-bottom: 4px; }
.pat-picker { position: relative; display: grid; gap: 6px; }
.pat-results { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 260px; overflow: auto; }
.pat-results button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; cursor: pointer; font: inherit; }
.pat-results button:hover { background: var(--accent-soft); }
.comments { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.comment-text { white-space: pre-line; margin-top: 2px; }
.comment-add { display: flex; gap: 8px; align-items: flex-end; }
#my-tasks .today-card { margin-bottom: 16px; }

/* ---------- Analytics ---------- */
.analytics-page { max-width: 1300px; margin: 0 auto; }
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.filter-row label { display: grid; gap: 4px; }
.filter-row select, .filter-row input { width: auto; min-width: 150px; }
.range-note { margin-left: auto; padding-bottom: 8px; }
.a-body { transition: opacity .15s; }
.a-body.loading { opacity: .5; pointer-events: none; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.tile-label { font-size: 13px; color: #52514e; font-weight: 600; }
.tile-value { font-size: 26px; font-weight: 650; color: #0b0b0b; line-height: 1.2; }
.delta { font-size: 13px; font-weight: 600; color: #52514e; }
.delta.up-good { color: #006300; }
.delta.down-bad { color: #b42318; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.chart-card { padding: 14px 16px; min-width: 0; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-card.span2 { grid-column: span 2; }
/* Patients: bar chart and active-patient line side by side on wide screens */
@media (min-width: 1100px) {
  .chart-card.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 28px; align-items: start; }
  .chart-card.split .chart-head { grid-column: 1 / -1; }
  .chart-card.split .sub-chart { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 24px; border-left: 1px solid var(--line); }
  .chart-card.split .sub-chart h3 { margin-bottom: 10px; }
  .chart-card.split:has(.sub-chart[hidden]) > .chart { grid-column: 1 / -1; } /* table view uses the full width */
}
@media (max-width: 900px) { .chart-card.span2 { grid-column: 1 / -1; } }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.chart-head h2 { font-size: 16px; margin: 0; }
.chart-head p { margin: 2px 0 0; }
.chart-legend { display: flex; gap: 16px; font-size: 13px; color: #52514e; margin: 4px 0 6px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart-legend .key.line { height: 3px; width: 16px; border-radius: 2px; }
.chart-plot { position: relative; width: 100%; }
.chart-plot svg { display: block; overflow: visible; }
.chart-plot .grid { stroke: #e1e0d9; stroke-width: 1; }
.chart-plot .axis { stroke: #c3c2b7; stroke-width: 1; }
.chart-plot .tick { fill: #898781; font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-plot .cross { fill: rgba(11, 11, 11, .05); }
.chart-plot .val { fill: #52514e; font-size: 12px; font-weight: 600; }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; background: #fff; border: 1px solid rgba(11,11,11,.12); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 8px 10px; font-size: 12.5px; min-width: 150px; }
.tip-head { color: #52514e; font-weight: 600; margin-bottom: 4px; }
.tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tip-row strong { color: #0b0b0b; }
.tip-row span:last-child { color: #52514e; }
.tip-key { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.tip-part { padding-left: 16px; color: #52514e; font-size: 12px; }
.tip-swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.chart-legend .stack-key { display: inline-flex; gap: 8px; align-items: center; }
.chart-legend .stack-key strong { color: #0b0b0b; font-weight: 600; }
.chart-legend .stack-key > span { display: inline-flex; align-items: center; gap: 4px; }
.chart-card td.num { font-variant-numeric: tabular-nums; }
.footnote { margin-top: 16px; }
.sub-chart { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.sub-chart h3 { font-size: 14px; margin: 0 0 4px; }
.claims td, .claims th { white-space: nowrap; }
.head-btns { display: flex; gap: 6px; flex: none; }
.ad-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ad-tier { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.ad-tier.dim { opacity: .45; }
.fu-late { color: #b42318; font-weight: 600; }
.tier-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line-strong); color: #3f4650; background: #f5f6f8; }
.tier-badge.t1 { background: #e8f0fb; border-color: #b7d3f6; color: #184f95; }
.tier-badge.t2 { background: #1c5cab; border-color: #1c5cab; color: #fff; }
table.data tfoot td { border-top: 2px solid var(--line-strong); border-bottom: 0; background: #fafbfc; }
@media (max-width: 700px) { .ad-summary { grid-template-columns: 1fr; } }
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 6px 0; }
.donut-plot { width: 200px; flex: none; }
.donut-plot .slice { cursor: default; transition: opacity .12s; outline: none; }
.donut-plot .slice.dim { opacity: .45; }
.donut-plot .slice:focus-visible { stroke: #0b0b0b; }
.donut-value { font-size: 20px; font-weight: 650; fill: #0b0b0b; }
.donut-label { font-size: 12px; fill: #52514e; }
.donut-legend { display: grid; gap: 8px; flex: 1; min-width: 220px; }
.donut-row { display: grid; grid-template-columns: 12px 1fr auto 40px; column-gap: 8px; align-items: baseline; font-size: 13.5px; }
.donut-row .key { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.donut-row .name { color: #52514e; }
.donut-row strong { font-variant-numeric: tabular-nums; color: #0b0b0b; }
.donut-row .sub { text-align: right; }
.donut-row .detail { grid-column: 2 / -1; text-align: left; font-size: 12px; }
.claims-dd { margin-top: 4px; }
.claims-dd summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px 0; }
.claims-dd[open] summary { margin-bottom: 6px; }
#aging-list .link { margin-top: 8px; }
#aging-list.sub-chart { padding-top: 6px; }
.user-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; }
@media (max-width: 700px) { .chart-grid { grid-template-columns: 1fr; } .range-note { margin-left: 0; } }

/* Follow-Up Plan dropdown button */
.plan-dd { background: none; border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; cursor: pointer; font: inherit; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.plan-dd:hover { border-color: var(--line-strong); background: #f7f8fa; }
.plan-dd.chip { border-color: var(--line-strong); background: #f7f8fa; color: var(--ink); font-size: 13px; padding: 4px 10px; }
.popover hr { border: 0; border-top: 1px solid var(--line); margin: 2px 0; width: 100%; }
.btn.remove { background: #f36b6b; border-color: #e35555; color: #fff; }

/* Sign-in */
body.signed-out main, body.signed-out .topbar { display: none; }
.signin-screen { position: fixed; inset: 0; z-index: 100; background: #eef1f5; display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 24px; overflow-y: auto; }
.signin, .signin * { box-sizing: border-box; }
.signin { width: 100%; max-width: 560px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(17,24,39,.12); padding: 28px; display: grid; gap: 14px; }
.signin-brand { font-weight: 700; color: #3b5170; letter-spacing: .02em; }
.signin h1 { margin: 0; font-size: 22px; }
.signin .back { justify-self: start; }
.signin form { display: grid; gap: 10px; max-width: 300px; width: 100%; justify-self: center; }
.signin .user-pick { display: grid; gap: 2px; font-size: 15px; padding: 16px 12px; }
.signin .user-pick:disabled { opacity: .55; cursor: not-allowed; }
.signin .user-pick .sub { font-weight: 400; font-size: 12px; }
.pin-input { font-size: 26px; letter-spacing: .4em; text-align: center; padding: 10px; }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.pinpad button { font: inherit; font-size: 22px; padding: 14px 0; border: 1px solid var(--line-strong); border-radius: 10px; background: #f9fafb; cursor: pointer; touch-action: manipulation; }
.pinpad button:active { background: var(--accent-soft); }
.pinpad .go { background: var(--accent); border-color: var(--accent); color: #fff; }
.signin .error:empty { display: none; }
.user-chip .role { opacity: .75; font-size: 12px; }
.user-menu { width: 200px; padding: 6px; gap: 2px; }
.menu-item { text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 6px; font: inherit; cursor: pointer; }
.menu-item:hover { background: #f3f4f6; }
.pin-form { display: grid; gap: 8px; max-width: 320px; }
.pin-form .error:empty { display: none; }

/* Users & access */
.access-page h3 { margin: 22px 0 8px; font-size: 15px; }
.access-page table.data { margin-bottom: 6px; }
.access-page td.c, .access-page th.c { text-align: center; width: 110px; }
.access-page tr.muted td { color: var(--muted); }
.access-page td .btn.small + .btn.small { margin-left: 6px; }
@media (max-width: 640px) { .signin { padding: 20px; } .access-page td.c, .access-page th.c { width: auto; } }

/* Do not follow up */
.badge.dnf { background: #fdecec; color: #9b1c1c; border-color: #f5c2c2; }
.dnf-note { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.dnf-box { background: #fdf6f6; border: 1px solid #f5d5d5; border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.dnf-box > div:not(.sub) { white-space: pre-wrap; margin-top: 2px; }
.resume-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.resume-row .lbl { margin: 0; }
.dnf-link { color: #9b1c1c; justify-self: start; }
.dnf-btn { color: #9b1c1c; }
.list-summary:has(.dnf-toggle) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.list-summary .dnf-toggle { margin-left: auto; font-size: 13px; }
.badge.teamio { background: #eef4ff; border-color: #cddcfb; color: #2c4f9e; font-size: 10.5px; }

/* First-run setup and Settings → Open Dental connection */
.signin.setup { max-width: 640px; }
.setup-form { display: grid; gap: 8px; max-width: none !important; justify-self: stretch !important; }
.setup-form .lbl { margin-top: 6px; font-weight: 600; }
.setup-form .help { color: var(--muted); font-size: 12.5px; margin-top: -2px; }
.setup-form .row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.settings-section .setup-form { max-width: 560px; }
.steps { display: flex; gap: 14px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.steps .on { color: var(--ink); font-weight: 700; }
.steps .done { color: var(--ok); }
.checks { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.checks .mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; font-size: 13px; }
.checks .pass .mark { background: #e3f5ec; color: #147a50; }
.checks .fail .mark { background: #fdecec; color: #b42318; }
.checks .warn .mark { background: #fff4de; color: #9a6200; }
.checks .info .mark { background: #eef1f5; color: #52514e; }
table.about th { width: 180px; text-align: left; vertical-align: top; }

/* Updates (Settings → About) */
.release-notes { white-space: pre-wrap; background: #f7f8fa; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 6px 0; }
.update-settings { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13.5px; }
.update-settings select { width: auto; }
#updates p { margin: 4px 0; }
.topbar nav a.has-update::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f5b83d; margin-left: 6px; vertical-align: middle; }

/* X-ray check */
.xray-page .filter-row { align-items: flex-end; }
.xray-page .filter-row input { max-width: 240px; }
.xray-summary { margin: 4px 0 12px; font-size: 14.5px; }
.xray-table tr.x-due td:first-child { box-shadow: inset 3px 0 0 #1d9e5b; }
.xray-table tr.x-notcovered td:first-child { box-shadow: inset 3px 0 0 #e5484d; }
.xray-summary div { margin: 2px 0; }
.near-miss { color: #9a6200; font-weight: 600; }
.pa-ok { color: #147a50; font-weight: 600; }
.pa-over { color: #b42318; font-weight: 600; }
.pa-src { font-size: 11.5px; }
.xray-table td.x-fix { min-width: 150px; }
.xray-table td.x-fix .btn { white-space: nowrap; }
.x-total { margin: 8px 0 4px; padding: 8px 12px; background: #eefaf3; border: 1px solid #bfe8d0; border-radius: 8px; font-size: 15px; }
.x-roi { margin: 4px 0 12px; padding: 10px 14px; border: 1px solid var(--line-strong, #d9dde3); border-radius: 8px; background: #fff; }
.x-roi-nums { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 0; }
.x-roi-nums strong { font-size: 20px; display: block; }
.x-tabs { margin: 0 0 12px; }
.x-removed { margin-bottom: 6px; font-size: 13.5px; }

/* Settings → Phone calls */
.calls-page h3 { margin: 22px 0 6px; font-size: 16px; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; font-family: ui-monospace, monospace; font-size: 12.5px; }
pre.raw { background: #f6f7f9; border: 1px solid var(--line, #e3e6ea); border-radius: 6px; padding: 10px; max-height: 260px; overflow: auto; font-size: 12px; white-space: pre-wrap; word-break: break-all; }

/* ---------- Top bar patient search ---------- */
.gsearch { position: relative; flex: 0 1 300px; min-width: 150px; }
.gsearch input { width: 100%; box-sizing: border-box; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 14px; }
.gsearch input::placeholder { color: rgba(255,255,255,.75); }
.gsearch input:focus { outline: none; background: #fff; color: var(--ink); border-color: #fff; }
.gsearch input:focus::placeholder { color: var(--muted); }
.gs-results { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(420px, 92vw); max-height: 60vh; overflow: auto; background: #fff; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 4px; }
.gs-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; }
.gs-item.on, .gs-item:hover { background: var(--accent-soft); }
.gs-msg { padding: 10px 12px; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; }
  .gsearch { order: 4; flex: 1 1 100%; }
}

/* ---------- Day schedule (home) ---------- */
.sched-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.sched-head h1.page { margin: 0; }
.sched-nav { display: flex; align-items: center; gap: 6px; }
/* flex: none keeps each button as wide as its text (a min-width alone lets flex shrink it to that width) */
.sched-nav > * { flex: none; }
.sched-nav .btn.small { min-width: 38px; font-size: 15px; }
.sched-nav { flex-wrap: wrap; }
.sched-nav input[type=date] { padding: 5px 8px; width: auto; max-width: 170px; }
.sched-filters { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin: 6px 0 12px; }
.op-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.op-chip { border: 1px solid var(--line-strong); background: #fff; color: var(--muted); border-radius: 999px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 13.5px; text-decoration: line-through; }
.op-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }
.op-chip .n { opacity: .75; font-size: 12px; margin-left: 2px; }
.sched-table tbody tr.sched-row { cursor: pointer; }
.sched-table tbody tr.sched-row:hover td { background: var(--accent-soft); }
.sched-table tbody tr.sched-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sched-table tr.done td { opacity: .6; }
.sched-meta { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; margin-top: 2px; }
.sched-meta .badge { font-size: 11px; padding: 1px 7px; }
.proc { display: inline-block; background: #eef1f6; border-radius: 5px; padding: 1px 6px; margin: 1px 4px 1px 0; font-size: 12.5px; white-space: nowrap; }
.sched-note { max-width: 320px; white-space: pre-line; font-size: 13px; }

/* ---------- Patient page ---------- */
.patient-page .pat-card { margin-bottom: 14px; }
.patient-page h1.pat-name { margin: 0 0 2px; font-size: 22px; }
.pt-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.pt-col { display: grid; gap: 14px; }
.pt-fu { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pt-appts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pt-appts li { border-left: 3px solid var(--accent); padding-left: 10px; }
.patient-page .plan-table tbody tr { cursor: pointer; }
table.data.compact td { padding: 5px 8px; font-size: 13.5px; }
@media (max-width: 900px) { .pt-grid { grid-template-columns: minmax(0, 1fr); } }

/* Schedule notes: long ones start cut to 3 lines (2 on phones), with More / Less */
.note-text { white-space: pre-line; }
.note-text.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.note-more { font-size: 12.5px; padding: 2px 0; }

/* Schedule on phones: one compact card per appointment
   8:00 AM   Miller, Rickey (Rick)          OP-4
   to 8:30   72 · #3556 [Confirmed]   CE · Hyg KB
   PerEx  Pro  4BW
   Note, cut to 2 lines…  More                        */
@media (max-width: 640px) {
  /* table.cards.sched-table: outranks the general phone-card rules in mobile.css */
  table.cards.sched-table tbody tr.sched-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "time pat op" "time pat prov" "procs procs procs" "note note note";
    gap: 2px 10px; padding: 9px 12px;
  }
  table.cards.sched-table tbody td[data-label]::before { display: none; }
  table.cards.sched-table tbody td:nth-child(1) { grid-area: time; font-size: 13.5px; line-height: 1.25; }
  table.cards.sched-table tbody td:nth-child(1) .sub { font-size: 11.5px; }
  table.cards.sched-table tbody td.card-title { grid-area: pat; }
  table.cards.sched-table tbody td.card-title > strong { font-size: 15px; }
  table.cards.sched-table .sched-meta { font-size: 12px; margin-top: 1px; }
  table.cards.sched-table tbody td:nth-child(3) { grid-area: op; text-align: right; font-size: 12px; font-weight: 600; color: var(--accent); }
  table.cards.sched-table tbody td:nth-child(4) { grid-area: prov; text-align: right; font-size: 12px; color: var(--muted); }
  table.cards.sched-table tbody td:nth-child(4) .sub { display: inline; margin-left: 4px; }
  table.cards.sched-table tbody td.sched-procs { grid-area: procs; margin-top: 3px; }
  table.cards.sched-table tbody td.sched-note { grid-area: note; max-width: none; font-size: 12.5px; color: var(--muted); }
  table.cards.sched-table tbody td.blank { display: none; }
  table.cards.sched-table .note-text.clamp { -webkit-line-clamp: 2; line-clamp: 2; }
  table.cards.sched-table .proc { font-size: 12px; padding: 0 5px; }
}

/* ---------- Visual schedule (one column per operatory; blocks as tall as the appointment) ---------- */
.sched-view-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.zoom-btns { display: inline-flex; gap: 4px; }
.zoom-btns .btn.small { min-width: 34px; font-size: 16px; padding: 2px 8px; }
.vs { background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.vs-heads { display: flex; position: sticky; top: 0; z-index: 6; background: #f9fafb; border-bottom: 1px solid var(--line-strong); border-radius: 10px 10px 0 0; }
.vs-axis-head, .vs-axis { width: 48px; flex: none; }
.vs-head { flex: 1 1 0; min-width: 0; padding: 7px 2px; border-left: 1px solid var(--line); text-align: center; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-grid { display: flex; }
.vs-axis { position: relative; }
.vs-hour { position: absolute; right: 6px; margin-top: 2px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.vs-cols { flex: 1; min-width: 0; display: flex; position: relative;
  background-image: repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px calc(var(--vs-hour) / 2), #eef0f3 calc(var(--vs-hour) / 2) calc(var(--vs-hour) / 2 + 1px), transparent calc(var(--vs-hour) / 2 + 1px) var(--vs-hour)); }
.vs-col { flex: 1 1 0; min-width: 0; position: relative; border-left: 1px solid var(--line); }
.vs-body { position: relative; }
.vblock { position: absolute; box-sizing: border-box; margin: 0; border: 0; border-left: 4px solid var(--vb-strong); border-radius: 5px; padding: 2px 5px;
  background: var(--vb-bg); color: var(--ink); text-align: left; overflow: hidden; cursor: pointer; font: inherit; font-size: 12px; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0,0,0,.08); container-type: size; }
.vblock:hover, .vblock:focus-visible { z-index: 4; box-shadow: 0 0 0 2px var(--vb-strong); outline: none; }
.k-hyg { --vb-bg: #dcf3ed; --vb-strong: #1b9e84; }
.k-tx { --vb-bg: #e1ebfb; --vb-strong: #3b6fd4; }
.k-np { --vb-bg: #fdf0d6; --vb-strong: #d99a16; }
.k-emerg { --vb-bg: #fde3e4; --vb-strong: #d9485f; }
.k-none { --vb-bg: #eef0f3; --vb-strong: #9aa3ae; }
.vblock.custom { --vb-strong: var(--vb); --vb-bg: color-mix(in srgb, var(--vb) 22%, white); }
.vblock.done { opacity: .55; }
.vb-full { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vb-time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.vb-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-procs, .vb-prov { font-size: 11px; color: #3c4450; overflow: hidden; text-overflow: ellipsis; }
.vb-prov { color: var(--muted); white-space: nowrap; }
.vb-mini { display: none; font-weight: 700; font-size: 11px; letter-spacing: .02em; }
/* Not enough room for details: shrink to initials (tap for details) */
@container (max-width: 78px) { .vb-full { display: none; } .vb-mini { display: block; } }
@container (max-height: 34px) { .vb-time, .vb-procs, .vb-prov { display: none; } }
.vs-now { position: absolute; left: -4px; right: 0; height: 2px; background: #e5484d; z-index: 5; pointer-events: none; }
.vs-now::before { content: ''; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
.vs-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.vs-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; border-left: 3px solid var(--vb-strong); background: var(--vb-bg); }
.vs-legend i.done-swatch { background: #eef0f3; border-left-color: #c3c9d1; opacity: .6; }
@media (max-width: 640px) {
  .vs-axis-head, .vs-axis { width: 36px; }
  .vs-hour { font-size: 10px; right: 3px; }
  .vs-head { font-size: 11.5px; padding: 6px 1px; }
  .vblock { padding: 1px 3px; border-left-width: 3px; }
  .sched-view-tools { margin-left: 0; }
}

/* Analytics: comparison with earlier periods */
.compare-card { margin: 14px 0; padding: 14px 16px; }
.compare-card h2 { margin: 0; font-size: 16px; }
.compare-table th:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.compare-table td.cur, .compare-table th.cur { background: #f3f6fb; font-weight: 700; }
.compare-table td, .compare-table th { white-space: nowrap; }
.compare-table .delta { font-size: 12.5px; }
.compare-card { padding: 0; }
.compare-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.compare-card > summary::-webkit-details-marker { display: none; }
.compare-card .compare-title { font-weight: 600; font-size: 15px; }
.compare-card .compare-toggle::after { content: 'Show the numbers ▾'; }
.compare-card[open] .compare-toggle::after { content: 'Hide ▴'; }
.compare-card[open] > summary { border-bottom: 1px solid var(--line); }
.compare-card > .table-scroll, .compare-card > .footnote { margin: 0 16px; }
.compare-card > .footnote { margin-bottom: 12px; }

/* Mini column charts in the tiles: earlier periods in gray, this period in the accent color */
.spark { margin: 6px 0 2px; }
.spark svg { display: block; width: 100%; height: 34px; }
.spark rect { fill: #c9d0da; }
.spark rect.cur { fill: var(--accent); }
.spark-cap { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* Backup & restore */
.backup-page h3 { margin: 22px 0 6px; font-size: 16px; }
.backup-summary { border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: #f9fafb; }
.warn-box { background: #fff7e6; border: 1px solid #f3d19c; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.restore-form input[type=file] { padding: 6px 0; }

/* About: going back to an earlier version */
.revert-line { margin-top: 10px; }
.revert-box { margin-top: 12px; padding: 12px 14px; border: 1px solid #f3d19c; background: #fffaf0; border-radius: 8px; }
.revert-box h4 { margin: 0 0 6px; font-size: 14.5px; }
.revert-box select { max-width: 100%; }
/* iPads and phones in the office (Settings → About): the staff address with its QR code. */
.tunnel-loc { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0; padding: 12px 14px; border: 1px solid #d9dee3; border-radius: 8px; }
.tunnel-loc .qr { flex: none; width: 140px; height: 140px; background: #fff; padding: 6px; border-radius: 6px; }
.tunnel-loc .qr img { width: 100%; height: 100%; display: block; }
.tunnel-loc p { margin: 0 0 6px; overflow-wrap: anywhere; }
@media (max-width: 520px) { .tunnel-loc { flex-direction: column; } }

/* Settings → About → Open Dental button */
.od-steps { margin-top: 6px; }
.od-steps summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.od-steps #ob-base { width: 100%; max-width: 420px; font-family: ui-monospace, monospace; font-size: 12.5px; }
.od-step-list { padding-left: 20px; margin: 10px 0; }
.od-step-list li { margin: 6px 0; }
.od-fields { margin-top: 6px; max-width: 640px; }
.od-fields th { width: 12em; white-space: normal; }
.od-fields .copy-row input { min-width: 0; }
@media (max-width: 640px) {
  .od-fields tr, .od-fields th, .od-fields td { display: block; width: auto; }
  .od-fields th { border-bottom: 0; padding-bottom: 2px; }
}

/* ---------- Automatic backups (Settings → Backup & restore) ---------- */
.backup-alert { background: #fdf1ef; border-bottom: 1px solid #e6b4ae; color: var(--danger); padding: 10px 20px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.backup-alert[hidden] { display: none; }
.backup-alert a { font-weight: 600; }
.ab-card { border: 1px solid var(--line); border-radius: 10px; padding: 4px 16px 14px; margin: 12px 0 8px; background: var(--card); }
.ab-card h3 { margin-top: 12px; }
.ab-card h4 { font-size: 14px; margin: 16px 0 4px; }
.ab-card code { word-break: break-all; }
.ab-status { border-left: 4px solid var(--line-strong); padding: 6px 12px; margin: 8px 0; display: grid; gap: 2px; }
.ab-status.good { border-left-color: var(--ok); }
.ab-status.bad { border-left-color: var(--danger); }
.ab-status .error { margin: 4px 0 0; }
.ab-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ab-actions .btn { text-decoration: none; }
.ab-offsite { margin: 10px 0; display: grid; gap: 2px; }
.ab-offsite .help { color: var(--muted); font-size: 12.5px; margin: 0 0 4px 26px; }
.ab-offsite > div:not(.help), .ab-offsite > p { margin-left: 26px; }
.ab-offsite .check.disabled { cursor: not-allowed; color: var(--muted); }
.or-list { display: grid; gap: 2px; margin: 6px 0 10px; }
#or-progress progress { width: 100%; height: 14px; }
.ab-files { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ab-files li span:first-child { word-break: break-all; color: var(--ink); }
#ab-form select { max-width: 220px; }
#ab-login-fields { display: grid; gap: 8px; }
#ab-login-fields[hidden] { display: none; }
@media (max-width: 800px) {
  .ab-card { padding: 4px 12px 12px; }
  .ab-actions .btn { flex: 1 1 calc(50% - 8px); text-align: center; }
  #ab-form select { max-width: none; }
}

/* Settings → About: the Diastema connection card */
#edge-connection .lbl { display: block; font-weight: 600; margin: 10px 0 4px; }
#edge-connection .code-input { font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: .04em; width: 21em; max-width: 100%; text-transform: uppercase; }

/* ---------- Devices: the pairing page, Settings → Devices, and the approval banner ---------- */
.signin.pairing h1 { font-size: 21px; }
.signin.pairing h2 { font-size: 15px; margin: 10px 0 0; }
.signin.pairing p { margin: 0; line-height: 1.45; }
.signin.pairing .pair-practice { font-weight: 600; color: var(--muted); }
.signin.pairing form.pair-form { max-width: none; justify-self: stretch; gap: 6px; }
.pair-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pair-row input { flex: 1 1 12em; min-width: 0; width: auto; }
.pair-row .btn { flex: none; }
.code-input { font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.big-code { font-family: ui-monospace, Consolas, monospace; font-size: 30px; font-weight: 700; letter-spacing: .12em; margin: 4px 0; color: var(--ink); }
.match-code { font-family: ui-monospace, Consolas, monospace; font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.pair-code { display: flex; gap: 18px; align-items: flex-start; }
.pair-code p { margin: 0 0 8px; }
.pair-code .qr { flex: none; width: 180px; height: 180px; background: #fff; padding: 6px; border: 1px solid var(--line); border-radius: 8px; }
.pair-code .qr svg { width: 100%; height: 100%; display: block; }
@media (max-width: 560px) { .pair-code { flex-direction: column; } .pair-code .qr { align-self: center; } }
#dv-err:empty { display: none; }
.devices-page .notice { background: #fff8e6; border: 1px solid #f0d58a; border-radius: 8px; padding: 8px 12px; }
.devices-page td .btn.small + .btn.small { margin-left: 6px; }
.device-requests { background: #eef4ff; border-bottom: 1px solid #bcd0f5; padding: 10px 20px; font-size: 14px; display: grid; gap: 8px; }
.device-requests[hidden] { display: none; }
.device-requests .req { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; }