/* ================= shared page bits ================= */
.toolbar { display: flex; gap: 8px; align-items: center; }
.toolbar__search { flex: 1; }
.toolbar__chips { margin-top: 10px; }
.list-count { font-size: 12px; margin: 12px 2px 6px; }
.load-more { display: flex; justify-content: center; margin-top: 12px; }
.topbar-group { display: inline-flex; gap: 2px; }
.limit-note { font-size: 13px; color: var(--ink-2); margin: 0 2px 10px; }
.row--danger { color: var(--bad); }
.row > .ic { color: var(--ink-2); }
.row__tags { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.row__tags .tag { font-size: 10.5px; padding: 0 6px; }
.avatar--md { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }

/* ================= calendar ================= */
[data-page="calendar"] .view { padding: 0; max-width: none; }
.cal-page { display: flex; flex-direction: column; height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - env(safe-area-inset-bottom) - env(safe-area-inset-top)); }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.daynav { display: flex; align-items: center; }
.daynav__date { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 128px; line-height: 1.15; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); }
.daynav__date:hover { background: var(--surface); }
.daynav__weekday { font-size: 12px; color: var(--ink-2); }
.daynav__day { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.daynav__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.daynav__input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.cal-branches { flex-basis: 100%; order: 3; }
.daystats { display: grid; grid-template-columns: repeat(4, auto); gap: 0; margin-left: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.daystats > div { padding: 4px 10px; }
.daystats > div + div { border-left: 1px solid var(--line); }
.daystats dt { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.daystats dd { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
@media (max-width: 639px) {
  .daystats { flex-basis: 100%; grid-template-columns: repeat(4, 1fr); margin-left: 0; order: 4; }
  .daynav { flex: 1; justify-content: space-between; }
}

.cal { --gutter: 48px; --col-min: 128px; flex: 1; min-height: 0; overflow: auto; background: var(--bg); overscroll-behavior: contain; }
.cal__grid { min-width: calc(var(--gutter) + var(--cols) * var(--col-min)); }
.cal__head {
  position: sticky; top: 0; z-index: 4;
  display: grid; grid-template-columns: var(--gutter) repeat(var(--cols), minmax(var(--col-min), 1fr));
  background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
}
.cal__corner { position: sticky; left: 0; background: var(--bg); z-index: 1; }
.cal__staff { display: flex; align-items: center; gap: 6px; padding: 8px 8px; min-width: 0; border-left: 1px solid var(--line); }
.cal__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal__body {
  position: relative;
  display: grid; grid-template-columns: var(--gutter) repeat(var(--cols), minmax(var(--col-min), 1fr));
  height: calc(var(--span) / 30 * var(--slot-h));
}
.cal__times { position: sticky; left: 0; z-index: 3; background: var(--bg); }
.cal__times li { height: var(--slot-h); padding-right: 8px; text-align: right; font-size: 11px; color: var(--ink-3); transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.cal__col {
  position: relative; border-left: 1px solid var(--line); cursor: copy;
  background-image:
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(var(--slot-h) * 2)),
    repeating-linear-gradient(to bottom, transparent 0 var(--slot-h), var(--line-soft) var(--slot-h) calc(var(--slot-h) + 1px), transparent calc(var(--slot-h) + 1px) calc(var(--slot-h) * 2));
}
.cal__off {
  position: absolute; left: 0; right: 0;
  top: calc(var(--m) / 30 * var(--slot-h)); height: calc(var(--len) / 30 * var(--slot-h));
  background: repeating-linear-gradient(135deg, var(--hatch-1) 0 6px, var(--hatch-2) 6px 12px);
}
.cal__off--timeoff { background: repeating-linear-gradient(135deg, rgba(210, 58, 42, .06) 0 6px, rgba(210, 58, 42, .12) 6px 12px); }

.appt {
  position: absolute; left: 3px; right: 3px; z-index: 1;
  top: calc(var(--m) / 30 * var(--slot-h) + 1px);
  height: calc(var(--len) / 30 * var(--slot-h) - 2px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden;
  padding: 4px 6px 4px 9px; text-align: left; cursor: pointer;
  font-size: 11.5px; line-height: 1.25;
  background: color-mix(in oklab, var(--c) var(--appt-tint), var(--appt-bg)); border: 1px solid var(--appt-border); border-radius: var(--appt-radius); box-shadow: var(--shadow-1);
  transition: box-shadow .15s, transform .1s;
}
.appt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--appt-bar); background: var(--c); }
.appt:hover { box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .2); z-index: 2; }
.appt:active { transform: scale(.99); }
.appt__time { font-size: 10.5px; color: var(--ink-3); }
.appt__client { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt__service { color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.appt__status { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: 10.5px; font-weight: 600; color: var(--ink-2); }
.appt__status:not(:empty)::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--status-color); }
.appt.is-paid .appt__time::after { content: " · ₼"; color: var(--ok); font-weight: 700; }
.appt.st-arrived { background: color-mix(in oklab, var(--c) calc(var(--appt-tint) + var(--appt-tint-done)), var(--appt-bg)); }
.appt.st-no_show { border-color: color-mix(in oklab, var(--bad) 45%, var(--appt-bg)); }
.appt.st-no_show .appt__status { color: var(--bad); }
.appt.st-cancelled { background: var(--surface); border-style: dashed; box-shadow: none; color: var(--ink-3); }
.appt.st-cancelled::before { background: var(--line-strong); }
.appt.st-cancelled .appt__client { text-decoration: line-through; }

.cal__now { position: absolute; left: var(--gutter); right: 0; z-index: 3; top: calc(var(--m) / 30 * var(--slot-h)); border-top: 2px solid var(--signal); pointer-events: none; }
.cal__now span { position: sticky; left: 0; display: inline-block; transform: translate(calc(-1 * var(--gutter)), -50%); width: calc(var(--gutter) - 4px); text-align: center; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--signal); border-radius: 99px; }

@media (min-width: 1024px) {
  .cal-page { height: calc(100dvh - 64px); }
  .cal { --col-min: 160px; }
  .cal-toolbar { padding: 12px 24px; }
}

/* ================= appointment form ================= */
.picker-results { display: flex; flex-direction: column; margin-top: 6px; border-radius: var(--radius-sm); overflow: hidden; }
.picker-results:not(:empty) { border: 1px solid var(--line); }
.picker-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; text-align: left; }
.picker-option:hover, .picker-option:focus-visible { background: var(--surface); }
.picker-option__text, .picked__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.picker-option__text small, .picked__text small { color: var(--ink-2); font-size: 12px; }
.picked { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.picked__text { flex: 1; }
.new-client { padding: 12px; border-radius: var(--radius-sm); background: var(--surface); }
.field.has-error > .field__error { display: block; }

.service-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.service-group__title { position: sticky; top: 0; z-index: 1; padding: 6px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: var(--surface); text-transform: uppercase; letter-spacing: .04em; }
.service-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
.service-option + .service-option { border-top: 1px solid var(--line); }
.service-option:hover { background: var(--surface); }
.service-option input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.service-option__name { flex: 1; min-width: 0; }
.service-option__meta { display: flex; gap: 10px; align-items: baseline; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
.service-option__meta b { color: var(--ink); font-size: 13.5px; min-width: 56px; text-align: right; }
.service-option__meta span:empty { display: none; }
[data-panel="services"] .service-list { max-height: none; }

.appt-summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; }
.appt-summary > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.appt-summary b { font-family: var(--font-display); font-size: 17px; }

/* ================= appointment detail ================= */
.appt-head { display: flex; flex-direction: column; }
.appt-head .muted { font-size: 13px; }
.status-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.status-btn { min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--bg); }
.status-btn .status { color: var(--ink); font-size: 13px; font-weight: 500; }
.status-btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.status-btn[aria-pressed="true"] .status { font-weight: 700; }
.status-btn:disabled { opacity: .5; cursor: default; }
.appt-client { border-radius: var(--radius); }
.appt-totals { margin-top: 8px; }
.appt-totals > div { display: flex; justify-content: space-between; padding: 4px 2px; font-size: 14px; }
.appt-totals dt { color: var(--ink-2); }
.appt-totals dd { font-weight: 600; }
.pay-form { display: flex; flex-direction: column; gap: 10px; }
.pay-form__row { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 480px) { .pay-form__row { grid-template-columns: 120px 1fr; } }
.pay-form .segmented { width: 100%; }
.reminders li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 2px; color: var(--ink-2); }

/* ================= client ================= */
.tag-add { display: flex; gap: 8px; margin-top: 8px; }
.tag-add .input { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.tag-toggle { min-height: 30px; }
.tag-toggle[aria-pressed="true"] .tag__dot { background: #fff; }

.client-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 1024px) { .client-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; } .section--first { margin-top: 0; } }
/* side column: blocks come and go (dental, bonuses, payments) — spacing only between the visible ones */
.client-side { display: grid; gap: 24px; align-content: start; margin-top: 16px; }
.client-side > .section { margin-top: 0; }
@media (min-width: 1024px) { .client-side { margin-top: 0; } }
.profile { display: flex; align-items: center; gap: 14px; }
.profile__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile__name { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.profile__phone { color: var(--ink-2); }
.profile__actions { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; margin-top: 16px; }
.profile__actions .btn { padding: 0 8px; }
.profile--compact .profile__name { font-size: 18px; }
.more-art { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; margin-bottom: 12px; }
.more-art img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .more-art { display: none; } }
.next-visit { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: left; }
.next-visit:hover { background: var(--surface); }
.next-visit__date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 52px; border-radius: var(--radius-sm); background: var(--surface); line-height: 1.05; flex: none; }
.next-visit__date b { font-family: var(--font-display); font-size: 20px; }
.next-visit__date small { font-size: 11px; color: var(--ink-2); }
.history-row__date { width: 56px; flex: none; font-size: 13px; color: var(--ink-3); }
.history-row .status { font-size: 11.5px; }
.note-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-bottom: 10px; }
.notes { display: flex; flex-direction: column; gap: 8px; }

