/* Staff app (/admin). Builds on the shared tokens and components in style.css; page-specific rules only. */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.adm-modal-open { overflow: hidden; }
.adm code { font-size: .85em; background: var(--surface-2); padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere; }

/* ---------- boot, login, clinic picker ---------- */
.adm-boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 12px; }
.adm-login-brand { margin-bottom: 14px; }
.adm-login-title { font-size: 1.3rem; margin-bottom: .6em; }
.adm-login-note { margin: 12px 0 0; text-align: center; }
.adm-login-foot { margin: 6px 0 0; text-align: center; }
/* «Үйлчилгээний нөхцөл · Нууцлал · Аюулгүй байдал» (docs/legal-pages-spec.md §2) */
.adm-login-legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: .82rem;
}
.adm-login-legal a { color: var(--muted); white-space: nowrap; }
.adm-login-legal a:hover { color: var(--text); }

.adm-picker { width: 100%; max-width: 440px; }
.adm-picker-list { display: grid; gap: 8px; margin: 14px 0; }
.adm-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.adm-pick:hover { border-color: var(--primary); background: var(--primary-soft); }
.adm-pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.adm-pick-name { font-weight: 700; overflow-wrap: anywhere; }
.adm-pick-meta { font-size: .85rem; color: var(--muted); }
.adm-picker-foot {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 12px;
}

/* ---------- shell: nav, header, banners ---------- */
.adm-nav { display: flex; flex-direction: column; gap: 4px; }
.adm-side-user { padding: 12px 8px 0; border-top: 1px solid var(--border); font-size: .9rem; overflow-wrap: anywhere; }
.adm-side-name { font-weight: 600; }

.adm-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
}
.adm-top-clinic { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.adm-top-name { font-weight: 800; font-size: 1.08rem; overflow-wrap: anywhere; }
.adm-top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-switch { width: auto; max-width: 280px; padding: .38em .6em; font-size: .9rem; }
.badge.adm-role { background: var(--primary-soft); color: var(--primary); }
.badge.adm-role.adm-role-imp { background: var(--warn-soft); color: var(--warn); }

.adm-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: .75em 1em; margin-bottom: 12px; border-radius: var(--radius-sm); font-size: .93rem;
  border: 1px solid transparent;
}
.adm-banner > span { flex: 1 1 260px; }
.adm-banner-warn { background: var(--warn-soft); color: var(--warn); }
.adm-banner-danger { background: var(--danger-soft); color: var(--danger); }
.adm-banner-imp { background: var(--info-soft); color: var(--info); border-color: currentColor; }
.adm-banner a { color: inherit; font-weight: 700; }

@media (max-width: 860px) {
  .adm-nav { flex-direction: row; flex: 0 0 auto; }
  .adm-side-user { display: none; }
  .adm-switch { flex: 1 1 160px; max-width: none; }
}
@media (max-width: 560px) {
  .adm-hide-sm { display: none; }
  .adm-top-actions { width: 100%; }
}

/* ---------- generic bits ---------- */
#view.adm-busy { opacity: .55; transition: opacity .2s .15s; }
.adm-loading-msg { padding: 20px 0; }
.adm-nowrap { white-space: nowrap; }
.adm-clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-clip-cell { max-width: 320px; }
.adm-icon-cell { font-size: 1.3rem; }
.adm-m0 { margin: 0; }
.adm-intro { margin: -8px 0 14px; }
.adm-list-meta { margin: -4px 0 8px; min-height: 1.3em; }
.adm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-stack { display: grid; gap: 14px; min-width: 0; }
.adm-stack > * { min-width: 0; }
.adm-section { margin-top: 24px; }
.adm-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.adm-section-head h3 { margin: 0; }
.adm-yes { color: var(--ok); font-weight: 600; }
.adm-no { color: var(--danger); font-weight: 600; }
.adm-warn-text { color: var(--warn); }
.adm-notes, .adm-pet-notes { white-space: pre-line; }
.adm-notes { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--border); font-size: .93rem; }
.adm-pet-notes { margin: 14px 0 0; }
.adm-alert-warn { background: var(--warn-soft); color: var(--warn); }
.adm-empty-state { text-align: center; max-width: 480px; margin: 40px auto; }
.adm-page-error { display: grid; gap: 10px; justify-items: start; }
.adm-more { display: flex; justify-content: center; margin-top: 14px; }
.adm-row-off td:not(.actions) { opacity: .6; }
/* Older vaccination entries (status superseded) are history the clinic still reads (e.g. a previous lot number):
   marked by a background and the «Шинэчлэгдсэн» badge, never faded below AA contrast. */
.adm-vx-old td { background: var(--surface-2); }

.btn.adm-btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.adm-btn-danger:hover { background: var(--danger); filter: brightness(.92); }
.btn.adm-btn-danger { color: var(--on-danger); }

/* badges */
.badge.adm-review { background: var(--warn-soft); color: var(--warn); margin-left: 2px; vertical-align: middle; }
.badge.adm-src { background: var(--primary-soft); color: var(--primary); margin-top: 4px; }
.badge.adm-rec-draft { background: var(--warn-soft); color: var(--warn); }
.badge.adm-rec-final { background: var(--ok-soft); color: var(--ok); }
.badge.adm-imp-badge { background: var(--info-soft); color: var(--info); }
.badge.adm-role-badge { background: var(--surface-2); color: var(--text); }
.badge.adm-cst-pending { background: var(--warn-soft); color: var(--warn); }
.badge.adm-cst-active { background: var(--ok-soft); color: var(--ok); }
.badge.adm-cst-suspended { background: var(--danger-soft); color: var(--danger); }
.badge.adm-cst-closed { background: var(--surface-2); color: var(--muted); }

/* toolbars */
.adm-toolbar .adm-inline-check { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; white-space: nowrap; cursor: pointer; }
.toolbar .adm-inline-check input { width: auto; min-width: 0; margin: 0; flex: none; }
.adm-daynav { display: flex; align-items: center; gap: 6px; }
.toolbar .adm-daynav input { min-width: 0; width: auto; }
@media (max-width: 860px) {
  .adm-daynav { flex: 1 1 100%; }
  .toolbar .adm-daynav input { flex: 1 1 auto; }
}

/* tables: quieter links, buttons on one line */
.table-wrap td a { text-decoration: none; }
.table-wrap td a:hover { text-decoration: underline; }
.table-wrap td .btn { white-space: nowrap; }

/* Table rows become cards; each cell shows its column title (data-label, set by admin.js). admin.js adds
   .adm-as-cards on phones and to any table that does not fit its container (e.g. a detail-page column on a laptop),
   so row actions are never hidden at the end of a horizontal scroll area. */
