/* From Haven's src/renderer/grooming.css (colours come from app.css). Grooming page (grooming.ts): week calendar with a dogs list, clients and dog profiles, services, earnings, vaccines. */

#page-grooming .tile:hover { translate: none; }
#gm-tabs { flex: none; max-width: 100%; overflow-x: auto; }
.gm-panel { flex: 1; min-height: 0; }
.gm-stack { display: flex; flex-direction: column; gap: 16px; }
.gm-section { padding: 18px 20px; }
.gm-section h2 { margin: 0 0 6px; font-size: 17px; }
.gm-toolbar { display: flex; align-items: center; gap: 8px; }
.gm-toolbar h2 { flex: 1; margin: 0 0 0 6px; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gm-this-week.current { border-color: color-mix(in srgb, var(--accent-hi) 70%, transparent); }

.gm-input { min-width: 0; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--tile-edge); background: rgb(var(--shade) / calc(0.25 * var(--well-k))); color: var(--text); font: inherit; font-size: 13px; }
.gm-input::placeholder { color: var(--faint); }
.gm-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
select.gm-input option { background: var(--pop); color: var(--text); }

/* ---- calendar ---- */

.gm-cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; min-height: 480px; }
.gm-cal { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 14px; }
.gm-picking { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 18%, transparent); font-size: 13px; }
.gm-grid-scroll { flex: 1; min-height: 0; margin-top: 10px; overflow: auto; border-radius: 14px; border: 1px solid var(--tile-edge); background: rgb(var(--shade) / calc(0.18 * var(--well-k))); }
.gm-grid { position: relative; display: grid; grid-template-columns: 56px repeat(7, minmax(96px, 1fr)); min-width: 728px; }

.gm-corner, .gm-dayhead { position: sticky; top: 0; z-index: 4; height: 54px; background: var(--grid-head, rgb(22, 22, 28)); border-bottom: 1px solid var(--tile-edge); }
.gm-dayhead { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-left: 1px solid var(--tile-edge); }
.gm-dayhead small { font-size: 11px; color: var(--muted); }
.gm-dayhead b { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 999px; font-size: 15px; }
.gm-dayhead.today b { background: var(--accent); color: var(--accent-ink); }
.gm-dayhead small.gm-count { font-size: 10.5px; min-height: 13px; }

.gm-times { position: relative; }
.gm-times span { position: absolute; right: 8px; margin-top: 2px; font-size: 11px; color: var(--faint); white-space: nowrap; }
.gm-times span.end { margin-top: -2px; translate: 0 -100%; }

.gm-day {
  position: relative;
  border-left: 1px solid var(--tile-edge);
  cursor: pointer;
  background-image: linear-gradient(to bottom, rgb(var(--ink) / 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--ink) / 0.035) 1px, transparent 1px);
  background-size: 100% calc(var(--slot) * 4), 100% var(--slot);
}
.gm-day.past { background-color: rgb(var(--shade) / calc(0.16 * var(--well-k))); }
.gm-day.today { background-color: color-mix(in srgb, var(--accent) 7%, transparent); }
.gm-grid.picking .gm-day { cursor: copy; }
.gm-grid.picking .gm-day:hover { background-color: color-mix(in srgb, var(--accent) 16%, transparent); }