/* ================= period ================= */
.period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.period__nav { display: flex; align-items: center; }
.period__label { min-width: 150px; text-align: center; font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
.period__nav .icon-btn:disabled { opacity: .3; cursor: default; }

/* ================= finance ================= */
.finance-grid { display: grid; gap: 12px; }
@media (min-width: 900px) { .finance-grid { grid-template-columns: 1fr 1fr; } .finance-grid .hero { grid-row: span 2; } }
.hero { padding: 20px; border-radius: var(--radius); background: var(--hero-bg); color: var(--hero-ink); display: flex; flex-direction: column; }
.hero__label { font-size: 13px; color: var(--hero-muted); }
.hero__value { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -.03em; line-height: 1.15; margin-top: 4px; }
.hero__delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #4ade80; margin-top: 4px; }
.hero__delta.is-down { color: #fca5a5; }
.hero__split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hero-line); }
@media (max-width: 899px) { .hero__split { margin-top: 16px; } }
.hero__split dt { font-size: 12px; color: var(--hero-muted); }
.hero__split dd { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.hero__split--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
@media (min-width: 1200px) { .hero__split--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero__split small { display: block; font-size: 11.5px; color: var(--hero-muted); }
.hero__split small.is-good { color: #4ade80; } .hero__split small.is-bad { color: #fca5a5; }
/* the money in and out by day, inside the profit's card */
.fin-chart { display: grid; gap: 8px; margin: 18px 0 4px; }
.fin-chart[hidden] { display: none; }
.fin-chart__svg { display: block; width: 100%; height: 170px; }
.fin-chart__area { fill: color-mix(in srgb, var(--accent) 26%, transparent); }
.fin-chart__line { fill: none; stroke: color-mix(in srgb, var(--accent) 70%, #ffffff); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fin-chart__out { fill: #f87171; opacity: .7; }
.fin-chart__hit { fill: transparent; }
.fin-chart__hit:hover { fill: rgba(255, 255, 255, .06); }
.fin-chart__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--hero-muted); }
.fin-chart__legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.fin-chart__legend .is-in::before { background: color-mix(in srgb, var(--accent) 70%, #ffffff); }
.fin-chart__legend .is-out::before { background: #f87171; }
.fin-chart__legend .fin-chart__best { margin-left: auto; color: var(--hero-ink); font-weight: 600; }
.fin-chart__legend .fin-chart__best::before { display: none; }
/* an article and its share of the money in (out) */
.shares { display: grid; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.share { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "track pct"; gap: 4px 12px; align-items: center; }
.share__name { grid-area: name; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.share__val { grid-area: val; font-weight: 600; }
.share__track { grid-area: track; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.share__track i { display: block; height: 100%; width: var(--v, 0%); border-radius: 99px; background: var(--ok); }
.shares--out .share__track i { background: var(--bad); }
.share__pct { grid-area: pct; justify-self: end; font-size: 12px; color: var(--ink-3); }
.fin-more { margin-top: 10px; }
.ledger li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; }
.ledger li + li { border-top: 1px solid var(--line); }
.ledger b { font-weight: 600; white-space: nowrap; }
.tx-row { gap: 10px; }
.tx-row__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface); color: var(--ink-2); flex: none; }
.tx-row--income .tx-row__icon { background: var(--ok-soft); color: var(--ok); }
.tx-row--income .tx-row__icon .ic { transform: rotate(-90deg); }
.tx-row--income .row__end b { color: var(--ok); }
.tx-row.is-voided .row__end b { text-decoration: line-through; }
.tx-row__void { width: 36px; height: 36px; color: var(--ink-3); }
.section__head { flex-wrap: wrap; }
.section__head .chips { max-width: 100%; }
@media (max-width: 639px) { .section__head .chips { flex-basis: 100%; } }

/* ================= reports ================= */
.reports-grid { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 900px) { .reports-grid { grid-template-columns: 1.2fr 1fr; } }
.colchart { position: relative; margin-top: 8px; }
.colchart__plot { display: flex; align-items: flex-end; gap: 2px; height: 160px; border-bottom: 1px solid var(--line-strong); }
.colchart__bar { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; padding: 0; }
.colchart__bar span { display: block; width: 100%; height: var(--h); min-height: 2px; background: var(--series-1); border-radius: 4px 4px 0 0; transition: opacity .15s; }
.colchart__plot:hover .colchart__bar span { opacity: .45; }
.colchart__plot:hover .colchart__bar.is-hover span, .colchart__bar:focus-visible span { opacity: 1; }
.colchart__tip {
  position: absolute; top: -6px; left: var(--x); transform: translate(-50%, -100%); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: var(--radius-xs);
  background: var(--ink); color: #fff; font-size: 12px; white-space: nowrap; box-shadow: var(--shadow-2);
}
.colchart__tip b { font-size: 13px; }
.colchart__axis { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 6px; }
.load-table { display: flex; flex-direction: column; }
.load-row { display: grid; grid-template-columns: minmax(90px, 32%) 1fr 44px; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 0; }
.load-row + .load-row { border-top: 1px solid var(--line); }
.load-row__name { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.load-row__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.load-row__pct { text-align: right; font-weight: 600; font-size: 14px; }
.load-row__meta { grid-column: 2 / 4; font-size: 12px; }
.load-row .bars__fill { background: var(--c); }
.payroll-row { display: grid; grid-template-columns: 32px 1fr auto; grid-template-areas: "av name due" ". sub sub" ". pay pay"; gap: 4px 12px; align-items: center; padding: 12px 14px; }
.payroll-row + .payroll-row { border-top: 1px solid var(--line); }
.payroll-row__av { grid-area: av; width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
.payroll-row__name { grid-area: name; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payroll-row__due { grid-area: due; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.payroll-row__due small { font-size: 12px; color: var(--ink-2); }
.payroll-row__sub { grid-area: sub; font-size: 12.5px; color: var(--ink-2); }
.payroll-row__acts { grid-area: pay; display: flex; gap: 6px; flex-wrap: wrap; justify-self: start; margin-top: 4px; }
@media (min-width: 640px) {
  .payroll-row { grid-template-columns: 32px 1fr auto auto; grid-template-areas: "av name due pay" ". sub due pay"; }
  .payroll-row__acts { justify-self: end; margin-top: 0; }
}

/* ================= settings ================= */
/* flex: none — in a sheet (a flex column) a tall tab body would otherwise squeeze the scrollable tab row and cut its labels */
.tabs { display: flex; flex: none; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { min-height: 44px; padding: 0 10px; font-size: 14px; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs [aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.sheet__body [data-panel] { padding-top: 8px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; }
.swatch span { display: block; width: 32px; height: 32px; border-radius: 9px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.swatch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 0 16px; }
/* the schedule: a weekday holds one or more shifts — branch (several branches), hours, chair (a branch with chairs) */
.sched { display: flex; flex-direction: column; }
.sched-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sched-day:last-child { border-bottom: 0; }
.sched-day__on { min-height: 40px; }
.sched-day.is-off .sched-day__on span { color: var(--ink-3); }
.sched-day__body { display: grid; gap: 6px; min-width: 0; }
.sched-day__off { padding-top: 11px; }
.sched-shifts { display: grid; gap: 6px; }
.sched-shift { display: grid; grid-template-columns: 96px 96px minmax(0, 1fr) 36px; grid-template-areas: "start end chair del"; gap: 6px; align-items: center; }
.sched-shift.has-branch { grid-template-columns: minmax(0, 1fr) 96px 96px minmax(0, 1fr) 36px; grid-template-areas: "branch start end chair del"; }
/* no chairs (another niche, a branch without chairs): the hours, and the delete right after them */
.sched-shift:not(.has-chair) { grid-template-columns: 96px 96px 36px; grid-template-areas: "start end del"; }
.sched-shift.has-branch:not(.has-chair) { grid-template-columns: minmax(0, 220px) 96px 96px 36px; grid-template-areas: "branch start end del"; }
.sched-shift__branch { grid-area: branch; }
.sched-shift__start { grid-area: start; }
.sched-shift__end { grid-area: end; }
.sched-shift__chair { grid-area: chair; }
.sched-shift__del { grid-area: del; width: 36px; height: 36px; color: var(--ink-3); }
.sched-shift .input, .sched-shift .select { min-height: 40px; padding: 6px 8px; font-size: 15px; }
.sched-shift .select { padding-right: 28px; background-position: right 8px center; text-overflow: ellipsis; }
.sched-shift .is-bad { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.sched-add { justify-self: start; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; font-size: 13px; font-weight: 600; color: var(--accent-text); }
.sched-add:hover { text-decoration: underline; text-underline-offset: 3px; }
.sched-msgs { display: grid; gap: 4px; }
.sched-msgs:empty { display: none; }
.sched-msg { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.sched-msg .ic { margin-top: 1px; }
.sched-msg.is-bad { color: var(--bad); }
.sched-msg.is-warn { color: var(--warn); }
.sched-msg.is-ok { color: var(--ok); }
@media (max-width: 639px) {
  .sched-day { grid-template-columns: minmax(0, 1fr); }
  .sched-day.is-off { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .sched-day__off { padding-top: 0; text-align: right; }
  .sched-shift, .sched-shift:not(.has-chair), .sched-shift.has-branch, .sched-shift.has-branch:not(.has-chair) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .sched-shift { grid-template-areas: "start end del" "chair chair ."; }
  .sched-shift:not(.has-chair) { grid-template-areas: "start end del"; }
  .sched-shift.has-branch { grid-template-areas: "branch branch del" "start end ." "chair chair ."; }
  .sched-shift.has-branch:not(.has-chair) { grid-template-areas: "branch branch del" "start end ."; }
  .sched-shift + .sched-shift { padding-top: 8px; border-top: 1px dashed var(--line); }
}
.rule-form { border: 1px solid var(--line); margin: 8px 0 0; }
.rule-form legend { padding: 0 4px; }

/* ================= import ================= */
.steps { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.step { display: flex; gap: 14px; }
.step__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px; flex: none; }
.step__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.step__body .kpis { width: 100%; }
.step__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.step--done { align-items: center; }
.step--done > .ic { color: var(--ok); }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 120px; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); color: var(--ink-2); cursor: pointer; text-align: center; overflow-wrap: anywhere; }
.dropzone:hover { background: var(--surface); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone.is-busy { opacity: .6; pointer-events: none; }
.import-errors { width: 100%; max-height: 320px; overflow-y: auto; }

/* short visits (≤ 30 min): one line, status only as a dot */
.appt > * { flex-shrink: 0; }
.appt.is-short { flex-direction: row; flex-wrap: wrap; align-content: flex-start; column-gap: 6px; }
.appt.is-short .appt__service { display: none; }
.appt.is-short .appt__status { margin-top: 0; font-size: 0; gap: 0; }
.appt.is-short .appt__client { max-width: 100%; }

/* ================= brand (more page) ================= */
.brand-card { display: flex; gap: 16px; align-items: center; }
.brand-card__preview { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 14px; background: var(--surface); flex: none; overflow: hidden; }
.brand-card__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-card__mark { display: grid; place-items: center; width: 100%; height: 100%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.brand-card__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; font-size: 13px; }
.brand-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* the owner's Telegram for the requests and the summaries: its state, a word on what comes there, link / unlink */
.tg-card { display: flex; gap: 14px; align-items: flex-start; }
.tg-card__ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.tg-card__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; }
.tg-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14.5px; }
.tg-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-card__actions:not(:has(> :not([hidden]))) { display: none; }
.tg-wait { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.tg-wait .spinner { width: 16px; height: 16px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn.is-busy { opacity: .5; pointer-events: none; }
.row__extra { color: var(--ink); font-weight: 500; }
.row__extra:empty { display: none; }

/* ================= classes ================= */
.week { display: flex; align-items: center; gap: 2px; margin: -4px -8px 8px; }
.week__days { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.week__day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 9px; border-radius: var(--radius-sm); font-size: 11px; color: var(--ink-2); }
.week__day b { font-family: var(--font-display); font-size: 17px; color: var(--ink); font-weight: 600; }
.week__day:hover { background: var(--surface); }
.week__day.is-today b { color: var(--signal); }
.week__day[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.week__day[aria-selected="true"] b { color: var(--accent-ink); }
.week__dot { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 99px; background: transparent; }
.week__day.has-sessions .week__dot { background: var(--ink-3); }
.week__day[aria-selected="true"].has-sessions .week__dot { background: var(--accent-ink); }
.classes-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 2px 10px; }
.classes-head__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.session-list { display: grid; gap: 8px; }
@media (min-width: 900px) { .session-list { grid-template-columns: 1fr 1fr; } }
.session-card { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px 12px 18px; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.session-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.session-card:hover { box-shadow: var(--shadow-2); }
.session-card__time { display: flex; flex-direction: column; min-width: 48px; line-height: 1.2; }
.session-card__time b { font-family: var(--font-display); font-size: 16px; }
.session-card__time small { font-size: 12px; color: var(--ink-3); }
.session-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.session-card__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-card__sub { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-card__spots { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 52px; }
.session-card__spots b { font-size: 14px; }
.spots-bar { width: 52px; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.spots-bar span { display: block; height: 100%; width: var(--fill); background: var(--ink); }
.session-card.is-full .spots-bar span { background: var(--signal); }
.session-card.is-cancelled { opacity: .55; }
.session-card.is-cancelled .session-card__title { text-decoration: line-through; }

.add-participant { margin-bottom: 8px; }
.roster-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
.roster + .roster, .roster > .roster-row + .roster-row { border-top: 1px solid var(--line); }
.roster-row__who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 160px; }
.roster-row__membership { font-size: 12px; color: var(--ink-2); }
.roster-row__membership.is-warn { color: var(--warn); font-weight: 500; }
.roster-row.is-cancelled .row__title { text-decoration: line-through; color: var(--ink-3); }
.roster-row__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.attend { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.attend button { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; font-size: 12.5px; color: var(--ink-2); }
.attend button + button { border-left: 1px solid var(--line-strong); }
.attend button:disabled { opacity: .45; cursor: default; }
.attend [data-status="attended"][aria-pressed="true"] { background: var(--ok); color: #fff; }
.attend [data-status="no_show"][aria-pressed="true"] { background: var(--bad); color: #fff; }
.attend [data-status="cancelled"][aria-pressed="true"] { background: var(--ink-3); color: #fff; }

/* groups */
.groups-tabs { margin-bottom: 12px; }
.groups-tabs [aria-pressed="true"] { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.groups-page .row > .dot { width: 12px; height: 12px; border-radius: 4px; }
.slots { display: flex; flex-direction: column; gap: 6px; }
.slot-row { display: grid; grid-template-columns: 1fr 120px 44px; gap: 8px; align-items: center; }

/* client card */
.section--tight { margin-top: 8px; }
.membership-row > .ic { color: var(--ink-2); }
.membership-row.is-active > .ic { color: var(--ok); }
.expiring-row { display: flex; flex-direction: column; min-width: 0; }
.expiring-row small { font-size: 12px; }
.more-sections { margin-top: 16px; }

/* ---------- dashboard ---------- */
.dash-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.dash-hello__title { font-family: var(--font-display); font-size: 24px; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }
.dash-hello .btn { flex: none; }
@media (max-width: 599px) { .dash-hello .btn span { display: none; } .dash-hello .btn { width: 44px; padding: 0; } }
.dash-kpis { grid-template-columns: repeat(2, 1fr); }
.dash-kpis > div[hidden] { display: none; }
.dash-kpis > div { border-left: 0 !important; border-top: 1px solid var(--line); }
.dash-kpis > div:nth-child(-n+2) { border-top: 0; }
.dash-kpis > div:nth-child(2n) { border-left: 1px solid var(--line) !important; }
.dash-kpis .is-bad dd { color: var(--bad); }
@media (min-width: 900px) {
  .dash-kpis { grid-template-columns: repeat(6, 1fr); }
  .dash-kpis > div { border-top: 0; border-left: 1px solid var(--line) !important; }
  .dash-kpis > div:first-child { border-left: 0 !important; }
}
.dash-alert { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn-soft) 70%, var(--bg)); transition: border-color .15s; }
.dash-alert:hover { border-color: var(--warn); }
.dash-alert__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); flex: none; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; margin-top: 24px; }
@media (min-width: 1024px) { .dash-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.dash-grid > .section { margin-top: 0; }
@media (max-width: 1023px) { .dash-grid > .section + .section { margin-top: 24px; } }
.dash-appt { gap: 10px; }
.dash-more { display: block; padding: 10px 2px 0; font-size: 13px; font-weight: 600; color: var(--accent-text); }
.dash-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.dash-appt:hover { background: var(--surface); }
.dash-appt__time { width: 44px; font-weight: 600; font-size: 13px; flex: none; }
.dash-appt__bar { align-self: stretch; width: 3px; border-radius: 3px; background: var(--c, var(--line-strong)); flex: none; }
.feed { list-style: none; margin: 0; padding: 4px 14px; }
.feed__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; font-size: 13.5px; }
.feed__item + .feed__item { border-top: 1px solid var(--line); }
.feed__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; background: var(--surface); color: var(--ink-2); }
.feed__item--payment .feed__icon { background: var(--ok-soft); color: var(--ok); }
.feed__item--cancel .feed__icon { background: var(--bad-soft); color: var(--bad); }
.feed__item--client .feed__icon { background: var(--accent-soft); color: var(--accent-text); }
.feed__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.feed__who { color: var(--ink); font-weight: 600; }
a.feed__who[href]:hover { text-decoration: underline; text-underline-offset: 3px; }
.feed__time { font-size: 12px; white-space: nowrap; }
.sparks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .sparks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.spark { padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.spark__label { font-size: 12px; color: var(--ink-2); }
.spark__value { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.spark__plot { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin-top: 10px; }
.spark__bar { flex: 1; height: var(--h); min-height: 2px; border-radius: 3px 3px 1px 1px; background: var(--accent); opacity: .85; transition: opacity .15s; }
.spark__bar:hover { opacity: 1; }
.spark__bar.is-neg { background: color-mix(in srgb, var(--bad) 70%, var(--bg)); }
.spark__bar.is-zero { background: var(--line-strong); opacity: .6; }

/* ---------- win-back ---------- */
.winback-head { display: flex; flex-direction: column; gap: 12px; }
.winback-head__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.winback-head .muted { font-size: 13.5px; }
@media (min-width: 900px) { .winback-head { flex-direction: row; align-items: center; justify-content: space-between; } }
.winback-row { gap: 8px; }
.winback-row__link:hover .row__title { text-decoration: underline; text-underline-offset: 3px; }
.winback-row__away { flex: none; font-size: 12px; font-weight: 700; color: var(--warn); background: var(--warn-soft); border-radius: 99px; padding: 3px 8px; }
.winback-row__actions { display: flex; align-items: center; gap: 4px; flex: none; }
@media (max-width: 599px) { .winback-row { flex-wrap: wrap; } .winback-row__actions { width: 100%; justify-content: flex-end; } }
.toolbar__winback { flex: none; }
@media (max-width: 599px) { .toolbar__winback span { display: none; } .toolbar__winback { width: 44px; padding: 0; } }

/* ---------- client card additions ---------- */
.profile__meta { font-size: 12.5px; margin-top: 2px; }
.profile__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile__actions [data-action="book"] { grid-column: 1 / -1; order: -1; }
@media (min-width: 600px) {
  .profile__actions { display: flex; flex-wrap: wrap; }
  .profile__actions [data-action="book"] { order: 0; margin-left: auto; }
}
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; }
.pay-row + .pay-row { border-top: 1px solid var(--line); }
.pay-row__main { display: flex; flex-direction: column; min-width: 0; }
.pay-row__main small { font-size: 12px; }
.pay-row.is-voided b { text-decoration: line-through; }

/* ---------- message sheet ---------- */
.msg-lang { justify-self: start; }
.msg-actions { flex-wrap: wrap; }

/* ---------- automation settings ---------- */
.growth-intro { max-width: 70ch; font-size: 14px; }
.growth-card { display: flex; flex-direction: column; gap: 12px; }
.growth-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.growth-row .field__hint { flex-basis: 100%; margin-left: 50px; }
.growth-inline { width: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.growth-inline:disabled { opacity: .45; }
.growth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.growth-open { align-self: flex-start; }

/* ---------- reviews ---------- */
.reviews-summary { display: flex; flex-direction: column; gap: 14px; }
.reviews-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.reviews-score__avg { font-family: var(--font-display); font-size: 36px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.reviews-stars, .reviews-row__stars { color: var(--series-4); letter-spacing: 1px; }
.reviews-row__stars { font-weight: 400; font-size: 13px; }
.ledger li.is-low .reviews-row__stars { color: var(--bad); }
.feed__item--review .feed__icon { background: color-mix(in srgb, var(--series-4) 16%, var(--bg)); color: var(--series-4); }
.feed__item--low .feed__icon { background: var(--bad-soft); color: var(--bad); }

/* ---------- service packages ---------- */
.pkg-block { display: flex; flex-direction: column; gap: 10px; border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--accent-wash); }
.pkg-block__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pkg-block__row > .ic { color: var(--accent-text); }
.pkg-block .bars__track, .package-row__bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pkg-block .bars__fill, .package-row__bar .bars__fill { display: block; height: 100%; width: var(--v, 0%); background: var(--accent); border-radius: 99px; }
.pkg-block.is-used { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.pkg-block.is-used .bars__fill { background: var(--ok); }
.package-row { align-items: flex-start; }
.package-row > .ic { margin-top: 2px; color: var(--accent-text); }
.package-row__bar { margin-top: 6px; max-width: 280px; }
.checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; max-height: 260px; overflow-y: auto; padding: 4px 0; }
.field.has-error .checks-grid + .field__error { display: block; }
.form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.packages-hint { margin: -2px 2px 10px; max-width: 70ch; }

/* ---------- message templates editor ---------- */
.growth-hint { margin: -2px 2px 10px; max-width: 70ch; }
.growth-templates { display: grid; gap: 10px; }
.growth-tpl { display: flex; flex-direction: column; gap: 8px; }
.growth-tpl__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 599px) { .growth-grid { grid-template-columns: 1fr; } .form-row--3 { grid-template-columns: 1fr 1fr; } }

/* ---------- bonuses ---------- */
.bonus-block { display: flex; flex-direction: column; gap: 10px; border-color: color-mix(in srgb, var(--signal, var(--accent)) 35%, var(--line)); background: var(--accent-wash); }
.bonus-block__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bonus-block__row > .ic { color: var(--accent-text); }
.bonus-block__amount { flex: 1 1 120px; max-width: 180px; }
.bonus-block.is-used { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.bonus-card { display: flex; align-items: center; gap: 14px; }
.bonus-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-wash); color: var(--accent-text); flex: none; }
.bonus-card__main { display: flex; flex-direction: column; min-width: 0; }
.bonus-card__value { font-size: 24px; font-weight: 700; line-height: 1.2; }
.bonus-ledger { margin-top: 8px; }
.bonus-ledger .is-in b { color: var(--ok); }
.bonus-ledger .is-void { opacity: .55; }
.bonus-ledger .is-void b { text-decoration: line-through; }
.kpis--3 { grid-template-columns: repeat(3, 1fr); align-self: start; }
.kpis--3 > div:nth-child(n) { border-left: 1px solid var(--line); border-top: 0; }
.kpis--3 > div:first-child { border-left: 0; }

/* ---------- ask the CRM ---------- */
.assistant-page { max-width: 880px; }
.ask-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ask-hero__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--accent); color: var(--accent-ink); }
.ask-hero__icon .ic { width: 24px; height: 24px; }
.ask-hero__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ask-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.ask-chip .ic { color: var(--accent-text); }
.ask-chip:hover { border-color: var(--accent); }
.ask-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ask-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ask-chip[aria-pressed="true"] .ic { color: currentColor; }
.ask-answer { display: flex; flex-direction: column; gap: 12px; transition: opacity .15s; }
.ask-answer.is-loading { opacity: .5; }
.ask-answer__q { font-size: 13px; }
.ask-answer__head { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.ask-answer__sub { margin-top: -6px; }
.ask-kpis { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.ask-kpis > div:nth-child(n) { border-left: 1px solid var(--line); border-top: 0; }
.ask-kpis > div:first-child { border-left: 0; }
.ask-reasons { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; }
.ask-reason { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bad-soft, var(--surface-2)); font-size: 14px; }
.ask-reason .ic { margin-top: 2px; color: var(--bad); flex: none; }
.ask-reason.is-good { background: var(--ok-soft); }
.ask-reason.is-good .ic { color: var(--ok); }
.ask-row__lead { min-width: 52px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ask-row__end { white-space: nowrap; }
a.ask-row:not([href]) { cursor: default; }
.ask-more { align-self: flex-start; }
.ask-source { margin-top: 2px; }
@media (max-width: 599px) {
  .ask-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask-kpis > div:nth-child(2n+1) { border-left: 0; }
  .ask-kpis > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ask-answer__head { font-size: 19px; }
}

/* ---------- client alerts (allergies …) ---------- */
.client-alert { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--bad-soft);
  border: 1px solid color-mix(in srgb, var(--bad) 28%, transparent); color: color-mix(in srgb, var(--bad) 80%, var(--ink)); font-size: 14px; font-weight: 500; }
.client-alert .ic { color: var(--bad); margin-top: 2px; }
[data-part="alerts"]:not([hidden]) { margin: 12px 0 4px; }
.appt-alerts { margin-top: 8px; }

/* ---------- dental: balance, works ---------- */
.balance-pill { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--bad-soft); color: var(--bad); }
.balance-pill small { font-size: 12px; font-weight: 600; }
.balance-pill b { font-family: var(--font-display); font-size: 19px; line-height: 1.2; }
.balance-pill.is-advance { background: var(--ok-soft); color: var(--ok); }
.works-kpis { margin-bottom: 10px; }
.works-kpis.is-debt > div:last-child dd { color: var(--bad); }
.works-ledger { padding-top: 4px; padding-bottom: 4px; }
.ledger .work-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; }
.work-row__date { font-size: 13px; color: var(--ink-2); }
.work-row__main { display: flex; flex-direction: column; min-width: 0; }
.work-row__title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 500; }
.work-row__main small { font-size: 12px; }
.work-row.is-payment .work-row__amount { color: var(--ok); }
.work-row.is-voided { opacity: .5; }
.work-row.is-voided .work-row__amount { text-decoration: line-through; }
.tooth-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tooth-chips:empty { display: none; }
.tooth-chip { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 5px; border-radius: var(--radius-xs); background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--ink); }
.surface-picks { display: flex; gap: 6px; }
.surface-pick { position: relative; }
.surface-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.surface-pick span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); font-weight: 700; background: var(--bg); }
.surface-pick input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.surface-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.work-total { font-family: var(--font-display); font-weight: 600; font-size: 16px; text-align: right; }
@media (max-width: 599px) { .ledger .work-row { grid-template-columns: 52px minmax(0, 1fr) auto 28px; gap: 8px; } }

/* ---------- dental: tooth chart (FDI) ---------- */
.odonto { padding: 14px 14px 12px; }
.odonto__scroll { overflow-x: auto; padding-bottom: 4px; }
.jaw { min-width: 560px; }
.jaw--upper + .jaw--lower { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.jaw__label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--ink-3); margin: 0 2px 4px; text-transform: uppercase; letter-spacing: .04em; }
.jaw__label b { font-weight: 600; }
.jaw--lower .jaw__label { margin: 4px 2px 0; order: 2; }
.jaw--lower { display: flex; flex-direction: column; }
.jaw__teeth { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.jaw--milk .jaw__teeth { grid-template-columns: repeat(10, minmax(0, 1fr)); padding: 0 18.75%; }
.tooth { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0 6px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: none; cursor: pointer; transition: background .12s, border-color .12s; }
.tooth:hover { background: var(--accent-wash); }
.tooth:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.jaw--lower .tooth { flex-direction: column-reverse; }
.tooth__n { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.tooth__shape { width: 100%; max-width: 34px; height: 40px; fill: var(--bg); stroke: #9fb0b4; stroke-width: 1.4; }
.jaw--upper .tooth__shape { transform: scaleY(-1); }
.jaw--milk .tooth__shape { height: 32px; }
.tooth__surf { width: 26px; height: 26px; }
.tooth__surf path { fill: var(--bg); stroke: #9fb0b4; stroke-width: 1.2; }
.tooth__surf .is-filling { fill: var(--t-filling); stroke: var(--t-filling); }
.tooth__surf .is-caries { fill: var(--t-caries); stroke: var(--t-caries); }
.tooth.is-planned::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.tooth__note { position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--t-watch); }
.tooth[data-status="crown"] .tooth__shape { fill: var(--t-crown-soft); stroke: var(--t-crown); stroke-width: 2; }
.tooth[data-status="bridge"] .tooth__shape { fill: var(--t-crown-soft); stroke: var(--t-crown); stroke-width: 2; stroke-dasharray: 5 2; }
.tooth[data-status="endo"] .tooth__shape { fill: var(--t-endo-soft); stroke: var(--t-endo); stroke-width: 2; }
.tooth[data-status="implant"] .tooth__shape { fill: var(--surface-2); stroke: var(--t-implant); stroke-width: 2; }
.tooth[data-status="missing"] .tooth__shape { fill: none; stroke: #9fb0b4; stroke-dasharray: 3 3; }
.tooth[data-status="missing"] .tooth__surf { opacity: .25; }
.tooth[data-status="extract"] .tooth__shape { fill: var(--bad-soft); stroke: var(--bad); stroke-width: 2; }
.tooth[data-status="watch"] .tooth__n { color: var(--t-watch); }
.tooth[data-status="caries"] .tooth__shape { stroke: var(--t-caries); }
:root { --t-caries: #d23a2a; --t-filling: #2a78d6; --t-endo: #7a4fd6; --t-endo-soft: #ece4fb; --t-crown: #b98700; --t-crown-soft: #fbe9b5; --t-implant: #5d7479; --t-watch: #e07b00; }

.odonto__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); list-style: none; font-size: 12px; color: var(--ink-2); }
.odonto__legend li { display: inline-flex; align-items: center; gap: 6px; }
.odonto__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid #9fb0b4; background: var(--bg); flex: none; }
[data-status="caries"] > .odonto__swatch { background: var(--t-caries); border-color: var(--t-caries); }
[data-status="filling"] > .odonto__swatch { background: var(--t-filling); border-color: var(--t-filling); }
[data-status="endo"] > .odonto__swatch { background: var(--t-endo-soft); border-color: var(--t-endo); }
[data-status="crown"] > .odonto__swatch, [data-status="bridge"] > .odonto__swatch { background: var(--t-crown-soft); border-color: var(--t-crown); }
[data-status="bridge"] > .odonto__swatch { border-style: dashed; }
[data-status="implant"] > .odonto__swatch { background: var(--surface-2); border-color: var(--t-implant); }
[data-status="missing"] > .odonto__swatch { border-style: dashed; border-color: #9fb0b4; background: none; }
[data-status="extract"] > .odonto__swatch { background: var(--bad-soft); border-color: var(--bad); }
[data-status="watch"] > .odonto__swatch { background: var(--bg); border-color: var(--t-watch); }
.odonto__legend .is-planned .odonto__swatch { border-radius: 50%; width: 8px; height: 8px; border: 0; background: var(--accent); }

/* tooth sheet */
.status-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.status-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 500; cursor: pointer; }
.status-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.status-chip:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.status-chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tooth-sheet__actions { display: flex; gap: 8px; }
.tooth-history { list-style: none; border-top: 1px solid var(--line); }
.tooth-history li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }

/* ---------- dental: treatment plans ---------- */
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--bad { background: var(--bad-soft); color: var(--bad); }
.badge--accent { background: var(--accent-soft); color: var(--accent-text); }
.btn--wa { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.btn--wa:hover { background: #198549; border-color: #198549; }

.plan-card { align-items: flex-start; }
.plan-card .row__end { align-items: flex-end; gap: 6px; }
.plan-card__bar { display: block; height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 6px; max-width: 240px; }
.plan-card__bar .bars__fill { display: block; height: 100%; width: var(--v, 0%); background: var(--ok); }
.plan-card.is-closed { opacity: .7; }

.plan-layout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .plan-layout { grid-template-columns: minmax(0, 1fr) 300px; } .plan-side { position: sticky; top: 16px; } }
.plan-top { display: flex; align-items: center; gap: 10px; }
.plan-title { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 21px; font-weight: 600; border-color: transparent; background: transparent; padding-left: 4px; }
.plan-title:hover:not([readonly]), .plan-title:focus { border-color: var(--line-strong); background: var(--bg); }
.plan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 4px 14px; }
.plan-meta a { color: var(--ink); font-weight: 600; }
.plan-doctor { display: inline-flex; align-items: center; gap: 6px; }
.select--inline { min-height: 32px; padding-top: 4px; padding-bottom: 4px; width: auto; }
.plan-variants { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.plan-tab { display: grid; gap: 2px; min-width: 140px; padding: 10px 14px; text-align: left; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); cursor: pointer; }
.plan-tab b { font-family: var(--font-display); font-weight: 600; }
.plan-tab small { color: var(--ink-3); font-size: 12px; }
.plan-tab[aria-selected="true"] { border: 2px solid var(--accent); background: var(--accent-wash); padding: 9px 13px; }
.plan-tab--add { border-style: dashed; color: var(--accent-text); place-items: center; }
.plan-variant { margin-bottom: 12px; }
.plan-variant__del { align-self: end; }
.plan-stage { margin-bottom: 12px; overflow: hidden; }
.plan-stage__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.plan-stage__name { flex: 1; min-width: 0; font-weight: 600; border-color: transparent; background: transparent; min-height: 34px; }
.plan-stage__name:hover:not([readonly]), .plan-stage__name:focus { border-color: var(--line-strong); background: var(--bg); }
.plan-rows { list-style: none; }
.plan-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto minmax(36px, auto); align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.plan-row__main { display: flex; flex-direction: column; text-align: left; min-width: 0; padding: 4px 0; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; }
.plan-row__main:disabled { cursor: default; }
.plan-row__main small { font-size: 12px; }
.plan-row__amount { white-space: nowrap; }
.plan-row__end { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.plan-row.is-done { color: var(--ink-3); }
.plan-row.is-done .plan-row__main > span { text-decoration: line-through; }
.plan-row.is-done { grid-template-columns: 96px minmax(0, 1fr) auto auto; }
.plan-add-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; color: var(--accent-text); font-weight: 600; background: none; border: 0; cursor: pointer; }
.plan-add-row:hover { background: var(--accent-wash); }
.plan-totals { display: flex; gap: 24px; padding: 16px 16px 8px; }
.plan-totals small { display: block; color: var(--ink-3); font-size: 12px; }
.plan-totals b { font-family: var(--font-display); font-size: 20px; }
.plan-progress { padding: 0 16px 14px; display: grid; gap: 6px; }
.plan-progress .bars__track { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.plan-progress .bars__fill { display: block; height: 100%; width: var(--v, 0%); background: var(--ok); }
.plan-actions { display: grid; gap: 8px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.plan-actions .btn { justify-content: center; }
.plan-side { display: grid; gap: 12px; }
.plan-flow { list-style: none; margin: 4px 0 10px; }
.plan-flow li { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--ink-3); font-weight: 500; }
.plan-flow li i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); flex: none; }
.plan-flow .is-done { color: var(--ink); }
.plan-flow .is-done i { background: var(--ok); }
.plan-flow .is-now { color: var(--accent-text); font-weight: 700; }
.plan-flow .is-now i { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.plan-declined { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bad-soft); color: var(--bad); font-weight: 500; margin-bottom: 10px; }
.plan-status-actions { display: grid; gap: 6px; }
.plan-decline { color: var(--bad); }
.decline-reasons { display: grid; gap: 4px; }
.radio-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.radio-row:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
@media (max-width: 599px) {
  .plan-row { grid-template-columns: minmax(0, 1fr) auto minmax(32px, auto); }
  .plan-row .tooth-chips { grid-column: 1 / -1; }
  .plan-row.is-done { grid-template-columns: minmax(0, 1fr) auto auto; }
}

/* ---------- dental: done today (appointment sheet) ---------- */
.dental-visit { display: grid; gap: 8px; }
.dv-plan { font-size: 12px; margin-top: -2px; }
.dv-open { display: grid; gap: 6px; }
.dv-item { position: relative; display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; }
.dv-item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dv-item__box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--line-strong); color: transparent; }
.dv-item.is-on { border-color: var(--accent); background: var(--accent-wash); }
.dv-item.is-on .dv-item__box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dv-item:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.dv-item__main { display: flex; flex-direction: column; min-width: 0; }
.dv-item__main small { font-size: 12px; }
.dv-done { list-style: none; display: grid; gap: 4px; }
.dv-done__row { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--radius-sm); background: var(--ok-soft); }
.dv-done__row > .ic { color: var(--ok); }
.dv-empty { padding: 8px 0; }
.dv-money { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); margin-top: 4px; }
.dv-money > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.dv-money dt { color: var(--ink-2); }
.dv-money dd { font-weight: 600; }
.dv-money__total { padding-top: 6px; border-top: 1px solid var(--line-strong); }
.dv-money__total dt { color: var(--ink); font-weight: 600; }
.dv-money__total dd { font-family: var(--font-display); font-size: 17px; }
.dv-money.is-debt .dv-money__total dd { color: var(--bad); }

/* ---------- dental: dashboard strip, unclosed plans page ---------- */
.dash-dental { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.dash-dental__item { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: inherit; text-decoration: none; }
.dash-dental__item small { font-size: 12px; color: var(--ink-2); }
.dash-dental__item b { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.dash-dental__item--main { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.dash-dental__item--main small { color: color-mix(in srgb, var(--bg) 70%, transparent); }
a.dash-dental__item:hover { border-color: var(--accent); }
.dash-dental__bad { color: var(--bad); }
@media (max-width: 599px) { .dash-dental { grid-template-columns: 1fr 1fr; } .dash-dental__item--main { grid-column: 1 / -1; } }
/* the auto service's home (spec 02 §10) */
.dash-auto { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.dash-auto__item { display: grid; align-content: start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: inherit; text-decoration: none; min-width: 0; }
.dash-auto__item small { font-size: 12px; color: var(--ink-2); }
.dash-auto__item b { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.dash-auto__sub { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.dash-auto__sub:empty { display: none; }
.dash-auto__item--main { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.dash-auto__item--main small, .dash-auto__item--main .dash-auto__sub { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.dash-auto__item--main b { font-size: 28px; }
.dash-auto.is-late .dash-auto__item--main { box-shadow: inset 4px 0 0 var(--bad); }
a.dash-auto__item:hover { border-color: var(--accent); }
.dash-auto__bad { color: var(--bad); }
@media (max-width: 899px) { .dash-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-auto__item--main { grid-column: 1 / -1; } }

.op-intro { max-width: 70ch; margin-bottom: 14px; }
.op-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.op-stat { display: grid; gap: 2px; min-width: 200px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.op-stat small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.op-stat b { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.op-stat--main { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.op-stat--main small { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.op-stat__bad { color: var(--bad); }
.op-group__sum { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.op-group__hint { margin: -4px 2px 8px; }
.op-group--proposed .op-group__sum { color: var(--warn); }
.op-group--abandoned .op-group__sum { color: var(--bad); }
.op-list { overflow: hidden; }
.op-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 100px 80px auto; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.op-row:last-child { border-bottom: 0; }
.op-row__main { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.op-row__main small { font-size: 12px; }
.op-row__amount { text-align: right; }
.op-row__actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.op-row--debt { grid-template-columns: minmax(0, 1fr) auto auto; }
.op-row--debt .op-row__doctor, .op-row--debt .op-row__days { display: none; }
@media (max-width: 899px) {
  .op-row { grid-template-columns: minmax(0, 1fr) auto; }
  .op-row__doctor { display: none; }
  .op-row__days { grid-column: 2; grid-row: 2; text-align: right; }
  .op-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.dental-rep { overflow-x: auto; }
.dental-rep__row { display: grid; grid-template-columns: minmax(140px, 1.4fr) repeat(2, minmax(120px, 1fr)) 80px minmax(100px, 1fr); gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); min-width: 620px; }
.dental-rep__row:last-child { border-bottom: 0; }
.dental-rep__head { font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--surface); }
.dental-rep__name { display: flex; align-items: center; gap: 8px; }
.dental-rep__name .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.dental-rep__reasons { margin-top: 8px; }
/* salons: the client's formulas (spec beauty 04) */
.fm-list { overflow: hidden; }
.fm-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.fm-row:last-child { border-bottom: 0; }
.fm-row__when { display: grid; gap: 1px; }
.fm-row__when b { font-size: 14px; }
.fm-row__when small { font-size: 12px; }
.fm-row__main { display: grid; gap: 4px; min-width: 0; }
.fm-row__main > b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.fm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fm-chips span { padding: 2px 8px; border-radius: 7px; background: var(--surface); font-size: 13px; font-weight: 500; }
.fm-row__note { font-size: 13px; color: var(--ink-2); font-style: italic; overflow-wrap: anywhere; }
.fm-row__note:empty { display: none; }
.fm-row__acts { display: flex; gap: 4px; align-items: center; }
.fm-row.is-last { background: var(--surface); border-radius: var(--radius-sm); }
.fm-row.is-last .fm-chips span { background: var(--bg); }
.fm-mix-rows { display: grid; gap: 6px; }
.fm-mix { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) 72px 70px auto; gap: 6px; align-items: center; }
.fm-mix.has-error [data-part="amount"] { border-color: var(--bad); }
.fm-mix-add { justify-self: start; }
.fv-block { display: grid; gap: 12px; }
.fv { display: grid; gap: 6px; }
.fv__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fv__head .section__title { margin: 0; }
.fv__body { display: grid; gap: 6px; }
.fv__label { font-size: 12px; margin: 0; }
@media (max-width: 599px) {
  .fm-row { grid-template-columns: minmax(0, 1fr) auto; }
  .fm-row__main { grid-column: 1 / -1; grid-row: 2; }
  .fm-mix { grid-template-columns: minmax(0, 1fr) 64px 60px auto; }
  .fm-mix [data-part="brand"] { grid-column: 1 / -1; }
}
/* salons: the next visit (spec beauty 03) */
.nv-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-slot { display: grid; gap: 1px; padding: 9px 14px; min-width: 120px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.nv-slot input { position: absolute; opacity: 0; pointer-events: none; }
.nv-slot b { font-size: 14px; }
.nv-slot small { font-size: 13px; color: var(--ink-2); }
.nv-slot:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.nv-slot:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.rb-staff { margin: 4px 0 4px; flex-wrap: wrap; }
.rb-staff .chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rb-staff .chip input { position: absolute; opacity: 0; pointer-events: none; }
.rb-field { max-width: 300px; }
/* the reports of the auto service (spec 02 §10) */
.arep { overflow-x: auto; }
.arep__row { display: grid; grid-template-columns: minmax(150px, 1.6fr) minmax(90px, 1fr) minmax(100px, 1fr) 70px; gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line); }
.arep__row:last-child { border-bottom: 0; }
.arep__head { font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--surface); }
.arep__row > .num { text-align: right; }
.arep__name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.arep__name .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.arep__empty { padding: 14px; }
.arep__hint { margin-top: 8px; }
.arep__hint:empty { display: none; }
.arep__card { margin-top: 12px; }
/* the warranty redos of the auto service (spec 12 §4) */
.wrep__hint { margin-top: 8px; }
.wrep__hint:empty { display: none; }
.wrep__list { margin-top: 12px; }
.wrep-mech { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wrep-mech .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.appt__alert { color: var(--bad); margin-right: 3px; vertical-align: -1px; }

/* ---------- dental: check-ups (recall) ---------- */
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.tabbar .nav-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; height: 16px; min-width: 16px; font-size: 10px; padding: 0 4px; }
.tabbar a { position: relative; }
.rc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rc-intro { max-width: 70ch; }
.rc-filter .select { min-width: 200px; }
.rc-setup { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; text-align: left; }
.rc-row { grid-template-columns: minmax(0, 1.7fr) 110px minmax(0, 1fr) minmax(0, 1.3fr) auto; }
.rc-row.is-hot { background: linear-gradient(90deg, var(--accent-wash), transparent 60%); }
.rc-flags { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; flex-wrap: wrap; }
.rc-flag { padding: 1px 7px; border-radius: 99px; background: var(--surface); color: var(--ink-3); font-size: 11px; font-weight: 600; }
.rc-flag--plan { background: var(--warn-soft); color: var(--warn); }
.rc-due { display: flex; flex-direction: column; }
.rc-due b { font-family: var(--font-display); font-weight: 600; }
.rc-due small { font-size: 12px; color: var(--accent-text); font-weight: 600; }
.rc-row.is-late .rc-due small { color: var(--bad); }
.rc-last { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.rc-last small { font-size: 12px; }
.rc-group--wants .op-group__sum { color: var(--accent-text); }
.rc-group--overdue .op-group__sum { color: var(--bad); }
.rc-long__sum { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.rc-long__sum::-webkit-details-marker { display: none; }
.rc-long[open] .rc-long__sum { margin-bottom: 8px; }
@media (max-width: 899px) { .rc-row { grid-template-columns: minmax(0, 1fr) auto; } .rc-last { display: none; } }

.recall-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.recall-chip { padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--bg); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); }
.recall-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.recall-chip:disabled { cursor: default; opacity: .6; }
.recall-line { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.recall-line__top { display: flex; align-items: center; gap: 8px; }
.recall-line__top .ic { color: var(--accent-text); }
.recall-line__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recall-line__chips .btn { margin-left: auto; }
.recall-late { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); color: color-mix(in srgb, var(--warn) 85%, var(--ink)); }
.recall-late .ic { color: var(--warn); margin-top: 2px; }
.recall-late > span { display: flex; flex-direction: column; }
.recall-late__sub { font-size: 13px; }
.recall-card { display: grid; gap: 12px; }
.recall-card__main { display: flex; align-items: center; gap: 12px; }
.recall-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.recall-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.recall-card__text b { font-family: var(--font-display); font-size: 17px; }
.recall-card__row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.recall-card__date { flex: 1; min-width: 150px; }
.recall-history { margin-top: 2px; }
.recall-history li { grid-template-columns: 56px minmax(0, 1fr) auto; }
.radio-row__hint { margin-left: auto; font-size: 12px; }
.recall-sub { margin: -2px 0 4px 30px; }
.dash-alert--recall { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-wash); }
.dash-alert--recall .dash-alert__icon { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- dental: lab ---------- */
.lab-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); font-size: 13.5px; color: var(--ink-2); }
.lab-note .ic { color: var(--accent-text); margin-top: 2px; }

/* order form */
.lab-lines__head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.lab-lines__head span:last-child { text-align: right; }
.lab-picks { display: grid; gap: 6px; }
.lab-picks:empty { display: none; }
.lab-pick { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; align-items: center; padding: 8px 8px 8px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); transition: border-color .12s, background-color .12s; }
.lab-pick.is-on { border-color: var(--accent); background: var(--accent-wash); }
.lab-pick__main { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; cursor: pointer; }
.lab-pick__main input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lab-pick__main input:disabled { cursor: default; }
.lab-pick__box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--line-strong); color: transparent; }
.lab-pick.is-on .lab-pick__box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lab-pick__main:has(input:focus-visible) .lab-pick__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.lab-pick__text { display: flex; flex-direction: column; min-width: 0; }
.lab-pick__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 500; }
.lab-pick__text small { font-size: 12px; }
.lab-cost { position: relative; display: block; }
.lab-cost .input { min-height: 40px; padding: 6px 26px 6px 10px; text-align: right; font-size: 15px; font-weight: 600; }
.lab-cost .input:disabled { background: transparent; border-color: transparent; color: var(--ink-3); font-weight: 500; }
.lab-cost__unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 13px; pointer-events: none; }
.lab-cost.has-error .input { border-color: var(--bad); }
.lab-extras { display: grid; gap: 8px; }
.lab-extras:empty { display: none; }
.lab-extra { position: relative; padding: 12px 48px 12px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.lab-extra__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lab-extra__svc, .lab-extra__name { grid-column: span 2; }
.lab-extra.has-service .lab-extra__svc { grid-column: span 4; }
.lab-extra .input, .lab-extra .select { min-height: 40px; padding-top: 7px; padding-bottom: 7px; font-size: 15px; }
.lab-extra__del { position: absolute; top: 6px; right: 4px; width: 36px; height: 36px; color: var(--ink-3); }
.lab-add-line { padding-left: 2px; }
.lab-lines.has-error > .field__error { display: block; }
.vita { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.vita__chip { position: relative; }
.vita__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vita__chip input:disabled { cursor: default; }
.vita__chip span { display: grid; place-items: center; height: 38px; padding-bottom: 5px; border-radius: var(--radius-xs); border: 1px solid var(--line-strong);
  background: linear-gradient(to top, var(--shade, var(--surface-2)) 0 5px, var(--bg) 5px); font-size: 12.5px; font-weight: 700; }
.vita__chip input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: linear-gradient(to top, var(--shade) 0 5px, var(--accent-wash) 5px); color: var(--accent-text); }
.vita__chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
/* approximate VITA classical tints: a strip under each tab, so the eye finds the group quickly */
.vita__chip[data-shade="A1"] { --shade: #eee0bf; } .vita__chip[data-shade="A2"] { --shade: #e8d4a7; } .vita__chip[data-shade="A3"] { --shade: #e0c690; }
.vita__chip[data-shade="A3.5"] { --shade: #d6b77c; } .vita__chip[data-shade="A4"] { --shade: #c9a66a; }
.vita__chip[data-shade="B1"] { --shade: #f1e6c6; } .vita__chip[data-shade="B2"] { --shade: #eadbaf; } .vita__chip[data-shade="B3"] { --shade: #dfc88f; } .vita__chip[data-shade="B4"] { --shade: #d4ba7e; }
.vita__chip[data-shade="C1"] { --shade: #ddd6bf; } .vita__chip[data-shade="C2"] { --shade: #d0c6a8; } .vita__chip[data-shade="C3"] { --shade: #c4b894; } .vita__chip[data-shade="C4"] { --shade: #b1a27b; }
.vita__chip[data-shade="D2"] { --shade: #e4d8c1; } .vita__chip[data-shade="D3"] { --shade: #d9cbac; } .vita__chip[data-shade="D4"] { --shade: #d1c09c; }
.lab-jaws { justify-self: start; }
.lab-jaw-add { justify-self: start; margin-top: -6px; }
.lab-instructions { min-height: 64px; }
.lab-money { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); color: color-mix(in srgb, var(--warn) 80%, var(--ink)); font-size: 14px; }
.lab-money > div { display: flex; justify-content: space-between; gap: 12px; }
.lab-money b { font-family: var(--font-display); font-weight: 600; }
.lab-money small { font-size: 12.5px; }
@media (max-width: 599px) {
  .lab-pick { grid-template-columns: minmax(0, 1fr) 96px; padding-right: 6px; }
  .lab-extra__grid { grid-template-columns: 1fr 1fr; }
  .lab-extra__svc, .lab-extra__name, .lab-extra.has-service .lab-extra__svc { grid-column: 1 / -1; }
}

/* order sheet: rounds, steps, panels */
.lab-order__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lab-order__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.lab-order__sub a[href] { color: var(--ink); font-weight: 600; }
.lab-order__sub a[href]:hover { text-decoration: underline; text-underline-offset: 3px; }
.lab-order__body { display: grid; gap: 16px; }
.lab-trips { list-style: none; }
.lab-trip { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 7px 0; }
.lab-trip::before { content: ""; position: absolute; left: 13px; top: 37px; bottom: -7px; width: 2px; background: var(--line-strong); }
.lab-trip:last-child::before { display: none; }
.lab-trip__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.lab-trip.is-ok .lab-trip__dot { background: var(--ok-soft); color: var(--ok); }
.lab-trip.is-warn .lab-trip__dot { background: var(--warn-soft); color: var(--warn); }
.lab-trip.is-bad .lab-trip__dot { background: var(--bad-soft); color: var(--bad); }
.lab-trip.is-now .lab-trip__dot { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.lab-trip.is-next { color: var(--ink-3); }
.lab-trip.is-next .lab-trip__dot { background: var(--bg); border: 1.5px dashed var(--line-strong); color: var(--ink-3); }
.lab-trip__text { min-width: 0; padding-top: 3px; }
.lab-trip__text b { display: block; font-weight: 600; line-height: 1.3; }
.lab-trip.is-next b { font-weight: 500; }
.lab-trip__text small { display: block; font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.lab-trip__edit { min-height: 28px; margin: 2px 0 0 -10px; font-size: 12.5px; }
.lab-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lab-actions .btn { white-space: normal; text-align: center; line-height: 1.2; padding: 6px 10px; }
.sheet form.lab-panel { display: grid; }
.lab-panel { gap: 12px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--accent-wash); }
.lab-panel--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.lab-panel__title { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.lab-panel__foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.lab-panel .radio-row { background: var(--bg); }
.lab-faults { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.field.has-error .lab-faults .radio-row { border-color: var(--bad); }
.lab-order__kv > div { padding: 9px 14px; font-size: 13.5px; }
.lab-order__kv dd { max-width: 65%; overflow-wrap: anywhere; }
.lab-order__more { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lab-order__cancel { color: var(--bad); margin-left: auto; }
@media (max-width: 479px) { .lab-faults { grid-template-columns: 1fr; } }

/* visit sheet */
.lab-visit { display: grid; gap: 8px; }
.lab-block { display: grid; gap: 10px; padding: 12px 12px 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.lab-block--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
.lab-block--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.lab-block__top { display: flex; gap: 10px; align-items: flex-start; }
.lab-block__top > .ic { margin-top: 1px; color: var(--ink-2); }
.lab-block--bad .lab-block__top > .ic { color: var(--bad); }
.lab-block--ok .lab-block__top > .ic { color: var(--ok); }
.lab-block__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lab-block__what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--ink-2); }
.lab-block__open { width: 32px; height: 32px; margin: -5px -6px 0 0; color: var(--ink-3); }
.lab-block__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-block__acts .btn { white-space: normal; text-align: center; }
.lab-block__acts .btn--primary { flex: 1 1 auto; }

/* patient card */
.lab-card-row__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-wash); color: var(--accent-text); flex: none; }
.lab-card-row__title { display: flex; align-items: center; gap: 6px; }
.lab-card-row__title > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.lab-card-row.is-closed { opacity: .62; }

/* plan page */
.plan-lab { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; cursor: pointer; white-space: nowrap; }
.plan-lab:hover { filter: brightness(.96); }
.plan-lab--mark { cursor: default; }
.plan-lab--mark:hover { filter: none; }
.plan-to-lab { color: var(--accent-text); }
@media (max-width: 599px) { .plan-to-lab span { display: none; } .plan-to-lab { width: 36px; padding: 0; } }

/* the lab page */
.lab-tabs { margin-bottom: 16px; }
/* phones: the three numbers in one strip, the lists start on the first screen */
@media (max-width: 599px) {
  .lab-page .op-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lab-page .op-stat { min-width: 0; padding: 10px 12px; }
  .lab-page .op-stat small { font-size: 11px; line-height: 1.25; }
  .lab-page .op-stat b { font-size: 20px; }
}
a.op-stat:hover { border-color: var(--accent); }
.op-stat .lab-stat-advance { font-weight: 500; }
.lab-group .section__head { justify-content: flex-start; }
.lab-group .section__head .badge { min-width: 22px; }
.lab-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 160px minmax(0, 1.2fr) auto; gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lab-row:last-child { border-bottom: 0; }
.lab-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.lab-row__main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-row__main:hover b { text-decoration: underline; text-underline-offset: 3px; }
.lab-row__what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--ink-3); }
.lab-row__doctor { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-row__due { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 13.5px; }
.lab-row__due small { font-size: 12px; }
.lab-row__due .is-late { color: var(--bad); font-weight: 600; }
.lab-row__due .is-back { color: var(--ok); font-weight: 600; }
.lab-row__visit { font-size: 13px; color: var(--ink-3); }
.lab-row__visit.is-warn { color: var(--warn); font-weight: 600; }
.lab-row__acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.lab-open-head { align-items: center; }
.lab-search { width: 320px; max-width: 100%; }
.lab-search .input { min-height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: 15px; }
@media (max-width: 899px) {
  .lab-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .lab-row__doctor { display: none; }
  .lab-row__due { align-items: flex-end; text-align: right; }
  .lab-row__visit { grid-column: 1 / -1; }
  .lab-row__visit.is-none { display: none; }
  .lab-row__acts { grid-column: 1 / -1; justify-content: flex-start; }
  .lab-search { width: 100%; }
}

/* labs and their money */
.lab-labs { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .lab-labs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.lab-labs__side { display: grid; gap: 8px; align-content: start; }
.lab-labs__side .lab-add { justify-self: start; }
.lab-list { display: grid; gap: 8px; }
.lab-list:empty { display: none; }
.lab-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; text-align: left; transition: border-color .12s; }
.lab-item:hover { border-color: var(--line-strong); }
.lab-item[aria-current="true"] { border-color: var(--accent); background: var(--accent-wash); }
.lab-item.is-off { opacity: .6; }
.lab-item__main { display: flex; flex-direction: column; min-width: 0; }
.lab-item__main small { font-size: 12.5px; }
.lab-item__bal { font-family: var(--font-display); font-size: 17px; }
.lab-item__bal.is-owed { color: var(--bad); }
.lab-ledger { display: grid; gap: 12px; }
.lab-bal { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--hero-bg); color: var(--hero-ink); }
.lab-bal span { color: var(--hero-muted); font-size: 14px; }
.lab-bal b { font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.lab-ledger__meta { font-size: 13px; margin-top: -4px; }
.lab-ledger__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-ledger__acts [data-action="edit-lab"] { margin-left: auto; }
.lab-ledger__list { list-style: none; border-top: 1px solid var(--line); }
.lab-entry { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.lab-entry time { padding-top: 1px; font-size: 12.5px; }
.lab-entry__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; color: inherit; }
.lab-entry__main:not(:disabled):hover .lab-entry__what { text-decoration: underline; text-underline-offset: 3px; }
.lab-entry__main:disabled { cursor: default; opacity: 1; }
.lab-entry__what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.lab-entry__what span:empty { display: none; }
.lab-entry__main small { font-size: 12px; }
.lab-entry__amount { font-weight: 600; white-space: nowrap; }
.lab-entry__amount.is-plus { color: var(--bad); }
.lab-entry__amount.is-minus { color: var(--ok); }
.lab-ledger__more { justify-self: center; }

/* ---------- dental: doctor pay (rule form, payslip) ---------- */
.pay-note { align-items: center; }
.rule-row__marks { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; }
.rule-row__marks:empty { display: none; }
[data-panel="pay"] .icon-btn:disabled { opacity: .3; cursor: default; }
.rule-deduct { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); }
.rule-check { align-items: flex-start; min-height: 0; padding: 4px 0; }
.rule-check input { margin-top: 2px; }
.rule-check > span { display: flex; flex-direction: column; }
.rule-check small { font-size: 12.5px; color: var(--ink-3); }
.rule-formula { font-size: 13px; font-weight: 600; color: var(--ink-2); padding-top: 6px; border-top: 1px dashed var(--line-strong); margin-top: 2px; }
.rule-preview { font-size: 13px; }
.rule-preview.is-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); color: color-mix(in srgb, var(--warn) 80%, var(--ink)); }
.rule-preview.is-warn .ic { color: var(--warn); }

.payslip-page .ps { display: grid; gap: 14px; padding: 18px 20px 20px; }
.ps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; }
.ps-head__who { min-width: 0; }
.ps-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ps-head__who .muted { font-size: 14px; }
.ps-month { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ps-month .icon-btn { width: 40px; height: 40px; }
.ps-month .icon-btn:disabled { opacity: .3; cursor: default; }
.ps-month__label { min-width: 132px; text-align: center; font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.ps-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-acts__reopen { margin-left: auto; }
.ps-closed { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 75%, var(--ink)); font-size: 13.5px; }
.ps-closed .ic { margin-top: 2px; color: var(--ok); }
.ps-closed b { font-weight: 600; color: var(--ok); }
.ps-hint { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px;
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); color: color-mix(in srgb, var(--warn) 80%, var(--ink)); }
.ps-hint > .ic { color: var(--warn); }
.ps-hint > span { flex: 1; min-width: 180px; }
.ps-hint__go { min-height: 32px; }

.ps-table-wrap { overflow-x: auto; }
.ps-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ps-table th { padding: 8px 10px; border-bottom: 1px solid var(--line-strong); text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.ps-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ps-table .r { text-align: right; }
.ps-c-date { white-space: nowrap; color: var(--ink-2); }
.ps-c-client { white-space: nowrap; }
.ps-client[href]:hover { text-decoration: underline; text-underline-offset: 3px; }
.ps-c-work { min-width: 150px; }
.ps-th-short { display: none; text-decoration: none; cursor: help; }
/* a tablet or a laptop with the sidebar: short headers and tighter cells keep all nine columns in view */
@media screen and (max-width: 1180px) {
  .ps-table { font-size: 13px; }
  .ps-table th, .ps-table td { padding-left: 6px; padding-right: 6px; }
  .ps-th-full { display: none; }
  .ps-th-short { display: inline; }
}
.ps-work { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ps-flag { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; }
.ps-flag:empty { display: none; }
/* "sentyabr ayı üçün düzəliş…": a month inside the sentence is lowercase, the line starts with a capital */
.ps-flag::first-letter, .ps-total td:first-child::first-letter { text-transform: uppercase; }
.ps-c-fig, .ps-c-earned { white-space: nowrap; }
.ps-c-fig.is-none { color: var(--ink-3); }
.ps-c-fig.is-off span { color: var(--ink-3); text-decoration: line-through; }
.ps-c-earned b { font-weight: 700; }
.ps-lbl { display: none; }
.ps-group { background: var(--surface); }
.ps-group td { padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.ps-group b { font-weight: 600; }
.ps-group__rule { color: var(--ink-2); }
.ps-group .r { font-weight: 600; }
.ps-group.is-adj { background: var(--warn-soft); }
.ps-line.is-remake { background: color-mix(in srgb, var(--bad-soft) 60%, var(--bg)); }
.ps-line.is-remake .ps-flag { color: var(--bad); }
.ps-line.is-adj { background: color-mix(in srgb, var(--warn-soft) 60%, var(--bg)); }
.ps-line.is-adj .ps-flag { color: var(--warn); }
.ps-total td { padding-top: 12px; border-bottom: 0; font-size: 14px; font-weight: 600; }
.ps-total td:last-child { font-family: var(--font-display); font-size: 17px; }
.ps-empty { padding: 20px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }

.ps-acct { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.ps-acct > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-left: 1px solid var(--line); min-width: 0; }
.ps-acct > div:first-child { border-left: 0; }
.ps-acct dt { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ps-acct dd { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.ps-acct__due { background: var(--hero-bg); color: var(--hero-ink); }
.ps-acct__due dt, .ps-acct__due small { color: var(--hero-muted); }
.ps-acct__due small { font-size: 12px; }
.ps-acct__due small:empty { display: none; }
.ps-pays { display: grid; gap: 2px; }
.ps-pays__list { list-style: none; }
.ps-pay { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ps-pay:last-child { border-bottom: 0; }
.ps-pay time { font-size: 12.5px; }
.ps-pay__what { display: flex; flex-direction: column; min-width: 0; }
.ps-pay__what small { font-size: 12px; overflow-wrap: anywhere; }
.ps-pay__what small:empty { display: none; }
.ps-pay b { white-space: nowrap; }
.ps-pay.is-voided b { color: var(--bad); }
.ps-pays__none { font-size: 13.5px; }
.ps-paper-only { display: none; }
@media screen and (max-width: 899px) {
  .ps-acct { grid-template-columns: 1fr 1fr; }
  .ps-acct > div:nth-child(3) { border-left: 0; }
  .ps-acct > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* phones: a line becomes a card — patient and earned on top, the work, then its figures with small labels */
@media screen and (max-width: 767px) {
  .payslip-page .ps { padding: 14px; }
  .ps-month { flex: 1 1 100%; justify-content: space-between; }
  .ps-table, .ps-table tbody, .ps-table tfoot { display: block; }
  .ps-table thead { display: none; }
  .ps-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
  .ps-table td { display: block; padding: 0; border: 0; }
  .ps-table tr.ps-group, .ps-table tr.ps-line.is-remake, .ps-table tr.ps-line.is-adj { padding-left: 10px; padding-right: 10px; }
  .ps-group, .ps-total { flex-wrap: nowrap !important; }
  .ps-group td:first-child, .ps-total td:first-child { flex: 1; min-width: 0; }
  .ps-line .ps-c-date { order: 1; font-size: 12.5px; }
  .ps-line .ps-c-client { order: 2; flex: 1; min-width: 0; font-weight: 600; white-space: normal; }
  .ps-line .ps-c-earned { order: 3; font-size: 15px; }
  .ps-line .ps-c-work { order: 4; flex: 1 1 100%; min-width: 0; }
  .ps-line .ps-c-fig { order: 5; text-align: left; font-size: 12.5px; color: var(--ink-2); }
  .ps-line .ps-c-fig.is-none { display: none; }
  .ps-lbl { display: inline; margin-right: 4px; font-size: 11.5px; color: var(--ink-3); }
  /* "Baza 250,00 × 30 %" reads as the formula of the line */
  .ps-c-pct span::before { content: "×\00a0"; }
  .ps-c-pct span::after { content: "\00a0%"; }
  .ps-total { padding-top: 12px !important; border-bottom: 0 !important; }
  .ps-pay { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .ps-acts .btn { flex: 1 1 auto; }
  .ps-acts__reopen { margin-left: 0; }
}

/* ---------- chairs: the directory, the week by chairs, switching a chair off, seating results ---------- */
.chairs-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--radius);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); color: color-mix(in srgb, var(--warn) 65%, var(--ink)); }
.chairs-banner > .ic { color: var(--warn); }
.chairs-banner__text { flex: 1 1 240px; font-size: 14px; }
.chairs-banner__text b { font-weight: 700; }
/* the list beside the week when the week has room for its seven days; else the list, then the week below it */
.chairs-layout { display: grid; gap: 16px; align-items: start; }
.chairs-card { min-width: 0; max-width: 560px; }
.chairs-card--week { max-width: none; }
@media (min-width: 1280px) { .chairs-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 20px; } .chairs-card { max-width: none; } }
.chairs-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; margin-bottom: 6px; }
.chairs-card__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.chairs-branch { width: auto; max-width: 60%; min-height: 34px; padding: 4px 32px 4px 10px; font-size: 14px; }
.chairs-add { margin-top: 10px; }
.chairs-card__hint { margin-top: 10px; }

.chair-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 36px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.chair-row__move { display: grid; }
.chair-row__step { display: grid; place-items: center; width: 32px; height: 24px; border-radius: 4px; color: var(--ink-3); }
.chair-row__step:hover:not(:disabled) { color: var(--ink); background: var(--surface); }
.chair-row__step:disabled { opacity: .3; cursor: default; }
.chair-row__main { display: grid; gap: 2px; min-width: 0; }
.chair-row__name { min-height: 38px; padding: 7px 10px; font-size: 15px; font-weight: 500; }
.chair-row__sub { padding-left: 2px; font-size: 12px; color: var(--ink-3); }
.chair-row__sub:empty { display: none; }
.chair-row__switch { min-height: 38px; }
.chair-row__del { width: 36px; height: 36px; color: var(--ink-3); }
.chair-row.is-off .chair-row__name { color: var(--ink-3); background: var(--surface); }

.chairs-week__hint { margin-bottom: 8px; }
/* the week scrolls inside its card on a phone; the chair names stay in view */
.chairs-week__scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -4px; padding: 0 4px 2px; }
.chairs-week { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.chairs-week th { padding: 2px 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: left; }
.chairs-week thead th:first-child { width: 92px; }
.chairs-week th.chairs-week__chair { position: sticky; left: 0; z-index: 1; padding-top: 8px; vertical-align: top; background: var(--bg); color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.chairs-week__cell { height: 62px; padding: 5px 6px; vertical-align: top; border-radius: var(--radius-sm); background: var(--surface); font-size: 12px; line-height: 1.3; }
.chairs-week__cell.is-empty { background: repeating-linear-gradient(135deg, var(--surface) 0 6px, var(--surface-2) 6px 8px); }
.chairs-week__cell.is-bad { background: var(--bad-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent); }
.chairs-week__empty { color: var(--ink-3); }
.chairs-week__empty:empty { display: none; }
/* "Leyla 9–18" on one line where it fits, the hours under the name in a narrow column */
.chairs-shift { display: flex; align-items: flex-start; gap: 5px; width: calc(100% + 4px); margin: 0 -2px; padding: 1px 2px; border-radius: 4px; font-size: 12px; line-height: 1.3; text-align: left; }
.chairs-shift + .chairs-shift { margin-top: 3px; }
button.chairs-shift:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 14%, transparent); }
.chairs-shift:disabled { cursor: default; }
.chairs-shift__dot { width: 8px; height: 8px; flex: none; margin-top: 4px; border-radius: 50%; background: var(--c); }
.chairs-shift__text { min-width: 0; overflow-wrap: anywhere; }
/* the hours never break in the middle ("9–" / "18"): they go under the name as a whole */
.chairs-shift__hours { white-space: nowrap; }
.chairs-week__cell.is-bad .chairs-shift { color: var(--bad); font-weight: 600; }
.chairs-week__gap { display: block; margin-top: 3px; color: var(--ink-3); font-style: italic; }
.chairs-msgs { display: grid; gap: 6px; margin-top: 10px; }
.chairs-msgs:empty { display: none; }
.chairs-msg { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; font-weight: 600; }
.chairs-msg .ic { margin-top: 2px; }
.chairs-msg.is-bad { color: var(--bad); }
.chairs-msg.is-warn { color: var(--warn); }

/* switching a chair off: each future visit and where it goes */
.chair-off__head, .chair-pick__head { min-width: 0; }
.chair-off__head .muted, .chair-pick__head .muted { font-size: 13px; }
.chair-moves { display: grid; border: 1px solid var(--line); border-radius: var(--radius); }
.chair-move { display: grid; grid-template-columns: 136px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.chair-move:last-child { border-bottom: 0; }
.chair-move__when { font-size: 13px; white-space: nowrap; }
.chair-move__who { display: flex; flex-direction: column; min-width: 0; }
.chair-move__who b, .chair-move__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chair-move__who small { font-size: 12px; color: var(--ink-3); }
.chair-move__to { color: var(--ink-2); }
.chair-move.is-foreign .chair-move__to { color: var(--warn); font-weight: 600; }
.chair-move.is-none .chair-move__to { color: var(--bad); }
.chair-move__act { justify-self: end; }
.chair-confirm[aria-pressed="false"] .ic { display: none; }
.chair-confirm[aria-pressed="true"] { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); }
@media (max-width: 639px) {
  .chair-move { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who when" "to act"; row-gap: 4px; }
  .chair-move__when { grid-area: when; text-align: right; font-size: 12.5px; color: var(--ink-2); }
  .chair-move__who { grid-area: who; }
  .chair-move__to { grid-area: to; }
  .chair-move__act { grid-area: act; }
}

/* what seating did, and the visits left without a chair */
.chairs-done { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 70%, var(--ink)); font-size: 14px; }
.chairs-done .ic { color: var(--ok); }
.chairs-left { display: grid; gap: 6px; }
.chairs-left__title { font-size: 13px; font-weight: 600; color: var(--warn); }
.chairs-left__rows { border: 1px solid var(--line); border-radius: var(--radius); }
.chair-left { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "when who" "when free" ". acts"; gap: 2px 10px; align-items: start; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.chair-left:last-child { border-bottom: 0; }
.chair-left__when { grid-area: when; font-size: 13px; padding-top: 1px; white-space: nowrap; }
.chair-left__who { grid-area: who; display: flex; flex-direction: column; min-width: 0; }
.chair-left__who small { font-size: 12px; color: var(--ink-3); }
.chair-left__free { grid-area: free; font-size: 12px; color: var(--ink-3); }
.chair-left__free:empty { display: none; }
.chair-left__acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chair-left__acts:empty { display: none; }
.chair-left.is-done .chair-left__who b { color: var(--ink-2); }
.chair-done { gap: 4px; white-space: normal; }
.chairs-staff-note p { margin: 0; }
.chairs-staff-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chairs-staff-links:empty { display: none; }
@media (max-width: 479px) {
  .chair-left { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who when" "free free" "acts acts"; }
  .chair-left__when { text-align: right; font-size: 12.5px; color: var(--ink-2); }
}

/* another chair for one visit */
.chair-opts { display: grid; gap: 6px; }
.chair-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-align: left; transition: border-color .12s, background-color .12s; }
.chair-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-wash); }
.chair-opt:disabled { cursor: default; color: var(--ink-3); background: var(--surface); }
.chair-opt__ic { color: var(--ink-3); }
.chair-opt__main { display: flex; flex-direction: column; min-width: 0; }
.chair-opt__main small { font-size: 12px; color: var(--ink-3); }
.chair-opt.is-foreign .chair-opt__main small { color: var(--warn); }
.tag--warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- chairs in the appointment form: "until", the chair, what the live check found ---------- */
.appt-when.has-until { grid-template-columns: 1fr 1fr minmax(0, 1.45fr); }
.appt-until__row { display: flex; gap: 6px; }
.appt-until__row .input { flex: 1; min-width: 0; }
.appt-until__row .btn { flex: none; min-height: 44px; padding: 0 10px; font-variant-numeric: tabular-nums; }
.appt-until-hint { margin-top: -6px; }
.appt-until-hint.is-bad { color: var(--bad); font-weight: 600; }
@media (max-width: 639px) {
  .appt-when.has-until { grid-template-columns: 1fr 1fr; }
  .appt-when.has-until .appt-until { grid-column: 1 / -1; }
}
.appt-chair__btn { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
.appt-chair__btn > .ic { color: var(--ink-3); }
.appt-chair__name { font-weight: 600; white-space: nowrap; }
.appt-chair__kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink-3); }
.appt-chair__kind:not(:empty)::before { content: "· "; }
.appt-chair__btn.is-foreign .appt-chair__kind { color: var(--warn); }
.appt-chair__btn.is-none { border-color: var(--bad); color: var(--bad); }
.appt-chair__btn.is-changed { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.appt-chair__opts { padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); box-shadow: var(--shadow-2); }
.chair-opts__sep { padding: 6px 4px 0; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.chair-opt.is-on { border-color: var(--accent-text); background: var(--accent-wash); }
.chair-opt.is-on .chair-opt__ic { color: var(--accent-text); }
.chair-opt.is-none { background: var(--surface); }
.chair-opt.is-none.is-on { background: var(--accent-wash); }
.appt-chair__note { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--ok); }

/* a question or a warning with ready answers (the form, the visit window) */
.appt-alert { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.45; transition: box-shadow .15s; }
.appt-alert__top { display: flex; gap: 10px; align-items: flex-start; }
.appt-alert__top > .ic { flex: none; margin-top: 1px; }
.appt-alert__top b { display: block; }
.appt-alert__label { font-weight: 600; }
.appt-alert__label:empty { display: none; }
.appt-alert__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.appt-alert__acts:empty { display: none; }
.appt-alert__acts .btn { white-space: normal; text-align: left; min-height: 36px; padding: 6px 12px; line-height: 1.3; }
.appt-alert__acts .btn.is-foreign { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); color: var(--warn); }
.appt-alert__hint { font-size: 12.5px; opacity: .85; }
.appt-alert__hint:empty { display: none; }
.appt-alert .check { min-height: 32px; font-weight: 600; }
.appt-alert--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 28%, transparent); color: color-mix(in srgb, var(--bad) 72%, var(--ink)); }
.appt-alert--bad .appt-alert__top > .ic { color: var(--bad); }
.appt-alert--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 28%, transparent); color: color-mix(in srgb, var(--warn) 62%, var(--ink)); }
.appt-alert--warn .appt-alert__top > .ic { color: var(--warn); }
.appt-alert--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, transparent); color: color-mix(in srgb, var(--ok) 70%, var(--ink)); }
.appt-alert--ok .appt-alert__top > .ic { color: var(--ok); }
.appt-alert--info { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); color: var(--ink); }
.appt-alert--info .appt-alert__top > .ic { color: var(--accent-text); }
/* the tick that has to be given before saving */
.appt-alert.has-error { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 30%, transparent); }
/* the reminder line beside the buttons (on a phone above them) */
.appt-foot { flex-wrap: wrap; align-items: center; }
.appt-foot__hint { display: flex; gap: 6px; align-items: center; flex: 1 1 100%; font-size: 12.5px; color: var(--ink-2); }
.appt-foot__hint .ic { color: var(--ink-3); }
@media (min-width: 640px) { .appt-foot__hint { flex: 1 1 auto; margin-right: auto; } }

/* ---------- chairs in the visit window: the chair line, a visit under way ---------- */
.appt-chair-row dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
.kv-act { min-height: 28px; margin: -4px -8px -4px 0; padding: 0 8px; color: var(--accent-text); }
.running { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); }
.running__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.running__what { display: flex; flex-direction: column; line-height: 1.25; }
.running__what small { font-size: 12.5px; color: var(--ink-2); }
.running__timer { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.running__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.running__acts .btn { font-variant-numeric: tabular-nums; }
.running__finish { margin-left: auto; color: var(--ink); }
.running__until { display: flex; gap: 6px; }
.running__until .input { width: 132px; min-height: 36px; padding: 6px 10px; font-size: 15px; }
@media (max-width: 479px) { .running__finish { margin-left: 0; flex-basis: 100%; justify-content: flex-start; padding: 0 4px; } }

/* ---------- chairs in the calendar: doctors | chairs, chair columns, marks on visits ---------- */
.cal-modes { display: flex; align-items: center; gap: 8px; }
.cal-mode button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.cal-mode .ic { flex: none; }
.cal-nochair { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 99px; background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cal-nochair:hover { background: var(--surface-2); }
.cal-nochair.is-warn { background: var(--warn-soft); color: var(--warn); }
@media (max-width: 639px) {
  .cal-modes { flex-basis: 100%; order: 3; justify-content: space-between; }
}
.cal__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cal__sub { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal__sub:empty { display: none; }
.cal__chair { flex-direction: column; align-items: flex-start; gap: 3px; }
.cal__chair-name { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.cal__chair-name .ic { color: var(--ink-3); }
.cal__chair.is-loose .cal__chair-name, .cal__chair.is-loose .cal__chair-name .ic { color: var(--warn); }
.cal__shifts { display: flex; flex-wrap: wrap; gap: 1px 8px; min-width: 0; font-size: 11px; color: var(--ink-3); line-height: 1.35; }
.cal__shift { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cal__shift-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.cal__shift.is-text .cal__shift-dot { display: none; }
.cal__band { position: absolute; left: 0; width: 4px; z-index: 1; top: calc(var(--m) / 30 * var(--slot-h)); height: calc(var(--len) / 30 * var(--slot-h)); background: var(--c); border-radius: 0 3px 3px 0; }
.cal__idle {
  position: absolute; left: 0; right: 0;
  top: calc(var(--m) / 30 * var(--slot-h)); height: calc(var(--len) / 30 * var(--slot-h));
  background: repeating-linear-gradient(135deg, var(--hatch-1) 0 6px, var(--hatch-2) 6px 12px);
}
.cal__idle span { position: absolute; top: 6px; left: 12px; right: 6px; font-size: 11px; font-weight: 600; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal__nochair {
  position: absolute; left: 3px; right: 3px; z-index: 0; display: flex; align-items: center; justify-content: center; gap: 4px; overflow: hidden;
  top: calc(var(--m) / 30 * var(--slot-h) + 1px); height: calc(var(--len) / 30 * var(--slot-h) - 2px);
  border: 1px dashed color-mix(in srgb, var(--bad) 45%, transparent); border-radius: var(--appt-radius);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bad) 4%, var(--bg)) 0 6px, var(--bad-soft) 6px 12px);
  color: var(--bad); font-size: 10.5px; font-weight: 700; text-align: center; line-height: 1.2;
}
/* a doctor's own calendar by chairs: another doctor's visit in the chair — grey, nothing to open */
.cal__busy {
  position: absolute; left: 8px; right: 3px; z-index: 0; overflow: hidden; cursor: default;
  top: calc(var(--m) / 30 * var(--slot-h) + 1px); height: calc(var(--len) / 30 * var(--slot-h) - 2px);
  padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--appt-radius); background: var(--surface-2);
  color: var(--ink-3); font-size: 10.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis;
}
.cal__col--loose { background-color: color-mix(in srgb, var(--warn) 4%, var(--bg)); }
/* by doctors: a cancelled or a no-show visit lies under the live ones at the same time (they never share its width) */
.appt.is-under:not(:hover) { z-index: 0; }
/* by chairs: room for the shift strip on the left */
.cal__col--chair .appt { left: 8px; }
/* visits that overlap in one column share it side by side */
.appt.in-lane { --inset: 3px; right: auto; left: calc(var(--inset) + (100% - var(--inset) - 3px) * var(--lane) / var(--lanes)); width: calc((100% - var(--inset) - 3px) / var(--lanes) - 2px); }
.cal__col--chair .appt.in-lane { --inset: 8px; left: calc(var(--inset) + (100% - var(--inset) - 3px) * var(--lane) / var(--lanes)); }
.appt__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; max-width: 100%; }
/* a short visit keeps its mark on its one line: the name gives way */
.appt.is-short.has-marks { flex-wrap: nowrap; }
.appt.is-short.has-marks .appt__client { flex: 1 1 auto; min-width: 3.5em; }
.appt.is-short .appt__marks { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; }
.appt.is-short .appt__chair { min-width: 0; }
.appt__chair { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 0 5px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); font-size: 10.5px; font-weight: 700; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt__chair .ic { width: 11px; height: 11px; flex: none; }
.appt__chair > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.appt__chair.is-foreign { background: var(--warn-soft); color: var(--warn); }
.appt__chair.is-none { background: var(--bad-soft); color: var(--bad); }
.appt__doc { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--dc, var(--ink-3)); color: #fff; font-size: 9px; font-weight: 700; flex: none; }
.appt__wait { display: inline-flex; align-items: center; gap: 3px; color: var(--bad); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.appt__wait .ic { width: 11px; height: 11px; }
.appt.is-waiting { border-color: color-mix(in srgb, var(--bad) 55%, var(--appt-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent); }

/* ---------- paper (print only): the lab label, the reconciliation ---------- */
.print-area { display: none; }
@media print {
  @page { margin: 12mm; }
  body.is-printing { background: #fff; }
  body.is-printing > :not(#print-area) { display: none !important; }
  body.is-printing .print-area { display: block; color: #000; font: 10.5pt/1.4 var(--font-body); }
}
.paper-kv > div { display: grid; grid-template-columns: 34mm minmax(0, 1fr); gap: 3mm; padding: 1.2mm 0; border-bottom: .3mm solid #ccc; }
.paper-kv dt { color: #555; }
.paper-kv dd { font-weight: 600; }
.paper-label { width: 110mm; padding: 5mm 6mm; border: .5mm solid #000; border-radius: 3mm; break-inside: avoid; }
.paper-label__head { display: flex; justify-content: space-between; align-items: baseline; gap: 4mm; padding-bottom: 2mm; margin-bottom: 2mm; border-bottom: .5mm solid #000; }
.paper-label__head b { font: 700 16pt/1.1 var(--font-display); }
.paper-label__head span { font-size: 9pt; text-align: right; }
.paper-label__items { list-style: none; margin-bottom: 2mm; }
.paper-label__items li { display: flex; gap: 3mm; font-size: 12pt; padding: .8mm 0; }
.paper-label__items b { min-width: 16mm; }
.paper-label__dates { margin-top: 2.5mm; font-size: 9pt; color: #333; }
.paper-recon__head { margin-bottom: 5mm; }
.paper-recon__head h1 { font: 700 15pt/1.2 var(--font-display); }
.paper-recon__head p { color: #444; margin-top: 1mm; }
.paper-recon__table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.paper-recon__table th { text-align: left; font-weight: 600; color: #555; border-bottom: .4mm solid #000; padding: 1.5mm 2mm; }
.paper-recon__table td { padding: 1.3mm 2mm; border-bottom: .2mm solid #ccc; vertical-align: top; }
.paper-recon__table td:first-child { white-space: nowrap; }
.paper-recon__table .r { text-align: right; white-space: nowrap; }
.paper-recon__table tr { break-inside: avoid; }
.paper-recon__totals { width: 90mm; margin: 5mm 0 0 auto; }
.paper-recon__totals > div { grid-template-columns: minmax(0, 1fr) auto; }
.paper-recon__totals dd { text-align: right; }
.paper-recon__sign { display: flex; justify-content: space-between; gap: 10mm; margin-top: 14mm; font-size: 10pt; }
/* the payslip on paper: a copy of the page without its buttons, with the clinic line and signatures */
.print-area .ps { display: block; padding: 0; border: 0; background: none; }
/* a mechanic's payslip: the order and the plate stand where a patient's name stands */
.ps-table.is-auto .ps-c-client { white-space: nowrap; }
.print-area .ps > * + * { margin-top: 4mm; }
.print-area .ps-acts, .print-area .ps-hint, .print-area .ps-month .icon-btn { display: none !important; }
.print-area .ps-paper-only { display: block; }
.print-area .ps-kicker { font-size: 9pt; color: #444; }
.print-area .ps-head { align-items: baseline; }
.print-area .ps-name { font-size: 15pt; }
.print-area .ps-month { border: 0; }
.print-area .ps-month__label { min-width: 0; font-size: 13pt; }
.print-area .ps-closed, .print-area .ps-closed b, .print-area .ps-closed .ic { padding: 0; background: none; color: #000; font-size: 9.5pt; }
.print-area .ps-table { font-size: 8.5pt; }
.print-area .ps-table th, .print-area .ps-table td { padding: 1.2mm 1.5mm; border-color: #bbb; color: #000; }
.print-area .ps-table th { border-bottom: .4mm solid #000; }
.print-area .ps-table tr { break-inside: avoid; }
.print-area .ps-group, .print-area .ps-line.is-remake, .print-area .ps-line.is-adj { background: none; }
.print-area .ps-group td { border-bottom: .3mm solid #000; }
.print-area .ps-flag { color: #000 !important; font-style: italic; }
.print-area .ps-c-work { min-width: 0; }
.print-area .tooth-chip { min-width: 0; height: auto; padding: 0 1mm; background: none; border: .2mm solid #888; font-size: 8pt; }
.print-area .ps-acct { border: .3mm solid #000; }
.print-area .ps-acct > div { padding: 2mm 3mm; border-color: #000; }
.print-area .ps-acct dt, .print-area .ps-acct__due small { color: #333; }
.print-area .ps-acct dd { font-size: 12pt; }
.print-area .ps-acct__due { background: none; color: #000; box-shadow: inset .8mm 0 0 #000; }
.print-area .ps-pay { padding: 1mm 0; font-size: 9pt; border-color: #ccc; }
.print-area .ps-sign { display: flex; justify-content: space-between; gap: 10mm; margin-top: 14mm; font-size: 10pt; }

/* ============ dental visit protocol ============ */
/* visit sheet: one line per doctor; the desk sees the statuses and prints */
.proto-lines { display: grid; gap: 6px; margin: 10px 0 4px; }
.proto-lines__rows { display: grid; gap: 6px; }
.proto-line { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.proto-line__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-xs); background: var(--warn-soft); color: var(--warn); }
.proto-line[data-state="draft"] .proto-line__icon { background: var(--accent-wash); color: var(--accent-text); }
.proto-line[data-state="signed"] .proto-line__icon { background: var(--ok-soft); color: var(--ok); }
.proto-line__title { font-size: 13.5px; }
.proto-line__sub { display: block; font-size: 12px; }
.proto-line__sub:empty { display: none; }
.proto-line__acts { display: flex; gap: 6px; }
.proto-line__acts:empty { display: none; }
.proto-desk-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.proto-ask { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink); }
.proto-ask > .ic { color: var(--warn); }
.proto-ask small { display: block; font-size: 12px; color: var(--ink-2); }

/* questionnaire: three honest states, the date it was last asked */
.anam-list { display: grid; }
.anam-row { display: grid; grid-template-columns: 130px auto minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.anam-row:last-child { border-bottom: 0; }
.anam-row__k { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.anam-row__value { min-height: 36px; }
.anam-row__when { grid-column: 2 / -1; font-size: 12px; color: var(--ink-3); }
.anam-row.is-open .anam-row__when { color: var(--warn); font-weight: 600; }
.anam-row.is-na { opacity: .6; }
.anam-tri label { min-height: 32px; padding: 0 10px; }
.anam-tri .anam-tri__q:has(input:checked) { background: var(--warn-soft); color: var(--warn); }
.anam-tri .anam-tri__no:has(input:checked) { background: var(--ok-soft); color: var(--ok); }
.anam-tri .anam-tri__yes:has(input:checked) { background: var(--bad-soft); color: var(--bad); }
.anam-tri label:has(input:disabled) { cursor: default; }

/* the page */
.proto-page { padding-bottom: 24px; }
.proto-head { display: flex; justify-content: space-between; gap: 12px 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.proto-head__title { font: var(--display-weight) 21px/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.proto-head__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.proto-save { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ok); }
.proto-save[data-state="pending"], .proto-save[data-state="saving"] { color: var(--ink-3); }
.proto-save[data-state="error"] { color: var(--bad); }
.proto-lang { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.proto-lang__select { min-height: 36px; width: auto; }
.proto-templates { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.proto-templates .chips { flex-wrap: wrap; overflow: visible; }
.proto-templates__add { min-height: 32px; width: auto; max-width: 240px; font-size: 13px; }
.proto-tpl-chip { background: var(--accent-wash); border-color: transparent; color: var(--accent-text); font-weight: 600; padding-right: 4px; }
.proto-tpl-chip__x { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 99px; background: none; color: inherit; cursor: pointer; }
.proto-tpl-chip__x:hover { background: var(--bg); }

.proto-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 10px; border-radius: var(--radius-sm); border: 1px solid; font-size: 13px; }
.proto-alert > .ic { margin-top: 2px; flex: none; }
.proto-alert small { display: block; font-size: 12.5px; }
.proto-alert--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--ink); }
.proto-alert--warn > .ic { color: var(--warn); }
.proto-alert--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.proto-alert--ok > .ic { color: var(--ok); }
.proto-alert--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.proto-alert--bad > .ic { color: var(--bad); }

.proto-layout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1024px) { .proto-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; } }
.proto-main { min-width: 0; border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.proto-sec { display: grid; gap: 8px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin: 90px; }
.proto-sec__head, .proto-sub-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.proto-sec__head h3 { font: 600 15px/1.3 var(--font-display); }
.proto-sec__head small { font-size: 12px; }
.proto-sub-head { margin-top: 4px; font-size: 13px; }
.proto-take { display: inline-flex; gap: 5px; align-items: center; padding: 4px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-wash); color: var(--accent-text); font-size: 12px; font-weight: 700; cursor: pointer; }
.proto-take:hover { border-color: var(--accent); }
.proto-hint { padding: 8px 11px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-3); font-size: 13px; white-space: pre-line; background: var(--surface); }
.proto-text { min-height: 44px; field-sizing: content; line-height: 1.5; }
.proto-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.proto-chips:empty { display: none; }
.proto-chip { white-space: normal; text-align: left; min-height: 30px; padding: 4px 11px; line-height: 1.3; }
.proto-chip.is-last { border-style: dashed; border-color: var(--accent); color: var(--accent-text); }
.chip--add { border-style: dashed; color: var(--accent-text); }
.proto-none { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 13px; }
.proto-warns { display: grid; gap: 6px; }
.proto-warns:empty { display: none; }
.proto-warns .proto-alert { margin: 0; }

.proto-teeth { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.proto-teeth:empty { display: none; }
.proto-tooth { min-width: 30px; height: 26px; padding: 0 6px; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); background: var(--bg); font-size: 12px; font-weight: 700; cursor: pointer; }
.proto-tooth[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.dx-rows { display: grid; gap: 6px; }
.dx-rows:empty { display: none; }
.dx-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.dx-row__code { font: 700 14px/1 var(--font-display); color: var(--accent-text); }
.dx-row__name { font-size: 13px; }
.dx-row .icon-btn { grid-column: 3; grid-row: 1; }
.dx-row .proto-teeth { grid-column: 1 / -1; }
.dx-row__note { grid-column: 1 / -1; min-height: 36px; }
.dx-search { position: relative; }
.dx-drop { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); display: grid; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); overflow: hidden; }
.dx-drop[hidden] { display: none; }
.dx-hit { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 13px; cursor: pointer; color: inherit; }
.dx-hit:last-child { border-bottom: 0; }
.dx-hit:hover, .dx-hit:focus-visible { background: var(--accent-wash); }
.dx-hit b { color: var(--accent-text); font-family: var(--font-display); }
.dx-hit small { display: block; color: var(--ink-3); font-size: 12px; }

.inj-rows, .rx-rows, .tr-items { display: grid; gap: 8px; }
.inj-rows:empty, .rx-rows:empty { display: none; }
.inj-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.inj-row > select[name="drug"] { grid-column: 1; grid-row: 1; }
.inj-row > .icon-btn { grid-column: 2; grid-row: 1; }
.inj-row__amount { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; grid-column: 1 / -1; }
.inj-row__amount .input { width: 110px; min-height: 34px; }
.inj-row > select[name="method"] { grid-column: 1 / -1; }
.inj-row .proto-teeth { grid-column: 1 / -1; }
.proto-vols { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.proto-vols .chip { min-height: 28px; padding: 0 9px; font-size: 12px; }
@media (min-width: 720px) {
  .inj-row { grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr) auto; }
  .inj-row__amount { grid-column: 2; grid-row: 1; }
  .inj-row > select[name="method"] { grid-column: 3; grid-row: 1; }
  .inj-row > .icon-btn { grid-column: 4; grid-row: 1; }
}
.tr-item { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); scroll-margin: 90px; }
.tr-item.is-voided { border-style: dashed; opacity: .75; }
.tr-item__top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tr-item__top .proto-take { margin-left: auto; }
.tr-item__mats { display: grid; gap: 6px; }
.tr-item__mats:empty { display: none; }
.mat-group { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: start; }
.mat-group__label { font-size: 12px; font-weight: 600; color: var(--ink-3); padding-top: 6px; }
.rx-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 72px auto; gap: 8px; align-items: center; }
.addenda { display: grid; gap: 8px; }
.addenda:empty { display: none; }
.addendum { padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13px; }
.addendum p { white-space: pre-line; margin-top: 2px; }
@media (max-width: 639px) {
  .anam-row { grid-template-columns: 1fr; }
  .anam-row__when { grid-column: 1; }
  .rx-row { grid-template-columns: minmax(0, 1fr) 72px auto; }
  .rx-row [name="drug"] { grid-column: 1 / -1; }
  .mat-group { grid-template-columns: 1fr; }
}

/* read-only: a signed protocol, or someone else's draft */
.proto-page.is-read .proto-take, .proto-page.is-read .proto-chips, .proto-page.is-read .proto-hint,
.proto-page.is-read .dx-search, .proto-page.is-read .proto-main .icon-btn { display: none; }
.proto-page.is-read .tr-item__mats .proto-chips { display: flex; }
.proto-page.is-read .tr-item__mats .proto-chip[aria-pressed="false"] { display: none; }
.proto-page.is-read .proto-text, .proto-page.is-read .proto-main .input, .proto-page.is-read .proto-main .select { background: var(--surface); color: var(--ink); border-color: var(--line); opacity: 1; }
.proto-page.is-read .proto-tooth[aria-pressed="false"] { display: none; }
.proto-page.is-read .proto-tooth { cursor: default; }

.proto-aside { display: grid; gap: 12px; }
@media (min-width: 1024px) { .proto-aside { position: sticky; top: calc(var(--topbar-h) + 12px); } }
.proto-card { padding: 12px 14px; display: grid; gap: 6px; }
.proto-card__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.proto-work { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
.proto-work small { display: block; font-size: 12px; }
.proto-work.is-other { opacity: .7; }
.proto-work.is-voided .row__main > span { text-decoration: line-through; }
.proto-past { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; font-size: 13px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.proto-past:last-child { border-bottom: 0; }
.proto-past:hover { color: var(--accent-text); }
.proto-log { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: 12.5px; padding: 3px 0; }

.proto-bar { position: sticky; bottom: calc(var(--tabbar-h, 0px) + 8px); z-index: var(--z-sticky); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px;
  background: color-mix(in srgb, var(--bg) 96%, transparent); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.proto-bar__why { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-right: auto; min-width: 0; }
.proto-bar__why:empty { display: none; }
.proto-bar__acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.proto-why { display: inline-flex; gap: 5px; align-items: center; padding: 0; border: 0; background: none; color: var(--warn); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.proto-why:hover { text-decoration: underline; }
@media (min-width: 1024px) { .proto-bar { bottom: 12px; } }

/* the patient card, the tooth sheet, the dashboard */
.proto-card-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.proto-card-row__date { display: grid; font-size: 13px; }
.proto-card-row__date small { font-size: 12px; }
.proto-card-row__end { display: inline-flex; gap: 6px; align-items: center; }
.proto-codes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.proto-codes:empty { display: none; }
.proto-code { display: inline-flex; gap: 5px; padding: 1px 7px; border-radius: var(--radius-xs); background: var(--surface-2); font-size: 12px; }
.proto-code b { color: var(--accent-text); }
.proto-state { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
[data-state="signed"] > * > .proto-state, [data-state="signed"] > .proto-state { background: var(--ok-soft); color: var(--ok); }
[data-state="draft"] > * > .proto-state, [data-state="draft"] > .proto-state { background: var(--accent-wash); color: var(--accent-text); }
[data-state="none"] > .proto-state, [data-state="works_changed"] > .proto-state, [data-state="unconfirmed"] > .proto-state { background: var(--warn-soft); color: var(--warn); }
li.is-protocol { background: var(--accent-wash); border-radius: var(--radius-xs); }
.proto-dash-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.proto-dash-row__when { font-size: 13px; color: var(--ink-2); }
@media (max-width: 639px) { .proto-dash-row { grid-template-columns: minmax(0, 1fr) auto; } .proto-dash-row__when { grid-column: 1 / -1; } .proto-dash-row .btn { display: none; } }
.proto-dash__scroll { overflow-x: auto; }
.proto-dash__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.proto-dash__table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.proto-dash__table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.proto-dash__table tr:last-child td { border-bottom: 0; }
.proto-dash__table .num { text-align: right; }
.proto-dash__table tr.is-bad td:last-child { color: var(--bad); font-weight: 700; }

/* papers: protocol (live signatures on paper, no "signed electronically"), draft with a watermark, memo */
.paper-proto { position: relative; display: grid; gap: 3mm; font-size: 10pt; line-height: 1.4; color: #000; }
.paper-proto__head { display: flex; justify-content: space-between; gap: 6mm; padding-bottom: 2mm; border-bottom: .5mm solid #000; }
.paper-proto__head b { display: block; font: 700 13pt/1.2 var(--font-display); }
.paper-proto__head small { display: block; font-size: 8.5pt; color: #333; }
.paper-proto__no { text-align: right; }
.paper-proto__secret { font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.paper-proto__secs { display: grid; gap: 2.5mm; }
.paper-proto__sec { break-inside: avoid; }
.paper-proto__sec h4 { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .04em; color: #333; margin-bottom: .6mm; }
.paper-proto__sec p { white-space: pre-line; }
.paper-proto__signs { display: grid; gap: 5mm; margin-top: 6mm; break-inside: avoid; }
.paper-proto__line { display: flex; gap: 3mm; align-items: flex-end; font-size: 9.5pt; }
.paper-proto__line i { flex: 1; border-bottom: .3mm solid #000; height: 6mm; }
.paper-proto__entered, .paper-proto__printed { font-size: 8.5pt; color: #333; white-space: pre-line; }
.paper-proto__entered:empty { display: none; }
.paper-proto.is-draft::after { content: attr(data-wm); position: absolute; inset: 35% -5% auto; transform: rotate(-24deg); text-align: center; font: 700 34pt/1 var(--font-display); color: rgba(200, 40, 30, .18); pointer-events: none; }
.paper-memo { font-size: 12pt; }
.paper-memo__title { font: 700 15pt/1.2 var(--font-display); }
.paper-memo__who { font-size: 10pt; color: #333; }

/* ============ dental visit protocol, step 2 ============ */
/* chips that are answers (mode, outcome, complications): a signed protocol shows the chosen ones */
.proto-page.is-read .proto-chips--keep { display: flex; }
.proto-page.is-read .proto-chips--keep .chip[aria-pressed="false"] { display: none; }
.proto-req { padding: 2px 8px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-size: 11.5px; font-weight: 700; }
.proto-alert--info { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 30%, transparent); align-items: center; margin: 0; }
.proto-alert--info > .ic { color: var(--accent-text); }
.icon-btn--sm { width: 30px; height: 30px; }

/* endodontics: a canal table per tooth; the implant passport */
.endo-list { display: grid; gap: 10px; }
.endo-block { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); scroll-margin: 90px; }
.endo-block__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.endo-block__head .proto-chips { margin-left: auto; }
.canal-table { display: grid; gap: 4px; overflow-x: auto; }
.canal-rows { display: grid; gap: 4px; }
.canal-row { display: grid; grid-template-columns: 56px 64px minmax(70px, 1fr) 72px minmax(90px, 1.4fr) 30px; gap: 6px; align-items: center; min-width: 440px; }
.canal-row .input { min-height: 34px; padding: 4px 8px; font-size: 13px; }
.canal-row--head { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.canal-table:has(.canal-rows:empty) { display: none; }
.endo-opt { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: start; }
.endo-opt .proto-chips { display: flex; }
.endo-opt__val { display: grid; gap: 6px; }
.passport { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; }
.passport .field { margin: 0; }
.passport .input { min-height: 36px; }
@media (max-width: 639px) { .endo-opt { grid-template-columns: 1fr; } }
.proto-page.is-read .endo-opt .proto-chips:not(.proto-chips--keep) { display: none; }
.control-days { display: flex; gap: 6px; flex-wrap: wrap; }
.control-days .chip { min-height: 28px; padding: 0 10px; font-size: 12.5px; }

/* the journal's "eye" and a version sheet */
.proto-log--ver { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; }
.proto-ver { display: grid; gap: 10px; }
.proto-ver__sec h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 2px; }
.proto-ver__sec p { white-space: pre-line; font-size: 14px; }

/* the canals on paper */
.paper-canals { width: 100%; border-collapse: collapse; font-size: 9pt; margin: 1mm 0; }
.paper-canals th { text-align: left; font-weight: 600; color: #333; border-bottom: .3mm solid #000; padding: .8mm 1.5mm; }
.paper-canals td { padding: .8mm 1.5mm; border-bottom: .2mm solid #bbb; }

/* ============ refusal of treatment ============ */
.refusal-edit { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }
.refusal-sheet .sheet__body { display: grid; gap: 14px; }
.refusal-sheet.is-frozen .refusal-edit { opacity: .8; }
.refusal-sheet.is-frozen .refusal-add, .refusal-sheet.is-frozen [data-action="take"], .refusal-sheet.is-frozen .proto-chips,
.refusal-sheet.is-frozen .proto-hint, .refusal-sheet.is-frozen .refusal-custom button { display: none; }
.refusal-items { display: grid; gap: 6px; }
.refusal-items .dv-item { grid-template-columns: 22px auto minmax(0, 1fr); }
.refusal-items .dv-item:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.refusal-items .dv-item:has(input:checked) .dv-item__box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.refusal-items .dv-item:has(input:disabled) { cursor: default; }
.refusal-custom { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 6px 6px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 14px; }
.refusal-add { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 6px; margin-top: 6px; }
@media (max-width: 479px) { .refusal-add { grid-template-columns: minmax(0, 1fr) 90px; } .refusal-add .btn { grid-column: 1 / -1; } }
.refusal-tpl { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.refusal-tpl .select { min-height: 32px; font-size: 13px; }
.refusal-state { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); }
.refusal-state:empty { display: none; }
.refusal-state[data-state="printed"] { background: var(--bad-soft); color: var(--bad); }
.refusal-state[data-state="signed"] { background: var(--ok-soft); color: var(--ok); }
.refusal-state[data-state="refused_to_sign"] { background: var(--warn-soft); color: var(--warn); }
.refusal-after { display: grid; gap: 6px; }
.refusal-after .proto-alert { margin: 0; }
.refusal-line[data-state="open"] { border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: var(--bad-soft); }
.refusal-line[data-state="open"] .proto-line__icon { background: var(--bg); color: var(--bad); }
.refusal-line[data-state="open"] .proto-line__title { color: var(--bad); }
.refusal-line[data-state="closed"] .proto-line__icon { background: var(--surface-2); color: var(--ink-3); }
[data-state="printed"] > * > .proto-state, [data-state="open"] > .proto-state { background: var(--bad-soft); color: var(--bad); }
[data-state="refused_to_sign"] > * > .proto-state { background: var(--warn-soft); color: var(--warn); }
.paper-refusal .paper-memo__title { text-align: center; margin: 2mm 0; }
.paper-refusal__phrase { font-weight: 700; margin-top: 2mm; }

/* ============ an extract from the record ============ */
.extract-body { display: grid; gap: 16px; }
.extract-form { display: grid; gap: 12px; align-content: start; }
.extract-form .field { display: grid; gap: 4px; }
.extract-consent { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warn-soft); }
.extract-side { display: grid; gap: 8px; align-content: start; min-width: 0; }
.extract-side__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.extract-preview { max-height: 60vh; overflow: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: #000; font-size: 12px; }
.extract-preview.is-loading { opacity: .5; }
.extract-preview .paper-proto { font-size: 9.5pt; }
.extract-unsigned { margin: 0; }
.extract-unsigned__rows { display: grid; gap: 4px; margin-top: 6px; }
.extract-unsigned__row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 13px; }
.paper-extract__text { white-space: pre-line; }
.paper-extract__empty { font-style: italic; color: #444; }
.paper-extract__table, .paper-extract__svc { margin-top: 2mm; }
@media (min-width: 1100px) {
  .sheet.extract-sheet { width: 1040px; }
  .extract-body { grid-template-columns: 360px minmax(0, 1fr); }
  .extract-body > .form-error { grid-column: 1 / -1; }
}

/* ============ protocol templates (owner) ============ */
.ptpl-layout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1024px) { .ptpl-layout { grid-template-columns: 320px minmax(0, 1fr); } .ptpl-pick { align-self: center; } }
.ptpl-side { display: grid; gap: 10px; }
@media (min-width: 1024px) { .ptpl-side { position: sticky; top: calc(var(--topbar-h) + 12px); } }
.ptpl-without { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px 10px; align-items: start; padding: 12px 14px; background: var(--warn-soft); border-color: transparent; }
.ptpl-without > .ic { color: var(--warn); margin-top: 2px; }
.ptpl-without small { display: block; font-size: 12px; color: var(--ink-2); }
.ptpl-without .btn { grid-column: 2; justify-self: start; }
.ptpl-list { display: grid; padding: 4px; }
.ptpl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: none; text-align: left; color: inherit; cursor: pointer; }
.ptpl-item:hover { background: var(--surface); }
.ptpl-item.is-on { background: var(--accent-wash); }
.ptpl-item__badges { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ptpl-item__badges .badge { height: auto; padding: 2px 7px; white-space: nowrap; }
.ptpl-editor { display: grid; gap: 14px; padding: 16px 18px; }
.ptpl-editor__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ptpl-names { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ptpl-editor > .field { display: grid; gap: 6px; }
.ptpl-chips { display: flex; }
.ptpl-add { max-width: 320px; }
.ptpl-secs { display: grid; gap: 12px; }
.ptpl-sec { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ptpl-sec__title { font: 600 15px/1.3 var(--font-display); }
.ptpl-chip-rows { display: grid; gap: 4px; }
.ptpl-chip-rows:empty { display: none; }
.ptpl-chip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px; align-items: center; }
.ptpl-chip-row .input { min-height: 34px; font-size: 13px; }
.ptpl-sec > .btn { justify-self: start; }
.ptpl-foot { position: sticky; bottom: calc(var(--tabbar-h, 0px) + 8px); display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 12px; background: color-mix(in srgb, var(--bg) 96%, transparent); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.ptpl-foot__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ptpl-bind { display: grid; gap: 2px; max-height: 220px; overflow: auto; }
.ptpl-item .row__title, .ptpl-item .row__sub { white-space: normal; }
.extract-form .radio-row { flex-wrap: wrap; row-gap: 0; }
.extract-form .radio-row__hint { flex-basis: 100%; padding-left: 26px; font-size: 11.5px; }

/* ---------- salons: the masters' pay (module masterpay, spec docs/niches/beauty/06-masterpay-tech.md) ---------- */
/* the payslip: no lab column; a master's phone; warnings; the day view; the account as a statement */
.ps-table.is-salon .ps-c-lab { display: none; }
.ps-phone { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.ps-warns { list-style: none; display: grid; gap: 6px; margin-bottom: 12px; }
.ps-warn { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); font-size: 13.5px; }
.ps-warn > .ic { color: var(--warn); margin-top: 2px; flex: none; }
.ps-warn__text { min-width: 0; overflow-wrap: anywhere; }
.ps-warn__items { display: flex; flex-wrap: wrap; gap: 4px; }
.ps-warn__items:empty { display: none; }
.ps-view { margin-bottom: 10px; }
.ps-day { background: var(--surface-2); }
.ps-line.is-unpaid .ps-c-earned, .ps-line.is-unpaid .ps-c-fig { color: var(--ink-3); }
.ps-line.is-info { color: var(--ink-2); }
.ps-line.is-info .ps-c-earned b { font-weight: 500; color: var(--ink-3); }
.ps-group.is-rent { background: var(--warn-soft); }
.ps-group.is-manual, .ps-group.is-product, .ps-group.is-money { background: var(--accent-wash); }
.ps-ledger { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.ps-ledger__rows { display: grid; }
.ps-ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ps-ledger__row dt { display: flex; gap: 8px; min-width: 0; color: var(--ink-2); }
.ps-ledger__row dd { font-weight: 600; white-space: nowrap; }
.ps-ledger__op { width: 12px; flex: none; color: var(--ink-3); text-align: center; }
.ps-ledger__due { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--hero-bg); color: var(--hero-ink); }
.ps-ledger__due-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-ledger__due-label small { font-size: 12px; color: var(--hero-muted); }
.ps-ledger__due-label small:empty { display: none; }
.ps-ledger__due-sum { font-family: var(--font-display); font-size: 21px; white-space: nowrap; }
.ps-ledger__due.is-owed .ps-ledger__due-sum { color: var(--warn-on-hero, var(--hero-ink)); }
.ps-send__text { font-family: inherit; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }

/* the visit: a renter's note, where the money went, paying the day's other visits, a tip through the till, the visit's money */
.mp-renter { align-items: center; }
.mp-where { display: grid; gap: 6px; }
.mp-where__opts { width: 100%; }
.mp-together { display: grid; gap: 6px; }
.mp-together__list { display: grid; gap: 4px; }
.mp-together__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mp-together__what { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.mp-together__what small { font-size: 12px; color: var(--ink-3); }
.mp-tip-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; color: var(--accent-text); font-weight: 600; font-size: 13.5px; }
.mp-tip { display: grid; gap: 6px; }
.mp-pay-total { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.mp-money__list { list-style: none; display: grid; }
.mp-money__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); }
.mp-money__row:last-child { border-bottom: 0; }
.mp-money__row > .ic { color: var(--ink-3); }
.mp-money__what { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.mp-money__what small { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.mp-money__row.is-voided b { color: var(--ink-3); text-decoration: line-through; }
.mp-money__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* the master's sheet: the rule's end; bonuses and fines */
.rule-row__end { flex: none; }
.mp-adj-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.mp-adj-row__sum { white-space: nowrap; color: var(--ok); }
.mp-adj-row.is-minus .mp-adj-row__sum { color: var(--bad); }
.mp-adj-row.is-voided .mp-adj-row__sum { color: var(--ink-3); text-decoration: line-through; }

/* finance: the salon's money still with its masters */
.fin-held { display: flex; gap: 6px; align-items: center; margin-top: 8px; }

@media (max-width: 599px) {
  .mp-money__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mp-money__row .icon-btn { grid-column: 3; }
  .ps-ledger__row, .ps-ledger__due { padding-left: 12px; padding-right: 12px; }
}
.mp-adj { display: grid; gap: 8px; margin-top: 8px; }

/* ---- prepayment and no-shows (module deposits) ---- */
.appt__dep { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 3px; border-radius: 50%; font-size: 9px; font-weight: 700; line-height: 1; background: var(--warn); color: #fff; flex: none; }
.appt__dep.is-ok { background: color-mix(in srgb, var(--ok) 80%, transparent); }
.dep-state { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.dep-warn { display: flex; gap: 8px; align-items: center; margin: 0; }

/* ---- gift certificates (module certificates) ---- */
.cert-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 12px; }
.cert-search { flex: 1 1 260px; max-width: 420px; }
.cert-row__no { min-width: 76px; font-weight: 700; color: var(--accent-text); }
.cert-row .row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cert-card { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-soft), var(--accent-wash)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); }
.cert-card small { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.cert-card b { font: var(--display-weight) 26px/1.15 var(--font-display); letter-spacing: var(--display-tracking); }
.cert-card span:empty { display: none; }
.cert-pay__find { align-self: end; }
.cert-pay__found { margin: 0; }
.cert-uses { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.cert-use { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--accent-wash); }
.cert-use > span { flex: 1; min-width: 0; }
.cert-use.is-voided { opacity: .55; text-decoration: line-through; }
.cert-paper { width: 150mm; min-height: 92mm; padding: 9mm 11mm; border: .6mm solid #000; border-radius: 4mm; display: flex; flex-direction: column; gap: 2mm; text-align: center; break-inside: avoid; }
.cert-paper__brand { font: 700 13pt/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.cert-paper__title { font-size: 10pt; letter-spacing: .12em; text-transform: uppercase; color: #444; padding-bottom: 3mm; border-bottom: .3mm solid #000; }
.cert-paper__value { font: 700 26pt/1.15 var(--font-display); margin-top: 4mm; }
.cert-paper__for { font-size: 13pt; }
.cert-paper__msg { font-size: 11pt; font-style: italic; color: #333; flex: 1; }
.cert-paper__foot { display: flex; justify-content: space-between; gap: 4mm; padding-top: 3mm; border-top: .3mm solid #000; font-size: 10pt; font-weight: 600; }
.cert-paper__where { font-size: 8.5pt; color: #444; }
.cert-paper p:empty { display: none; }

/* ---- the live queue (module queue) ---- */
.q-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.q-stat { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.q-stat small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.q-stat b { font: var(--display-weight) 28px/1.1 var(--font-display); letter-spacing: var(--display-tracking); }
.q-stat span { min-height: 1.2em; font-size: 12.5px; color: var(--ink-2); }
.q-stat--main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.q-stat--main small, .q-stat--main span { color: color-mix(in srgb, var(--accent-ink) 78%, transparent); }
@media (max-width: 720px) { .q-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .q-stat b { font-size: 24px; } }

.q-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .q-grid { grid-template-columns: minmax(0, 1fr); } }
.q-col__title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 15px/1.2 var(--font-display); }
.q-tickets, .q-chairs { display: grid; gap: 10px; }

.q-tickets { container-type: inline-size; }
.q-ticket { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no main eta" "no acts acts"; gap: 8px 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
@container (min-width: 640px) { .q-ticket { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "no main eta acts"; } }
.q-ticket__no { grid-area: no; display: flex; align-items: center; justify-content: center; gap: 1px; min-width: 60px; height: 56px; padding: 0 10px;
  border-radius: var(--radius-sm); background: var(--surface-2); font: 700 24px/1 var(--font-display); }
.q-ticket__no::before { content: '№'; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.q-ticket__main { grid-area: main; display: grid; gap: 2px; min-width: 0; }
.q-ticket__name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-ticket__what { font-size: 13px; color: var(--ink-2); }
.q-ticket__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--ink-3); }
.q-ticket__eta { grid-area: eta; display: grid; justify-items: end; text-align: right; }
.q-ticket__eta b { font: 700 18px/1.15 var(--font-display); white-space: nowrap; }
.q-ticket__eta small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.q-ticket__acts { grid-area: acts; display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.q-ticket.is-now { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); box-shadow: inset 3px 0 0 var(--ok); }
.q-ticket.is-now .q-ticket__no { background: var(--ok-soft); color: var(--ok); }
.q-ticket.is-now .q-ticket__eta b { color: var(--ok); }
.q-ticket.is-long .q-ticket__waited { color: var(--warn); font-weight: 600; }
.q-ticket.is-stuck .q-ticket__eta b { color: var(--bad); }

.q-chair { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.q-chair__head { display: flex; align-items: center; gap: 8px; }
.q-chair__head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-chair__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--accent)); }
.q-chair__head .badge { white-space: nowrap; }
.q-chair__now { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); text-align: left; }
.q-chair__now:hover { background: var(--surface-2); }
.q-chair__client { font-weight: 600; }
.q-chair__now small { font-size: 12px; color: var(--ink-2); }
.q-bar { display: block; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.q-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.q-chair.is-late .q-bar i { background: var(--warn); }
.q-chair__next { font-size: 12.5px; color: var(--ink-3); }
.q-chair__next:empty { display: none; }
.q-chair__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.q-chair__foot:has(.q-chair__line:empty):has([data-action="next"][hidden]) { display: none; }
.q-chair__line { font-size: 12.5px; color: var(--ink-2); }
.q-chair.is-free { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
.q-chair.is-later { opacity: .72; }
.q-off { margin-top: 10px; font-size: 12.5px; }

.q-empty { display: flex; align-items: center; gap: 14px; padding: 22px 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--ink-2); }
.q-empty .ic { flex: none; color: var(--ink-3); }
.q-empty p { display: grid; gap: 4px; }

.q-done { margin-top: 24px; }
.q-done summary { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; font: 600 15px/1.2 var(--font-display); }
.q-done summary::-webkit-details-marker { display: none; }
.q-done summary::after { content: ''; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); }
.q-done[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.q-done .list { margin-top: 8px; }
.q-done__no { min-width: 46px; font-weight: 700; color: var(--ink-3); }
.q-done__row.is-left .row__title { color: var(--ink-2); }
.q-done__row.is-left .q-done__no { color: var(--bad); }

.q-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.q-chip { display: inline-flex; align-items: baseline; gap: 6px; }
.q-chip small { font-size: 11.5px; opacity: .72; }
.q-estimate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); }
.q-estimate b { font: 700 20px/1.1 var(--font-display); }
.q-estimate small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.q-estimate.is-now b { color: var(--ok); }
.q-estimate.is-stuck b { color: var(--bad); }
.q-link { display: flex; align-items: center; gap: 8px; }
.q-link .input { flex: 1; min-width: 0; font-size: 12.5px; }
.q-actions { display: flex; gap: 8px; }
@media (min-width: 1024px) { .q-page .fab { display: none; } }
@media (max-width: 1023px) { .q-actions [data-action="add"] { display: none; } }

/* reports: each number against the period before; the chart's average line */
.kpi-delta { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.kpi-delta.is-good { color: var(--ok); } .kpi-delta.is-bad { color: var(--bad); }
.colchart { position: relative; }
.colchart::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--avg, -10px); border-top: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent); pointer-events: none; }
.colchart__sum { flex: 1; text-align: center; color: var(--ink-2); font-weight: 600; }