.table-wrap.adm-cards.adm-as-cards { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.adm-as-cards table, .adm-as-cards tbody, .adm-as-cards tr, .adm-as-cards td { display: block; width: 100%; }
.adm-as-cards thead { display: none; }
.adm-as-cards tbody tr {
  margin-bottom: 10px; padding: 2px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.adm-as-cards tbody tr:hover { background: var(--surface); }
.adm-as-cards tbody tr td {
  position: relative; min-height: 2.4em; padding: 8px 0 8px 34%;
  border-bottom: 1px dashed var(--border); text-align: left; overflow-wrap: anywhere;
}
.adm-as-cards tbody tr td::before {
  content: attr(data-label); position: absolute; left: 0; top: 10px; width: 31%;
  color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3;
}
.adm-as-cards tbody tr td:last-child,
.adm-as-cards tbody tr td:has(+ td.adm-td-empty:last-child) { border-bottom: 0; }
.adm-as-cards tbody tr td[data-label=""] { padding-left: 0; }
.adm-as-cards tbody tr td[data-label=""]::before { display: none; }
.adm-as-cards tbody tr td.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding-left: 0; white-space: normal; }
.adm-as-cards td.actions .btn + .btn { margin-left: 0; }
/* Staff members: the owner's two row actions (reset link, deactivate) stack instead of widening the table, so the
   list stays a table on a 1366–1536 px laptop. */
.adm-staff td.actions { white-space: normal; }
.adm-email { overflow-wrap: break-word; }
.adm-staff td.actions .btn { margin: 2px 0 2px 4px; }
.adm-as-cards tbody tr td.adm-td-empty { display: none; }
.adm-as-cards tbody tr td.empty { padding: 22px 0; text-align: center; }
.adm-as-cards .adm-clip { max-width: 100%; white-space: normal; }
.adm-as-cards .adm-clip-cell { max-width: none; }
.adm-as-cards .adm-nowrap { white-space: normal; }

/* status / role selects inside tables */
.adm-status-select, .adm-role-select {
  width: auto; min-width: 150px; padding: .3em .5em; font-size: .88rem; font-weight: 600;
}
.adm-status-select[data-status="pending"] { border-color: var(--warn); color: var(--warn); }
.adm-status-select[data-status="confirmed"] { border-color: var(--info); color: var(--info); }
.adm-status-select[data-status="completed"] { border-color: var(--ok); color: var(--ok); }
.adm-status-select[data-status="cancelled"] { color: var(--muted); }
.adm-status-select[data-status="no_show"] { border-color: var(--danger); color: var(--danger); }

/* ---------- dashboard ---------- */
.adm-stats { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
a.adm-stat { color: inherit; text-decoration: none; transition: border-color .15s, transform .05s; }
a.adm-stat:hover { border-color: var(--primary); }
a.adm-stat:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.adm-stat-warn .value { color: var(--warn); }
@media (max-width: 560px) {
  .adm-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .adm-stats .stat { padding: 14px; }
  .adm-stats .stat .value { font-size: 1.4rem; }
}
.adm-dash-side { display: grid; gap: 14px; }

.adm-checklist { margin-bottom: 18px; }
.adm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.adm-card-head h3 { margin: 0; }
.adm-progress { height: 6px; margin: 10px 0 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.adm-progress > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.adm-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.adm-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.adm-step-mark {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border);
  display: grid; place-items: center; font-size: .78rem; font-weight: 800; line-height: 1;
}
.adm-steps li.is-done .adm-step-mark { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.adm-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 600; }
.adm-steps li.is-done .adm-step-text a { color: var(--muted); }
.adm-dash-side .adm-steps { grid-template-columns: 1fr; }
.adm-dash-side .adm-checklist { margin-bottom: 0; }
.adm-checklist-done summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; font-weight: 700; color: var(--ok); list-style: none;
}
.adm-checklist-done summary::-webkit-details-marker { display: none; }
.adm-checklist-done[open] summary { margin-bottom: 12px; }

/* ---------- owner detail ---------- */
.adm-consents { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.adm-consents li + li { padding-top: 10px; border-top: 1px dashed var(--border); }
.adm-push-devices { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.adm-push-devices li + li { padding-top: 10px; border-top: 1px dashed var(--border); }
.adm-push-devices .adm-consent-head { align-items: center; }
.adm-consent-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-weight: 500; }

/* ---------- records ---------- */
.adm-record-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.adm-record-head h4 { overflow-wrap: anywhere; }
.adm-record-head h4 .badge { vertical-align: 2px; margin-right: 4px; }
.adm-record-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-record.is-draft { border-left-color: var(--warn); }
.adm-record p { white-space: pre-line; overflow-wrap: anywhere; }
.adm-record-by { margin-top: 8px; }

/* ---------- modals & forms ---------- */
.modal.adm-modal-wide { max-width: 760px; }
.modal footer { flex-wrap: wrap; }
.adm-confirm-msg { margin: 0 0 6px; font-weight: 500; }
.adm-form-subject { padding: 10px 12px; margin-bottom: 14px; border-radius: var(--radius-sm); background: var(--surface-2); overflow-wrap: anywhere; }
.adm-help { margin-top: 4px; font-size: .82rem; color: var(--muted); }
p.adm-help { margin-bottom: 0; }
.adm-check label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; cursor: pointer; }
.adm-check input { width: auto; margin: 0; flex: 0 0 auto; }
.adm-check .adm-help { margin-left: 26px; }
.adm-lookup .adm-lookup-q { margin-bottom: 6px; }
.adm-slot-box { margin: -4px 0 14px; }
.adm-slot-box .slots { max-height: 184px; overflow-y: auto; padding: 2px; }
.adm-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.adm-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.adm-copy-row { display: flex; gap: 8px; margin-bottom: 10px; }
.adm-copy-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; }

/* ---------- settings ---------- */
.adm-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .adm-settings { grid-template-columns: minmax(0, 1fr); } }
.adm-set-card { scroll-margin-top: 16px; }
@media (max-width: 860px) { .adm-set-card { scroll-margin-top: 72px; } }
.adm-set-card h3 { margin-bottom: .35em; }

.adm-hours { display: grid; gap: 6px; margin-bottom: 12px; }
.adm-hours-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) 10px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.adm-hours-row select { min-width: 0; padding: .4em .5em; font-variant-numeric: tabular-nums; }
.adm-hours-day { font-weight: 600; }
.adm-hours-sep { color: var(--muted); text-align: center; }
.adm-hours-closed { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .88rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.adm-hours-closed input { width: auto; margin: 0; }
.adm-hours-row.is-closed .adm-hours-day { color: var(--muted); }
.adm-hours-row.is-closed select { opacity: .45; }
.adm-hours-actions { justify-content: space-between; }
@media (max-width: 480px) {
  .adm-hours-row { grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr); }
  .adm-hours-day { grid-column: 1 / 3; }
  .adm-hours-closed { grid-column: 3; grid-row: 1; justify-self: end; }
}