.gm-appt {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 3px 6px 3px 7px;
  overflow: hidden;
  border: 0;
  border-left: 3px solid var(--accent-tint);
  border-radius: 8px;
  background: var(--accent-block);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: grab;
  box-shadow: 0 4px 12px rgb(var(--shade) / calc(0.35 * var(--shade-k)));
}
.gm-appt:hover, .gm-appt:focus-visible { z-index: 3; box-shadow: 0 0 0 1px rgb(var(--ink) / 0.6), 0 6px 16px rgb(var(--shade) / calc(0.45 * var(--shade-k))); }
.gm-appt-top { display: flex; align-items: center; gap: 4px; max-width: 100%; }
/* Blocked time (lunch, a break): striped, quieter than a visit. */
.gm-appt.gm-block { border-left-color: rgb(var(--ink) / 0.45); background: repeating-linear-gradient(135deg, rgb(var(--ink) / 0.14) 0 6px, rgb(var(--ink) / 0.07) 6px 12px); color: var(--text); box-shadow: none; }
.gm-appt.gm-block small { color: var(--muted); }
/* The day picked in Go to a date. */
.gm-dayhead.jumped b { color: var(--accent-tint); text-decoration: underline; text-underline-offset: 3px; }
.gm-day.jumped { background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Go to a date: a month of days, or a year of months. */
.gm-menu.gm-jump { width: 284px; max-height: none; gap: 6px; }
.gm-jump-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px; }
.gm-jump-title { padding: 6px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.gm-jump-title:hover, .gm-jump-title:focus-visible { background: rgb(var(--ink) / 0.08); }
.gm-jump-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.gm-jump-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.gm-jump-dow { padding: 4px 0; text-align: center; font-size: 11px; color: var(--faint); }
.gm-jump-day, .gm-jump-month { position: relative; min-width: 0; padding: 7px 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.gm-jump-day:hover, .gm-jump-month:hover { background: rgb(var(--ink) / 0.08); }
.gm-jump-day.other { color: var(--faint); }
.gm-jump-day.week { background: rgb(var(--ink) / 0.06); }
.gm-jump-day.today { border-color: color-mix(in srgb, var(--accent-tint) 70%, transparent); }
.gm-jump-day.shown, .gm-jump-month.shown { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.gm-jump-day.busy::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent-tint); }
.gm-jump-foot { display: flex; justify-content: center; padding-top: 2px; }
.gm-appt b { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-appt small { max-width: 100%; font-size: 11px; color: rgba(255, 255, 255, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-appt.done { background: rgb(30, 110, 74); border-left-color: #8ff0b8; }
.gm-appt.noshow { background: rgb(92, 52, 52); border-left-color: #ff9a8a; }
.gm-appt.cancelled { background: rgb(54, 54, 62); border-left-color: #9a9aa6; }
.gm-appt.cancelled b { text-decoration: line-through; }
.gm-appt.unpaid::after { content: "$"; position: absolute; bottom: 2px; right: 6px; font-size: 11px; font-weight: 800; color: #ffd38a; }
.gm-warn-ico { width: 13px; height: 13px; flex: none; stroke: var(--warn-ico, #ffcf7a); stroke-width: 2.2; }
.item-row .gm-warn-ico { margin-left: auto; width: 15px; height: 15px; }

.gm-now { position: absolute; left: 0; right: 0; z-index: 2; height: 2px; background: #ff6b6b; pointer-events: none; }
.gm-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ff6b6b; }
.gm-drop { position: absolute; left: 2px; right: 2px; z-index: 2; padding: 2px 6px; border: 2px dashed color-mix(in srgb, var(--accent-tint) 95%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); font-size: 11px; font-weight: 600; pointer-events: none; }

/* ---- dogs beside the calendar ---- */

.gm-dogs { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; padding: 14px; }
.gm-dogs .search { width: 100%; }
.gm-dog-list { flex: 1; min-height: 120px; overflow-y: auto; }
.gm-dog-row { cursor: grab; }
.gm-dog-row .item-txt { flex: 1; }
.gm-dog-row .gm-badges { flex: none; max-width: 42%; justify-content: flex-end; }
.gm-quick { display: flex; flex-direction: column; gap: 8px; max-height: 58%; overflow-y: auto; padding-top: 12px; border-top: 1px solid var(--tile-edge); }
.gm-quick-head { display: flex; align-items: center; gap: 12px; }
.gm-quick-head h3 { margin: 0; font-size: 17px; }
.gm-quick-head .icon-btn { margin-left: auto; }
.gm-quick .fields { margin: 0; }
.gm-quick .frow { grid-template-columns: 76px minmax(0, 1fr); padding: 7px 0; }
.gm-quick .actions { margin-top: 0; padding-top: 2px; }

.gm-pic { overflow: hidden; }
.gm-pic img { width: 100%; height: 100%; object-fit: cover; }

.gm-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.gm-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.4; }
.gm-badge.warn { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--bad-text); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.gm-badge.info { background: rgba(90, 209, 196, 0.12); color: var(--info-text); border: 1px solid rgba(90, 209, 196, 0.3); }
.gm-badge.more { background: rgb(var(--ink) / 0.08); color: var(--muted); }
.gm-badge.removable button { display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.gm-badge.removable .ico { width: 12px; height: 12px; stroke: currentColor; }

.gm-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gm-tag { padding: 2px 8px; border-radius: 8px; background: rgb(var(--ink) / 0.06); font-size: 12px; }
.gm-tag.warn { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--bad-text); }
.vax-expired { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--bad-text); }
.vax-soon { background: rgba(242, 184, 102, 0.15); color: var(--soon-text); }
.vax-ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--good-text); }
.vax-none { color: var(--muted); }
.gm-pill { flex: none; margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.gm-pill.vax-none { background: rgb(var(--ink) / 0.07); }

/* ---- clients ---- */

.gm-client-list-tile { display: flex; flex-direction: column; }
.gm-list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 4px 10px; }
.gm-list-head .search { flex: 1; width: auto; min-width: 150px; }
.gm-client-actions { margin-top: 0; padding-top: 4px; }
.gm-dogs-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 10px; }
.gm-dogs-head h3 { margin: 0; font-size: 17px; }
.gm-dog-cards { display: flex; flex-direction: column; gap: 12px; }
.gm-dog-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--tile-edge); background: rgb(var(--ink) / 0.025); }
.gm-dog-head { display: flex; align-items: center; gap: 14px; }
.gm-dog-head h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.gm-dog-card .fields { margin: 0; }
.gm-dog-card .frow { grid-template-columns: 136px minmax(0, 1fr); }
.gm-dog-card .actions { margin-top: 0; padding-top: 0; }

.gm-photo-row { display: flex; align-items: center; gap: 16px; }
.gm-photo .avatar.lg { width: 76px; height: 76px; border-radius: 20px; font-size: 30px; }
.gm-photo-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gm-dog-form .field-pair { align-items: end; }
.gm-fixed { align-self: center; }
.gm-age { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }

.gm-chips { min-width: 0; margin: 0; padding: 0; border: 0; }
.gm-chips legend { margin-bottom: 8px; padding: 0; font-size: 12px; color: var(--muted); }
.chip-set { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-opt { padding: 4px 11px; border-radius: 999px; border: 1px solid rgb(var(--ink) / 0.18); background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.chip-opt:hover { color: var(--text); border-color: rgb(var(--ink) / 0.4); }
.chip-opt[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 32%, transparent); border-color: color-mix(in srgb, var(--accent-tint) 85%, transparent); color: var(--text-strong, #fff); }
.chip-opt.warn[aria-pressed="true"] { background: color-mix(in srgb, var(--danger) 24%, transparent); border-color: color-mix(in srgb, var(--danger) 80%, transparent); }
.chip-new { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 10px; border-radius: 999px; border: 1px dashed rgb(var(--ink) / 0.24); }
.chip-new input { width: 110px; padding: 4px 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
.chip-new input::placeholder { color: var(--faint); }
.chip-new:focus-within { border-color: color-mix(in srgb, var(--accent-tint) 80%, transparent); }
.chip-new .icon-btn { width: 24px; height: 24px; background: transparent; }
.gm-add-flag { display: flex; gap: 8px; margin-top: 8px; }
.gm-add-flag input { flex: 1; }
.gm-add-flag .pill.compact { flex: none; }
#gd-warnings:empty, #gd-info:empty { display: none; }
.gm-vax-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gm-vax-row input[type="text"] { flex: 1; }
#gd-vax-add, #gm-svc-add, #gm-size-add, #gm-extra-add, #gm-discount-add { align-self: flex-start; font-size: 13px; }

/* ---- services ---- */

.gm-svc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gm-svc-row, .gm-extra-row { display: grid; grid-template-columns: minmax(0, 1fr) 124px 100px 84px 30px; align-items: center; gap: 8px; }
.gm-extra-row { grid-template-columns: minmax(0, 1fr) 100px 30px 30px; max-width: 560px; }
.gm-discount-row { grid-template-columns: minmax(0, 1fr) 80px 84px 30px; }
.gm-clock.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.gm-extra-time { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 560px; margin: 8px 0 6px; padding: 10px 12px; border-radius: 12px; background: rgb(var(--ink) / 0.03); font-size: 13px; color: var(--muted); }
.gm-extra-time[hidden] { display: none; }
.gm-extra-time select { width: auto; }
.gm-h3 { margin: 6px 0 2px; font-size: 14px; }
.gm-size-list { display: flex; flex-direction: column; gap: 8px; }
.gm-size-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gm-size-row .gm-input:first-child { width: 120px; }
.gm-size-row .gm-weight { width: 84px; }
.gm-weight-to { color: var(--muted); font-size: 13px; }
.gm-size-toggle.on { border-color: color-mix(in srgb, var(--accent-tint) 80%, transparent); color: var(--text-strong, #fff); }
.gm-svc-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0 6px; padding: 10px 12px; border-radius: 12px; background: rgb(var(--ink) / 0.03); }
.gm-svc-sizes[hidden] { display: none; }
.gm-size-price { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.gm-amount.bad { border-color: var(--danger); }
#gm-services-form .actions { margin-top: 0; }
.gm-hours { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; max-width: 440px; margin: 10px 0 8px; }
.gm-hours .field { flex: 1; gap: 10px; }
.gm-hours .field span { color: var(--muted); font-size: 13px; }
.gm-hours p { flex-basis: 100%; }
.gm-hours p:empty { display: none; }
.gm-custom-group h3 { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* ---- earnings ---- */

.gm-earn-bar { padding: 10px 14px; }
.gm-earn-bar h2 { flex: none; min-width: 200px; text-align: center; font-size: 16px; }
.gm-earn-bar .tabs { margin-right: auto; }
.gm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gm-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; }
.gm-stat small { font-size: 12px; color: var(--muted); }
.gm-stat b { font-size: 24px; font-variant-numeric: tabular-nums; }
.gm-stat.ok b { color: var(--ok); }
.gm-stat.warn b { color: var(--warn-text); }
.gm-earn-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.gm-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13px; }
.gm-table th { padding: 6px 4px; border-bottom: 1px solid var(--tile-edge); text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); }
.gm-table td { padding: 8px 4px; border-bottom: 1px solid rgb(var(--ink) / 0.05); }
.gm-table th:not(:first-child), .gm-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.gm-unpaid { display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; list-style: none; }
.gm-unpaid-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgb(var(--ink) / 0.05); }
.gm-unpaid-row .item-txt { flex: 1; }

/* ---- vaccines ---- */

#gm-vax-list { margin-top: 10px; }
#gm-vax-list .item-txt { flex: 1; }

/* ---- appointment dialog ---- */

.gm-dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px 26px;
  border-radius: 22px;
  border: 1px solid var(--edge);
  background: linear-gradient(160deg, rgb(var(--hi) / 0.06), rgb(var(--hi) / 0) 40%), var(--dialog-bg, rgb(24, 24, 31));
  color: var(--text);
  box-shadow: 0 30px 80px rgb(var(--shade) / calc(0.6 * var(--shade-k)));
}
.gm-dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.gm-len-dialog { width: min(420px, calc(100vw - 24px)); }
.gm-len-dialog p { margin: 0; color: var(--muted); line-height: 1.5; }
/* Sync: at the end of the Grooming header; the arrows turn while it fetches. */
.gm-sync { margin-left: auto; }
.gm-sync.busy .ico { animation: gm-spin 0.9s linear infinite; }
/* Narrow screens: Sync beside the title (never over it, however wide the look's heading font), the tabs below both. */
@media (max-width: 900px) {
  #page-grooming .page-title { flex: 1 0 auto; }
  #gm-tabs { order: 2; }
}
@keyframes gm-spin { to { transform: rotate(360deg); } }
.gm-dialog .actions { margin-top: 4px; }
.gm-repeat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); }

/* Booking dialog: priced lines, popups to add services and add-ons, total, vaccine warning. */
.gm-vax-warn { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--danger) 70%, transparent); background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--bad-text); font-size: 13px; }
.gm-vax-warn .ico { grid-row: span 2; width: 22px; height: 22px; stroke: var(--danger); stroke-width: 2; }
.gm-vax-warn b { color: var(--text-strong, #fff); font-size: 14px; }
.gm-bill { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--tile-edge); background: rgb(var(--ink) / 0.03); }
.gm-bill-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.gm-lines { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gm-line { display: grid; grid-template-columns: minmax(0, 1fr) 92px 30px; align-items: center; gap: 8px; font-size: 13px; }
.gm-line.none { display: block; color: var(--muted); font-size: 12.5px; }
.gm-line-name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.gm-line-name small { font-size: 11px; color: var(--muted); }
.gm-amount { text-align: right; font-variant-numeric: tabular-nums; }
.gm-bill-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gm-menu-wrap { position: relative; }
.gm-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; width: min(340px, 80vw); max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 14px; border: 1px solid var(--edge); background: var(--menu-bg, rgb(30, 30, 38)); box-shadow: 0 16px 40px rgb(var(--shade) / calc(0.55 * var(--shade-k))); }
.gm-menu[hidden] { display: none; }
.gm-menu.flip { left: auto; right: 0; }

/* Collapsible sections (grooming.ts setupFolds): the heading is a button; collapsed shows only it. */
.gm-fold:not(fieldset) { display: flex; flex-direction: column; gap: 16px; }
.gm-fold-btn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.gm-fold-btn .ico { width: 14px; height: 14px; flex: none; stroke: currentColor; rotate: 90deg; transition: rotate 0.2s; }
.gm-fold-btn:hover { color: var(--text); }
.gm-fold-count { color: var(--muted); font-weight: 500; }
.gm-fold.folded .gm-fold-btn .ico { rotate: 0deg; }
.gm-fold.folded > :not(legend):not(.gm-fold-head), .gm-fold.folded .gm-fold-head .hint { display: none; }
.gm-fold.folded { gap: 0; }
/* Prices scrolls by itself on wide screens, so the Grooming tabs stay in view. */
@media (min-width: 901px) {
  #gm-services { overflow-y: auto; padding: 2px 4px 2px 2px; }
}
.gm-menu-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 13px; cursor: pointer; }
.gm-menu-row:hover { background: rgb(var(--ink) / 0.06); }
.gm-menu-row input { margin: 0; accent-color: var(--accent); }
.gm-menu-row small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.gm-menu-own { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 10px 8px 4px; border-top: 1px solid var(--tile-edge); font-size: 12.5px; }
.gm-menu-fields { display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: 6px; }
.gm-menu-fields select { grid-column: span 2; }
#ga-menu-discount .gm-menu-fields { grid-template-columns: minmax(0, 1fr) 64px 76px; }
#ga-menu-discount .gm-menu-fields select { grid-column: auto; }
.gm-menu-own .pill.compact { align-self: flex-start; }

/* Breed type-ahead and the breed guide (from breeds.js). */
.gm-breed-list { width: 100%; min-width: min(300px, 80vw); }
.gm-breed-opt { grid-template-columns: minmax(0, 1fr) auto; }
.gm-breed-opt[aria-selected="true"] { background: rgb(var(--ink) / 0.1); }
.gm-guide { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--tile-edge); background: rgb(var(--ink) / 0.04); font-size: 13px; }
.gm-guide-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.gm-guide-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--bad-text); }
.gm-guide-warn .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; stroke: currentColor; }
.gm-guide-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 0; }
.gm-guide-facts dt { font-size: 11px; color: var(--muted); }
.gm-guide-facts dd { margin: 0; }
.gm-guide-notes { margin: 0; color: var(--muted); }
.gm-guide h4 { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.gm-guide-cuts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gm-guide-cuts li { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; background: rgb(var(--ink) / 0.04); }
.gm-guide-cuts p { margin: 0; }
.gm-guide-cut-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gm-guide-cut-head .chip-opt { margin-left: auto; }
.gm-guide-blade { white-space: normal; }
.gm-guide-note { font-style: italic; }
.gm-guide-more { margin-top: 4px; }
.gm-guide-more summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 0; }
.gm-guide-more .gm-guide { margin-top: 6px; }
.gm-total { margin: 0 0 0 auto; font-size: 13px; color: var(--muted); }
.gm-total b { margin-left: 6px; font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.gm-badge { max-width: 100%; overflow-wrap: anywhere; }
.gm-dog-row .gm-badge { display: inline-block; max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 1100px) {
  .gm-cal-wrap { grid-template-columns: minmax(0, 1fr) 250px; }
}
@media (max-width: 900px) {
  .gm-cal-wrap { grid-template-columns: minmax(0, 1fr); }
  .gm-cal { min-height: 540px; }
  .gm-dogs { max-height: 460px; }
  .gm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-earn-split { grid-template-columns: 1fr; }
  .gm-svc-row { grid-template-columns: minmax(0, 1fr) 96px 76px 76px 30px; }
  .gm-earn-bar h2 { min-width: 0; flex: 1; }
  .gm-dog-card .frow { grid-template-columns: 96px minmax(0, 1fr); }
}

/* Read by screen readers, not shown. */
.gm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- the day and what follows it (day.ts) ---------------------------------------------------- */
.gm-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.gm-sec-head h2, .gm-sec-head h3 { margin: 0; }
.td-bar { flex-wrap: wrap; gap: 8px; }
.td-day { flex: 1 1 340px; min-width: 0; display: flex; align-items: center; gap: 8px; }
.td-bar .td-day h2 { flex: 1; min-width: 0; white-space: normal; text-wrap: balance; }
.td-sum { color: var(--muted); font-size: 13px; }
.td-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.td-card { min-width: 0; }
.td-empty { padding: 22px; text-align: center; }
.td-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--tile-edge); background: var(--tile, rgb(var(--ink) / 0.03)); border-left: 5px solid rgb(var(--ink) / 0.15); }
.td-card.stage-arrived { border-left-color: #d9a52b; }
.td-card.stage-bath { border-left-color: #3b8fd9; }
.td-card.stage-ready { border-left-color: var(--ok); }
.td-card.stage-gone { opacity: 0.75; }
.td-card.noshow { opacity: 0.6; }
.td-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.td-time { flex: none; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.td-name { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.td-name b { font-size: 15px; }
.td-name small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.td-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.td-facts dt { color: var(--muted); }
.td-facts dd { margin: 0; white-space: pre-line; }
.td-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.td-step { padding: 9px 4px; border-radius: 10px; border: 1px solid rgb(var(--ink) / 0.16); background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.td-step[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 28%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); }
.td-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.td-acts a.pill { text-decoration: none; }
.td-more { position: relative; }
.td-more > summary { list-style: none; cursor: pointer; }
.td-more > summary::-webkit-details-marker { display: none; }
.td-menu { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; min-width: 190px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; border: 1px solid var(--tile-edge); background: var(--dialog-bg, var(--bg)); box-shadow: 0 12px 30px -12px rgb(var(--shade, 0 0 0) / 0.45); }
.td-menu-item { padding: 9px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13.5px; }
.td-menu-item:hover { background: rgb(var(--ink) / 0.06); }
.td-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--tile-edge); }
.td-row:last-child { border-bottom: 0; }
.td-row .item-txt { flex: 1; }
.td-row .item-txt b, .td-row .item-txt small { white-space: normal; }
.td-row-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.td-row-acts a.pill { text-decoration: none; }
.mi-form { display: grid; grid-template-columns: auto 90px 1fr auto; gap: 6px; margin: 8px 0; }
@media (max-width: 520px) { .mi-form { grid-template-columns: 1fr 1fr; } }

/* Checkout. */
.co-dialog h3 { margin: 14px 0 4px; font-size: 14px; }
.co-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.co-photo { position: relative; margin: 0; }
.co-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; background: rgb(var(--ink) / 0.06); }
.co-photo figcaption { font-size: 11.5px; color: var(--muted); text-align: center; }
.co-photo-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; background: rgb(0 0 0 / 0.55); color: #fff; }
.co-file { position: relative; cursor: pointer; }
.co-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.co-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.co-report-done { display: contents; }
.co-report-done[hidden] { display: none; }
.co-dialog a.pill { text-decoration: none; }
.bk-decline { display: grid; gap: 8px; margin-top: 8px; }
.bk-decline[hidden] { display: none; }

/* Settings: the forms clients agree to. */
.opt-forms { display: grid; gap: 12px; }
.opt-release { display: grid; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--tile-edge); }
.opt-release .pill { justify-self: start; }

/* On a client's page and a dog's card. */
.gm-client-extras { display: grid; gap: 8px; margin-top: 14px; }
.gm-client-extras h3 { margin: 8px 0 0; }
.gm-agreement summary { cursor: pointer; font-size: 13.5px; }
.gm-agreement .notes { white-space: pre-line; font-size: 13px; color: var(--muted); }
.gm-visit-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.gm-visit-photo { padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: rgb(var(--ink) / 0.06); aspect-ratio: 1; }
.gm-visit-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-dog-extras:empty { display: none; }
.ph-img { max-width: 100%; max-height: 70vh; border-radius: 12px; display: block; margin: 0 auto; }
.hint.warn { color: var(--danger); }
@media (max-width: 600px) {
  .td-row { flex-wrap: wrap; }
  .td-row .item-txt { flex: 1 1 180px; }
  .td-row-acts { flex: 1 1 100%; justify-content: flex-start; padding-left: 52px; }
  .td-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Teams (team-page.ts, and who does what on the calendar and Today) ---- */
.gm-appt.staffed { border-left-width: 5px; }
.gm-appt .gm-who { opacity: 0.85; }
/* Someone else's visit or blocked time: shown, never opened. */
.gm-appt.gm-ghost { cursor: default; pointer-events: none; z-index: 0; color: var(--text); box-shadow: none; border-left: 4px solid rgb(var(--ink) / 0.35); background: repeating-linear-gradient(135deg, rgb(var(--ink) / 0.08) 0 6px, rgb(var(--ink) / 0.03) 6px 12px); }
.gm-appt.gm-ghost small { color: var(--muted); }
.td-card.staffed { border-left-width: 6px; }
.tm-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.tm-gone { opacity: 0.55; }
.tm-week-scroll { overflow-x: auto; max-width: 100%; }
.tm-week th, .tm-week td { white-space: nowrap; font-size: 12px; }
.tm-week .tm-today { color: var(--accent); }
.tm-week .tm-changed { color: var(--accent); font-weight: 650; }
.tp-hours { display: grid; gap: 6px; }
.tp-day { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 8px; }
.tp-times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tp-times input[type="time"] { width: 9.5em; }
.tp-split { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tp-split[hidden], .tp-times[hidden] { display: none; }
@media (max-width: 520px) { .tp-day { grid-template-columns: 1fr auto; } .tp-times { grid-column: 1 / -1; } }
.topbar-switch { max-width: 220px; font-weight: 650; }
.ga-last { margin: -4px 2px 2px; }
.ex-form { grid-template-columns: auto 1fr; grid-template-areas: "day amount" "cat cat" "vendor add"; }
.ex-form #ex-day { grid-area: day; }
.ex-form #ex-amount { grid-area: amount; }
.ex-form #ex-cat { grid-area: cat; }
.ex-form #ex-vendor { grid-area: vendor; }
.ex-form button { grid-area: add; }
.tx-strong td { font-weight: 650; }
.imp-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.imp-col { flex-wrap: wrap; }
.imp-col select { min-width: 0; flex: 1; }
.imp-col small { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-dialog .error { white-space: pre-line; }
.su-who { display: grid; gap: 8px; margin: 0 0 4px; }
.su-join { margin: 0 0 12px; }
#gm-team .gm-toolbar { flex-wrap: wrap; }
#gm-team .gm-toolbar h2 { flex: 1 0 auto; min-width: 0; text-align: left; }
#gm-team .gm-sec-head, #gm-earnings .gm-sec-head { flex-wrap: wrap; }
#gm-team .gm-sec-head h2 { flex: 1 1 auto; }

/* ---- help bubbles (help.ts), icons by titles and tabs, the welcome tour (tour.ts) ---- */

.tab-ico { display: none; }
.top-lbl { display: none; }
.sec-ico { width: 20px; height: 20px; stroke: var(--accent); }
.gm-sec-head:has(.help-q) { justify-content: flex-start; }
.gm-sec-head .help-q { margin-right: auto; }
.gm-toolbar > .help-q { margin-left: 2px; }
.help-row { margin-bottom: 6px; }
.help-q { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); background: transparent; color: var(--accent); font: 700 13px/1 var(--font); cursor: pointer; }
.help-q:hover, .help-q[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.help-pop { position: fixed; z-index: 60; width: min(340px, calc(100vw - 24px)); padding: 14px 16px 6px; border-radius: 14px; background: var(--pop); color: var(--text); border: 1px solid var(--tile-edge); box-shadow: 0 14px 40px rgb(var(--shade) / calc(0.35 * var(--shade-k))); font-size: 14px; line-height: 1.5; animation: help-in 0.15s ease-out; }
.help-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.help-pop-head b { font-size: 15px; }
.help-pop p { margin: 0 0 10px; }
@keyframes help-in { from { opacity: 0; translate: 0 4px; } }
@media (max-width: 640px) {
  .help-pop { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-height: 70vh; overflow-y: auto; font-size: 15px; }
}
.gm-dogs-title { margin: 0; font-size: 17px; }
.tm-search { width: 100%; margin: 4px 0 8px; }
.tm-people-scroll { max-height: min(420px, 55vh); overflow-y: auto; overscroll-behavior: contain; }

.tour { width: min(460px, calc(100vw - 24px)); text-align: center; }
.tour-art { margin: 0 0 6px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--dialog-bg, var(--bg))); }
.tour-art svg { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.tour-art .a { fill: var(--accent); }
.tour-art .p { fill: color-mix(in srgb, var(--accent) 28%, var(--dialog-bg, var(--bg))); }
.tour-art .w { fill: var(--dialog-bg, var(--bg)); }
.tour-art .i { fill: var(--text); }
.tour-art .s { stroke: var(--text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tour-art path.s:not(.w) { fill: none; }
.tour-art .wl { fill: none; stroke: var(--accent-ink); stroke-width: 4; stroke-linecap: round; }
.tour-count { margin: 8px 0 2px; font-size: 13px; color: var(--muted); }
.tour h2 { margin: 0 0 8px; font-size: 22px; }
.tour-text { margin: 0 auto; max-width: 380px; font-size: 15px; line-height: 1.55; }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin: 16px 0 4px; }
.tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--ink) / 0.2); }
.tour-dots i.on { width: 22px; border-radius: 4px; background: var(--accent); }
.tour-acts { justify-content: space-between; align-items: center; }
.tour-acts .tour-skip { margin: 0 auto; }
.tour-acts [data-t="back"][hidden] + .tour-skip { margin-left: 0; }

/* ---- what someone may do (team-page.ts renderPerms), locations ---- */

.tp-perms { display: grid; gap: 8px; }
.tp-perm-group { border: 1px solid var(--tile-edge); border-radius: 12px; background: rgb(var(--ink) / 0.025); }
.tp-perm-group summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; font-weight: 600; list-style: none; }
.tp-perm-group summary::-webkit-details-marker { display: none; }
.tp-perm-group summary::after { content: ""; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); rotate: 45deg; translate: 0 -2px; transition: rotate 0.15s; }
.tp-perm-group[open] summary::after { rotate: 225deg; translate: 0 2px; }
.tp-perm-group summary small { margin-left: auto; color: var(--muted); font-weight: 500; }
.tp-perm { padding: 7px 14px; border-top: 1px solid var(--tile-edge); }
.tp-perm.changed { box-shadow: inset 3px 0 0 var(--accent); }
.tp-perm input:disabled + * , .tp-perm:has(input:disabled) { opacity: 0.6; }
.loc-prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px; }
.loc-prices .field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-prices .gm-input { width: 8em; flex: none; }
.gm-loc { max-width: 220px; }
#page-grooming .gm-sec-head h2:has(+ .help-q) { flex: 0 1 auto; }
#page-grooming .gm-toolbar h2:has(+ .help-q) { flex: 0 1 auto; }
.gm-toolbar h2 + .help-q { margin-right: auto; }

/* Plans (plans-page.ts): what the plan lacks is greyed out, with a note saying which plan has it. */
.plan-locked > :not(.plan-note) { opacity: 0.45; filter: grayscale(1); }
.tab.plan-locked, .pill.plan-locked, .se-add-type.plan-locked { opacity: 0.55; }
.plan-note { display: inline-block; margin: 0 0 10px; padding: 6px 12px; border: 1px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); font: inherit; font-size: 0.85em; font-weight: 600; cursor: pointer; }
.plan-note:disabled { cursor: default; }
.domain-box p { margin: 0 0 10px; }
.domain-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.su-plan { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.su-plan legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.su-plan legend small { font-weight: 400; }
#fm-full h3 { margin: 12px 0 6px; }