.adm-closures { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.adm-closures li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-wrap: anywhere;
}
.adm-closures li.muted { border-style: dashed; }
.adm-closure-fields { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.adm-closure-fields .field { margin: 0; }
@media (max-width: 560px) { .adm-closure-fields { grid-template-columns: minmax(0, 1fr); } }

.adm-slug-row { display: flex; align-items: center; gap: 8px; }
.adm-slug-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.adm-slug-prefix { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.adm-toggles { display: grid; gap: 8px; margin-bottom: 16px; }
.adm-toggle {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; font-weight: 400;
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
}
.adm-toggle input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.adm-toggle > span { display: flex; flex-direction: column; gap: 2px; }
.adm-booking { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.adm-qr {
  flex: 0 0 auto; width: 168px; height: 168px; padding: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.adm-booking-text { flex: 1 1 220px; min-width: 0; }
.adm-booking-text .adm-actions { margin-bottom: 8px; }
.adm-booking-text .adm-help { margin-top: 0; }
@media (max-width: 480px) { .adm-qr { margin: 0 auto; } }

/* ---------- audit ---------- */
table.adm-audit td { vertical-align: top; }
.adm-audit-details summary { cursor: pointer; color: var(--primary); font-weight: 600; white-space: nowrap; }
.adm-audit-kv { margin-top: 8px; max-width: 560px; font-size: .85rem; }
.adm-audit-kv dd { overflow-wrap: anywhere; }
.adm-audit-meta { margin: 8px 0 0; overflow-wrap: anywhere; }

/* ---------- export ---------- */
.adm-export { max-width: 680px; }
.adm-export-list { padding-left: 1.2em; }

/* ---------- pet photos (Phase 1b) ---------- */
.adm-label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .3em; }
.adm-block { display: block; }
.adm-thumb {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--border);
}
.adm-thumb-ph { display: inline-grid; place-items: center; font-size: 1.2rem; line-height: 1; }
.adm-pet-cell { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; vertical-align: middle; }
.adm-pet-cell b { overflow-wrap: anywhere; }
.adm-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; letter-spacing: .02em; overflow-wrap: anywhere; }
.adm-chip-line { margin-top: 2px; }

.adm-photo-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.adm-photo-preview {
  flex: 0 0 auto; width: 112px; height: 112px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.adm-photo-preview img, .adm-photo-preview canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.adm-photo-edit[aria-busy="true"] .adm-photo-preview { opacity: .45; }
.adm-photo-ph { font-size: 2.6rem; line-height: 1; }
.adm-photo-side { flex: 1 1 220px; min-width: 0; display: grid; gap: 8px; }
.adm-photo-btns { display: flex; flex-wrap: wrap; gap: 6px; }

.adm-pet-photo {
  position: relative; display: block; width: 100%; max-width: 300px; aspect-ratio: 1; margin: 0 auto 16px; padding: 0;
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
  font: inherit; color: inherit;
}
button.adm-pet-photo, a.adm-pet-photo { cursor: pointer; }
button.adm-pet-photo:hover, a.adm-pet-photo:hover { border-color: var(--primary); }
button.adm-pet-photo:focus-visible, a.adm-pet-photo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.adm-pet-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.adm-pet-photo .adm-photo-ph { display: grid; place-items: center; height: 100%; font-size: 4.2rem; }
.adm-pet-photo-cap {
  position: absolute; left: 8px; bottom: 8px; padding: .25em .75em; border-radius: 999px;
  background: rgba(8, 14, 12, .66); color: #fff; font-size: .82rem; font-weight: 600;
}
@media (max-width: 560px) { .adm-pet-photo { max-width: 220px; } }

/* checkbox next to a date in a two-column row (sterilization) */
.grid-2 > .adm-check { align-self: end; padding-bottom: 10px; }
@media (max-width: 640px) { .grid-2 > .adm-check { padding-bottom: 0; } }

/* ---------- vaccinations & due list ---------- */
.badge.adm-vx-overdue { background: var(--danger-soft); color: var(--danger); }
.badge.adm-vx-soon { background: var(--warn-soft); color: var(--warn); }
.badge.adm-vx-ok { background: var(--ok-soft); color: var(--ok); }
.badge.adm-vx-later { background: var(--info-soft); color: var(--info); }
.badge.adm-vx-off { background: var(--surface-2); color: var(--muted); }
.adm-section-head h3 .badge { vertical-align: 3px; margin-left: 4px; }
tr.adm-due-late > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.adm-as-cards tr.adm-due-late { border-left: 3px solid var(--danger); }
.adm-as-cards tr.adm-due-late > td:first-child { box-shadow: none; }
.adm-sms { margin-left: 4px; cursor: help; }

.adm-due-card { margin-bottom: 18px; }
.adm-due-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px 22px; align-items: start; margin-top: 12px; }
@media (max-width: 760px) { .adm-due-body { grid-template-columns: minmax(0, 1fr); } }
.adm-due-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-due-count {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; color: inherit; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .15s;
}
.adm-due-count:hover { border-color: var(--primary); }
.adm-due-count:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.adm-due-count b { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adm-due-count span { font-size: .82rem; color: var(--muted); }
.adm-due-count.is-late b { color: var(--danger); }
.adm-due-count.is-soon b { color: var(--warn); }
.adm-due-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 18px; }
.adm-due-mini li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
}
.adm-due-mini .adm-pet-cell { color: inherit; text-decoration: none; flex: 1 1 auto; }
.adm-due-mini .adm-pet-cell:hover b { text-decoration: underline; }
.adm-due-mini .badge { flex: none; }

/* ---------- passkeys (docs/passkey-spec.md §4): login, «Бүртгэл» dialog, suggestion banner ---------- */
.adm [hidden] { display: none !important; }
.adm-login-or { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-size: .85rem; }
.adm-login-or::before, .adm-login-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.alert.adm-alert-info { background: var(--info-soft); color: var(--info); }
.adm-banner-pk { background: var(--primary-soft); color: var(--text); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.adm-banner-pk .adm-actions { flex: 0 1 auto; }
/* Terms of Service re-acceptance (owner only, docs/legal-pages-spec.md §3): a request, not a warning. */
.adm-banner-terms { background: var(--info-soft); color: var(--text); border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.adm-banner-terms .adm-actions { flex: 0 1 auto; }
.adm-banner-terms a.btn { font-weight: 600; }
.adm-banner-terms .btn[aria-disabled="true"] { opacity: .65; cursor: progress; }
.adm-terms-prev { color: var(--muted); font-size: .88rem; }
.adm-banner-err { flex: 1 0 100%; margin: 0; color: var(--danger); font-weight: 600; font-size: .9rem; }
/* After «Зөвшөөрөх» the banner is gone and focus continues at the page heading (programmatic, tabindex=-1). */
#view h1[tabindex="-1"]:focus { outline: none; }
#view h1[tabindex="-1"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 560px) {
  .adm-banner-terms .adm-actions { width: 100%; }
  .adm-banner-terms .adm-actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
}

.adm-acct-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.adm-acct-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); font-weight: 800;
}
.adm-acct-id { min-width: 0; overflow-wrap: anywhere; }
/* overflow-y: hidden — overflow-x: auto alone makes the 1 px tab overlap (margin-bottom: -1px) a vertical scrollbar */
.adm-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; }
.adm-tab {
  flex: 0 0 auto; margin-bottom: -1px; padding: .55em .9em; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
.adm-tab:hover { color: var(--text); }
.adm-tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.adm-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px 6px 0 0; }

.adm-pk-intro { margin: 0 0 12px; }
.adm-pk-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.adm-pk-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.adm-pk-ic { flex: none; font-size: 1.3rem; line-height: 1; }
.adm-pk-main { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.adm-pk-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.adm-pk-btns { display: flex; gap: 6px; flex: none; margin-left: auto; }
.badge.adm-pk-sync { background: var(--info-soft); color: var(--info); }
.badge.adm-pk-local { background: var(--surface-2); color: var(--text); }
.adm-pk-none { padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.adm-pk-limit { margin-right: auto; align-self: center; }
.adm-pk-steps { margin: 0 0 14px; padding-left: 1.3em; color: var(--muted); }
.adm-pk-steps li + li { margin-top: 2px; }
.adm-pk-history { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.adm-pk-history > summary { cursor: pointer; font-weight: 600; }
.adm-pk-history > p { margin: 6px 0 8px; }
.adm-pk-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.adm-pk-log-item { display: grid; gap: 1px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); overflow-wrap: anywhere; }
.adm-pk-log-item.is-add { border-left: 3px solid var(--info); }
@media (max-width: 560px) {
  .adm-block-sm { display: block; }
  .adm-sep-sm { display: none; }
}

/* ---------- vet schedules (docs/vet-schedule-spec.md §5) ---------- */
.badge.adm-sched-clinic { background: var(--surface-2); color: var(--muted); }
.badge.adm-sched-own { background: var(--primary-soft); color: var(--primary); }
/* time off: colored by kind, always with its icon and label */
.badge.adm-off { display: inline-flex; align-items: center; gap: .3em; }
.badge.adm-off-vacation { background: var(--info-soft); color: var(--info); }
.badge.adm-off-sick { background: var(--danger-soft); color: var(--danger); }
.badge.adm-off-training { background: var(--warn-soft); color: var(--warn); }
.badge.adm-off-other { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.badge.adm-off-block { font-variant-numeric: tabular-nums; }
.adm-m0b { margin: 0 0 12px; }

/* appointment form: why the chosen vet has no free time that day */
.adm-slots-why { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }
.adm-slots-why .small { margin-top: 2px; color: var(--muted); }
.adm-slots-why[data-reason="vet_off"] { box-shadow: inset 3px 0 0 var(--info); }
.adm-slots-why[data-reason="full"] { box-shadow: inset 3px 0 0 var(--warn); }

/* dashboard «Өнөөдрийн эмч нар» */
.adm-tv-sum { margin: 4px 0 0; }
.adm-tv-list {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: 18px;
}
.adm-tv-card { margin-bottom: 18px; }
.adm-tv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); min-width: 0; }
.adm-tv-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-tv-name { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.adm-tv-name:hover { text-decoration: underline; }
.adm-tv-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .86rem; }
.adm-tv-int { font-variant-numeric: tabular-nums; }
.adm-tv-reason { overflow-wrap: anywhere; }
.adm-tv.is-vet_not_working .adm-tv-name, .adm-tv.is-clinic_closed .adm-tv-name { color: var(--muted); }
.adm-tv-count {
  flex: none; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: .8rem; text-decoration: none; white-space: nowrap;
}
.adm-tv-count b { color: var(--text); font-size: .92rem; font-variant-numeric: tabular-nums; }
.adm-tv-count:hover { border-color: var(--primary); }
.adm-tv-count.is-zero b { color: var(--muted); }
.adm-tv-count.is-clash { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.adm-tv-count.is-clash b { color: var(--warn); }

/* vet page: «Ажлын хуваарь» + «Чөлөө» */
.adm-vet-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1200px) { .adm-vet-grid { grid-template-columns: minmax(0, 1fr); } }
.adm-vs-mode { display: grid; gap: 8px; min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.adm-vs-mode .adm-toggle:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.adm-vs-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.adm-vs-days { display: grid; gap: 6px; }
.adm-vs-row {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.adm-vs-day { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.adm-vs-row.is-off .adm-vs-day b { color: var(--muted); }
.adm-vs-row select[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.adm-vs-ints { display: grid; gap: 6px; min-width: 0; }
.adm-vs-int { display: grid; grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) 30px; align-items: center; gap: 6px; }
.adm-vs-int select { min-width: 0; padding: .35em .45em; font-variant-numeric: tabular-nums; }
.adm-vs-x { width: 30px; height: 30px; border-radius: 6px; font-size: 1.25rem; }
.adm-vs-x:hover { color: var(--danger); background: var(--danger-soft); }
.adm-vs-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.adm-vs-offtxt { color: var(--muted); font-weight: 600; }
.adm-vs-add { white-space: nowrap; }
.adm-vs-tools { margin-top: 8px; }
.adm-vs-preview { margin: 16px 0 6px; padding-top: 12px; border-top: 1px dashed var(--border); }
.adm-vs-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 0 16px; margin: 6px 0 0; font-size: .9rem; }
.adm-vs-week > div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.adm-vs-week dt { font-weight: 600; }
.adm-vs-week dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-vs-week .is-off dd, .adm-vs-week .is-off dt { color: var(--muted); }
.adm-vs-warn ul { margin: 4px 0 0; padding-left: 1.2em; }
@media (max-width: 480px) {
  .adm-vs-row { grid-template-columns: minmax(0, 1fr) auto; }
  .adm-vs-day { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .adm-vs-ints { grid-column: 1 / -1; grid-row: 2; }
}

.adm-offs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adm-offs-all { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.adm-off-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.adm-off-item > .badge { flex: none; margin-top: 2px; }
.adm-off-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.adm-off-reason { white-space: pre-line; }
.adm-off-item > .btn { flex: none; }
.adm-off-none { padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
@media (max-width: 480px) {
  .adm-off-item { flex-wrap: wrap; }
  .adm-off-main { flex-basis: 100%; order: 2; }
  .adm-off-item > .btn { margin-left: auto; }
}

/* time-off form: full days | a block of hours */
.adm-seg-field { min-width: 0; padding: 0; margin-left: 0; margin-right: 0; border: 0; }
.adm-seg-field legend { padding: 0; }
.adm-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-seg label {
  display: flex; align-items: center; gap: 6px; margin: 0; padding: .45em .8em; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 500;
}
.adm-seg input { width: auto; margin: 0; }
.adm-seg label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.adm-seg label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }

/* bookings that no longer fit (schedule change, time off): listed for rescheduling */
.adm-conflicts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adm-conflicts li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.adm-conf-main { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.adm-conflicts li.is-moved { border-color: var(--ok); background: var(--ok-soft); }
.adm-conflicts li.is-moved .adm-conf-when { color: var(--ok); }

/* «🗓 Хуваарь»: rows = vets, columns = Monday → Sunday; scrolls sideways inside its wrapper on narrow screens */
.adm-sc-toolbar .adm-sc-range { font-weight: 600; }
.adm-sc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -4px 0 10px; }
.adm-sc-legend-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.adm-sc-wrap {
  overflow-x: auto; overscroll-behavior-x: contain;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.adm-sc-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.adm-sc-table { min-width: 940px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.adm-sc-table th, .adm-sc-table td { border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.adm-sc-table tr:last-child > * { border-bottom: 0; }
.adm-sc-table thead th {
  padding: 8px; text-align: center; vertical-align: top; white-space: normal;
  text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--text);
}
.adm-sc-table thead th.is-today { background: var(--primary-soft); color: var(--primary); }
.adm-sc-table thead th.is-closed { color: var(--muted); }
.adm-sc-wd { font-weight: 700; }
.adm-sc-date { font-variant-numeric: tabular-nums; }
.adm-sc-hours { display: block; margin-top: 2px; font-weight: 500; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.adm-sc-table th.adm-sc-vet {
  position: sticky; left: 0; z-index: 2; width: 170px; padding: 8px 10px; border-left: 0; text-align: left;
  background: var(--surface); text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--text);
  white-space: normal; overflow-wrap: anywhere; box-shadow: 1px 0 0 var(--border);
}
.adm-sc-table thead th.adm-sc-vet { background: var(--surface-2); color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.adm-sc-vet a { color: var(--text); text-decoration: none; }
.adm-sc-vet a:hover { text-decoration: underline; }
.adm-sc-vet .badge { margin-top: 4px; }
.adm-sc-table tbody tr:hover { background: transparent; }
td.adm-sc { position: relative; padding: 0; vertical-align: top; }
.adm-sc-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: 100%; min-height: 76px;
  padding: 8px 10px 10px; color: inherit; text-decoration: none; font-size: .82rem;
}
.adm-sc-link:hover { background: var(--surface-2); }
.adm-sc-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
td.adm-sc.is-today { background: color-mix(in srgb, var(--primary-soft) 45%, transparent); }
td.adm-sc.is-clinic_closed {
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, transparent 6px 12px);
}
.adm-sc-ints { display: flex; flex-direction: column; gap: 1px; }
.adm-sc-int { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-sc-blocks { display: flex; flex-wrap: wrap; gap: 3px; }
.adm-sc-blocks .badge { font-size: .72rem; }
.adm-sc-rest { color: var(--muted); }
.adm-sc-reason { color: var(--muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.adm-sc-appts { color: var(--text); font-variant-numeric: tabular-nums; }
.adm-sc-appts.is-clash { color: var(--warn); font-weight: 700; }
.adm-sc-bar { display: block; width: 100%; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.adm-sc-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.adm-sc.is-past .adm-sc-int { font-weight: 500; }
/* «+ чөлөө» sits in the bottom-right corner; the cell's last line keeps clear of it */
.adm-sc-add {
  position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font: inherit; font-weight: 700; line-height: 1; cursor: pointer;
}
td.adm-sc:has(.adm-sc-add) .adm-sc-link { padding-bottom: 14px; }
td.adm-sc:has(.adm-sc-add) .adm-sc-link > :last-child:not(.adm-sc-ints) { max-width: calc(100% - 22px); }
.adm-sc-add:hover { border-color: var(--primary); color: var(--primary); }
.adm-sc-add:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .adm-sc-add { opacity: 0; transition: opacity .12s; }
  td.adm-sc:hover .adm-sc-add, .adm-sc-add:focus-visible { opacity: 1; }
}
tr.is-inactive .adm-sc-vet b { color: var(--muted); }
@media (max-width: 640px) {
  .adm-sc-table { min-width: 820px; }
  .adm-sc-table th.adm-sc-vet { width: 118px; padding: 8px; font-size: .84rem; }
  .adm-sc-legend > span:first-child { flex-basis: 100%; }
}

/* ---------- support chat with the platform team (docs/support-chat-spec.md §5) ---------- */
/* unread badge: nav item, and the header shortcut shown on narrow screens (the nav strip scrolls sideways there) */
.adm-nav-badge {
  display: inline-block; min-width: 1.5em; margin-left: auto; padding: 0 .42em; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.5; text-align: center;
  font-variant-numeric: tabular-nums;
}
.adm-top-support { gap: 6px; }
.adm-top-support .adm-nav-badge { margin-left: 0; }
@media (min-width: 861px) { .adm-top-support { display: none !important; } }
.adm-nav-badge { color: var(--on-danger); }
.adm-sup-count { color: var(--on-primary); }

/* request list */
.adm-sup-list {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.adm-sup-list > li + li { border-top: 1px solid var(--border); }
.adm-sup-item {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 12px 16px; color: inherit; text-decoration: none;
}
@media (hover: hover) { .adm-sup-item:hover { background: var(--surface-2); } }
.adm-sup-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.adm-sup-dot { width: 10px; height: 10px; border-radius: 50%; }
.adm-sup-item.is-unread .adm-sup-dot { background: var(--primary); }
.adm-sup-main { display: grid; gap: 2px; min-width: 0; }
.adm-sup-subj { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.adm-sup-subj b { font-weight: 600; overflow-wrap: anywhere; }
.adm-sup-item.is-unread .adm-sup-subj b { font-weight: 800; }
.adm-sup-prev { color: var(--muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-sup-item.is-unread .adm-sup-prev { color: var(--text); }
.adm-sup-who { font-weight: 600; }
.adm-sup-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-size: .8rem; color: var(--muted); white-space: nowrap;
}
.adm-sup-count {
  min-width: 1.7em; padding: 0 .45em; border-radius: 999px; background: var(--primary); color: #fff;
  font-size: .75rem; font-weight: 800; line-height: 1.6; text-align: center; font-variant-numeric: tabular-nums;
}
.badge.adm-sup-open { background: var(--info-soft); color: var(--info); }
.badge.adm-sup-closed { background: var(--surface-2); color: var(--muted); }
.badge.adm-sup-from { background: var(--warn-soft); color: var(--warn); }
.adm-sup-none { text-align: center; }
.adm-sup-none-ic { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
.adm-sup-imp { background: var(--info-soft); color: var(--info); }
.adm-sup-form-intro { margin: 0 0 14px; }
@media (max-width: 560px) { .adm-sup-item { gap: 4px 10px; padding: 12px; } }

/* image attachment being prepared (new request form, composer) */
.adm-att-pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.adm-att {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.adm-att-field .adm-att { margin: 10px 0 0; }
.adm-att-thumb { flex: none; width: 52px; height: 52px; object-fit: cover; border-radius: 6px; background: var(--surface); }
.adm-att-info { display: grid; flex: 1 1 auto; min-width: 0; }
.adm-att-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; }
.adm-att-msg { flex: 1 1 auto; min-width: 0; }
.adm-att-x { flex: none; padding: 4px 8px; }

/* conversation: header, scrolling log, composer. Desktop: fills the window below the app header (admin.js sets
   --chat-h); phones: full screen above everything, sized to the visual viewport so the composer stays above the
   on-screen keyboard (--chat-top / --chat-vh). */
.adm-chat {
  position: relative; display: flex; flex-direction: column; height: var(--chat-h, 70vh); min-height: 380px; max-width: 1100px;
  overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.adm-chat.is-drop { outline: 2px dashed var(--primary); outline-offset: -4px; }
.adm-chat-head { flex: none; display: flex; align-items: center; gap: 10px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.adm-chat-back, .adm-chat-close { flex: none; }
.adm-chat-title { flex: 1 1 auto; min-width: 0; }
.adm-chat-title h1 {
  margin: 0; font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.adm-chat-title h1:focus { outline: none; }
.adm-chat-title h1:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.adm-chat-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 3px; }
.adm-chat-narrow { display: none; }

.adm-chat-body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
.adm-chat-log {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 18px;
  overflow-y: auto; overscroll-behavior: contain; background: var(--bg);
}
.adm-chat-log:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.adm-chat-log > .alert { margin: 0; }
.adm-chat-empty { margin: auto; }
.adm-chat-more { align-self: center; margin: 0; text-align: center; }
.adm-chat-day { align-self: center; margin: 6px 0 0; }
.adm-chat-day span {
  display: inline-block; padding: .15em .8em; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font-size: .78rem; font-weight: 600;
}
.adm-chat-jump {
  position: absolute; left: 50%; bottom: 12px; z-index: 2; transform: translateX(-50%);
  border-radius: 999px; box-shadow: var(--shadow);
}
.adm-chat-jump:active { transform: translateX(-50%) translateY(1px); }

/* bubbles: the clinic on the right, platform support on the left */
.adm-msg { display: flex; flex-direction: column; gap: 3px; max-width: min(78%, 640px); }
.adm-msg-clinic { align-self: flex-end; align-items: flex-end; }
.adm-msg-platform { align-self: flex-start; align-items: flex-start; }
.adm-msg-meta { padding: 0 4px; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.adm-msg-meta b { color: var(--text); font-weight: 600; }
.badge.adm-msg-tag { padding: .05em .5em; font-size: .7rem; vertical-align: 1px; background: var(--info-soft); color: var(--info); }
.adm-msg-bubble {
  max-width: 100%; padding: 8px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
}
.adm-msg-clinic .adm-msg-bubble { background: var(--primary-soft); border-color: transparent; border-bottom-right-radius: 4px; }
.adm-msg-platform .adm-msg-bubble { border-bottom-left-radius: 4px; }
.adm-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-msg-img { display: block; margin-top: 6px; border-radius: 8px; }
.adm-msg-img:first-child { margin-top: 0; }
.adm-msg-img:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* fixed height: a thumbnail that loads late never moves the conversation */
.adm-msg-img img {
  display: block; width: auto; min-width: 120px; max-width: 100%; height: 180px; object-fit: contain;
  border-radius: 8px; background: var(--surface-2);
}

.adm-chat-compose { flex: none; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--border); }
.adm-chat-row { display: flex; align-items: flex-end; gap: 8px; }
.adm-chat-row textarea {
  flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: min(200px, 30vh); padding: .55em .75em;
  line-height: 1.4; resize: none; overflow-y: auto;
}
.adm-chat-row textarea[readonly] { background: var(--surface); opacity: .7; }
.adm-chat-row .btn { flex: none; height: 44px; }
.adm-chat-hint { margin: 6px 2px 0; }
@media (hover: none) { .adm-chat-hint, .adm-kbd-hint { display: none; } } /* touch: no keyboard shortcuts */
.adm-chat-closed { margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); }
.adm-chat-note { flex: none; padding: 12px 16px; border-top: 1px solid var(--border); }
.adm-chat-note .alert { margin: 0; }

@media (max-width: 640px) {
  body.adm-chat-open { overflow: hidden; }
  .adm-chat {
    position: fixed; left: 0; right: 0; top: var(--chat-top, 0px); z-index: 40;
    height: var(--chat-vh, 100vh); min-height: 0; max-width: none;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .adm-chat-head { gap: 8px; padding: 8px 10px; }
  .adm-chat-title h1 { font-size: 1rem; -webkit-line-clamp: 1; line-clamp: 1; }
  .adm-chat-wide { display: none; }
  .adm-chat-narrow { display: inline; }
  .adm-chat-log { padding: 12px 10px 14px; }
  .adm-msg { max-width: 88%; }
  .adm-msg-img img { height: 150px; }
  .adm-chat-compose { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .adm-chat-row { gap: 6px; }
  .adm-chat-row .btn { padding-left: .85em; padding-right: .85em; }
}

/* ---------- printed documents (pet page: «🖨 Бүртгэлийн хуудас», a record's «🖨 Хэвлэх», «🖨 Эмчилгээний түүх») ----------
 * One container (#print-root, a child of <body>) holds the single document being printed; body.adm-printing marks
 * that it is filled. Sizes are relative (pt/mm, no fixed @page size) so A4 and A5 both work (A5 gets a compact
 * layout, at the end); always black on white. The document styles apply on screen too, where #print-root is hidden,
 * so admin.js can measure history records off-screen (.pc-measure) at the A5 and A4 content widths. */
#print-root { display: none; }
.pc-measure { position: absolute; top: 0; left: -10000px; visibility: hidden; pointer-events: none; }

.adm-print-doc {
  display: block; position: relative; color: #111; background: #fff;
  font: 10pt/1.4 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.adm-print-doc h1, .adm-print-doc h2 { color: #000; }
.pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12pt; padding-bottom: 6pt; border-bottom: 1.5pt solid #000; }
.pc-clinic { min-width: 0; font-size: 9pt; color: #222; overflow-wrap: anywhere; }
.pc-clinic-name { font-size: 13pt; font-weight: 800; color: #000; }
.pc-meta { flex: none; text-align: right; font-size: 8.5pt; color: #333; }
.pc-title { margin: 10pt 0 0; font-size: 15pt; line-height: 1.25; text-align: center; }
.pc-sub { margin: 2pt 0 10pt; font-size: 9.5pt; text-align: center; color: #333; }
.pc-note { font-size: .88em; font-weight: 400; color: #444; }
.pc-pet { display: flex; align-items: flex-start; gap: 10pt; }
.pc-photo { flex: none; width: 30mm; height: 30mm; object-fit: cover; border: .75pt solid #777; border-radius: 2mm; }
.pc-h2 { margin: 10pt 0 4pt; padding-bottom: 2pt; font-size: 11pt; border-bottom: 1pt solid #000; break-after: avoid; }
.adm-print-doc table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.adm-print-doc th, .adm-print-doc td {
  padding: 2.5pt 4pt; color: #111; background: none; text-align: left; vertical-align: top;
  text-transform: none; letter-spacing: 0; white-space: normal; font-size: inherit;
}
.adm-print-doc tr { break-inside: avoid; }
.adm-print-doc thead { display: table-header-group; } /* repeated on every page a long table spans */
.pc-kv th { width: 36%; padding-left: 0; font-weight: 600; color: #333; border: 0; border-bottom: .5pt dotted #999; }
.pc-kv td, .pc-kv tr:last-child td { border-bottom: .5pt dotted #999; overflow-wrap: anywhere; }
.pc-table { font-size: 8.5pt; }
.pc-table th, .pc-table td, .pc-table tr:last-child td { border: .5pt solid #777; }
.pc-table th { font-weight: 700; }
.pc-nowrap { white-space: nowrap !important; }
.pc-empty { text-align: center !important; color: #555 !important; }
.pc-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.pc-sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 12pt; margin-top: 16pt; font-size: 10pt; break-inside: avoid; }
.pc-stamp { flex: none; width: 26mm; height: 26mm; display: grid; place-items: center; border: .75pt dashed #888; border-radius: 50%; color: #777; font-size: 8.5pt; }

/* treatment sheet + history: pet | owner (+ vet) side by side */
.pc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 62mm), 1fr)); gap: 0 8mm; }
.pc-cols > div { min-width: 0; }
.pc-cols .pc-kv th { width: 40%; }
.pc-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 10pt; orphans: 3; widows: 3; }
.pc-next { margin: 10pt 0 0; padding: 4pt 8pt; border: 1pt solid #000; font-size: 10.5pt; break-inside: avoid; }
.pc-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2pt 12pt;
  margin-top: 10pt; padding-top: 3pt; border-top: .5pt solid #999; font-size: 8pt; color: #444; break-inside: avoid;
}
/* next visit + signature + footer stay together on one page and never start one: the last lines of the content
   above go along (widows), so the vet's signature and stamp are never alone on the last page */
.pc-end { break-inside: avoid; break-before: avoid; }
/* a draft is never mistaken for an approved record: banner on top + watermark on every page */
.pc-banner {
  margin: 8pt 0 0; padding: 4pt 8pt; border: 2pt solid #000; font-size: 11pt; font-weight: 800;
  letter-spacing: .03em; text-align: center; color: #000;
}
.pc-watermark { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.pc-watermark span {
  transform: rotate(-35deg); font-size: 60pt; font-weight: 900; letter-spacing: .12em;
  color: rgba(0, 0, 0, .07); white-space: nowrap;
}

/* history: one compact block per record, never split across pages when it fits on one. A record taller than a
   page (admin.js marks it .pc-tall-a4 / .pc-tall-a5) splits where it stands instead of leaving most of a page blank
   first; its date and vet stay with its first lines. */
.pc-rec { padding: 6pt 0 7pt; border-bottom: .75pt solid #888; break-inside: avoid; }
.pc-rec.pc-tall-a4 { break-inside: auto; }
.pc-rec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2pt 10pt; break-after: avoid; }
.pc-rec-date { font-size: 10.5pt; }
.pc-rec-status { font-size: 8.5pt; color: #333; }
.pc-rec-meta { margin-top: 1pt; font-size: 8.5pt; color: #333; overflow-wrap: anywhere; break-after: avoid; }
.pc-tag { padding: 0 3pt; border: 1pt solid #000; font-weight: 800; color: #000; white-space: nowrap; }
.pc-dl { display: grid; grid-template-columns: 8.8em minmax(0, 1fr); gap: 2pt 8pt; margin: 4pt 0 0; font-size: 9.5pt; }
.pc-dl dt { font-weight: 600; color: #333; }
.pc-dl dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; orphans: 3; widows: 3; }

@media print {
  @page { margin: 12mm; }
  /* every page of a document (admin.js sets --pc-run from its data-run): pet + registration №, document, clinic,
     and the page number, so loose pages of a long history can be matched to the patient and put in order */
  @page doc {
    @bottom-left { content: var(--pc-run, ""); vertical-align: top; padding-top: 2.5mm; font: 7.5pt/1.3 "Inter", system-ui, sans-serif; color: #444; }
    @bottom-right { content: "Хуудас " counter(page) " / " counter(pages); vertical-align: top; padding-top: 2.5mm; font: 7.5pt/1.3 "Inter", system-ui, sans-serif; color: #444; white-space: nowrap; }
  }
  .adm-print-doc { page: doc; }
  :root { color-scheme: light; }
  html, body.adm { background: #fff !important; color: #000; }
  /* a document is filled in: it is the only thing printed (app shell, dialogs, toasts are not) */
  body.adm.adm-printing > :not(#print-root) { display: none !important; }
  body.adm.adm-printing > #print-root { display: block; }
  /* no document (Ctrl+P on a list page): the page itself, without the app chrome */
  body.adm .sidebar, body.adm .adm-top, body.adm #banners, body.adm .toast-wrap, body.adm .modal-backdrop,
  body.adm .adm-boot { display: none !important; }
  body.adm .admin-shell { display: block; min-height: 0; }
  body.adm .main { padding: 0; }
  body.adm #view.adm-busy { opacity: 1; }
  /* a support conversation prints whole (no scrolling box, no composer) */
  body.adm .adm-chat { position: static; height: auto; min-height: 0; overflow: visible; border: 0; box-shadow: none; }
  body.adm .adm-chat-body, body.adm .adm-chat-log { display: block; overflow: visible; background: none; }
  body.adm .adm-chat-log > * + * { margin-top: 8pt; }
  body.adm .adm-msg { break-inside: avoid; }
  body.adm .adm-msg-clinic { margin-left: auto; }
  body.adm .adm-chat-day { text-align: center; }
  body.adm .adm-chat-compose, body.adm .adm-chat-note, body.adm .adm-chat-jump,
  body.adm .adm-chat-back, body.adm .adm-chat-close { display: none !important; }
}

/* A5 (and smaller paper; print media queries see the page box): a compact layout, so a visit's sheet fits one
   page — pet | owner + vet stay side by side, tighter header and rows, a smaller stamp. */
@media print and (max-width: 160mm) {
  .adm-print-doc { font-size: 9.5pt; line-height: 1.35; }
  .pc-head { gap: 8pt; padding-bottom: 4pt; }
  .pc-clinic { font-size: 8pt; line-height: 1.3; }
  .pc-clinic-name { font-size: 11.5pt; }
  .pc-meta { font-size: 7.5pt; }
  .pc-title { margin-top: 6pt; font-size: 13pt; }
  .pc-sub { margin: 1pt 0 4pt; font-size: 8.5pt; }
  .pc-h2 { margin: 6pt 0 2pt; padding-bottom: 1pt; font-size: 10pt; }
  .adm-print-doc table { font-size: 8.5pt; }
  .adm-print-doc th, .adm-print-doc td { padding: 1.2pt 3pt; }
  .adm-print-doc .pc-kv th { padding-left: 0; }
  .pc-table { font-size: 8pt; }
  .pc-photo { width: 24mm; height: 24mm; }
  .pc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5mm; }
  .pc-cols .pc-kv th { width: 42%; }
  .pc-text { font-size: 9.5pt; }
  .pc-banner { margin-top: 5pt; padding: 2pt 6pt; font-size: 10pt; }
  .pc-next { margin-top: 6pt; padding: 2pt 6pt; font-size: 9.5pt; }
  .pc-sign { margin-top: 8pt; font-size: 9pt; }
  .pc-stamp { width: 19mm; height: 19mm; font-size: 7.5pt; }
  .pc-foot { margin-top: 5pt; font-size: 7.5pt; }
  .pc-watermark span { font-size: 44pt; }
  .pc-rec.pc-tall-a5 { break-inside: auto; }
}

/* ---------- web push («Бүртгэл» → «Мэдэгдэл») + desktop app (docs/notifications-analytics-spec.md §6, §8) ---------- */
.adm-login-desktop-pk {
  margin: 12px 0 0; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--info-soft); color: var(--info); text-align: center;
}
.adm-push-intro { margin: 0 0 12px; }
.adm-push-status {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-wrap: anywhere;
}
.adm-push-status.is-on { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.adm-push-status.is-off { background: var(--surface-2); }
.adm-push-status.is-other { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.adm-push-ic { flex: none; font-size: 1.3rem; line-height: 1.2; }
.adm-push-prefs { margin: 0; padding: 0; border: 0; min-width: 0; }
.adm-push-prefs legend { padding: 0; margin-bottom: 8px; font-size: .875rem; font-weight: 600; }
.adm-push-prefs .adm-toggles { margin-bottom: 12px; }
.adm-push-sub { margin-left: 26px; }
.adm-toggle:has(> input:disabled) { cursor: default; }
.adm-toggle:has(> input:disabled) > span { opacity: .6; }
.adm-push-note { display: flex; gap: 10px; align-items: flex-start; }
.adm-push-foot { margin: 10px 0 0; }
.adm-push-holder { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--warn-soft); line-height: 1.5; }
[data-push-alert]:focus { outline: none; }
@media (max-width: 560px) {
  .adm-push-sub { margin-left: 14px; }
  .adm-push-actions > .btn { flex: 1 1 auto; }
}
.adm-push-saved { margin-left: 6px; font-weight: 500; color: var(--ok); }
/* «Бүртгэл» has three tabs: they fit a phone without scrolling the strip */
@media (max-width: 480px) {
  .adm-tabs { gap: 0; }
  .adm-tab { padding: .55em .5em; font-size: .92rem; }
}

/* ---------- «💳 Төлбөр», «💬 SMS», phone / e-mail verification (docs/billing-sms-spec.md §7) ----------
 * The QPay dialog and the verify.mn step are shared widgets of common.js (Clinic.qpayDialog, Clinic.verify.phone):
 * their .qp-* / .vf-* styles are injected by common.js itself. */
.adm-banner-info { background: var(--info-soft); color: var(--text); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.adm-banner-bill .adm-actions, .adm-banner-info .adm-actions, .adm-banner-warn .adm-actions { flex: 0 1 auto; }
/* a filled link button in a banner keeps the button's text color (.adm-banner a would make it the banner's) */
.adm-banner a.btn:not(.ghost, .danger) { color: #fff; }
.adm-banner a.btn:not(.ghost, .danger) { color: var(--on-primary); }
.adm-banner-bill .btn.ghost { color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
@media (max-width: 560px) {
  .adm-banner-bill .adm-actions, .adm-banner-info .adm-actions { width: 100%; }
  .adm-banner-bill .adm-actions .btn, .adm-banner-info .adm-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* status badges: ok / info / warn / danger / off */
.badge.adm-st { white-space: normal; text-align: left; }
.badge.adm-st-ok { background: var(--ok-soft); color: var(--ok); }
.badge.adm-st-info { background: var(--info-soft); color: var(--info); }
.badge.adm-st-warn { background: var(--warn-soft); color: var(--warn); }
.badge.adm-st-danger { background: var(--danger-soft); color: var(--danger); }
.badge.adm-st-off { background: var(--surface-2); color: var(--muted); }

/* billing page */
.adm-bill-top, .adm-sms-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.adm-bill-top > *, .adm-sms-top > * { min-width: 0; }
.adm-bill-top .card h3, .adm-sms-top .card h3, .adm-bill-plans h3 { margin: 0 0 10px; }
.adm-bill-top .adm-card-head { margin-bottom: 10px; }
.adm-bill-top .adm-card-head h3 { margin: 0; }
.adm-bill-kv { margin-bottom: 12px; }
.adm-bill-kv dd { margin: 0; overflow-wrap: anywhere; }
.adm-bill-due { display: grid; gap: 10px; border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.adm-bill-due.is-empty { border-color: var(--border); }
.adm-bill-amount { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adm-bill-plans { margin-bottom: 18px; }
.adm-plan-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-bottom: 12px; }
.adm-plan { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.adm-plan.is-current { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.adm-plan .badge { justify-self: start; margin-top: 4px; }
.adm-plan-price { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.adm-plan-price small { font-size: .85rem; font-weight: 500; color: var(--muted); }
.adm-bill-rules { margin: 0 0 10px; padding-left: 1.2em; display: grid; gap: 4px; }
.adm-bill-list { margin-bottom: 8px; }

/* pet count against the basic plan's limit (billing page, dashboard from 90 of 100) */
.adm-meter { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.adm-meter > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.adm-meter-wrap.is-near .adm-meter > i { background: var(--accent); }
.adm-meter-wrap.is-over .adm-meter > i { background: var(--danger); }
.adm-meter-text { margin: 6px 0 0; }
.adm-meter-wrap.is-near .adm-meter-text { color: var(--warn); font-weight: 600; }
.adm-meter-wrap.is-over .adm-meter-text { color: var(--danger); font-weight: 600; }
.adm-pet-limit { margin-bottom: 14px; }
.adm-pet-limit .adm-card-head { margin-bottom: 8px; }

/* «💬 SMS» */
.adm-sms-pass { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--text); font-size: .92rem; line-height: 1.5; }
.adm-sms-pass-head { font-size: .95rem; border-left: 4px solid var(--info); }
.adm-sms-wallet { display: grid; gap: 8px; }
.adm-sms-wallet.is-low { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.adm-sms-balance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.adm-sms-balance b { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adm-sms-balance span { color: var(--muted); font-weight: 600; }
.adm-sms-low { margin: 0; color: var(--warn); font-weight: 600; }
.adm-sms-rules { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.adm-topup-refund { display: block; max-width: 22em; white-space: normal; }
.adm-toggle-group { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.adm-toggle-group > .adm-toggle { border: 0; }
.adm-toggle-group > .adm-sms-mode { margin: 0; padding: 0 12px 10px 38px; }
.adm-sms-mode { display: grid; gap: 4px; margin-top: 6px; font-size: .9rem; }
.adm-sms-mode label { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; }
.adm-sms-mode input { width: auto; margin: 4px 0 0; flex: none; }
.adm-sms-mode label:has(input:disabled) { opacity: .6; cursor: default; }
.adm-sms-note { margin: 12px 0 0; }
.adm-sms-sec { margin-bottom: 18px; }
.adm-plus { color: var(--ok); font-weight: 600; }
.adm-minus { color: var(--text); }
.adm-more { margin-top: 10px; text-align: center; }
.adm-more:empty { display: none; }

/* top-up dialog: preset amounts as tiles */
.adm-presets { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.adm-presets legend { padding: 0; margin-bottom: 8px; font-size: .875rem; font-weight: 600; }
.adm-preset-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.adm-preset { position: relative; display: block; margin: 0; cursor: pointer; }
.adm-preset input { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; margin: 0; }
.adm-preset > span { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; font-weight: 400; }
.adm-preset b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.adm-preset small { color: var(--muted); }
.adm-preset input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.adm-preset input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.adm-topup-sum { margin: -4px 0 0; font-size: .92rem; }

/* manual SMS: live SMS count and cost */
.adm-sms-to { margin: 0 0 8px; }
.adm-sms-preview { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -6px 0 4px; font-size: .9rem; color: var(--muted); }
.adm-sms-preview:empty { display: none; }
.adm-sms-preview b { color: var(--text); }
.adm-sms-preview.is-warn b { color: var(--warn); }
.adm-sms-preview.is-bad b { color: var(--danger); }
.adm-sms-preview > span.adm-no { flex-basis: 100%; }
.adm-due-sms { margin-top: 4px; }
.adm-owner-sms-btn { margin-top: 10px; }
.adm-owner-sms { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adm-owner-sms li { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
.adm-owner-sms li:last-child { border-bottom: 0; padding-bottom: 0; }

/* «Бүртгэл» → «Утас, и-мэйл» */
.adm-vf-intro { margin: 0 0 12px; }
.adm-vf-item { display: grid; gap: 8px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.adm-vf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; overflow-wrap: anywhere; }
.adm-vf-item .alert { margin: 0; }
.adm-vf-item > .btn, .adm-vf-body > .btn { justify-self: start; }
.adm-vf-body { display: grid; gap: 8px; min-width: 0; }
.adm-vf-body:empty, [data-vf-phone-msg]:empty, [data-vf-email-msg]:empty { display: none; }
.btn.is-waiting { opacity: .6; cursor: default; }

@media (max-width: 900px) {
  .adm-bill-top, .adm-sms-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .adm-bill-amount, .adm-sms-balance b { font-size: 1.65rem; }
  .adm-vf-item > .btn { justify-self: stretch; }
}
/* «Бүртгэл» may have four tabs: on a phone the strip scrolls sideways inside itself */
@media (max-width: 420px) {
  .adm-tab { padding: .55em .4em; font-size: .88rem; white-space: nowrap; }
}

/* printed receipt («🖨 Баримт» of a paid invoice) */
.adm-receipt .pc-kv th { width: 34%; }
.adm-receipt .pc-next { font-size: 9.5pt; }

/* Emoji field of the service form (fieldHtml type 'emoji'): the typed value plus one-tap choices */
.adm-emoji-field input { max-width: 7em; font-size: 1.3rem; text-align: center; }
.adm-emoji-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adm-emoji {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: 1.3rem; line-height: 1;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer;
}
.adm-emoji:hover { border-color: var(--primary); }
.adm-emoji[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary-soft); }
.adm-emoji:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }