:root {
  --paper: #f7f5ef;
  --panel: #ffffff;
  --ink: #171717;
  --muted: #696969;
  --line: #d8d5cc;
  --accent: #11615b;
  --accent-soft: #e0f0ed;
  --warning: #7a4b00;
  --daycare-hourly: #84cc16;
  --daycare-hourly-text: #4d7c0f;
  --daycare-hourly-bg: #ecfccb;
  --daycare-half: #d97706;
  --daycare-half-text: #9a3412;
  --daycare-half-bg: #ffedd5;
  --daycare-full: #047857;
  --daycare-full-text: #065f46;
  --daycare-full-bg: #d1fae5;
  --grooming: #7c3aed;
  --grooming-bg: #f3ecfb;
  --overnight: #1d4ed8;
  --overnight-bg: #dbeafe;
  --vaccine-ok-color: #168a63;
  --vaccine-critical-color: #d93025;
  --vaccine-expired-color: #f97316;
  --vaccine-expiring-color: #facc15;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  --system-announcement-height: 0px;
  --system-announcement-bg: #ffeb00;
  --system-announcement-fg: #111827;
}

.app.is-reports {
  grid-template-rows: minmax(0, 1fr);
}

.app.is-reports .dog-panel {
  display: none;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.system-announcement-bar {
  position: fixed;
  z-index: 70000;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  background: var(--system-announcement-bg);
  color: var(--system-announcement-fg);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.system-announcement-bar[hidden] {
  display: none;
}

button,
input {
  font: inherit;
}

label.has-required-field > span::after,
label:has(input:required) > span::after,
label:has(select:required) > span::after,
label:has(textarea:required) > span::after {
  content: " *";
  color: #dc2626;
  font-weight: 950;
}

.is-field-invalid input,
.is-field-invalid select,
.is-field-invalid textarea {
  border-color: #dc2626 !important;
  background: #fff1f2 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.field-validation-message {
  color: #b91c1c !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.25;
  text-transform: none !important;
}

.app {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 148px;
  gap: 10px;
  height: calc(100vh - var(--system-announcement-height, 0px));
  height: calc(100dvh - var(--system-announcement-height, 0px));
  margin-top: var(--system-announcement-height, 0px);
  padding: 10px;
  overflow: hidden;
}

.app.is-staff-login {
  display: grid;
  place-items: center;
  grid-template-rows: minmax(0, 1fr);
  min-height: 100vh;
  overflow: auto;
}

.app.is-staff-login > .dog-panel,
.app.is-staff-login > .board-panel > .board-header,
.app.is-staff-login > .board-panel > .room-tabs {
  display: none;
}

.app.is-staff-login > .board-panel {
  display: block;
  width: min(500px, 100%);
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.app.is-staff-login.is-calendar > .board-panel {
  min-height: 0;
}

.app.is-staff-login .room-board {
  padding: 0;
  overflow: visible;
}

.staff-login-shell {
  width: min(500px, 100%);
}

.app:not(.is-staff-login) .staff-login-shell {
  display: none;
}

.staff-login-card {
  display: grid;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: clamp(24px, 5vw, 44px);
  text-align: center;
}

.staff-login-logo {
  justify-self: center;
  width: min(210px, 62vw);
  height: 112px;
  object-fit: contain;
}

.staff-login-copy,
.staff-login-form,
.staff-login-loading {
  display: grid;
  gap: 12px;
}

.staff-login-copy h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: 0;
}

.staff-login-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.45;
}

.staff-login-copy.is-code {
  text-align: left;
}

.staff-login-copy.is-code h1 {
  font-size: 24px;
}

.staff-login-form {
  text-align: left;
}

.staff-login-field {
  display: grid;
  gap: 6px;
}

.staff-login-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.staff-login-field input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  outline: 0;
}

.staff-login-field input:focus {
  border-color: #0b7cff;
  box-shadow: 0 0 0 3px rgba(11, 124, 255, 0.16);
}

.staff-login-code-input {
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0.22em;
  text-align: center;
}

.staff-login-status {
  min-height: 22px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.staff-login-status.is-error {
  color: #b91c1c;
}

.staff-login-status.is-ok {
  color: var(--accent);
}

.staff-debug-code {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 950;
}

.staff-login-loading {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 14px;
  text-align: left;
}

.staff-login-loading strong {
  font-size: 15px;
  font-weight: 950;
}

.staff-login-loading span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.app.is-calendar {
  grid-template-rows: minmax(0, 1fr);
}

.app.is-calendar .dog-panel,
.app.is-pet-detail .dog-panel,
.app.is-messages .dog-panel,
.app.is-tasks .dog-panel,
.app.is-settings .dog-panel {
  display: none;
}

.app.is-pet-detail,
.app.is-messages,
.app.is-tasks,
.app.is-settings {
  grid-template-rows: minmax(0, 1fr);
}

.dog-panel,
.board-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.dog-panel {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-rows: 1fr;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.dog-controls {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border-right: 1px solid var(--line);
}

.panel-header,
.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.panel-header {
  padding: 8px 10px;
  border-right: 0;
}

.header-metrics {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

.brand-home {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(150px, 14vw, 190px);
  height: 62px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}

.brand-home > .brand-logo {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.brand-home:focus-visible {
  outline: 3px solid #0b7cff;
  outline-offset: 3px;
  border-radius: 8px;
}

.metric {
  display: grid;
  min-width: 130px;
  min-height: 54px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 7px 12px;
}

.metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metric strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.1;
}

.location-select {
  width: 100%;
  min-width: 138px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.1;
  outline: 0;
}

.location-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
}

.message-button {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  color: var(--accent);
  display: grid;
  place-items: center;
  overflow: visible;
  isolation: isolate;
  text-decoration: none;
}

.message-button.has-count::after {
  content: attr(data-count);
  position: absolute;
  z-index: 2;
  top: -9px;
  right: -9px;
  min-width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
}

.message-button.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.message-button.checkin-message-button {
  color: #207d68;
}

.message-button.checkin-message-button.is-active {
  border-color: #207d68;
  background: #207d68;
  color: #fff;
}

.message-button.suggestion-message-button {
  border-color: #ff1493;
  background: #ff2aa3;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.18), 0 8px 18px rgba(255, 20, 147, 0.28);
}

.message-button.suggestion-message-button.is-capturing {
  border-color: #ff1493;
  background: #d60078;
  color: #fff;
}

.message-button svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-button .lodging-bed-logo {
  width: 22px;
  height: 22px;
}

.message-button .playgroup-dog-logo {
  display: block;
  width: 27px;
  height: 26px;
  background: currentColor;
  pointer-events: none;
  -webkit-mask: url("/assets/canine-club-logo.png") center / contain no-repeat;
  mask: url("/assets/canine-club-logo.png") center / contain no-repeat;
}

.grooming-terminal-button {
  position: relative;
  color: var(--grooming);
  text-decoration: none;
}

.grooming-terminal-button .grooming-scissors {
  display: block;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-8deg);
}

.grooming-terminal-button.has-ready-pickups {
  border-color: #218653;
  background: #e3f4e9;
  color: #166534;
  box-shadow: 0 0 0 3px rgba(33, 134, 83, 0.13);
}

.grooming-ready-count {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #218653;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  padding: 0 4px;
}

.grooming-ready-count[hidden] {
  display: none;
}

.header-actions .message-button[data-tooltip] {
  overflow: visible;
}

.header-actions .message-button[data-tooltip]:hover,
.header-actions .message-button[data-tooltip]:focus-visible {
  z-index: 90;
}

.header-actions .message-button[data-tooltip]:hover::before,
.header-actions .message-button[data-tooltip]:focus-visible::before {
  content: attr(data-tooltip);
  position: absolute;
  display: block;
  z-index: 90;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(220px, calc(100vw - 24px));
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 7px;
  background: #111827;
  color: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  padding: 7px 9px;
  pointer-events: none;
  white-space: nowrap;
}

.header-actions .message-button.suggestion-message-button,
.header-actions .message-button.suggestion-message-button[data-tooltip]:hover,
.header-actions .message-button.suggestion-message-button[data-tooltip]:focus-visible {
  z-index: 50000;
}

.app:has(.checkin-overlay:not([data-checkout-review-overlay]), .reservation-overlay, .quick-reservation-overlay, .quick-client-overlay, .suggestion-overlay) .header-actions .message-button.suggestion-message-button,
body:has(.checkin-overlay:not([data-checkout-review-overlay]), .reservation-overlay, .quick-reservation-overlay, .quick-client-overlay, .suggestion-overlay) > .header-utility-actions .message-button.suggestion-message-button {
  opacity: 0;
  pointer-events: none;
}

#staffSessionButton[data-tooltip]:hover::before,
#staffSessionButton[data-tooltip]:focus-visible::before {
  right: 0;
  left: auto;
  transform: none;
}

.staff-session-button .staff-session-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--staff-profile-color, var(--accent));
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  overflow: hidden;
}

.staff-session-button .staff-session-avatar.has-photo {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--staff-profile-color, var(--accent)) 45%, #fff);
  background: var(--staff-profile-color, var(--accent));
}

.staff-session-button .staff-session-avatar img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-session-button .staff-session-avatar.is-broken img {
  display: none;
}

.staff-session-fallback {
  display: none;
  color: #fff;
}

.staff-session-avatar.is-broken .staff-session-fallback {
  display: grid;
  place-items: center;
}

.staff-profile-panel {
  width: min(620px, 100%);
}

.staff-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.staff-profile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.staff-profile-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  position: relative;
  width: 54px;
  height: 54px;
  border: 2px solid color-mix(in srgb, var(--staff-profile-color, var(--accent)) 35%, #fff);
  border-radius: 999px;
  background: var(--staff-profile-color, var(--accent));
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  overflow: hidden;
}

.staff-profile-avatar.has-photo {
  background: var(--staff-profile-color, var(--accent));
}

.staff-profile-avatar img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-profile-avatar.is-broken img {
  display: none;
}

.staff-profile-avatar.is-broken::before {
  content: attr(data-staff-photo-initials);
  display: grid;
  place-items: center;
  color: #fff;
}

.staff-profile-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.staff-profile-head small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.staff-profile-grid input[type="color"] {
  min-height: 44px;
  padding: 4px;
}

.staff-profile-status {
  margin-top: 12px;
  border: 1px solid #d9e8e4;
  border-radius: 8px;
  background: #f7fffc;
  color: var(--accent);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
}

.staff-profile-status.is-error {
  border-color: #f5b4b4;
  background: #fff6f6;
  color: #b3261e;
}

.staff-profile-actions {
  align-items: center;
  justify-content: space-between;
}

.staff-profile-save-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 620px) {
  .staff-profile-head,
  .staff-profile-actions,
  .staff-profile-save-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .staff-profile-actions .secondary-button,
  .staff-profile-actions .primary-button {
    width: 100%;
  }
}

#openSettings svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.nav-icon-select {
  position: relative;
  cursor: pointer;
}

.nav-icon-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  opacity: 0;
}

.nav-icon-select option {
  color: var(--ink);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
}

h2 {
  font-size: 22px;
}

.icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 26px;
}

.search {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: auto;
  align-content: start;
  padding: 8px 10px;
  border-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.search input {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 14px;
  text-transform: none;
}

.dog-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  padding: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.dog-card {
  position: relative;
  display: grid;
  grid-template-columns: clamp(46px, 4.4vw, 56px) minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: clamp(204px, 18vw, 260px);
  min-width: clamp(204px, 18vw, 260px);
  height: 92px;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  cursor: grab;
  touch-action: pan-x;
  user-select: none;
  /* Phase E (virtualization): browser skips layout/paint of off-screen
     cards. With 200+ dogs in the side panel, this dramatically cuts
     scroll lag and initial paint time. The contain-intrinsic-size
     keeps the scrollbar accurate by reserving the card's height
     before render. */
  content-visibility: auto;
  contain-intrinsic-size: 220px 92px;
}

.dog-card:active {
  cursor: grabbing;
}

.dog-card img {
  -webkit-user-drag: none;
  user-select: none;
}

.dog-profile-button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--accent);
  display: grid;
  place-items: center;
  padding: 0;
}

.dog-vaccine-button {
  position: absolute;
  right: 28px;
  top: 3px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #27845d;
  display: grid;
  place-items: center;
  padding: 0;
}

.dog-run-card-button {
  position: absolute;
  right: 53px;
  top: 3px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #475569;
  display: grid;
  place-items: center;
  padding: 0;
}

.dog-package-credit-button {
  position: absolute;
  right: 78px;
  top: 3px;
  min-width: 28px;
  height: 22px;
  border: 1px solid #9dcfc5;
  border-radius: 999px;
  background: #f0fbf8;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 950;
}

.dog-vaccine-button.is-alert {
  border-color: #f2b9ae;
  color: #d84532;
  background: #fff4f1;
}

.dog-profile-button svg,
.dog-run-card-button svg,
.dog-vaccine-button svg,
.dog-package-credit-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dog-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dog-card.is-assigned,
.dog-card.is-in-play-group {
  background: #f2f1ec;
  opacity: 0.82;
}

.dog-card.has-visit {
  border-color: #b8d6d0;
}

.dog-card.is-cat {
  border-color: #d7b98f;
  background: linear-gradient(135deg, #fffaf1 0%, #f1fbfa 100%);
  box-shadow: inset 4px 0 0 #c27a28;
}

.dog-card.is-cat.has-visit {
  border-color: #cfa06b;
}

.dog-card.is-cat .dog-name {
  color: #8a4b0f;
}

.dog-card.is-in-play-group {
  border-color: #c8c4ba;
}

.dog-photo,
.dog-initials {
  position: relative;
  width: clamp(46px, 4.4vw, 56px);
  height: clamp(46px, 4.4vw, 56px);
  border-radius: 8px;
  object-fit: cover;
  background: #ebe8df;
}

.dog-initials {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.is-cat-photo {
  background: #fff3df;
  color: #8a4b0f;
}

.pet-photo-kind-icon {
  position: absolute;
  right: -5px;
  bottom: -5px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a520f;
  box-shadow: 0 4px 10px rgba(77, 45, 18, 0.18);
}

.pet-photo-kind-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pet-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #a8d5cc;
  border-radius: 999px;
  background: #effbf8;
  color: #11615b;
  padding: 2px 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.pet-type-badge.is-cat {
  border-color: #e5bf8a;
  background: #fff7ed;
  color: #8a4b0f;
}

.pet-type-badge-icon {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.pet-type-badge-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.has-vaccine-alert {
  --vaccine-indicator-color: var(--vaccine-critical-color);
  box-sizing: border-box;
  border: 3px solid var(--vaccine-indicator-color) !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--vaccine-indicator-color) 25%, transparent);
}

.has-vaccine-ok {
  box-sizing: border-box;
  border: 3px solid var(--vaccine-ok-color) !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--vaccine-ok-color) 20%, transparent);
}

.has-vaccine-critical {
  --vaccine-indicator-color: var(--vaccine-critical-color);
}

.has-vaccine-expired {
  --vaccine-indicator-color: var(--vaccine-expired-color);
}

.has-vaccine-expiring {
  --vaccine-indicator-color: var(--vaccine-expiring-color);
}

.dog-name-vaccine-alert {
  --vaccine-indicator-color: var(--vaccine-critical-color);
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 1px solid color-mix(in srgb, var(--vaccine-indicator-color) 45%, #fff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--vaccine-indicator-color) 12%, #fff);
  color: var(--vaccine-indicator-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}

.dog-name-vaccine-alert.is-critical {
  --vaccine-indicator-color: var(--vaccine-critical-color);
}

.dog-name-vaccine-alert.is-expired {
  --vaccine-indicator-color: var(--vaccine-expired-color);
}

.dog-name-vaccine-alert.is-expiring {
  --vaccine-indicator-color: var(--vaccine-expiring-color);
}

.dog-name-vaccine-alert svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dog-copy {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  max-height: 100%;
  overflow: hidden;
  padding-right: 48px;
}

.dog-title-line,
.calendar-dog-name-line {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.dog-name {
  overflow: hidden;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
  white-space: normal;
}

.dog-name-button,
.calendar-dog-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 950;
  padding: 0;
  text-align: left;
}

.dog-name-button:hover,
.calendar-dog-name:hover {
  color: var(--accent);
  text-decoration: underline;
}

.dog-name-button.is-behavior-attention,
.calendar-dog-name.is-behavior-attention {
  color: #b42318 !important;
}

.dog-name-button.is-behavior-attention:hover,
.calendar-dog-name.is-behavior-attention:hover {
  color: #7a271a !important;
}

.dog-owner,
.dog-stay,
.dog-location {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dog-owner {
  display: block;
}

.dog-stay {
  display: -webkit-box;
  max-height: 27px;
  overflow: hidden;
  color: var(--ink);
  font-weight: 950;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.dog-icon-strip {
  display: inline-flex;
  flex: 0 1 auto;
  gap: 3px;
  align-items: center;
  margin-top: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
}

.dog-icon-token {
  position: relative;
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border: 1px solid rgba(15, 94, 82, 0.12);
  border-radius: 999px;
  background: #fff;
  cursor: help;
  font: inherit;
  line-height: 1;
  padding: 0;
}

.fixed-age-icon {
  --fixed-age-color: #2563eb;
  --fixed-age-bg: #eff6ff;
  --fixed-age-border: #bfdbfe;
  border-color: var(--fixed-age-border);
  background: var(--fixed-age-bg);
  color: var(--fixed-age-color);
  cursor: help;
}

.fixed-age-icon.is-blue {
  --fixed-age-color: #2563eb;
  --fixed-age-bg: #eff6ff;
  --fixed-age-border: #bfdbfe;
}

.fixed-age-icon.is-orange {
  --fixed-age-color: #c2410c;
  --fixed-age-bg: #fff7ed;
  --fixed-age-border: #fed7aa;
}

.fixed-age-icon.is-red {
  --fixed-age-color: #dc2626;
  --fixed-age-bg: #fef2f2;
  --fixed-age-border: #fecaca;
}

.unaltered-sex-icon {
  display: block;
  width: 15px;
  height: 15px;
  overflow: visible;
}

.calendar-dog-chip .dog-icon-strip {
  gap: 3px;
  margin: 0;
}

.calendar-dog-chip .dog-icon-token {
  width: 21px;
  height: 21px;
  flex-basis: 21px;
  font-size: 14px;
}

.dog-location {
  color: var(--accent);
  font-weight: 850;
}

.photo-upload-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px dashed #9cb8b2;
  background: #f8fbfa;
  color: var(--accent);
  cursor: pointer;
  font-size: 22px;
  font-weight: 950;
}

.photo-upload-placeholder:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.photo-upload-placeholder input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.board-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.status {
  display: none;
  position: fixed;
  z-index: 80000;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  max-width: min(420px, 100%);
  min-width: 170px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  padding: 10px 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
  transform: translateY(-10px);
  pointer-events: none;
}

.status.is-visible,
.status.has-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-action-button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
}

.status-action-button:hover,
.status-action-button:focus-visible {
  border-color: var(--accent);
}

.status.is-busy {
  color: var(--warning);
}

.status.is-ok {
  color: var(--accent);
}

.status.is-error {
  color: #b91c1c;
}

.status.is-flash {
  animation: statusFlash 1.4s ease;
}

@keyframes statusFlash {
  0%,
  100% {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: none;
  }
  18%,
  55% {
    background: #e8fff4;
    border-color: rgba(0, 128, 96, 0.42);
    box-shadow: 0 0 0 4px rgba(0, 128, 96, 0.12);
  }
}

/* Instant click acknowledgment: applied to an action button ~110ms after click
   (so instant actions never flicker) and cleared on the next render(). Gives a
   "the click registered, working on it" cue during the round-trip. */
.is-click-pending {
  position: relative;
  cursor: progress;
  opacity: 0.72;
}
.is-click-pending::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: 0.85;
  animation: clickPendingSpin 0.6s linear infinite;
  pointer-events: none;
}
@keyframes clickPendingSpin {
  to { transform: rotate(360deg); }
}

.room-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.room-tabs[hidden] {
  display: none;
}

.room-tab {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 14px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.today-tab {
  min-width: 190px;
  text-align: center;
  white-space: nowrap;
}

.today-tab span {
  display: block;
}

.room-tab.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.nav-select {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}

.nav-select.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.nav-select span {
  pointer-events: none;
}

.nav-select select {
  width: 100%;
  min-width: 150px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  outline: 0;
}

.nav-select.is-active select {
  color: #fff;
}

.nav-select option {
  color: var(--ink);
  background: #fff;
}

.nav-action {
  color: var(--accent);
}

.room-board {
  flex: 1;
  min-height: 0;
  padding: 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.calendar-board {
  display: grid;
  gap: 12px;
  overflow: visible;
}

.calendar-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(280px, max-content);
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
}

.calendar-header:has(.calendar-search-results) {
  z-index: 12000;
}

.calendar-date-side {
  justify-self: end;
  min-width: 0;
}

.calendar-date-side .eyebrow {
  text-align: right;
}

.calendar-header strong {
  color: var(--accent);
  font-size: 22px;
}

.calendar-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.calendar-date-control {
  display: inline-grid;
  grid-template-columns: 38px minmax(0, auto) 38px;
  align-items: center;
  gap: 8px;
}

.calendar-date-picker {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  color: var(--ink);
}

.calendar-date-picker span {
  display: block;
  grid-column: 1;
  color: var(--ink);
  font-size: 23px;
  font-weight: 950;
  line-height: 1.1;
}

.calendar-date-picker .calendar-date-label-mobile {
  display: none;
}

.calendar-date-picker::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  pointer-events: none;
}

.calendar-date-picker input {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: transparent;
  font-size: 0;
  opacity: 0;
  transform: translateY(-50%);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.calendar-date-picker input::-webkit-calendar-picker-indicator {
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.calendar-date-picker input::-webkit-contacts-auto-fill-button,
.calendar-date-picker input::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.date-nav-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.date-nav-button.is-icon {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  padding: 0;
}

.date-nav-button.is-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-suite-board {
  align-content: start;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f7f9;
}

.moego-calendar-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: calc(100vh - 86px);
  background: #f6f7f9;
}

.moego-calendar-shell.has-no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.moego-calendar-sidebar {
  display: grid;
  align-content: start;
  gap: 16px;
  border-right: 1px solid #e7e9ee;
  background: #fff;
  padding: 18px 16px;
}

.moego-mini-calendar {
  display: grid;
  gap: 10px;
}

.moego-mini-calendar header,
.moego-calendar-report header,
.moego-assignment-board > header,
.lodging-calendar-unassigned header,
.lodging-calendar-room header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.moego-mini-calendar header strong,
.moego-calendar-report header strong,
.moego-assignment-board > header strong,
.lodging-calendar-unassigned header strong,
.lodging-calendar-room header strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.moego-mini-calendar header > div {
  display: flex;
  gap: 4px;
}

.moego-mini-weekdays,
.moego-mini-dates {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.moego-mini-weekdays span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.moego-mini-date {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.moego-mini-date.is-muted {
  color: #b6bcc6;
}

.moego-mini-date.is-today {
  box-shadow: inset 0 0 0 1px #ff8a3c;
}

.moego-mini-date.is-selected {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

.moego-sidebar-actions {
  display: grid;
  gap: 8px;
}

.moego-quick-button,
.moego-smart-button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
}

.moego-smart-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.moego-utility-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.moego-utility-actions button {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 54px;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  background: #fafbfc;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}

.moego-utility-actions svg,
.moego-select-button svg,
.moego-toolbar-actions .date-nav-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.moego-calendar-report {
  display: grid;
  gap: 10px;
}

.moego-calendar-report header span,
.lodging-calendar-unassigned header span,
.lodging-calendar-room header span,
.lodging-calendar-room header small,
.moego-assignment-board > header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.moego-calendar-report > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.moego-calendar-report > div strong {
  color: #7b8491;
  font-weight: 950;
}

.moego-scheduler-main {
  min-width: 0;
  overflow: auto;
  background: #f6f7f9;
}

.moego-toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 980px;
  border-bottom: 1px solid #e7e9ee;
  background: rgba(255, 255, 255, 0.96);
  padding: 14px 18px;
  backdrop-filter: blur(8px);
}

.moego-toolbar-left,
.moego-toolbar-date,
.moego-toolbar-actions,
.lodging-type-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.moego-toolbar-left {
  flex: 1 1 430px;
  min-width: 0;
}

.moego-toolbar-date {
  flex: 0 0 auto;
}

.moego-toolbar-actions {
  flex: 1 1 390px;
  justify-content: flex-end;
}

.moego-toolbar .calendar-date-control {
  grid-template-columns: 34px minmax(128px, auto) 34px;
  gap: 6px;
}

.moego-toolbar .lodging-range-control.is-static {
  grid-template-columns: minmax(128px, auto);
  min-height: 34px;
}

.moego-toolbar .lodging-range-control.is-static span {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
  white-space: nowrap;
}

.moego-toolbar .calendar-date-picker {
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
}

.moego-toolbar .calendar-date-picker span {
  font-size: 15px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moego-toolbar .calendar-date-picker::after,
.moego-toolbar .calendar-date-picker input {
  width: 34px;
  height: 34px;
}

.moego-toolbar .date-nav-button {
  min-width: 34px;
  height: 34px;
}

.moego-toolbar .calendar-print-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  white-space: nowrap;
}

.moego-select-button,
.calendar-mode-tab,
.lodging-type-filter button,
.moego-view-switch button,
.moego-view-switch > span {
  min-height: 36px;
  border: 1px solid #e0e4ea;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
}

.moego-select-button.is-static {
  cursor: default;
}

.moego-select-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  border-radius: 999px;
  padding: 0 12px;
}

.moego-select-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-mode-tabs,
.moego-view-switch {
  display: inline-flex;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #e0e4ea;
  border-radius: 999px;
  background: #fff;
}

.calendar-mode-tab,
.moego-view-switch button,
.moego-view-switch > span {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 12px;
}

.calendar-mode-tab + .calendar-mode-tab,
.moego-view-switch button + button {
  border-left: 1px solid #e0e4ea;
}

.calendar-mode-tab.is-active,
.moego-view-switch button.is-active,
.moego-view-switch > span.is-active {
  background: #f4f6f9;
  color: var(--ink);
}

.lodging-type-filter {
  padding-left: 4px;
}

.lodging-type-filter button {
  border-radius: 999px;
  padding: 0 12px;
  white-space: nowrap;
}

.lodging-type-filter button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.moego-lodging-calendar {
  display: grid;
  gap: 12px;
  min-width: 1120px;
  margin: 18px;
}

.moego-lodging-filters {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 0 10px;
}

.moego-lodging-filters > strong {
  min-height: 34px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 950;
}

.moego-lodging-filters .lodging-type-filter {
  padding-left: 0;
}

.moego-lodging-week-head,
.moego-lodging-row,
.moego-lodging-section header {
  display: grid;
  grid-template-columns: 170px repeat(var(--lodging-days), minmax(118px, 1fr));
}

.moego-lodging-week-head {
  position: sticky;
  top: 67px;
  z-index: 30;
  overflow: hidden;
  border-bottom: 1px solid #e3e6eb;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
}

.moego-lodging-collapse,
.moego-lodging-date {
  min-height: 58px;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.moego-lodging-collapse {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  padding: 0 16px;
}

.moego-lodging-date {
  display: grid;
  place-items: center;
  gap: 2px;
  border-left: 1px solid #e3e6eb;
  cursor: pointer;
}

.moego-lodging-date strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.moego-lodging-date span {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}

.moego-lodging-date.is-selected strong,
.moego-lodging-date.is-selected span {
  color: var(--accent);
}

.moego-lodging-grid {
  display: grid;
  border: 1px solid #e3e6eb;
  border-top: 0;
  background: #fff;
}

.moego-lodging-section {
  display: grid;
}

.moego-lodging-section header {
  min-height: 40px;
  border-top: 1px solid #e3e6eb;
  background: #fff;
}

.moego-lodging-section header button {
  grid-column: 1 / -1;
  border: 0;
  background: transparent;
  color: #49505a;
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
  text-align: left;
  padding: 0 18px;
}

.moego-lodging-row {
  position: relative;
  min-height: 58px;
  border-top: 1px solid #e7e9ee;
  background: #fff;
}

.moego-lodging-room-label {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  border-right: 1px solid #e3e6eb;
  color: #49505a;
  font-size: 13px;
  font-weight: 850;
  overflow: hidden;
  padding: 0 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moego-lodging-day-cell,
.moego-lodging-day-cell.lodging-calendar-cell {
  grid-row: 1;
  display: block;
  min-height: 58px;
  height: 58px;
  border: 0;
  border-left: 1px solid #e3e6eb;
  border-radius: 0;
  background: #fff;
  padding: 0;
}

.moego-lodging-day-cell:nth-child(even) {
  background: #fcfdff;
}

.moego-lodging-day-cell.is-drag-target,
.moego-lodging-day-cell.lodging-calendar-cell.is-drag-target,
.moego-lodging-row.is-drag-target {
  background: #eef7ff;
  box-shadow: inset 0 0 0 2px rgba(11, 124, 255, 0.18);
}

.moego-lodging-reservation-bar {
  position: relative;
  z-index: 5;
  grid-row: 1;
  align-self: center;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 38px;
  margin: 0 8px;
  overflow: hidden;
  border: 1px solid #d3e9fb;
  border-left: 4px solid #60a5fa;
  border-radius: 6px;
  background: #dff0ff;
  box-shadow: 0 7px 18px rgba(31, 41, 55, 0.08);
  color: var(--ink);
  cursor: grab;
  gap: 7px;
  padding: 0 8px;
}

.moego-lodging-reservation-bar.is-dragging {
  opacity: 0.72;
}

body.is-lodging-dragging .moego-lodging-calendar,
body.is-lodging-dragging .moego-lodging-reservation-bar {
  cursor: grabbing;
  user-select: none;
}

.moego-lodging-reservation-bar:active {
  cursor: grabbing;
}

.moego-lodging-reservation-bar.is-dayplay {
  border-color: #d8ecf3;
  border-left-color: #14b8a6;
  background: #e2f6f7;
}

.moego-lodging-reservation-bar.is-boarding {
  border-color: #cfe4ff;
  border-left-color: #60a5fa;
  background: #dff0ff;
}

.moego-lodging-reservation-bar.is-shared {
  height: 44px;
  cursor: pointer;
  gap: 8px;
}

.moego-lodging-pet-stack {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 32px;
}

.moego-lodging-pet-stack .moego-lodging-pet-photo + .moego-lodging-pet-photo {
  margin-left: -8px;
  border: 2px solid #fff;
}

.moego-lodging-pet-photo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.moego-lodging-pet-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moego-lodging-reservation-bar button {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moego-lodging-reservation-bar.is-shared button {
  white-space: normal;
  line-height: 1.05;
}

.moego-lodging-summary {
  min-width: 1120px;
  margin: 0 18px 18px;
}

.moego-timeline {
  min-width: 980px;
  margin: 16px;
  overflow: hidden;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
}

.moego-timeline-head {
  display: grid;
  place-items: center;
  min-height: 52px;
  border-bottom: 1px solid #e7e9ee;
  background: #fff;
  text-align: center;
}

.moego-timeline-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.moego-timeline-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.moego-timeline-grid {
  display: grid;
  grid-template-columns: 64px minmax(720px, 1fr);
  min-height: 1008px;
}

.moego-time-axis {
  display: grid;
  grid-template-rows: repeat(14, 72px);
  border-right: 1px solid #e7e9ee;
  background: #fff;
}

.moego-hour-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 72px;
  border-top: 1px solid #eef1f5;
  padding: 10px 8px 0 0;
}

.moego-hour-row:first-child {
  border-top: 0;
}

.moego-hour-row span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}

.moego-lane {
  position: relative;
  min-height: 1008px;
  overflow: hidden;
  background:
    repeating-linear-gradient(to bottom, rgba(231, 233, 238, 0.85) 0 1px, transparent 1px 24px),
    linear-gradient(#f7f9fc, #f7f9fc);
}

.moego-lane.is-drag-target {
  outline: 2px solid rgba(17, 112, 96, 0.28);
  outline-offset: -2px;
  background:
    repeating-linear-gradient(to bottom, rgba(231, 233, 238, 0.85) 0 1px, transparent 1px 24px),
    linear-gradient(rgba(17, 112, 96, 0.06), rgba(17, 112, 96, 0.06)),
    linear-gradient(#f7f9fc, #f7f9fc);
}

.moego-closed-band {
  position: absolute;
  top: var(--top);
  right: 0;
  left: 0;
  z-index: 1;
  height: var(--height);
  background: repeating-linear-gradient(135deg, #d7d7d7 0 2px, #ececec 2px 5px);
  opacity: 0.8;
}

.moego-current-time {
  position: absolute;
  top: var(--top);
  right: 0;
  left: 0;
  z-index: 9;
  height: 1px;
  background: #e34b42;
}

.moego-current-time span {
  position: absolute;
  top: -3px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e34b42;
}

.moego-appointment {
  position: absolute;
  top: var(--top);
  left: var(--left);
  z-index: 6;
  display: grid;
  width: var(--width, min(430px, calc(100% - var(--left) - 18px)));
  min-height: 48px;
  height: max(48px, var(--height));
  overflow: hidden;
  border: 1px solid #d9e2ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(25, 32, 48, 0.08);
  cursor: default;
  padding: 8px 10px 8px 18px;
}

.moego-appointment.has-actions {
  padding-right: 110px;
}

.moego-appointment[draggable="true"] {
  cursor: grab;
}

.moego-appointment[draggable="true"]:active {
  cursor: grabbing;
}

.moego-appointment.is-grooming {
  border-color: #c7dde4;
}

.moego-appointment.is-grooming.is-checked-in {
  border-color: #9dd7b5;
  background: #ecfdf3;
}

.moego-appointment.is-tour {
  border-color: #d7cfef;
}

.moego-appointment.is-block {
  border-color: #c6cbd4;
  background: #f3f4f6;
}

.moego-appointment.is-staff {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.moego-appointment.is-resizing {
  outline: 2px solid rgba(17, 112, 96, 0.34);
  outline-offset: 2px;
}

.moego-resize-handle {
  position: absolute;
  right: 8px;
  left: 8px;
  z-index: 12;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: ns-resize;
}

.moego-resize-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: rgba(80, 92, 112, 0.55);
  transform: translateX(-50%);
}

.moego-resize-handle.is-start {
  top: 1px;
}

.moego-resize-handle.is-start::after {
  top: 2px;
}

.moego-resize-handle.is-end {
  bottom: 1px;
}

.moego-resize-handle.is-end::after {
  bottom: 2px;
}

.moego-appointment-body {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
}

.moego-appointment-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  gap: 5px;
}

.moego-appointment-actions .round-action {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  font-size: 15px;
  box-shadow: none;
}

.moego-appointment-actions .round-action svg {
  width: 16px;
  height: 16px;
}

.moego-appointment-body button,
.moego-appointment-body strong {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moego-appointment-body small,
.moego-appointment-body em {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moego-appointment.is-tour .moego-appointment-body {
  gap: 5px;
}

.moego-appointment.is-tour .moego-appointment-body em {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.tour-calendar-range {
  min-width: 980px;
  margin: 16px;
  overflow: hidden;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
}

.tour-calendar-range > header {
  display: grid;
  gap: 3px;
  place-items: center;
  min-height: 54px;
  border-bottom: 1px solid #e7e9ee;
  text-align: center;
}

.tour-calendar-range > header strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.tour-calendar-range > header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.tour-calendar-weekdays,
.tour-calendar-range-grid.is-week,
.tour-calendar-range-grid.is-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.tour-calendar-weekdays {
  border-bottom: 1px solid #edf0f5;
  background: #f8fafc;
}

.tour-calendar-weekdays span {
  padding: 10px 12px;
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.tour-calendar-range-grid.is-week {
  min-height: 520px;
}

.tour-calendar-range-grid.is-month {
  min-height: 720px;
}

.tour-calendar-range-grid.is-month > div.is-muted {
  background: #f7f8fb;
}

.tour-calendar-day {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 150px;
  border-right: 1px solid #edf0f5;
  border-bottom: 1px solid #edf0f5;
  background: #fff;
}

.tour-calendar-day.is-selected {
  box-shadow: inset 0 0 0 2px rgba(17, 112, 96, 0.28);
}

.tour-calendar-day.is-today header strong {
  background: #0d6b61;
  color: #fff;
}

.tour-calendar-day header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px;
}

.tour-calendar-day header button {
  border: 0;
  background: transparent;
  color: inherit;
}

.tour-calendar-day header button:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-weight: 900;
}

.tour-calendar-day header strong {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
}

.tour-calendar-day header span {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}

.tour-day-add {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d7dee8 !important;
  border-radius: 50%;
  color: #0d6b61 !important;
  font-size: 18px;
  line-height: 1;
}

.tour-calendar-day-items {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 0 8px 10px;
}

.tour-calendar-card {
  display: grid;
  gap: 3px;
  border-left: 4px solid #747b8f;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(25, 32, 48, 0.08);
  padding: 8px;
}

.tour-calendar-card.is-converted {
  opacity: 0.62;
}

.tour-calendar-card.is-block {
  border-left-color: #9aa3b2;
  background: #f3f4f6;
}

.tour-calendar-card header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
}

.tour-calendar-card header span {
  flex: 0 0 auto;
  color: #667085;
  font-size: 11px;
  font-weight: 950;
}

.tour-calendar-card header button {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-calendar-card small {
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-empty-slot {
  min-height: 42px;
  border: 1px dashed #cfd6e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #667085;
  font-weight: 900;
}

.moego-appointment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.moego-appointment-badges span {
  border-radius: 4px;
  background: #eef2f7;
  color: #344054;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  padding: 3px 5px;
}

.moego-appointment-badges .is-paid {
  background: #e7f8ee;
  color: #177245;
}

.moego-empty-lane {
  position: absolute;
  top: 216px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  border: 1px dashed #cfd6e1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  padding: 12px 16px;
}

.moego-assignment-board {
  display: grid;
  gap: 12px;
  min-width: 980px;
  margin: 16px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.moego-assignment-board > header {
  align-items: flex-start;
}

.moego-assignment-board > header > div:first-child {
  display: grid;
  gap: 2px;
}

.moego-assignment-board .calendar-stats {
  margin: 0;
}

.lodging-calendar-board {
  display: grid;
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.lodging-calendar-unassigned,
.lodging-calendar-room,
.staff-calendar-board {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.lodging-calendar-unassigned {
  position: sticky;
  top: 76px;
  z-index: 4;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.lodging-calendar-unassigned header > div,
.lodging-calendar-room header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lodging-calendar-unassigned header small {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef2f7;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.lodging-calendar-unassigned > div,
.lodging-calendar-rooms {
  display: grid;
  gap: 10px;
}

.lodging-calendar-room {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.lodging-calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
}

.lodging-calendar-cell {
  display: grid;
  grid-template-rows: auto minmax(72px, 1fr);
  gap: 8px;
  min-height: 126px;
  border: 1px solid #e0ded7;
  border-radius: 8px;
  background: #fbfaf6;
  padding: 8px;
}

.lodging-calendar-cell.is-booked {
  border-color: #b9d4ef;
  background: #f5f9ff;
}

.lodging-calendar-cell.is-dirty {
  border-color: #f3c98b;
  background: #fff8ed;
}

.lodging-calendar-cell.is-cat-unit {
  border-color: #7ac7bb;
  background: #f1fbf8;
}

.lodging-calendar-cell.is-drag-target,
.lodging-calendar-unassigned.is-drag-target {
  border-color: #0b7cff;
  box-shadow: inset 0 0 0 2px rgba(11, 124, 255, 0.18);
}

.lodging-calendar-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lodging-calendar-cell-head strong {
  color: var(--accent);
  font-size: 18px;
  font-weight: 950;
}

.lodging-calendar-cell-head span,
.lodging-empty-slot {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.lodging-calendar-cell-body {
  display: grid;
  align-content: start;
  gap: 6px;
}

.lodging-reservation-card {
  position: relative;
  display: grid;
  min-height: 82px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: grab;
  padding: 8px 8px 8px 17px;
}

.lodging-reservation-card:active {
  cursor: grabbing;
}

.lodging-reservation-card.is-compact {
  min-height: 74px;
}

.lodging-reservation-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.lodging-reservation-name {
  appearance: none;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lodging-reservation-name:hover,
.lodging-reservation-name:focus-visible {
  color: var(--accent);
  outline: 0;
  text-decoration: underline;
}

.lodging-reservation-main > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.staff-calendar-board {
  display: grid;
  gap: 10px;
  min-width: 980px;
  margin: 0 16px 16px;
  padding: 10px;
}

.staff-shift-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}

.staff-shift-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-left: 6px solid #1d4ed8;
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.staff-shift-card strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.staff-shift-card span,
.staff-shift-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 1100px) {
  .moego-calendar-shell {
    grid-template-columns: 1fr;
  }

  .moego-calendar-sidebar {
    position: relative;
    z-index: 42;
    grid-template-columns: minmax(220px, 280px) minmax(180px, 1fr) minmax(220px, 280px);
    border-right: 0;
    border-bottom: 1px solid #e7e9ee;
  }

  .moego-toolbar {
    grid-template-columns: 1fr;
    min-width: 760px;
  }

  .moego-toolbar-actions {
    justify-content: flex-start;
  }

  .lodging-calendar-board {
    grid-template-columns: 1fr;
  }

  .lodging-calendar-unassigned {
    position: static;
  }
}

@media (max-width: 760px) {
  .calendar-suite-board {
    border-radius: 0;
  }

  .moego-calendar-sidebar {
    grid-template-columns: 1fr;
  }

  .moego-toolbar,
  .moego-timeline,
  .moego-assignment-board,
  .staff-calendar-board {
    min-width: 680px;
  }

  .moego-toolbar-left,
  .moego-toolbar-date,
  .moego-toolbar-actions {
    flex-wrap: wrap;
  }
}

.trend-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #7a4b00;
  border-radius: 8px;
  background: #fff7e6;
  color: #7a4b00;
  font-size: 24px;
  font-weight: 950;
}

.sync-button {
  min-height: 42px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  padding: 0 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
}

.calendar-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.calendar-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  min-width: 0;
  text-align: left;
}

button.calendar-stat {
  cursor: pointer;
  appearance: none;
  font: inherit;
  color: inherit;
}

button.calendar-stat:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.calendar-stat.is-active {
  border-color: var(--accent);
  background: #f0fbf7;
  box-shadow: inset 0 0 0 1px rgba(17, 97, 91, .12), 0 4px 12px rgba(17, 97, 91, .08);
}

.calendar-stat strong {
  display: block;
  color: var(--accent);
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.calendar-stat.is-total {
  border-color: #7a4b00;
  background: #fff7e6;
}

.calendar-stat.is-total strong,
.calendar-stat.is-total span {
  color: #7a4b00;
  font-weight: 950;
}

.calendar-stat span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.calendar-stat small {
  display: block;
  margin-top: 6px;
  color: var(--warning);
  font-size: 12px;
  font-weight: 950;
}

.calendar-split-stat small {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  color: var(--muted);
}

.calendar-split-stat small span {
  white-space: nowrap;
}

.calendar-split-stat small b {
  color: var(--accent);
  font-size: 11px;
}

.appointment-total {
  min-width: 0;
}

.calendar-requested-stat {
  border-color: #cfe0f4;
  background: #f7fbff;
}

.calendar-requested-stat strong {
  color: #1f5d99;
}

.calendar-stat.is-final-total {
  border-color: #1d6f5b;
  background: #eefaf6;
  box-shadow: inset 0 0 0 1px rgba(17, 97, 91, .08);
}

.calendar-stat.is-final-total strong,
.calendar-stat.is-final-total span,
.calendar-stat.is-final-total small b {
  color: #0f6c4f;
}

.calendar-tab-strip {
  grid-template-columns: 58px repeat(5, minmax(0, 1fr));
  gap: 0;
  position: relative;
  align-items: stretch;
  border: 1px solid #cfdad5;
  border-radius: 6px 6px 0 0;
  background: #e7efeb;
  padding: 4px 4px 0;
  box-shadow: inset 0 -1px 0 #cfdad5;
}

.calendar-tab-strip .calendar-stat {
  display: grid;
  align-content: center;
  position: relative;
  align-self: stretch;
  min-height: 82px;
  border: 1px solid var(--tab-border, #d5e1dc);
  border-bottom-color: #cfdad5;
  border-radius: 4px 4px 0 0;
  background: var(--tab-bg, #edf4f1);
  box-shadow: inset 0 3px 0 var(--tab-accent, var(--accent));
  padding: 8px 11px 9px;
  transition: none;
  z-index: 1;
}

.calendar-tab-strip [data-calendar-home-tab] {
  --tab-accent: #9d2f8a;
  --tab-bg: #fff0fb;
  --tab-active-bg: #ffe4f7;
  --tab-border: #edb9e0;
  --tab-ring: rgba(157, 47, 138, .28);
}

.calendar-tab-strip [data-calendar-reservation-view="checkins"] {
  --tab-accent: #b23a5b;
  --tab-bg: #fff1f4;
  --tab-active-bg: #ffe2e9;
  --tab-border: #ebb4c1;
  --tab-ring: rgba(178, 58, 91, .28);
}

.calendar-tab-strip [data-calendar-reservation-view="checkouts"] {
  --tab-accent: #5861b8;
  --tab-bg: #f1f2ff;
  --tab-active-bg: #e5e7ff;
  --tab-border: #bec3f0;
  --tab-ring: rgba(88, 97, 184, .28);
}

.calendar-tab-strip [data-calendar-reservation-view="appointments"] {
  --tab-accent: #a15c12;
  --tab-bg: #fff5e8;
  --tab-active-bg: #ffe8c6;
  --tab-border: #e7bf8f;
  --tab-ring: rgba(161, 92, 18, .28);
}

.calendar-tab-strip [data-open-requested-tasks] {
  --tab-accent: #0e7490;
  --tab-bg: #ecfeff;
  --tab-active-bg: #cffafe;
  --tab-border: #a5f3fc;
  --tab-ring: rgba(14, 116, 144, .28);
}

.calendar-tab-strip [data-calendar-reservation-view="total"] {
  --tab-accent: #374151;
  --tab-bg: #f3f4f6;
  --tab-active-bg: #e5e7eb;
  --tab-border: #cbd5e1;
  --tab-ring: rgba(55, 65, 81, .28);
}

.calendar-tab-strip .calendar-stat + .calendar-stat {
  margin-left: -1px;
}

.calendar-tab-strip button.calendar-stat:hover {
  border-color: var(--tab-accent, #c3d2cc);
  background: var(--tab-active-bg, #f9fcfb);
  box-shadow: inset 0 3px 0 var(--tab-accent, var(--accent));
  z-index: 2;
}

.calendar-tab-strip .calendar-stat.is-active {
  border-color: var(--tab-accent, #c3d2cc);
  border-bottom-color: #fff;
  background: var(--tab-accent, var(--accent));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .32);
  color: #fff;
  z-index: 4;
}

.calendar-tab-strip .calendar-stat.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 3px;
  background: #fff;
}

.calendar-tab-strip .calendar-requested-stat,
.calendar-tab-strip .calendar-stat.is-final-total {
  border-color: var(--tab-border, #d5e1dc);
  border-bottom-color: #cfdad5;
  background: var(--tab-bg, #edf4f1);
}

.calendar-tab-strip .calendar-stat.is-final-total.is-active {
  border-color: var(--tab-accent, #c3d2cc);
  border-bottom-color: #fff;
  background: var(--tab-accent, var(--accent));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .32);
}

.calendar-tab-strip .calendar-stat.is-final-total strong,
.calendar-tab-strip .calendar-stat.is-final-total span,
.calendar-tab-strip .calendar-stat.is-final-total small b {
  color: var(--tab-accent, var(--accent));
}

.calendar-tab-strip .calendar-stat strong {
  color: var(--tab-accent, var(--accent));
  font-size: 22px;
}

.calendar-tab-strip .calendar-stat span {
  margin-top: 3px;
}

.calendar-tab-strip .calendar-stat small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
}

.calendar-tab-strip .calendar-stat small b {
  color: var(--tab-accent, var(--accent));
}

.calendar-tab-strip .calendar-stat.is-active strong,
.calendar-tab-strip .calendar-stat.is-active span,
.calendar-tab-strip .calendar-stat.is-active small,
.calendar-tab-strip .calendar-stat.is-active small b,
.calendar-tab-strip .calendar-stat.is-active .calendar-tab-home-icon {
  color: #fff;
}

.calendar-tab-strip .calendar-split-stat small {
  gap: 2px 7px;
}

.calendar-tab-home {
  justify-items: center;
  text-align: center;
}

.calendar-tab-home .calendar-tab-home-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  color: var(--tab-accent, var(--accent));
}

.calendar-tab-home .calendar-tab-home-icon svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.calendar-tab-home span:last-child {
  color: var(--tab-accent, var(--accent));
  font-size: 10px;
}

.calendar-reservation-page {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.calendar-reservation-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.calendar-reservation-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 950;
  line-height: 1.05;
}

.calendar-reservation-head span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.calendar-reservation-table-card {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.calendar-reservation-table th button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
  text-transform: inherit;
}

.calendar-reservation-cell-button {
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  line-height: inherit;
  padding: 0;
  text-align: left;
  white-space: normal;
}

.calendar-reservation-cell-label.is-pet {
  color: var(--accent);
  font-weight: 850;
  line-height: inherit;
}

.calendar-reservation-cell-button.is-service {
  color: var(--ink);
  font-weight: 750;
}

.calendar-reservation-cell-button.is-time {
  color: var(--grooming);
  font-weight: 900;
}

.calendar-reservation-cell-button:hover,
.calendar-reservation-cell-button:focus-visible {
  color: #084f45;
  text-decoration: underline;
  outline: 0;
}

.calendar-reservation-status-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-reservation-row.is-clickable {
  cursor: pointer;
}

.calendar-reservation-row.is-clickable:hover td {
  background: #f8fbfa;
}

.calendar-reservation-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 136px;
}

.calendar-reservation-actions .round-action {
  flex: 0 0 auto;
}

.calendar-reservation-row-action {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 7px 10px;
}

.calendar-reservation-row-action.is-checkout {
  border-color: #0f766e;
  background: #0f766e;
}

.calendar-reservation-row-action.is-checkin {
  border-color: #2563eb;
  background: #2563eb;
}

.calendar-reservation-row-action.is-checkout:hover,
.calendar-reservation-row-action.is-checkout:focus-visible {
  background: #0b5f59;
  border-color: #0b5f59;
  outline: 2px solid rgba(15, 118, 110, 0.22);
  outline-offset: 2px;
}

.calendar-reservation-row-action.is-checkin:hover,
.calendar-reservation-row-action.is-checkin:focus-visible {
  background: #1d4ed8;
  border-color: #1d4ed8;
  outline: 2px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

.calendar-reservation-empty-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

.calendar-detail {
  max-width: 680px;
}

.calendar-detail-list {
  display: grid;
  gap: 14px;
  overflow: auto;
}

.calendar-detail-section {
  display: grid;
  gap: 8px;
}

.calendar-detail-section h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.calendar-detail-section h3 span {
  color: var(--accent);
}

.calendar-detail-item {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.calendar-detail-item strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.calendar-detail-item span,
.calendar-detail-item small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.calendar-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.calendar-appointment-section {
  --calendar-section-accent: #a15c12;
  --calendar-section-bg: #fff5e8;
  --calendar-section-border: #e7bf8f;
  display: grid;
  gap: 8px;
  border: 1px solid var(--calendar-section-border);
  border-radius: 8px;
  background: var(--calendar-section-bg);
  box-shadow: inset 0 4px 0 var(--calendar-section-accent);
  padding: 8px;
}

.calendar-search-panel {
  display: grid;
  gap: 10px;
  border: 1px solid #b8d8d2;
  border-radius: 8px;
  background: #f7fffc;
  padding: 10px;
}

.calendar-header .calendar-search-panel {
  position: relative;
  z-index: 30000;
  isolation: isolate;
  align-self: center;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.calendar-search-box {
  display: grid;
  gap: 6px;
}

.calendar-search-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calendar-search-box input {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  padding: 0 14px;
}

.calendar-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 8px;
}

.calendar-header .calendar-search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 30010;
  grid-template-columns: 1fr;
  max-height: min(60dvh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.18);
  padding: 8px;
}

.calendar-search-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.calendar-search-card.is-history {
  background: #fbfaf6;
}

.calendar-search-photo {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #edf5f2;
  color: var(--accent);
  font-weight: 950;
}

.calendar-search-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.calendar-search-photo svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.calendar-search-photo.is-communication {
  border: 1px solid #cfe4de;
  background: #f7fbf9;
  color: #0f6b5d;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calendar-search-name-button,
.calendar-search-card strong,
.calendar-search-card span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-search-name-button,
.calendar-search-card strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.15;
}

.calendar-search-name-button {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.calendar-search-name-button:hover,
.calendar-search-name-button:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.calendar-search-card span {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: normal;
}

.calendar-search-card .calendar-search-photo .photo-fallback-letter {
  display: grid;
  align-items: center;
  justify-content: center;
  place-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  white-space: normal;
}

.calendar-search-card span b {
  color: var(--muted);
  font-weight: 850;
}

.calendar-search-card .calendar-search-location-line {
  gap: 4px 10px;
  margin-top: 2px;
  color: #58645f;
}

.calendar-search-card .calendar-search-location-line b {
  color: #58645f;
  font-size: 11px;
  font-weight: 900;
}

.calendar-search-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.calendar-search-name-row .calendar-search-name-button {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}

.completed-reservation-badge {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border: 1px solid #b8d9d2;
  border-radius: 999px;
  background: #e8f4f1;
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  padding: 0 6px;
  white-space: nowrap;
}

.completed-reservation-badge.is-new {
  min-width: 34px;
  border-color: #e8cb82;
  background: #fff8dd;
  color: #886012;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dog-title-line .completed-reservation-badge,
.calendar-dog-name-line .completed-reservation-badge {
  flex: 0 0 auto;
}

/* Returning grooming client marker (scissors) on roster tiles. */
.grooming-return-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1px solid color-mix(in srgb, #6d28d9 45%, #fff);
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  padding: 0;
  vertical-align: middle;
}

.grooming-return-badge svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dog-title-line .grooming-return-badge {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

.dog-title-line .grooming-return-badge svg {
  width: 12px;
  height: 12px;
}

.play-group-dog .grooming-return-badge {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

.calendar-search-card .calendar-search-count-bubble {
  margin-top: 1px;
}

.dog-title-line .dog-completed-badge {
  width: auto;
  height: 18px;
  min-width: 18px;
  font-size: 10px;
  padding: 0 5px;
}

.dog-title-line .dog-completed-badge.is-new {
  min-width: 30px;
  font-size: 9px;
}

.calendar-dog-name-line .calendar-dog-completed-badge {
  height: 19px;
  min-width: 19px;
  font-size: 11px;
  padding: 0 6px;
}

.calendar-dog-name-line .calendar-dog-completed-badge.is-new {
  min-width: 32px;
  font-size: 9px;
}

.calendar-search-type {
  display: block;
  margin-bottom: 2px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calendar-search-card em {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #7c6f5b;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-search-inline-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 0;
  text-align: left;
}

.calendar-search-inline-button:hover,
.calendar-search-inline-button:focus-visible {
  color: #084f45;
  text-decoration: underline;
  outline: 0;
}

.calendar-search-card mark {
  border-radius: 3px;
  background: #fff3a3;
  color: inherit;
  padding: 0 2px;
}

.calendar-search-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 84px;
}

.calendar-search-icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
}

.calendar-search-icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.calendar-search-icon-button.is-checkin {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.calendar-search-icon-button.is-checkout {
  border-color: #c77f16;
  background: #c77f16;
  color: #fff;
}

.calendar-search-icon-button.is-reservation {
  border-color: #c77f16;
  color: #9a5b08;
}

.calendar-search-icon-button.is-message {
  border-color: #207d68;
  color: #0f6b5d;
}

.calendar-search-icon-button:hover,
.calendar-search-icon-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(11, 124, 255, 0.18);
  outline: 0;
}

.calendar-empty.is-error {
  color: #9f1239;
}

.calendar-dogs {
  display: grid;
  gap: 12px;
}

.calendar-dog-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.calendar-dog-flow.is-single {
  grid-template-columns: 1fr;
}

.calendar-dog-section {
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--calendar-section-border, var(--line));
  border-radius: 8px;
  background: var(--calendar-section-bg, #fff);
  box-shadow: inset 0 4px 0 var(--calendar-section-accent, transparent);
  padding: 10px;
}

.calendar-dog-section.is-checkin {
  --calendar-section-accent: #b23a5b;
  --calendar-section-bg: #fff1f4;
  --calendar-section-border: #ebb4c1;
}

.calendar-dog-section.is-checkout {
  --calendar-section-accent: #5861b8;
  --calendar-section-bg: #f1f2ff;
  --calendar-section-border: #bec3f0;
}

.calendar-dog-section.is-staying {
  background: #f7f9fc;
  border-color: #b8c6d8;
}

.calendar-dog-section.is-drag-target {
  border-color: var(--calendar-section-accent, var(--accent));
  box-shadow: inset 0 4px 0 var(--calendar-section-accent, transparent), 0 0 0 3px rgba(17, 97, 91, 0.16);
}

.calendar-dog-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.calendar-dog-section-title h3 {
  margin: 0;
  color: var(--calendar-section-accent, var(--ink));
  font-size: 17px;
  font-weight: 950;
}

.calendar-dog-section-title span {
  color: var(--calendar-section-accent, var(--muted));
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.calendar-dog-section-title.has-sort {
  align-items: center;
}

.calendar-dog-section-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

.calendar-staying-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.calendar-dog-section-title .calendar-staying-sort span {
  color: #5f6977;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.calendar-staying-sort select {
  min-height: 28px;
  max-width: 150px;
  border: 1px solid #b8c6d8;
  border-radius: 6px;
  background: #fff;
  color: #17324d;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.1;
  padding: 4px 24px 4px 8px;
}

.calendar-dog-section-title .calendar-dog-section-count {
  color: var(--calendar-section-accent, var(--muted));
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.calendar-dog-stack,
.calendar-dog-grid {
  display: grid;
  gap: 7px;
}

.calendar-dog-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: start;
}

.calendar-dog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  align-items: start;
}

.calendar-dog-chip {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 4px 11px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  min-height: 118px;
  overflow: hidden;
  padding: 8px 58px 10px 24px;
}

.calendar-dog-chip:has(.calendar-dog-action-menu:hover),
.calendar-dog-chip:has(.calendar-dog-action-menu:focus-within),
.calendar-dog-chip:has(.calendar-dog-action-menu.is-open) {
  overflow: visible;
  z-index: 5000;
}

.calendar-dog-chip[draggable="true"] {
  cursor: grab;
}

.calendar-dog-chip[data-movement-visits] {
  touch-action: pan-y;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.calendar-dog-chip[data-movement-visits] img {
  -webkit-user-drag: none;
}

.calendar-dog-chip.is-dragging {
  cursor: grabbing;
  opacity: .64;
}

.calendar-dog-chip.is-cat,
.calendar-dog-chip.has-cat {
  border-color: #d9ad76;
  background: linear-gradient(135deg, #fffaf1 0%, #ffffff 54%, #eefaf8 100%);
  box-shadow: inset 4px 0 0 #c27a28;
}

.calendar-dog-chip.is-cat .calendar-dog-name,
.calendar-dog-chip.has-cat .calendar-dog-name {
  color: #8a4b0f;
}

.calendar-pet-type-badge {
  font-size: 9px;
  padding: 2px 5px;
}

.calendar-photo-pet-type-badge {
  justify-self: center;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-search-card.is-cat {
  border-color: #d9ad76;
  background: linear-gradient(135deg, #fffaf1 0%, #ffffff 62%, #eefaf8 100%);
}

.calendar-search-type-badge {
  width: fit-content;
  margin-bottom: 3px;
}

.movement-drag-ghost {
  position: fixed;
  z-index: 1000;
  display: grid;
  gap: 2px;
  min-width: 112px;
  max-width: 178px;
  border: 2px solid var(--accent);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow);
}

.movement-drag-ghost strong,
.movement-drag-ghost span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.movement-drag-ghost strong {
  font-size: 14px;
  font-weight: 950;
  line-height: 1.05;
}

.movement-drag-ghost span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

@media (max-width: 640px) {
  .dog-card,
  .calendar-dog-chip[data-movement-visits],
  .lodging-reservation-card[draggable="false"],
  .moego-lodging-reservation-bar[draggable="false"],
  .moego-appointment[draggable="false"],
  .task-booking-row[draggable="false"],
  .calendar-event[draggable="false"] {
    cursor: pointer;
    touch-action: pan-x pan-y;
    user-select: auto;
    -webkit-user-select: auto;
    -webkit-user-drag: none;
  }

  .dog-card:active,
  .calendar-dog-chip[draggable="false"]:active,
  .lodging-reservation-card[draggable="false"]:active,
  .moego-lodging-reservation-bar[draggable="false"]:active,
  .moego-appointment[draggable="false"]:active,
  .task-booking-row[draggable="false"]:active,
  .calendar-event[draggable="false"]:active {
    cursor: pointer;
  }
}

body.is-movement-dragging,
body.is-movement-dragging .calendar-dog-chip[data-movement-visits] {
  cursor: grabbing;
  touch-action: none;
}

.calendar-dog-chip.is-checkout {
  grid-template-columns: 60px minmax(0, 1fr);
}

.calendar-dog-photo {
  grid-column: 1;
  grid-row: 1;
  width: 52px;
  height: 52px;
  border-radius: 7px;
  object-fit: cover;
  object-position: center 38%;
  background: #eef2f0;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 950;
}

.photo-frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0;
  transition: opacity 120ms ease;
}

.photo-frame.has-loaded img {
  opacity: 1;
}

.photo-frame.is-broken img {
  display: none;
}

.photo-frame.has-loaded .photo-fallback-letter {
  opacity: 0;
}

.is-disabled-photo {
  filter: grayscale(1);
  opacity: .58;
}

.is-disabled-photo img,
.is-disabled-photo .photo-fallback-letter {
  filter: grayscale(1);
}

.photo-fallback-letter {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--accent);
  font-size: inherit;
  font-weight: 950;
  line-height: 1;
}

.is-birthday-photo {
  position: relative;
  isolation: isolate;
  box-shadow:
    0 0 0 3px #8b5cf6,
    0 0 0 6px #ec4899,
    0 0 0 9px #38bdf8,
    0 10px 22px rgba(124, 58, 237, 0.28);
}

.is-birthday-photo img {
  z-index: 1;
}

.is-birthday-photo .photo-fallback-letter {
  position: relative;
  z-index: 1;
}

.is-birthday-photo::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px dashed rgba(255, 255, 255, 0.96);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

.is-birthday-photo::after {
  content: "BIRTHDAY";
  position: absolute;
  right: 5px;
  bottom: 5px;
  max-width: calc(100% - 10px);
  border: 1px solid rgba(59, 130, 246, 0.38);
  border-radius: 999px;
  background: linear-gradient(135deg, #fdf2ff 0%, #e0f2fe 100%);
  color: #7e22ce;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  padding: 3px 5px;
  pointer-events: none;
  text-align: center;
  z-index: 3;
}

.calendar-dog-photo.is-birthday-photo::after,
.checkout-total-dog-photo.is-birthday-photo::after,
.checkin-stack-photo.is-birthday-photo::after,
.checkin-tab-photo.is-birthday-photo::after {
  content: "BDAY";
  right: 3px;
  bottom: 3px;
  font-size: 7px;
  padding: 2px 3px;
}

.calendar-dog-chip .calendar-dog-photo.is-birthday-photo::before,
.calendar-dog-chip .calendar-dog-photo.is-birthday-photo::after {
  display: none;
}

.photo-upload-placeholder {
  position: relative;
  overflow: hidden;
}

.photo-upload-placeholder .photo-add-badge,
.owner-photo-upload .photo-add-badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #9dcfc5;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  z-index: 2;
}

.calendar-dog-photo.has-vaccine-alert {
  border-width: 3px;
}

.dog-name-agreement-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #ff4dab;
  border-radius: 5px;
  background: #ff1493;
  color: #fff;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
}

.dog-name-agreement-alert svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-dog-details {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-self: start;
  padding-right: 2px;
  padding-bottom: 44px;
}

.calendar-dog-chip strong,
.calendar-dog-chip span {
  display: block;
}

.calendar-dog-chip strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.calendar-dog-name {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-dog-chip span {
  overflow-wrap: normal;
  word-break: normal;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.18;
}

.calendar-dog-chip .service-rail {
  display: flex;
}

.calendar-dog-chip .service-label {
  display: inline-flex;
  color: var(--service-color, #475569);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.calendar-dog-time {
  position: absolute;
  left: 24px;
  bottom: 10px;
  display: grid;
  gap: 1px;
  align-items: center;
  width: 78px;
  min-width: 0;
  text-align: left;
}

.calendar-dog-time b {
  display: block;
  color: var(--accent);
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 950;
  line-height: 0.95;
  white-space: nowrap;
}

.calendar-dog-chip.has-dayplay .calendar-dog-time b {
  color: #065f46;
}

.calendar-dog-chip.has-boarding .calendar-dog-time b {
  color: #1d4ed8;
}

.calendar-dog-chip.has-grooming:not(.has-dayplay):not(.has-boarding) .calendar-dog-time b {
  color: #7c3aed;
}

.calendar-dog-time span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 950;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.calendar-dog-actions {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: max-content;
}

.calendar-owner-line {
  position: absolute;
  right: 58px;
  bottom: 9px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: end;
  gap: 4px;
  width: max-content;
  max-width: 46%;
  text-align: right;
}

.calendar-owner-line > span {
  min-width: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-align: right;
}

.parent-contact-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.parent-contact-actions button {
  position: relative;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

.parent-contact-actions svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.round-action {
  position: relative;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}

.round-action svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.round-action.is-checkin {
  background: #207d68;
  box-shadow: 0 8px 18px rgba(32, 125, 104, 0.22);
}

.round-action.is-checkout {
  background: #b9791f;
  box-shadow: 0 8px 18px rgba(185, 121, 31, 0.2);
}

.round-action.is-undo {
  background: #58799d;
  box-shadow: 0 8px 18px rgba(88, 121, 157, 0.18);
}

.round-action.is-edit {
  background: #4f5b55;
  box-shadow: 0 8px 18px rgba(79, 91, 85, 0.16);
}

.round-action.is-convert {
  background: #0f766e;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.18);
}

.round-action.is-no-show {
  background: #b42318;
  box-shadow: 0 8px 18px rgba(180, 35, 24, 0.18);
}

.round-action.is-print {
  border: 1px solid #d7dde6;
  background: #ffffff;
  color: #475569;
  box-shadow: 0 8px 18px rgba(71, 85, 105, 0.12);
}

.round-action.is-more {
  border: 1px solid #d7dde6;
  background: #ffffff;
  color: #475569;
  box-shadow: 0 8px 18px rgba(71, 85, 105, 0.12);
}

.calendar-dog-action-menu {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.calendar-dog-action-menu:hover,
.calendar-dog-action-menu:focus-within,
.calendar-dog-action-menu.is-open {
  z-index: 5001;
}

.calendar-dog-action-menu-panel {
  position: absolute;
  top: calc(100% - 2px);
  bottom: auto;
  right: 0;
  z-index: 5002;
  display: grid;
  gap: 2px;
  min-width: 168px;
  padding: 5px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
  transform: translateY(2px);
  visibility: hidden;
}

.calendar-dog-action-menu:hover .calendar-dog-action-menu-panel,
.calendar-dog-action-menu:focus-within .calendar-dog-action-menu-panel,
.calendar-dog-action-menu.is-open .calendar-dog-action-menu-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.calendar-dog-action-menu:focus-within .round-action.is-more::before,
.calendar-dog-action-menu:focus-within .round-action.is-more::after,
.calendar-dog-action-menu:hover .round-action.is-more::before,
.calendar-dog-action-menu:hover .round-action.is-more::after,
.calendar-dog-action-menu.is-open .round-action.is-more::before,
.calendar-dog-action-menu.is-open .round-action.is-more::after {
  display: none;
}

.calendar-dog-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #263b36;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 7px 8px;
  text-align: left;
}

.calendar-dog-menu-item:hover,
.calendar-dog-menu-item:focus-visible {
  background: #eef6f4;
  outline: none;
}

.calendar-dog-menu-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-dog-menu-item.is-print {
  color: #475569;
}

.calendar-dog-menu-item.is-note {
  color: #64748b;
}

.calendar-dog-menu-item.is-undo {
  color: #58799d;
}

.calendar-dog-menu-item.is-checkout {
  color: #0f766e;
}

.calendar-dog-menu-item.is-cancel {
  color: #991b1b;
}

.calendar-dog-menu-item.is-cancel:hover,
.calendar-dog-menu-item.is-cancel:focus-visible {
  background: #fff1f2;
}

.calendar-dog-menu-symbol {
  display: grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.dog-icon-token:hover::after,
.dog-icon-token:focus-visible::after {
  content: attr(data-tooltip);
}

.parent-contact-actions button:hover::after,
.parent-contact-actions button:focus-visible::after,
.pet-profile-corner-action:hover::after,
.pet-profile-corner-action:focus-visible::after,
.pet-profile-icon-button:hover::after,
.pet-profile-icon-button:focus-visible::after,
.round-action:hover::after,
.round-action:focus-visible::after {
  content: attr(data-tooltip);
}

.dog-icon-token:hover::after,
.dog-icon-token:focus-visible::after,
.parent-contact-actions button:hover::after,
.parent-contact-actions button:focus-visible::after,
.pet-profile-corner-action:hover::after,
.pet-profile-corner-action:focus-visible::after,
.pet-profile-icon-button:hover::after,
.pet-profile-icon-button:focus-visible::after,
.round-action:hover::after,
.round-action:focus-visible::after {
  position: absolute;
  z-index: 50;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 7px;
  background: #111827;
  color: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  padding: 7px 9px;
  pointer-events: none;
  white-space: nowrap;
}

.dog-icon-strip,
.calendar-dog-name-line {
  overflow: visible;
}

.dog-icon-token {
  overflow: visible;
}

.dog-icon-token:hover::before,
.dog-icon-token:focus-visible::before,
.parent-contact-actions button:hover::before,
.parent-contact-actions button:focus-visible::before,
.pet-profile-corner-action:hover::before,
.pet-profile-corner-action:focus-visible::before,
.pet-profile-icon-button:hover::before,
.pet-profile-icon-button:focus-visible::before,
.round-action:hover::before,
.round-action:focus-visible::before {
  content: "";
  position: absolute;
  z-index: 51;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #111827;
  pointer-events: none;
}

.checkin-overlay {
  position: fixed;
  inset: 0;
  z-index: 60000;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background: rgba(20, 24, 22, 0.34);
  padding: 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.reservation-overlay {
  position: fixed;
  inset: 0;
  z-index: 60000;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background: rgba(20, 24, 22, 0.34);
  padding: clamp(18px, 4vw, 64px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.suggestion-overlay {
  position: fixed;
  inset: 0;
  z-index: 60020;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 22, 0.34);
  padding: clamp(14px, 4vw, 42px);
  overflow: auto;
}

.suggestion-dialog {
  display: grid;
  gap: 16px;
  width: min(560px, 100%);
  /* Must subtract the overlay's own padding (clamp(14px, 4vw, 42px) each side),
     not a flat 28px. When the dialog cap exceeded the overlay's padded content
     area it was grid-centred and overflowed top AND bottom equally, and a
     centred grid overflow can't be scrolled to — so the submit button at the
     bottom got clipped and staff "can't submit". Capping to the padded area
     keeps the dialog fully on-screen and lets its own overflow:auto reveal the
     footer. */
  max-height: calc(100dvh - clamp(28px, 8vw, 84px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.24);
  padding: clamp(16px, 3vw, 22px);
}

.suggestion-dialog-header,
.suggestion-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.suggestion-view-all {
  display: inline-block;
  margin: 4px 0 2px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent, #d6336c);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.suggestion-view-all:hover {
  text-decoration: underline;
}

.suggestion-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.suggestion-preview {
  display: grid;
  gap: 8px;
  margin: 0;
}

.suggestion-preview img,
.suggestion-preview-empty {
  width: 100%;
  max-height: min(260px, 36dvh);
  aspect-ratio: 16 / 8;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
}

.suggestion-preview img {
  display: block;
  object-fit: cover;
}

.suggestion-preview-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.suggestion-preview figcaption,
.suggestion-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.suggestion-status.is-error {
  color: #b91c1c;
}

.suggestion-status.is-ok {
  color: var(--accent);
}

.suggestion-field {
  display: grid;
  gap: 7px;
}

.suggestion-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.suggestion-field textarea,
.suggestion-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  padding: 11px 12px;
  outline: 0;
}

.suggestion-field textarea {
  min-height: 130px;
  resize: vertical;
}

.suggestion-field select {
  min-height: 44px;
}

.suggestion-field textarea:focus,
.suggestion-field select:focus {
  border-color: #0b7cff;
  box-shadow: 0 0 0 3px rgba(11, 124, 255, 0.16);
}

.suggestion-actions {
  justify-content: flex-end;
}

.quick-reservation-overlay {
  position: fixed;
  inset: 0;
  z-index: 60000;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background: rgba(20, 24, 22, 0.36);
  padding: clamp(12px, 3vw, 34px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.quick-reservation-modal {
  display: grid;
  gap: 14px;
  width: min(880px, calc(100vw - 24px));
  max-height: min(920px, calc(100dvh - 24px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20, 24, 22, 0.28);
  padding: 18px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.app:has(.checkin-overlay, .reservation-overlay, .quick-reservation-overlay, .suggestion-overlay) .board-panel,
.app:has(.checkin-overlay, .reservation-overlay, .quick-reservation-overlay, .suggestion-overlay) .room-board {
  overflow: visible;
}

/* Staff "Live now" camera preview modal */
.camera-live-modal {
  width: min(760px, calc(100vw - 24px));
  gap: 16px;
}

.camera-live-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.camera-live-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.camera-live-overlay-msg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  color: #f3f4f6;
  background: rgba(8, 11, 10, 0.78);
  font-size: 14px;
  font-weight: 600;
}

.camera-live-overlay-msg[hidden] {
  display: none;
}

.camera-live-overlay-msg.is-error {
  color: #fecaca;
}

.camera-live-overlay-msg.is-error .camera-live-spinner {
  display: none;
}

.camera-live-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: camera-live-spin 0.8s linear infinite;
}

@keyframes camera-live-spin {
  to { transform: rotate(360deg); }
}

.app:has(.checkin-overlay, .reservation-overlay, .quick-reservation-overlay, .suggestion-overlay) .room-board {
  -webkit-overflow-scrolling: auto;
}

.quick-reservation-head,
.quick-reservation-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  margin: -18px -18px 0;
  padding: 16px 18px;
}

.cancel-reason-modal .cancel-reason-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 4px;
}

.cancel-reason-modal .cancel-reason-option {
  width: 100%;
  text-align: center;
}

.cancel-reason-modal .cancel-reason-other {
  display: grid;
  gap: 5px;
  margin: 8px 0 2px;
}

.cancel-reason-modal .cancel-reason-other span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.cancel-reason-modal .cancel-reason-other input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  padding: 10px;
}

.quick-reservation-head h2 {
  margin: 2px 0 0;
  font-size: 24px;
  line-height: 1.1;
}

.quick-reservation-head .checkin-close {
  position: static;
  flex: 0 0 auto;
}

.quick-reservation-actions {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  margin: 0 -18px -18px;
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: #fff;
}

.quick-reservation-submit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.quick-reservation-section,
.quick-option-block {
  display: grid;
  gap: 10px;
}

.quick-grooming-override-banner {
  padding: 12px 14px;
  border: 1px solid var(--danger, #d14343);
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger, #d14343) 8%, transparent);
}

.quick-grooming-override-banner h3 {
  color: var(--danger, #d14343);
}

.reservation-grooming-override-banner {
  padding: 12px 14px;
  border: 1px solid var(--danger, #d14343);
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger, #d14343) 8%, transparent);
}

.reservation-grooming-override-banner h3 {
  color: var(--danger, #d14343);
}

.quick-reservation-section h3,
.quick-option-block > strong {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quick-reservation-type-grid,
.quick-check-grid,
.quick-weekday-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quick-reservation-type,
.quick-reservation-pet-card,
.quick-check-option,
.quick-weekday-option,
.quick-selected-pet,
.quick-package-option,
.quick-payment-option,
.quick-package-summary {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
}

.quick-reservation-type,
.quick-reservation-pet-card {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px;
}

.quick-reservation-type svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-reservation-type span,
.quick-reservation-pet-card span,
.quick-selected-pet div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quick-reservation-type strong,
.quick-reservation-pet-card strong,
.quick-selected-pet strong {
  font-size: 14px;
  font-weight: 950;
}

.quick-reservation-type small,
.quick-reservation-pet-card small,
.quick-selected-pet span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-reservation-type.is-active,
.quick-check-option.is-active,
.quick-weekday-option.is-selected,
.quick-package-option.is-active,
.quick-payment-option.is-active {
  border-color: var(--accent);
  background: #eef8f5;
  color: var(--accent);
}

.quick-reservation-search,
.quick-notes,
.quick-reservation-grid label,
.quick-recurrence-grid label {
  display: grid;
  gap: 5px;
}

.quick-reservation-pet-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.quick-new-client-button {
  min-height: 40px;
  white-space: nowrap;
}

.quick-new-client-button svg {
  width: 18px;
  height: 18px;
}

.quick-reservation-search span,
.quick-notes span,
.quick-reservation-grid label span,
.quick-recurrence-grid label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.quick-reservation-search input,
.quick-notes textarea,
.quick-reservation-grid input,
.quick-reservation-grid select,
.quick-recurrence-grid input,
.quick-recurrence-grid select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  padding: 9px 10px;
}

.quick-notes textarea {
  min-height: 78px;
  resize: vertical;
}

.quick-reservation-pet-results {
  display: grid;
  gap: 8px;
}

.quick-selected-pets {
  display: grid;
  gap: 8px;
}

.quick-selected-pets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quick-selected-pets-head span {
  min-width: 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quick-selected-pet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.quick-checkin-selection-full {
  display: grid;
  gap: 3px;
  border: 1px solid #87b7a9;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: #eef8f5;
  color: var(--ink);
  padding: 10px 12px;
}

.quick-checkin-selection-full strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
}

.quick-checkin-selection-full span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quick-reservation-warning {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #facc15;
  border-radius: 8px;
  background: #fff7d6;
  color: #7c2d12;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  padding: 10px 12px;
}

.quick-reservation-warning .secondary-button {
  min-height: 32px;
  white-space: nowrap;
}

.quick-grooming-availability {
  border: 1px solid #9bd4ca;
  border-radius: 8px;
  background: #f2fbf9;
  padding: 10px;
}

.quick-grooming-availability-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quick-grooming-availability-head > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quick-grooming-availability-head strong {
  color: var(--accent);
  font-size: 15px;
  font-weight: 950;
}

.quick-grooming-availability-head span,
.quick-grooming-range {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.quick-grooming-availability-nav {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.quick-grooming-availability-nav .secondary-button {
  min-height: 34px;
  padding: 7px 10px;
}

.quick-grooming-days {
  display: grid;
  gap: 10px;
}

.quick-grooming-day {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.quick-grooming-day h4 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.quick-grooming-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px;
}

.quick-grooming-slot {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  padding: 9px 10px;
}

.quick-grooming-slot strong {
  color: var(--accent);
  font-size: 16px;
  font-weight: 950;
}

.quick-grooming-slot span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-grooming-slot.is-active {
  border-color: var(--accent);
  background: #e5f7f2;
  box-shadow: inset 0 0 0 1px rgba(16, 120, 103, 0.18);
}

.quick-reservation-grid,
.quick-recurrence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-reservation-grid .is-wide {
  grid-column: 1 / -1;
}

.quick-client-overlay {
  position: fixed;
  inset: 0;
  z-index: 20020;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 22, 0.46);
  padding: clamp(12px, 3vw, 30px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.quick-client-modal {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(var(--app-visual-viewport-height, 100dvh) - var(--system-announcement-height, 0px) - 24px);
}

.quick-client-section {
  display: grid;
  gap: 10px;
}

.quick-client-section h4 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quick-client-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-client-grid label,
.quick-client-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.quick-client-grid label span,
.quick-client-notes span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.quick-client-grid input,
.quick-client-grid select,
.quick-client-notes textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  padding: 9px 10px;
}

.quick-client-notes textarea {
  min-height: 78px;
  resize: vertical;
}

.quick-client-checkbox {
  align-content: end;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 40px;
}

.care-modal.quick-client-modal .quick-client-grid label,
.care-modal.quick-client-modal .quick-client-notes {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.care-modal.quick-client-modal .quick-client-checkbox {
  grid-template-columns: auto minmax(0, 1fr);
}

@media (max-width: 480px) {
  .quick-client-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quick-client-grid > label,
  .quick-client-grid input,
  .quick-client-grid select {
    min-width: 0;
  }
}

.quick-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-radio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quick-radio-option,
.quick-stay-select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
}

.quick-radio-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.quick-radio-option.is-active {
  border-color: var(--accent);
  background: #eef8f5;
  color: var(--accent);
}

.quick-radio-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quick-radio-option strong {
  font-size: 14px;
  font-weight: 950;
}

.quick-radio-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quick-stay-select {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 10px;
}

.quick-stay-select span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.quick-stay-select select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  padding: 9px 10px;
}

.quick-package-grid,
.quick-payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quick-package-grid.is-columned {
  align-items: start;
  gap: 10px;
}

.quick-package-column {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.quick-package-column.is-other {
  grid-column: 1 / -1;
}

.quick-package-column h4 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quick-package-stack {
  display: grid;
  gap: 8px;
}

.quick-payment-grid {
  margin: 0;
  border: 0;
  padding: 0;
}

.quick-payment-grid legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quick-check-option,
.quick-toggle-row,
.quick-weekday-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  font-size: 14px;
  font-weight: 900;
}

.quick-package-option,
.quick-payment-option,
.quick-package-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
}

.quick-payment-option {
  grid-template-columns: auto minmax(0, 1fr);
}

.quick-package-option span,
.quick-payment-option span,
.quick-package-summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quick-package-option strong,
.quick-payment-option strong,
.quick-package-summary strong {
  font-size: 14px;
  font-weight: 950;
}

.quick-package-option small,
.quick-payment-option small,
.quick-package-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-package-option b,
.quick-package-summary b {
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.quick-package-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  background: #f4fbf8;
}

.quick-package-option.is-full-day-package,
.quick-package-summary.is-full-day-package {
  --package-bg-5: #edf8f1;
  --package-bg-10: #d7f0e2;
  --package-bg-20: #bde3d1;
  --package-border-5: #a9d9bd;
  --package-border-10: #70bd92;
  --package-border-20: #328457;
  --package-ink: #17402a;
}

.quick-package-option.is-half-day-package,
.quick-package-summary.is-half-day-package {
  --package-bg-5: #fff7e5;
  --package-bg-10: #ffe6b0;
  --package-bg-20: #f3cb73;
  --package-border-5: #e7c46e;
  --package-border-10: #c9871e;
  --package-border-20: #8f5b08;
  --package-ink: #4c340a;
}

.quick-package-option.is-5-credit-package,
.quick-package-summary.is-5-credit-package {
  border-color: var(--package-border-5, var(--line));
  background: var(--package-bg-5, #fdfcf8);
  color: var(--package-ink, var(--ink));
}

.quick-package-option.is-10-credit-package,
.quick-package-summary.is-10-credit-package {
  border-color: var(--package-border-10, var(--line));
  background: var(--package-bg-10, #fdfcf8);
  color: var(--package-ink, var(--ink));
}

.quick-package-option.is-20-credit-package,
.quick-package-summary.is-20-credit-package {
  border-color: var(--package-border-20, var(--line));
  background: var(--package-bg-20, #fdfcf8);
  color: var(--package-ink, var(--ink));
}

.quick-package-option.is-active {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 38%, transparent);
}

.quick-package-option.is-unavailable {
  cursor: not-allowed;
  opacity: 0.58;
}

.quick-addon-accordion {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
}

.quick-addon-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.quick-addon-toggle span:first-child {
  display: grid;
  gap: 2px;
}

.quick-addon-toggle strong {
  font-size: 14px;
  font-weight: 950;
}

.quick-addon-toggle small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quick-addon-chevron svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.16s ease;
}

.quick-addon-accordion.is-open .quick-addon-chevron svg {
  transform: rotate(90deg);
}

.quick-addon-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 10px;
}

.quick-collapsible-block {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
}

.quick-collapsible-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  color: var(--ink);
  padding: 10px;
  text-align: left;
  cursor: pointer;
  list-style: none;
}

.quick-collapsible-summary::-webkit-details-marker {
  display: none;
}

.quick-collapsible-summary > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quick-collapsible-summary strong {
  font-size: 14px;
  font-weight: 950;
}

.quick-collapsible-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-collapsible-chevron svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.16s ease;
}

.quick-collapsible-block[open] .quick-collapsible-chevron svg {
  transform: rotate(90deg);
}

.quick-collapsible-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 10px;
}

.quick-reservation-care-fields {
  grid-template-columns: minmax(0, 1fr);
}

.quick-reservation-care-field,
.quick-notes-inline {
  display: grid;
  gap: 5px;
}

.quick-reservation-care-field span,
.quick-notes-inline span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.quick-reservation-care-field textarea,
.quick-notes-inline textarea {
  width: 100%;
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  padding: 9px 10px;
  resize: vertical;
}

.addon-category-select {
  display: grid;
  gap: 5px;
  min-width: 180px;
}

.addon-category-select span,
.addon-category-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.addon-category-select select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 8px 10px;
}

.addon-category-group[hidden] {
  display: none !important;
}

.addon-choice-list {
  display: grid;
  gap: 8px;
}

.addon-choice-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.addon-choice-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.addon-choice-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.addon-days-control {
  display: grid;
  flex: 0 0 82px;
  gap: 3px;
  margin-left: auto;
  min-width: 72px;
}

.addon-schedule-control {
  display: grid;
  grid-template-columns: minmax(132px, 1fr);
  gap: 6px;
  align-items: end;
  margin-left: auto;
  min-width: 150px;
}

.addon-schedule-control[data-addon-has-quantity="true"] {
  grid-template-columns: minmax(132px, 1fr) 108px;
}

.addon-date-options {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.addon-schedule-control[hidden],
.addon-date-options[hidden],
.addon-days-control[hidden] {
  display: none !important;
}

.addon-date-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  min-height: 30px;
  padding: 5px 8px;
}

.addon-date-option input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

.addon-date-rule-control {
  display: grid;
  gap: 3px;
  position: relative;
}

.addon-days-control > span,
.addon-date-rule-control > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.addon-date-rule-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.addon-date-rule-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17px;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 5px 8px;
  text-align: left;
}

.addon-date-rule-trigger [data-addon-date-rule-label] {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.addon-date-rule-trigger svg {
  width: 15px;
  height: 15px;
  justify-self: end;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.addon-date-rule-menu {
  position: fixed;
  z-index: 90000;
  top: 0;
  left: 0;
  display: grid;
  min-width: min(340px, 92vw);
  width: max(100%, 300px);
  max-height: min(60vh, 360px);
  overflow-y: auto;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(28, 26, 21, 0.16);
  padding: 8px;
}

.addon-date-rule-option {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  min-height: 36px;
  padding: 8px 10px;
  text-align: left;
}

.addon-date-rule-option:hover,
.addon-date-rule-option:focus-visible,
.addon-date-rule-option.is-selected {
  background: #fbf1e8;
  color: #1f1f1f;
}

.addon-date-rule-option.is-selected {
  font-weight: 950;
}

.addon-quantity-stepper {
  display: grid;
  grid-template-columns: 30px minmax(30px, 1fr) 30px;
  align-items: center;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.addon-quantity-stepper input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  border: 0;
  border-inline: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  padding: 4px 2px;
  text-align: center;
}

.addon-quantity-stepper input::-webkit-inner-spin-button,
.addon-quantity-stepper input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.addon-quantity-step {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 32px;
  border: 0;
  background: #f0efeb;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.addon-days-control.is-disabled input,
.addon-days-control input:disabled,
.addon-quantity-step:disabled {
  background: #eceae4;
  color: var(--muted);
  opacity: 0.8;
}

.quick-check-option input,
.quick-toggle-row input,
.quick-weekday-option input,
.quick-package-option input,
.quick-payment-option input,
.quick-radio-option input {
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.quick-recurrence-block {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.quick-weekday-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.quick-weekday-option {
  justify-content: center;
  padding: 8px 6px;
}

.quick-date-summary {
  border: 1px dashed #b7cfc8;
  border-radius: 8px;
  background: #f4fbf8;
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  padding: 10px;
}

.quick-deposit-card-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-deposit-card-status svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.quick-deposit-card-status.no-card {
  border-color: #d5d9d7;
  background: #f7f8f7;
  color: var(--muted);
}

.quick-deposit-card-status.card-unknown {
  border-color: #c9d6dd;
  background: #f4f8fa;
  color: #415864;
}

.quick-recurrence-summary {
  display: grid;
  gap: 4px;
  border: 1px solid #87b7a9;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: #eef8f5;
  color: var(--ink);
  padding: 10px 12px;
}

.quick-recurrence-summary span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quick-recurrence-summary strong {
  font-size: 14px;
  font-weight: 950;
}

.quick-checkin-modal {
  width: min(640px, calc(100vw - 24px));
}

.half-day-checkin-modal {
  width: min(700px, calc(100vw - 24px));
}

.quick-checkin-service,
.quick-checkin-time-grid label {
  display: grid;
  gap: 5px;
}

.quick-checkin-service span,
.quick-checkin-time-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quick-checkin-service select,
.quick-checkin-time-grid select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  padding: 9px 10px;
}

.quick-checkin-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quick-checkin-time-grid input[type="time"],
.quick-checkin-time-grid select {
  width: 100%;
  min-height: 62px;
  border: 1px solid #9dcfc5;
  border-radius: 8px;
  background: #f7fffc;
  color: var(--accent);
  font: inherit;
  font-size: 30px;
  font-weight: 1000;
  padding: 0 10px;
}

.quick-checkin-time-grid select {
  appearance: auto;
  cursor: pointer;
}

.half-day-checkin-note {
  display: grid;
  gap: 4px;
  border: 1px solid #f3c56d;
  border-radius: 8px;
  background: #fff8e8;
  color: #3d2f12;
  padding: 10px 12px;
}

.half-day-checkin-note strong {
  font-size: 14px;
  font-weight: 950;
}

.half-day-checkin-note span {
  color: #6b561d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.half-day-checkin-reminder {
  display: grid;
  gap: 10px;
  border: 1px solid #f3c56d;
  border-radius: 8px;
  background: #fff8e8;
  padding: 16px;
}

.half-day-checkin-reminder span {
  color: #8a640e;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.half-day-checkin-reminder strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.15;
}

.half-day-checkin-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.half-day-checkin-times div {
  display: grid;
  gap: 3px;
  border: 1px solid #f3d894;
  border-radius: 8px;
  background: #fffdf6;
  padding: 9px 10px;
}

.half-day-checkin-times div span {
  color: #8a640e;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.half-day-checkin-times div strong {
  color: var(--accent);
  font-size: 20px;
  line-height: 1.1;
}

.half-day-checkin-reminder p {
  margin: 0;
  color: #5f4a17;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.45;
}

.luxury-bedroom-checkin-reminder {
  display: grid;
  gap: 10px;
  border: 1px solid #9dcfc5;
  border-radius: 8px;
  background: #f4fbf9;
  padding: 16px;
}

.luxury-bedroom-checkin-reminder > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.luxury-bedroom-checkin-reminder > strong {
  color: var(--ink);
  font-size: 21px;
  font-weight: 950;
  line-height: 1.2;
}

.luxury-bedroom-checkin-reminder ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 22px;
}

.luxury-bedroom-checkin-reminder li {
  color: #25423c;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.half-day-grooming-schedule {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid #d7dfe8;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
}

.half-day-grooming-head {
  display: grid;
  gap: 3px;
}

.half-day-grooming-head span,
.half-day-grooming-row label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.half-day-grooming-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.half-day-grooming-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(110px, 0.8fr) repeat(2, minmax(112px, 0.8fr));
  gap: 8px;
  align-items: end;
  border-top: 1px solid #e3e8ef;
  padding-top: 10px;
}

.half-day-grooming-row > div {
  display: grid;
  gap: 2px;
  align-self: center;
  min-width: 0;
}

.half-day-grooming-row > div strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.half-day-grooming-row > div span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.half-day-grooming-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.half-day-grooming-row input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cdd7e3;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  padding: 0 8px;
}

@media (max-width: 760px) {
  .quick-reservation-overlay {
    align-items: start;
    padding: 4px;
  }

  .quick-reservation-modal {
    gap: 8px;
    width: calc(100vw - 8px);
    /* Track the visible viewport (shrinks for the iOS software keyboard) rather
       than a fixed 100dvh so the booking fields stay above the keyboard instead
       of hiding behind it (report dd844e48). */
    max-height: calc(var(--app-visual-viewport-height, 100dvh) - 8px);
    border-radius: 8px;
    padding: 10px;
  }

  .quick-reservation-head,
  .quick-reservation-actions {
    margin-right: -10px;
    margin-left: -10px;
    padding: 10px;
  }

  .quick-reservation-head {
    gap: 8px;
  }

  .quick-reservation-head h2 {
    font-size: 20px;
  }

  .quick-reservation-section,
  .quick-option-block {
    gap: 7px;
  }

  .quick-reservation-section h3,
  .quick-option-block > strong {
    font-size: 11px;
  }

  .quick-reservation-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .quick-reservation-submit-actions {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }

  .quick-reservation-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .quick-reservation-type {
    min-height: 44px;
    gap: 7px;
    padding: 7px 8px;
  }

  .quick-reservation-type svg {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
  }

  .quick-reservation-type strong,
  .quick-reservation-pet-card strong,
  .quick-selected-pet strong {
    font-size: 13px;
  }

  .quick-reservation-type small {
    font-size: 11px;
    line-height: 1.12;
    white-space: normal;
  }

  .quick-reservation-pet-tools {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .quick-reservation-grid,
  .quick-recurrence-grid,
  .quick-check-grid,
  .quick-radio-grid,
  .quick-package-grid,
  .quick-payment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .quick-reservation-grid > label:first-child,
  .quick-package-grid,
  .quick-payment-grid {
    grid-column: 1 / -1;
  }

  .quick-reservation-search input,
  .quick-reservation-grid input,
  .quick-reservation-grid select,
  .quick-recurrence-grid input,
  .quick-recurrence-grid select {
    min-height: 36px;
    padding: 7px 8px;
  }

  .quick-weekday-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .quick-collapsible-summary,
  .quick-collapsible-body,
  .quick-check-option,
  .quick-toggle-row,
  .quick-radio-option,
  .quick-package-option,
  .quick-payment-option,
  .quick-package-summary {
    padding: 8px;
  }

  .quick-collapsible-body {
    gap: 8px;
  }

  .quick-new-client-button {
    min-height: 36px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .quick-new-client-button svg {
    display: none;
  }

  .quick-reservation-pet-results .calendar-empty {
    min-height: 42px;
    padding: 8px;
    font-size: 13px;
    line-height: 1.2;
  }

  .quick-selected-pet {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .quick-selected-pet .text-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .quick-reservation-warning {
    grid-template-columns: 1fr;
  }

  .quick-reservation-warning .secondary-button {
    justify-self: start;
  }

  .quick-grooming-availability-head {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-grooming-availability-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-checkin-time-grid {
    grid-template-columns: 1fr;
  }

  .half-day-grooming-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .quick-client-overlay {
    align-items: start;
    padding: 4px;
  }

  .quick-client-modal {
    width: calc(100vw - 8px);
    max-height: calc(var(--app-visual-viewport-height, 100dvh) - var(--system-announcement-height, 0px) - 8px);
    gap: 10px;
    border-radius: 8px;
    padding: 12px;
  }

  .quick-client-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quick-client-modal .care-modal-head {
    position: sticky;
    top: -12px;
    z-index: 2;
    background: #fff;
    margin: -12px -12px 0;
    padding: 12px 50px 12px 12px;
  }

  .quick-client-modal .quick-client-actions {
    position: sticky;
    bottom: -12px;
    z-index: 2;
    background: #fff;
    margin: 0 -12px -12px;
    padding: 12px;
  }
}

.vaccine-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 22, 0.38);
  padding: clamp(6px, 1.2vw, 18px);
  overflow: hidden;
}

.vaccine-drawer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  width: min(1500px, calc(100vw - 32px));
  height: min(980px, calc(100dvh - 16px));
  max-height: calc(100dvh - 16px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(20, 24, 22, 0.28);
  padding: 10px;
}

.vaccine-drawer-head {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-radius: 10px;
  background: #f8f7f2;
  padding: 8px 50px 8px 10px;
}

.vaccine-drawer-head h2 {
  color: var(--ink);
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.vaccine-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.vaccine-pet-photo {
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
  background: #ebe8df;
  color: var(--accent);
  font-size: 24px;
  font-weight: 950;
}

.vaccine-drawer-head .checkin-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.vaccine-drawer-head .vaccine-request-record-button {
  margin-right: 40px;
}

.label-manager-head .checkin-close,
.vaccine-drawer-head .checkin-close,
.reservation-title-row .checkin-close,
.checkin-panel > .checkin-close,
.checkin-head .checkin-close {
  flex: 0 0 auto;
}

.vaccine-workspace {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(720px, 1.28fr);
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.vaccine-document-panel,
.vaccine-entry-panel {
  display: grid;
  gap: 7px;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}

.vaccine-document-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  position: relative;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.vaccine-document-panel.is-dragging-file {
  border-color: var(--accent);
  background: #f1fbf8;
  box-shadow: inset 0 0 0 2px rgba(15, 112, 101, 0.18);
}

.vaccine-entry-panel {
  align-content: start;
  min-width: 0;
  /* Must scroll vertically so the Save Vaccinations action at the bottom
     stays reachable on shorter desktop/tablet viewports; clip only the
     horizontal axis to avoid a stray sideways scrollbar. */
  overflow-x: hidden;
  overflow-y: auto;
}

.upload-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid #9dcfc5;
  border-radius: 999px;
  background: #f1fbf8;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
  padding: 0 12px;
}

.upload-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.vaccine-drop-hint {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed #9dcfc5;
  border-radius: 10px;
  background: #f7fffc;
  color: var(--accent);
  padding: 10px 12px;
}

.vaccine-document-panel.is-dragging-file .vaccine-drop-hint {
  display: flex;
}

.vaccine-drop-hint strong {
  font-size: 14px;
  font-weight: 950;
}

.vaccine-drop-hint span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.vaccine-document-preview {
  display: grid;
  place-items: center;
  min-height: clamp(180px, 34dvh, 460px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.vaccine-document-preview img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
}

.vaccine-document-preview iframe {
  width: 100%;
  height: 100%;
  min-height: clamp(180px, 34dvh, 460px);
  border: 0;
  background: #fff;
}

.document-preview-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 8px 8px 0;
}

.vaccine-open-record-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid #b8d8d2;
  border-radius: 8px;
  background: #f1fbf8;
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  padding: 0 11px;
  text-decoration: none;
  white-space: nowrap;
}

.vaccine-open-record-link:hover,
.vaccine-open-record-link:focus-visible {
  border-color: var(--accent);
  background: #e4f6f1;
}

.document-empty,
.document-file-preview,
.vaccine-progress {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
  padding: 18px;
  text-align: center;
}

.vaccine-progress {
  width: min(460px, 82%);
}

.vaccine-progress strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

.vaccine-progress span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vaccine-progress-track {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border: 1px solid #9dcfc5;
  border-radius: 999px;
  background: #e8f4f1;
}

.vaccine-progress-track div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #2b8f84);
  transition: width 180ms ease;
}

.vaccine-progress small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.document-file-preview strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.document-file-preview a {
  color: var(--accent);
  font-weight: 950;
}

.vaccine-document-list {
  display: grid;
  gap: 8px;
}

.vaccine-document-item {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto 42px 36px;
  align-items: stretch;
}

.vaccine-document-item .vaccine-open-record-link {
  min-height: 54px;
}

.vaccine-extract-button {
  border: 1px solid rgba(13, 110, 103, 0.35);
  border-radius: 8px;
  background: rgba(13, 110, 103, 0.08);
  color: var(--teal-dark);
  font-weight: 900;
  min-height: 54px;
}

.vaccine-document-list button[data-vaccine-doc] {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 9px;
  text-align: left;
}

.vaccine-document-list button[data-vaccine-doc].is-active {
  border-color: #8ecbbf;
  background: #f1fbf8;
}

.vaccine-document-list button[data-vaccine-doc].needs-review {
  border-color: #d7a647;
  background: #fff8e7;
  box-shadow: inset 4px 0 0 #b47a12;
}

.vaccine-delete-button {
  align-items: center;
  background: #fff1f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b91c1c;
  display: inline-flex;
  font-size: 25px;
  font-weight: 950;
  justify-content: center;
  line-height: 1;
  min-height: 54px;
  padding: 0;
}

.vaccine-delete-button:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.vaccine-document-list strong {
  font-size: 13px;
  font-weight: 950;
}

.vaccine-document-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.vaccine-entry-panel h3,
.vet-editor h3 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.05;
}

.vaccine-owner-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 6px;
}

.vaccine-record-stats,
.pet-record-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 5px 0 4px;
}

.vaccine-record-stats strong,
.pet-record-stats strong {
  color: var(--vaccine-ok-color);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 950;
  line-height: 1;
}

.vaccine-record-stats strong + strong::before,
.pet-record-stats strong + strong::before {
  content: "|";
  margin-right: 14px;
  color: #b6d5cb;
}

.vaccine-owner-phone {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vaccine-owner-phone:hover {
  color: #0b4d48;
}

.vaccine-name-flag {
  display: grid;
  gap: 3px;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 13px;
  font-weight: 850;
  padding: 10px 12px;
}

.vaccine-name-flag strong {
  color: #7f1d1d;
  font-size: 14px;
  font-weight: 950;
}

.vaccine-date-lock-notice {
  border: 1px solid #f0c36b;
  border-radius: 8px;
  background: #fff8e1;
  color: #7a4b00;
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
}

.vaccine-date-lock-notice.is-alert {
  border-color: #d7a647;
  box-shadow: inset 4px 0 0 #b47a12;
}

.vaccine-grid-head,
.vaccine-edit-row {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(140px, 150px) minmax(92px, 104px) minmax(82px, 96px) minmax(92px, 116px);
  gap: 10px;
  align-items: center;
  justify-content: start;
}

.vaccine-grid-head {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
}

.vaccine-check-head {
  justify-self: center;
  line-height: 1.08;
  text-align: center;
  white-space: normal;
}

.vaccine-edit-list {
  display: grid;
  gap: 3px;
}

.vaccine-edit-row {
  border-bottom: 1px solid var(--line);
  min-height: 30px;
  padding-bottom: 3px;
}

.vaccine-edit-row.is-missing {
  border: 1px solid #f2d067;
  border-radius: 8px;
  background: #fff9dc;
  padding: 3px 5px;
}

.vaccine-edit-row.is-expired {
  border: 1px solid #fca5a5;
  border-radius: 8px;
  background: #fef2f2;
  padding: 3px 5px;
}

.vaccine-edit-row.is-age-deferred {
  border: 1px solid #9dcfc5;
  border-radius: 8px;
  background: #f1fbf8;
  padding: 3px 5px;
}

.vaccine-edit-row.is-date-locked input[type="date"] {
  border-style: dashed;
  border-color: #d1b56d;
  background: #f5f0df;
  color: #806528;
  cursor: not-allowed;
}

.vaccine-name-static {
  min-height: 26px;
  display: grid;
  align-items: center;
  gap: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  padding: 0;
}

.vaccine-name-static small {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
}

.vaccine-source-note {
  justify-self: start;
  border: 1px solid #d8d2c0;
  border-radius: 999px;
  background: #f7f3e8;
  color: #5d5747;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  padding: 6px 8px;
  white-space: nowrap;
}

.vaccine-source-note.is-empty {
  color: var(--muted);
  opacity: 0.78;
}

.vaccine-edit-row input {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 3px 7px;
}

.vaccine-date-field {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 4px;
  align-items: center;
  width: 100%;
}

.vaccine-date-field input[type="text"] {
  width: 100%;
  min-width: 0;
}

.vaccine-date-picker-button {
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #eefaf7;
  color: var(--accent);
  cursor: pointer;
}

.vaccine-date-picker-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vaccine-date-picker-button:hover,
.vaccine-date-picker-button:focus-visible {
  border-color: var(--accent);
  background: #ddf5ef;
}

.vaccine-date-picker-native {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px !important;
  min-height: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.vaccine-edit-row.is-expired .vaccine-date-field input[type="text"] {
  border-color: #fca5a5;
  color: #991b1b;
  background: #fff7f7;
}

.vaccine-edit-row.is-missing .vaccine-date-field input[type="text"] {
  border-color: #e8c14d;
  background: #fffdf1;
}

.vaccine-edit-row.is-missing .vaccine-name-static {
  color: #7a4b00;
}

.vaccine-edit-row.is-expired .vaccine-name-static {
  color: #991b1b;
}

.vaccine-edit-row.is-expired .vaccine-date-field input[type="text"] {
  font-weight: 950;
}

.exempt-placeholder {
  justify-self: center;
  color: var(--muted);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.review-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 26px;
  height: 26px;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  padding: 0;
}

.review-check input {
  min-height: auto;
  width: 14px;
  height: 14px;
  padding: 0;
  accent-color: var(--accent);
}

.review-check span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vet-source-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  border-radius: 999px;
  background: #eaf6f3;
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  padding: 2px 6px;
  text-transform: none;
}

.vet-source-badge.is-ai {
  background: #fff5df;
  color: #9a6400;
}

.vet-source-badge.is-google {
  background: #e7f3ff;
  color: #0b63ce;
}

.vet-source-badge.is-osm {
  background: #edf8e8;
  color: #2d6a1f;
}

.vet-source-badge.is-directory {
  background: #eef2f7;
  color: #475569;
}

.vet-editor {
  display: grid;
  gap: 6px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.vet-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 8px;
  min-width: 0;
}

.vet-record-indicator {
  display: grid;
  gap: 2px;
  border: 1px solid #f2d067;
  border-left: 5px solid #d4a812;
  border-radius: 8px;
  background: #fff9dc;
  color: #6f4b00;
  font-size: 12px;
  font-weight: 850;
  padding: 6px 8px;
}

.vet-record-indicator strong {
  color: #5f3d00;
  font-size: 13px;
  font-weight: 950;
}

.vet-form-grid label.is-wide {
  grid-column: 1 / -1;
}

.vaccine-entry-panel .vet-form-grid label {
  gap: 3px;
}

.vaccine-entry-panel .vet-form-grid label > span {
  font-size: 10px;
}

.vaccine-entry-panel .vet-form-grid input {
  min-height: 30px;
  border-radius: 7px;
  font-size: 13px;
  padding: 5px 8px;
}

.vaccine-entry-panel .vet-form-grid input:invalid {
  border-color: #fca5a5;
  background: #fff7f7;
}

.vet-clinic-field {
  position: relative;
}

.vet-suggestions {
  position: absolute;
  z-index: 8;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 35px rgba(30, 41, 59, 0.16);
}

.vet-suggestions[hidden] {
  display: none;
}

.vet-suggestions button {
  display: grid;
  gap: 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  padding: 8px 10px;
  text-align: left;
}

.vet-suggestions button:hover {
  background: #f1fbf8;
}

.vet-suggestions strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vet-suggestions span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vaccine-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  /* Pin the Save/Cancel bar to the bottom of the scrolling entry panel so
     the Save Vaccinations button is always reachable, never clipped. */
  position: sticky;
  bottom: 0;
  margin-top: 4px;
  padding-top: 8px;
  background: linear-gradient(to top, #fff 72%, rgba(255, 255, 255, 0));
}

@media (max-width: 1320px) {
  .vaccine-overlay {
    padding: 8px;
  }

  .vaccine-drawer {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    gap: 8px;
    border-radius: 10px;
    padding: 10px;
  }

  .vaccine-drawer-head {
    min-height: 0;
    padding: 8px 48px 8px 8px;
  }

  .vaccine-drawer-head h2 {
    font-size: 24px;
  }

  .vaccine-pet-photo {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    font-size: 20px;
  }

  .vaccine-workspace {
    grid-template-columns: minmax(0, 0.68fr) minmax(560px, 1.32fr);
    gap: 8px;
  }

  .vaccine-document-panel,
  .vaccine-entry-panel {
    gap: 8px;
    padding: 8px;
  }

  .vaccine-document-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .vaccine-document-preview,
  .vaccine-document-preview iframe {
    min-height: min(30dvh, 320px);
  }

  .vaccine-grid-head,
  .vaccine-edit-row {
    grid-template-columns: minmax(132px, 174px) minmax(124px, 136px) minmax(78px, 86px) minmax(74px, 82px) minmax(78px, 96px);
    gap: 8px;
  }

  .vaccine-grid-head {
    font-size: 10px;
  }

  .vaccine-edit-row input {
    min-height: 30px;
    font-size: 12px;
    padding: 4px 7px;
  }

  .vaccine-name-static {
    min-height: 30px;
    font-size: 13px;
  }

  .review-check {
    width: 24px;
    height: 24px;
    min-height: 24px;
  }

  .review-check input {
    width: 14px;
    height: 14px;
  }

  .review-check span {
    font-size: 10px;
  }
}

@media (max-width: 920px) {
  .vaccine-drawer {
    overflow: auto;
  }

  .vaccine-workspace {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .vaccine-entry-panel .vet-form-grid {
    grid-template-columns: 1fr;
  }

  .vaccine-document-panel,
  .vaccine-entry-panel {
    overflow: visible;
  }

  .vaccine-document-preview,
  .vaccine-document-preview iframe {
    min-height: 260px;
    max-height: 36dvh;
  }
}

@media (max-width: 760px) {
  .vaccine-overlay {
    align-items: stretch;
    padding: 4px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .vaccine-drawer {
    width: calc(100vw - 8px);
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 8px);
    border-radius: 8px;
    gap: 6px;
    align-content: start;
    grid-template-rows: auto auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
  }

  .vaccine-drawer-head {
    padding: 6px 42px 6px 6px;
  }

  .vaccine-drawer-head h2 {
    font-size: 22px;
  }

  .vaccine-title-row {
    gap: 8px;
  }

  .vaccine-pet-photo {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  .vaccine-workspace {
    grid-template-rows: auto auto;
    gap: 6px;
    min-height: 0;
    overflow: visible;
  }

  .vaccine-document-panel,
  .vaccine-entry-panel {
    gap: 5px;
    min-height: 0;
    overflow: visible;
    padding: 6px;
  }

  .vaccine-document-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .vaccine-document-preview,
  .vaccine-document-preview iframe {
    min-height: 64px;
    max-height: none;
  }

  .vaccine-document-list {
    max-height: 42dvh;
    overflow: auto;
  }

  .vaccine-grid-head,
  .vaccine-edit-row {
    grid-template-columns: minmax(112px, 1fr) minmax(118px, 136px) minmax(64px, 76px) minmax(64px, 76px) minmax(72px, 90px);
    gap: 6px;
  }

  .vet-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .vaccine-actions {
    gap: 6px;
  }
}

.reservation-drawer {
  display: grid;
  align-content: start;
  gap: 12px;
  width: min(920px, 100%);
  max-height: min(860px, calc(var(--app-visual-viewport-height, 100dvh) - 56px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20, 24, 22, 0.28);
  padding: 16px;
}

.reservation-title-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  border-radius: 12px;
  background: #fff;
  padding: 4px 52px 8px 0;
}

.reservation-title-row .checkin-close {
  position: absolute;
  top: 0;
  right: 0;
}

.reservation-editor-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-right: 8px;
}

.reservation-editor-nav button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--teal);
  font-size: 22px;
  font-weight: 950;
}

.reservation-editor-nav span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.reservation-title-row h2 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  font-weight: 950;
}

.reservation-title-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.reservation-client-card {
  --reservation-photo-size: 132px;
  position: relative;
  display: grid;
  grid-template-columns: var(--reservation-photo-size) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.reservation-client-card > div,
.reservation-client-card > button,
.reservation-client-card > .reservation-photo,
.reservation-client-card > .photo-frame,
.reservation-client-card > .photo-upload-placeholder {
  position: relative;
  z-index: 2;
}

.reservation-client-card > div {
  min-width: 0;
}

.reservation-client-card.is-birthday-banner {
  border-color: #ef476f;
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 209, 102, 0.95) 0 5px, transparent 6px),
    radial-gradient(circle at 22% 76%, rgba(6, 214, 160, 0.8) 0 4px, transparent 5px),
    radial-gradient(circle at 46% 22%, rgba(17, 138, 178, 0.5) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 72%, rgba(239, 71, 111, 0.72) 0 5px, transparent 6px),
    linear-gradient(120deg, #fff2ad 0%, #ffd6e5 34%, #c8f7ee 68%, #dbeafe 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.72),
    0 16px 34px rgba(239, 71, 111, 0.2);
}

.reservation-client-card.is-birthday-banner::before,
.reservation-client-card.is-birthday-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.reservation-client-card.is-birthday-banner::before {
  opacity: 0.88;
  background:
    linear-gradient(22deg, transparent 0 32px, rgba(239, 71, 111, 0.75) 33px 38px, transparent 39px 96px),
    linear-gradient(128deg, transparent 0 44px, rgba(17, 138, 178, 0.65) 45px 50px, transparent 51px 116px),
    linear-gradient(72deg, transparent 0 56px, rgba(6, 214, 160, 0.74) 57px 62px, transparent 63px 128px),
    linear-gradient(156deg, transparent 0 68px, rgba(255, 209, 102, 0.9) 69px 74px, transparent 75px 140px);
  background-size: 118px 96px, 142px 104px, 132px 92px, 156px 118px;
}

.reservation-client-card.is-birthday-banner::after {
  inset: 8px;
  border: 2px dashed rgba(255, 255, 255, 0.86);
  border-radius: 10px;
}

.reservation-client-card.is-birthday-banner .reservation-pet-name {
  color: #112b57;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.reservation-client-card.is-birthday-banner strong {
  color: #7f1d52;
}

.reservation-client-card.is-birthday-banner span {
  color: #34445f;
}

.reservation-client-card.is-birthday-banner .text-button {
  border-color: rgba(16, 91, 84, 0.28);
  background: rgba(255, 255, 255, 0.68);
  color: #006b64;
}

.reservation-photo {
  width: var(--reservation-photo-size);
  height: var(--reservation-photo-size);
  border-radius: 12px;
  object-fit: cover;
  background: #eef2f0;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 38px;
  font-weight: 950;
}

.reservation-client-card strong,
.reservation-client-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.reservation-pet-name {
  display: block;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 46px;
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
  padding: 0;
  text-align: left;
  white-space: normal;
}

.reservation-client-card strong {
  color: var(--accent);
  font-size: 18px;
  font-weight: 950;
  margin-top: 6px;
}

.reservation-client-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.reservation-client-card .photo-fallback-letter {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--accent);
  font-size: inherit;
  font-weight: 950;
  line-height: 1;
}

.reservation-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.reservation-section-details {
  border-color: #c9d7ea;
  background: #f7fbff;
}

.reservation-section-lodging {
  border-color: #c8dccf;
  background: #f7fcf8;
}

.reservation-section-services {
  border-color: #ead9ad;
  background: #fffaf0;
}

.reservation-section-care {
  border-color: #d6cbea;
  background: #fbf8ff;
}

.reservation-section-notes {
  border-color: #d7d2c6;
  background: #fffdf8;
}

.reservation-section-cancel {
  border-color: #efc4bd;
  background: #fff7f5;
}

.reservation-metadata-section {
  border-color: #c9d7ea;
  background: #f8fbff;
}

.reservation-section h3 {
  margin: 0;
  color: var(--accent);
  font-size: 16px;
  font-weight: 950;
}

.reservation-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.reservation-service-actions,
.reservation-cancel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.reservation-addon-accordion {
  background: #fff;
}

.reservation-addon-body {
  gap: 10px;
}

.reservation-addon-current {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 8px;
}

.reservation-addon-current-list {
  display: grid;
  gap: 6px;
}

.reservation-addon-current-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.reservation-addon-current-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reservation-addon-current-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.reservation-addon-current-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reservation-addon-accordion .addon-choice-row {
  align-items: flex-start;
  background: #fff;
}

.reservation-addon-accordion .addon-choice-row > input {
  margin-top: 3px;
}

.reservation-addon-accordion .addon-choice-row > span {
  flex: 1 1 220px;
}

.reservation-addon-accordion .addon-choice-row:not(:has(input:checked)) .addon-schedule-control {
  display: none;
}

.reservation-addon-accordion .addon-schedule-control {
  flex: 1 1 280px;
  max-width: 430px;
}

.reservation-cancel-row label {
  display: grid;
  flex: 1 1 260px;
  gap: 5px;
}

.reservation-cancel-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reservation-cancel-row select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 10px;
}

.reservation-addon-picker {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1fr) minmax(230px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.reservation-addon-picker.is-simple {
  grid-template-columns: minmax(150px, 0.65fr) minmax(260px, 1.35fr) auto;
}

.reservation-addon-picker > .secondary-button {
  min-height: 38px;
  white-space: nowrap;
}

.reservation-addon-service-groups {
  min-width: 0;
}

.reservation-addon-service-select {
  display: grid;
  gap: 5px;
}

.reservation-addon-service-select span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.reservation-addon-service-select select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 8px 10px;
}

.reservation-addon-days {
  min-width: 300px;
  width: 100%;
}

.reservation-addon-selected {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf7;
  padding: 10px;
}

.reservation-addon-selected-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.reservation-addon-selected-head span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.reservation-addon-selected-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.reservation-addon-selected-list {
  display: grid;
  gap: 7px;
}

.reservation-addon-selected-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.9fr) 34px;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.reservation-addon-selected-row > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reservation-addon-selected-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.reservation-addon-selected-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reservation-selected-addon-days {
  min-width: 300px;
  width: 100%;
}

.reservation-care-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.reservation-care-grid .pet-card {
  border: 1px solid var(--line);
  box-shadow: none;
}

.checkin-care-note-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.checkin-care-note-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.checkin-care-note-field textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
}

.danger-button {
  border: 1px solid #b91c1c;
  border-radius: 8px;
  background: #fff1f2;
  color: #991b1b;
  font: inherit;
  font-weight: 950;
  min-height: 42px;
  padding: 10px 14px;
}

.reservation-checked-in {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eaf9ef;
  color: var(--accent);
  font-weight: 950;
  padding: 10px;
}

.reservation-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.reservation-form-grid label {
  display: grid;
  gap: 5px;
}

.reservation-form-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reservation-form-grid input,
.reservation-form-grid select,
.reservation-section textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 10px;
}

.reservation-form-grid input,
.reservation-form-grid select {
  min-height: 42px;
}

.reservation-form-grid input:disabled,
.reservation-form-grid select:disabled {
  background: #edeae2;
  color: #777;
}

.reservation-section textarea {
  min-height: 74px;
  resize: vertical;
}

.care-sharing-section {
  border-color: #b9d8ec;
  background: #f4fbff;
}

.care-feeding-fields[hidden],
.checkin-feeding-room[hidden],
.checkin-lodging[hidden] {
  display: none;
}

.reservation-money {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.reservation-money div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8f7f2;
  padding: 12px;
}

.reservation-money .reservation-deposit-action {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.reservation-deposit-action label,
.reservation-deposit-action small {
  min-width: 0;
}

.reservation-deposit-action label {
  display: grid;
  gap: 6px;
}

.reservation-deposit-action input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
}

.reservation-deposit-action small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-weight: 700;
}

.reservation-money span,
.reservation-money strong {
  display: block;
}

.reservation-money span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.reservation-money strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.reservation-metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.reservation-metadata-grid article {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid #dce5ee;
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
}

.reservation-metadata-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reservation-metadata-grid strong,
.reservation-metadata-grid small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reservation-metadata-grid strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.reservation-metadata-grid small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reservation-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 8px;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 12px 0 0;
}

.reservation-care-grid .care-table-feeding {
  grid-template-columns: minmax(46px, .5fr) minmax(46px, .45fr) minmax(42px, .4fr) minmax(58px, .7fr) minmax(62px, .8fr) minmax(70px, .95fr) minmax(96px, 1.25fr) 42px;
}

.reservation-care-grid .care-table-medication {
  grid-template-columns: minmax(46px, .5fr) minmax(46px, .45fr) minmax(50px, .6fr) minmax(80px, 1fr) minmax(110px, 1.4fr) 42px;
}

.reservation-care-grid .care-table > b,
.reservation-care-grid .care-table > span {
  min-width: 0;
  padding: 8px 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.reservation-actions.has-cancel-reservation {
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
}

.checkin-panel {
  position: relative;
  width: min(760px, calc(100vw - 40px));
  max-height: min(860px, calc(100vh - 40px));
  max-height: min(860px, calc(100dvh - 40px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20, 24, 22, 0.28);
  padding: 18px;
}

.checkin-panel.is-dayplay-checkin {
  width: min(740px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 12px 14px;
}

.checkin-head {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-right: 46px;
}

.checkin-head.has-service-color {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--checkin-header-color, var(--accent)) 32%, var(--line));
  border-radius: 10px;
  background: var(--checkin-header-bg, #fff);
  padding: 18px 56px 12px 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.checkin-head.has-service-color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--checkin-header-accent, var(--accent));
}

.checkin-head.has-service-color.is-birthday-banner {
  border-color: #ef476f;
  background:
    radial-gradient(circle at 9% 22%, rgba(255, 209, 102, 0.95) 0 6px, transparent 7px),
    radial-gradient(circle at 28% 78%, rgba(6, 214, 160, 0.78) 0 5px, transparent 6px),
    radial-gradient(circle at 52% 18%, rgba(17, 138, 178, 0.48) 0 6px, transparent 7px),
    radial-gradient(circle at 82% 70%, rgba(239, 71, 111, 0.72) 0 6px, transparent 7px),
    linear-gradient(120deg, #fff2ad 0%, #ffd6e5 33%, #c8f7ee 66%, #dbeafe 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.72),
    0 16px 34px rgba(239, 71, 111, 0.22);
}

.checkin-head.has-service-color.is-birthday-banner::before {
  top: 0;
  bottom: 0;
  height: auto;
  z-index: 1;
  opacity: 0.88;
  background:
    linear-gradient(22deg, transparent 0 32px, rgba(239, 71, 111, 0.72) 33px 38px, transparent 39px 96px),
    linear-gradient(128deg, transparent 0 44px, rgba(17, 138, 178, 0.6) 45px 50px, transparent 51px 116px),
    linear-gradient(72deg, transparent 0 56px, rgba(6, 214, 160, 0.72) 57px 62px, transparent 63px 128px),
    linear-gradient(156deg, transparent 0 68px, rgba(255, 209, 102, 0.88) 69px 74px, transparent 75px 140px);
  background-size: 118px 96px, 142px 104px, 132px 92px, 156px 118px;
  pointer-events: none;
}

.checkin-head.has-service-color.is-birthday-banner::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  border: 2px dashed rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  pointer-events: none;
}

.checkin-head.is-birthday-banner > :not(.checkin-head-checkin):not(.checkin-close) {
  position: relative;
  z-index: 2;
}

.checkin-head.is-birthday-banner :is(.checkin-head-checkin, .checkin-close) {
  position: absolute;
  z-index: 3;
}

.checkin-head.has-service-color.is-birthday-banner .eyebrow {
  color: #7f1d52;
}

.checkin-head.is-birthday-banner h2 {
  color: #112b57;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.62);
}

.checkin-head.is-birthday-banner :is(.checkin-owner-link, .checkin-owner-phone) {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
  color: #006b64;
  padding: 2px 6px;
}

.checkin-head.has-service-color .eyebrow {
  color: color-mix(in srgb, var(--checkin-header-color, var(--accent)) 72%, #111827);
}

.checkin-head.has-service-color :is(.checkin-photo, .checkin-photo-stack) {
  filter: drop-shadow(0 8px 14px rgba(17, 24, 39, 0.13));
}

.checkin-head.has-service-color.has-head-checkin {
  padding-right: 104px;
}

.checkin-panel.is-dayplay-checkin .checkin-head {
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding-right: 88px;
}

.checkin-panel.is-dayplay-checkin .checkin-head.has-service-color {
  padding: 10px 88px 8px 10px;
}

.checkin-photo {
  width: 112px;
  height: 112px;
  border-radius: 10px;
  object-fit: cover;
  background: #eef2f0;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 950;
}

.checkin-panel.is-dayplay-checkin .checkin-photo {
  width: 74px;
  height: 74px;
  border-radius: 9px;
  font-size: 22px;
}

.checkin-head h2 {
  margin: 2px 0 4px;
  color: var(--ink);
  font-size: clamp(30px, 5vw, 48px);
  line-height: 0.95;
}

.checkin-panel.is-dayplay-checkin .checkin-head h2 {
  font-size: clamp(28px, 3vw, 36px);
}

.checkin-title-copy {
  min-width: 0;
}

.checkin-pet-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.checkin-edit-pet {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #9dcfc5;
  border-radius: 8px;
  background: #f1fbf8;
  color: var(--accent);
  display: grid;
  place-items: center;
}

.checkin-edit-pet svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checkin-owner-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.checkin-panel.is-dayplay-checkin .checkin-owner-line {
  gap: 4px 8px;
}

.checkin-owner-link,
.checkin-owner-phone {
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 17px;
  font-weight: 900;
  padding: 0;
  text-align: left;
}

.checkin-owner-phone {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkin-panel.is-dayplay-checkin .checkin-owner-link,
.checkin-panel.is-dayplay-checkin .checkin-owner-phone {
  font-size: 15px;
}

.checkin-head p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  font-weight: 850;
}

.checkin-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
}

.checkin-head-checkin {
  position: absolute;
  top: 14px;
  right: 58px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #207d68;
  border-radius: 999px;
  background: #207d68;
  color: #fff;
  box-shadow: 0 8px 18px rgba(32, 125, 104, 0.22);
}

.checkin-head-checkin svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checkin-head-checkin.is-submitting {
  border-color: #3359c8;
  background: #3359c8;
  box-shadow: 0 8px 18px rgba(51, 89, 200, 0.22);
  cursor: progress;
}

.checkin-head-checkin.is-submitting svg {
  animation: checkin-spin 0.9s linear infinite;
}

.checkin-panel.is-dayplay-checkin .checkin-close,
.checkin-panel.is-dayplay-checkin .checkin-head-checkin {
  top: 10px;
  width: 34px;
  height: 34px;
}

.checkin-panel.is-dayplay-checkin .checkin-close {
  right: 10px;
  font-size: 24px;
}

.checkin-panel.is-dayplay-checkin .checkin-head-checkin {
  right: 50px;
}

.checkin-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.checkin-panel.is-dayplay-checkin .checkin-details {
  gap: 6px;
  margin: 8px 0;
}

.checkin-details div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 10px;
}

.checkin-panel.is-dayplay-checkin .checkin-details div {
  padding: 7px 10px;
}

.checkin-details span,
.checkin-form-grid label > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.checkin-field-head > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-photo-analyze-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid #9dcfc5;
  border-radius: 8px;
  background: #f7fffc;
  padding: 0 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.checkin-photo-analyze-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checkin-photo-analyze-button.is-busy {
  opacity: 0.68;
  pointer-events: none;
}

.checkin-form-grid .checkin-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  border: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.checkin-details strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
}

.checkin-dog-panes {
  margin-top: 14px;
}

.checkin-panel.is-dayplay-checkin .checkin-dog-panes {
  margin-top: 10px;
}

.checkin-panel.is-dayplay-checkin .checkin-dog-pane {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.checkin-panel.is-dayplay-checkin .checkin-dog-pane > .checkin-form-grid {
  grid-column: 1 / -1;
}

.checkin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.checkin-form-grid > * {
  min-width: 0;
}

.checkin-panel.is-dayplay-checkin .checkin-form-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(190px, 0.8fr);
  gap: 12px;
  align-items: stretch;
  border: 1px solid #d7e8e2;
  border-radius: 10px;
  background: #fbfdfb;
  padding: 12px;
}

.checkin-form-grid > label {
  display: grid;
  min-width: 0;
  gap: 5px;
  align-content: start;
}

.checkin-form-grid .is-wide {
  grid-column: 1 / -1;
}

.checkin-panel.is-dayplay-checkin .checkin-field-card {
  min-width: 0;
  border: 1px solid #d8e7e3;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.checkin-panel.is-dayplay-checkin .checkin-pickup-field {
  border-color: #94cfc1;
  background: #f1fbf8;
}

.checkin-panel.is-dayplay-checkin .checkin-playgroup-field {
  grid-column: 1 / -1;
}

.checkin-grooming-schedule {
  display: grid;
  gap: 10px;
  border: 1px solid #e2c06e;
  border-radius: 10px;
  background: #fffaf0;
  padding: 10px;
}

/* The check-in grooming picker is emitted for every daycare/boarding stay but the
   markup carries the [hidden] attribute until the reservation actually has a timed
   groom (see checkInGroomingScheduleSection / syncCheckInServiceSummary). The class
   rule above sets display:grid, which — being an author-sheet rule — overrides the
   UA stylesheet's [hidden]{display:none}, so the box stayed visible on plain
   daycare/boarding check-ins where no grooming was booked ("dayplay check in does
   not need a grooming window attached"). Honor the hidden attribute explicitly. */
.checkin-grooming-schedule[hidden] {
  display: none;
}

.checkin-grooming-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.checkin-grooming-head span {
  display: block;
  color: #7a4b00;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-grooming-head strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
}

.checkin-grooming-head small {
  max-width: 260px;
  color: #7a4b00;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  text-align: right;
}

.checkin-grooming-grid {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) repeat(2, minmax(150px, 1fr));
  gap: 10px;
}

.checkin-grooming-grid label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.checkin-form-grid select,
.checkin-form-grid input,
.checkin-form-grid textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
}

.checkin-panel.is-dayplay-checkin .checkin-form-grid select,
.checkin-panel.is-dayplay-checkin .checkin-form-grid input,
.checkin-panel.is-dayplay-checkin .checkin-form-grid textarea {
  min-height: 42px;
  font-size: 15px;
}

.checkin-form-grid input[type="time"] {
  min-height: 56px;
  border-color: #9dcfc5;
  background: #f7fffc;
  color: var(--accent);
  font-size: 28px;
  font-weight: 1000;
  /* line-height:1 made the native time value overflow its box on iOS Safari
     (the pickup time "floating outside" the field on the iPad check-in). Let the
     browser lay the value out at its natural line height inside the min-height,
     and clip any residual native overflow rather than spilling past the border. */
  line-height: normal;
  overflow: hidden;
}

.checkin-panel.is-dayplay-checkin .checkin-form-grid input[type="time"] {
  min-height: 54px;
  border-color: #8fcbbd;
  background: #f8fffc;
  font-size: 28px;
}

.checkin-grooming-schedule input[type="date"],
.checkin-grooming-schedule input[type="time"] {
  border-color: #d4a937;
  background: #fffdf7;
  color: #7a4b00;
}

.checkin-form-grid input[data-checkin-checkout-date] {
  min-height: 56px;
  border-color: #9dcfc5;
  background: #f7fffc;
  color: var(--accent);
  font-size: 20px;
  font-weight: 1000;
}

.checkin-group-checkout {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.checkin-group-checkout label {
  display: grid;
  gap: 5px;
}

.checkin-group-checkout span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-group-checkout input {
  width: 100%;
  min-height: 56px;
  border: 1px solid #9dcfc5;
  border-radius: 8px;
  background: #f7fffc;
  color: var(--accent);
  font-size: 20px;
  font-weight: 1000;
  padding: 0 10px;
}

@media (max-width: 620px) {
  .checkin-group-checkout {
    grid-template-columns: 1fr;
  }
}

.checkin-form-grid textarea {
  min-height: 78px;
  padding: 10px;
  resize: vertical;
}

.checkin-belongings-photo-preview[hidden],
.checkin-belongings-analysis[hidden] {
  display: none;
}

.checkin-belongings-photo-preview {
  margin-top: 8px;
}

.checkin-belongings-photo-thumb {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  border: 1px solid #cfe1dd;
  border-radius: 8px;
  background: #f8fbfa;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 8px 6px 6px;
  text-align: left;
}

.checkin-belongings-photo-thumb img {
  width: 54px;
  height: 54px;
  border-radius: 7px;
  object-fit: cover;
  background: #e9eeeb;
}

.checkin-belongings-photo-thumb span,
.checkin-belongings-photo-thumb strong,
.checkin-belongings-photo-thumb small {
  display: block;
  min-width: 0;
}

.checkin-belongings-photo-thumb strong {
  color: var(--accent);
  font-size: 14px;
  font-weight: 950;
}

.checkin-belongings-photo-thumb small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkin-belongings-analysis {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  border: 1px solid #cfe1dd;
  border-radius: 8px;
  background: #f8fbfa;
  color: var(--muted);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 900;
}

.checkin-belongings-analysis.is-busy::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid #b7d8d0;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: checkin-spin 0.8s linear infinite;
}

.checkin-belongings-analysis.is-ok {
  border-color: #abd8cd;
  background: #f0fbf7;
  color: #0f6f5f;
}

.checkin-belongings-analysis.is-empty {
  border-style: dashed;
  color: #666;
}

@keyframes checkin-spin {
  to {
    transform: rotate(360deg);
  }
}

.belongings-photo-modal {
  width: min(860px, 96vw);
}

.belongings-photo-viewer {
  display: grid;
  place-items: center;
  min-height: 260px;
  max-height: 66dvh;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
}

.belongings-photo-viewer img {
  width: 100%;
  height: 100%;
  max-height: 66dvh;
  object-fit: contain;
}

.checkin-lodging {
  border: 1px solid #d9e8e4;
  border-radius: 8px;
  background: #f8fbfa;
  padding: 12px;
}

.checkin-panel.is-dayplay-checkin .checkin-lodging {
  border-color: #cddedb;
  background: #f8fbff;
  padding: 12px;
}

.checkin-lodging label {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.checkin-lodging select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  padding: 8px 10px;
}

.checkin-care-sharing {
  display: grid;
  gap: 12px;
  border: 1px solid #aacde4;
  border-radius: 8px;
  background: #f2f9ff;
  padding: 12px;
}

.checkin-care-sharing-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.85fr);
  gap: 12px;
  align-items: end;
}

.checkin-care-sharing-head > div {
  display: grid;
  gap: 3px;
}

.checkin-care-sharing-head span,
.checkin-feeding-room span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkin-care-sharing-head strong {
  color: #074d78;
  font-size: 15px;
  font-weight: 950;
}

.checkin-care-sharing-head label,
.checkin-feeding-grid label {
  display: grid;
  gap: 5px;
}

.checkin-care-sharing-head select,
.checkin-feeding-grid select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 8px 10px;
}

.checkin-shared-lodging {
  display: grid;
  gap: 8px;
  border-color: #8fbddd;
  background: #fff;
  padding: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.checkin-feeding-room {
  display: grid;
  gap: 10px;
  border: 1px solid #e4c58e;
  border-radius: 8px;
  background: #fffaf0;
  padding: 12px;
}

.checkin-feeding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.checkin-lodging-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.checkin-shared-lodging .checkin-lodging-head {
  margin-bottom: 0;
  border-bottom: 1px solid #d9ecf7;
  padding-bottom: 8px;
}

.checkin-shared-lodging .checkin-lodging-head > div {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.checkin-panel.is-dayplay-checkin .checkin-lodging-head {
  margin-bottom: 10px;
  border-bottom: 1px solid #d9e8e4;
  padding-bottom: 8px;
}

.checkin-lodging-head span,
.checkin-lodging-date span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-lodging-head strong,
.checkin-lodging-date strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.checkin-shared-lodging .checkin-lodging-head span {
  color: #074d78;
}

.checkin-shared-lodging .checkin-lodging-head strong {
  border: 1px solid #b9d8ec;
  border-radius: 999px;
  background: #eef8ff;
  color: #074d78;
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
}

.checkin-lodging-grid {
  display: grid;
  gap: 8px;
}

.checkin-shared-lodging .checkin-lodging-grid {
  gap: 6px;
}

.checkin-lodging-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.checkin-shared-lodging .checkin-lodging-row {
  grid-template-columns: minmax(104px, 0.5fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  border: 1px solid #d9ecf7;
  border-radius: 8px;
  background: #f8fcff;
  padding: 7px;
}

.checkin-lodging-row.is-dayplay {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkin-lodging-row label > span {
  margin-bottom: 4px;
}

.checkin-shared-lodging .checkin-lodging-row label > span {
  margin-bottom: 0;
  color: #52677c;
  font-size: 10px;
}

.checkin-lodging-date {
  align-self: stretch;
  display: grid;
  align-content: center;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}

.checkin-shared-lodging .checkin-lodging-date {
  min-height: 44px;
  border-color: transparent;
  background: transparent;
  padding: 4px 6px;
}

.checkin-shared-lodging .checkin-lodging-date strong {
  color: #123c59;
  font-size: 13px;
}

.checkin-shared-lodging .checkin-lodging-date span {
  color: #52677c;
  font-size: 10px;
}

.checkin-shared-lodging select {
  min-height: 38px;
  border-color: #c8ddeb;
  background: #fff;
  font-size: 14px;
}

.checkin-service-picker {
  display: grid;
  gap: 8px;
}

.checkin-panel.is-dayplay-checkin .checkin-service-picker,
.checkin-panel.is-dayplay-checkin .checkin-addon-picker {
  gap: 5px;
}

.checkin-service-picker > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-service-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkin-panel.is-dayplay-checkin .checkin-service-options {
  gap: 6px;
}

.checkin-service-options button {
  min-height: 36px;
  border: 1px solid #9dcfc5;
  border-radius: 999px;
  background: #f1fbf8;
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  padding: 0 12px;
}

.checkin-panel.is-dayplay-checkin .checkin-service-options button {
  min-height: 32px;
  font-size: 12px;
  padding: 0 10px;
}

.checkin-service-options button.is-selected,
.checkin-service-options button:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.checkin-addon-picker {
  display: grid;
  gap: 10px;
}

.checkin-addon-open-item {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed rgba(20, 20, 20, 0.25);
  border-radius: 10px;
}

.checkin-addon-open-item .checkin-addon-open-item-title {
  font-weight: 600;
}

.checkin-addon-open-item small {
  opacity: 0.7;
}

.checkin-addon-open-item-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px auto;
  gap: 8px;
  align-items: center;
}

.checkin-addon-open-item-fields input {
  width: 100%;
}

@media (max-width: 640px) {
  .checkin-addon-open-item-fields {
    grid-template-columns: 1fr;
  }
}

.checkin-addon-picker .checkin-service-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.checkin-panel.is-dayplay-checkin .checkin-addon-picker .checkin-service-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkin-addon-picker.has-schedule .checkin-service-options {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.checkin-addon-choice {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.checkin-addon-choice.has-schedule {
  grid-template-columns: minmax(190px, 1fr) minmax(150px, 0.45fr);
  align-items: start;
}

.checkin-addon-picker.has-schedule .checkin-addon-choice.has-schedule {
  grid-template-columns: minmax(190px, 1fr) minmax(150px, 0.46fr);
  gap: 8px;
  align-items: center;
  border: 1px solid #d9e8e4;
  border-radius: 8px;
  background: #f8fbfa;
  padding: 6px;
}

.checkin-addon-picker .checkin-service-options button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 54px;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
}

.checkin-panel.is-dayplay-checkin .checkin-addon-picker .checkin-service-options button {
  min-height: 44px;
  gap: 1px;
  padding: 6px 8px;
}

.checkin-addon-picker.has-schedule .checkin-service-options button {
  min-height: 44px;
  background: #fff;
}

.checkin-addon-picker .checkin-service-options button span,
.checkin-addon-picker .checkin-service-options button small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkin-addon-picker .checkin-service-options button small {
  color: color-mix(in srgb, currentColor 74%, transparent);
  font-size: 12px;
  font-weight: 800;
}

.checkin-panel.is-dayplay-checkin .checkin-addon-picker .checkin-service-options button small {
  font-size: 11px;
}

.checkin-addon-days {
  min-width: 0;
  width: 100%;
}

.checkin-addon-picker.has-schedule .addon-schedule-control {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  margin-left: 0;
}

.checkin-addon-picker.has-schedule .addon-schedule-control[data-addon-has-quantity="true"] {
  grid-template-columns: minmax(0, 1fr) 102px;
}

.checkin-addon-picker.has-schedule .addon-date-rule-menu {
  min-width: min(320px, 86vw);
  width: max(100%, 280px);
}

.checkin-addon-picker.has-schedule .addon-date-options {
  gap: 4px;
}

.checkin-addon-picker.has-schedule .addon-date-option {
  min-height: 28px;
  padding: 4px 7px;
}

@media (max-width: 900px) {
  .checkin-addon-picker.has-schedule .checkin-addon-choice.has-schedule {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .checkin-addon-choice.has-schedule {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkin-addon-picker.has-schedule .addon-schedule-control {
    grid-template-columns: minmax(0, 1fr);
  }
}

.checkin-medications {
  display: grid;
  gap: 8px;
  border: 1px solid #d9e8e4;
  border-radius: 8px;
  background: #f8fbfa;
  padding: 10px 12px;
}

.checkin-panel.is-dayplay-checkin .checkin-medications {
  gap: 8px;
  border-color: #d8e7e3;
  background: #fff;
  padding: 12px;
}

.checkin-care-disclosure {
  min-width: 0;
  border: 1px solid #d8e7e3;
  border-radius: 8px;
  background: #fff;
}

.checkin-care-disclosure.is-wide {
  grid-column: 1 / -1;
}

.checkin-care-disclosure.is-dayplay-care[open] {
  grid-column: 1 / -1;
}

.checkin-care-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  cursor: pointer;
  list-style: none;
  padding: 8px 10px;
}

.checkin-care-disclosure summary::-webkit-details-marker {
  display: none;
}

.checkin-care-disclosure summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #9dcfc5;
  border-radius: 999px;
  background: #f1fbf8;
  color: var(--accent);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.checkin-care-disclosure[open] summary::after {
  content: "-";
}

.checkin-care-disclosure summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-care-disclosure summary strong {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkin-care-disclosure-body {
  border-top: 1px solid #e2eeea;
  padding: 8px;
}

.checkin-care-disclosure-body > .checkin-medications,
.checkin-care-disclosure-body > .checkin-belongings-field {
  border: 0;
  background: transparent;
  padding: 0;
}

.checkin-panel.is-dayplay-checkin .checkin-care-disclosure-body .checkin-medications {
  padding: 0;
}

.checkin-medication-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.checkin-medication-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.checkin-medication-head > span,
.checkin-medication-note > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-care-confirmed {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid #94cfc1;
  border-radius: 999px;
  background: #e8f8f3;
  color: #06725f;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.checkin-care-confirmation-line {
  display: grid;
  gap: 2px;
  border: 1px solid #bfe4da;
  border-radius: 8px;
  background: #effbf7;
  padding: 8px 10px;
}

.checkin-care-confirmation-line strong {
  color: #066c5a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
}

.checkin-care-confirmation-line small {
  color: #4f746c;
  font-size: 12px;
  font-weight: 850;
}

.checkin-medication-empty {
  display: grid;
  gap: 2px;
  border: 1px dashed #cfe1dd;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.checkin-panel.is-dayplay-checkin .checkin-medication-empty {
  padding: 7px 9px;
}

.checkin-medication-empty strong,
.checkin-medication-note strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.25;
}

.checkin-medication-empty small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.checkin-addon-editor {
  align-self: stretch;
}

.checkin-addon-editor.is-open {
  border-color: #9dcfc5;
  background: #f4fbf8;
}

.checkin-panel.is-dayplay-checkin .checkin-addon-editor:not(.has-selected-addons):not(.is-open) {
  padding: 8px 10px;
}

.checkin-panel.is-dayplay-checkin .checkin-addon-editor:not(.has-selected-addons):not(.is-open) .checkin-addon-summary {
  display: none;
}

.checkin-addon-editor .text-button {
  white-space: nowrap;
}

.checkin-addon-summary strong {
  color: var(--accent);
}

.checkin-addon-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid #d9e8e4;
  padding-top: 10px;
}

.checkin-addon-body[hidden] {
  display: none;
}

.checkin-addon-nested-service {
  display: grid;
  gap: 7px;
  border: 1px solid #d9e8e4;
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.checkin-addon-nested-service > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-addon-nested-service .checkin-service-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 6px;
}

.checkin-addon-nested-service .checkin-service-options button {
  min-height: 34px;
  padding: 0 9px;
  font-size: 12px;
}

.checkin-medication-table {
  border-top: 1px solid var(--line);
  background: #fff;
}

.checkin-medication-table > b,
.checkin-medication-table > span {
  background: #fff;
}

/* Inside the check-in drawer the panel content is only ~720px wide, but the
   8-column feeding grid (and 6-column medication grid) demand ~910px, so
   overflow-x:auto scrolled the right-hand Instruction/Note columns — the parent's
   actual feeding instructions — off to the side where staff never saw them
   ("feeding notes all the way to the side" on the overnight check-in pop-up).
   Scope tighter columns + wrapping to the drawer so every column, including the
   note, stays visible without a hidden horizontal scroll. The pet-profile care
   card (unscoped .care-table-feeding) keeps its roomier layout. */
.checkin-medications .care-table-feeding {
  grid-template-columns: minmax(46px, .5fr) minmax(46px, .45fr) minmax(42px, .4fr) minmax(58px, .7fr) minmax(62px, .8fr) minmax(70px, .95fr) minmax(96px, 1.25fr) 42px;
}

.checkin-medications .care-table-medication {
  grid-template-columns: minmax(46px, .5fr) minmax(46px, .45fr) minmax(50px, .6fr) minmax(80px, 1fr) minmax(110px, 1.4fr) 42px;
}

.checkin-medications .care-table {
  overflow-x: auto;
}

.checkin-medications .care-table > b,
.checkin-medications .care-table > span {
  min-width: 0;
  padding: 8px 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.checkin-medications .care-owner-note-text {
  white-space: normal;
}

.checkin-checkbox {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.checkin-checkbox input {
  width: 24px;
  height: 24px;
}

.checkin-checkbox span {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.checkin-note {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 14px;
  color: var(--muted);
  font-weight: 850;
}

.checkin-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

.checkin-panel.is-dayplay-checkin .checkin-actions {
  margin-top: 8px;
}

/* Pin the check-in action bar to the bottom of the scrolling check-in panel so
   the Check-in button is always reachable, regardless of how tall the form gets
   (vaccine/agreement notices, feeding/med schedules, multiple dogs). Staff
   reported the screen sometimes renders expanded and they had to scroll down to
   find the Check-in button. */
.checkin-panel.is-dayplay-checkin .checkin-actions,
.checkin-panel.is-group-checkin .checkin-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: 10px 0 4px;
  background: linear-gradient(to top, #fff 78%, rgba(255, 255, 255, 0));
}

.checkin-submit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 760px) {
  .checkin-overlay {
    place-items: start center;
    padding: 8px;
  }

  .checkin-panel,
  .checkin-panel.is-dayplay-checkin,
  .checkin-panel.is-group-checkin {
    width: min(100%, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    /* Track the visible viewport so the keyboard doesn't cover check-in fields. */
    max-height: calc(var(--app-visual-viewport-height, 100dvh) - 16px);
    padding: 10px;
  }

  .checkin-panel.is-dayplay-checkin .checkin-head.has-service-color {
    padding-right: 84px;
  }

  .checkin-panel.is-dayplay-checkin .checkin-form-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .checkin-care-sharing-head {
    grid-template-columns: 1fr;
  }

  .checkin-care-sharing-head strong {
    overflow-wrap: anywhere;
  }

  .checkin-care-sharing-head select,
  .checkin-feeding-grid select,
  .checkin-lodging select,
  .checkin-form-grid select,
  .checkin-form-grid input,
  .checkin-form-grid textarea {
    font-size: 15px;
  }

  .checkin-panel.is-dayplay-checkin .checkin-form-grid input[type="time"],
  .checkin-form-grid input[type="time"] {
    min-height: 52px;
    font-size: 24px;
  }

  .checkin-grooming-head {
    display: grid;
  }

  .checkin-grooming-head small {
    max-width: none;
    text-align: left;
  }

  .checkin-grooming-grid {
    grid-template-columns: 1fr;
  }

  .checkin-lodging-row {
    grid-template-columns: 1fr;
  }

  .checkin-shared-lodging .checkin-lodging-row {
    grid-template-columns: 1fr;
  }

  .checkin-actions {
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .checkin-submit-actions {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
  }

  .checkin-actions .primary-button,
  .checkin-actions .secondary-button {
    min-height: 40px;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .tour-editor-panel .checkin-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .tour-editor-panel .checkin-actions .primary-button,
  .tour-editor-panel .checkin-actions .secondary-button {
    width: 100%;
    min-width: 0;
  }

  .checkin-submit-actions .primary-button,
  .checkin-submit-actions .secondary-button {
    min-width: 0;
  }
}

.primary-button,
.secondary-button {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 950;
}

.primary-button {
  border: 1px solid #207d68;
  background: #207d68;
  color: #fff;
}

.owner-save-button {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #334155;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.owner-save-button.is-dirty {
  border-color: #207d68;
  background: #207d68;
  color: #fff;
  box-shadow: 0 8px 16px rgba(32, 125, 104, .18);
}

.secondary-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.message-board {
  display: grid;
  gap: 12px;
}

.message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 14px;
}

.message-head-actions,
.message-send-row,
.message-attachment-row,
.message-manual-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.message-general-button,
.message-email-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.message-general-button.has-unread,
.message-email-button.has-unread {
  border-color: #0f766e;
  background: #e9fbf6;
}

.message-email-button.has-error {
  border-color: #ddd6c8;
}

.message-email-breakout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 5px 6px 5px 10px;
}

.message-email-breakout.has-unread {
  border-color: #0f766e;
  background: #e9fbf6;
}

.message-email-breakout.has-error {
  border-color: #ddd6c8;
}

.message-email-breakout-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.message-email-mailboxes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

.message-email-mailbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  max-width: 150px;
  border: 1px solid #bddbd3;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 0 7px;
  text-decoration: none;
}

.message-email-mailbox.has-unread {
  border-color: #0f766e;
  background: #f3fffb;
}

.message-email-mailbox.has-error {
  border-color: #ddd6c8;
}

.message-email-mailbox:hover,
.message-email-mailbox:focus-visible {
  border-color: #0f766e;
  color: #075e55;
}

.message-email-mailbox-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-email-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  padding: 0 6px;
}

.message-email-mailbox-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  padding: 0 5px;
}

.message-email-mailbox-count.is-zero {
  background: #e8eef2;
  color: #54615d;
}

.message-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 10px;
}

.message-read-filters,
.message-email-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.message-read-filters button,
.message-email-toolbar button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.message-read-filters button.is-active,
.message-email-toolbar button.is-active {
  border-color: #0f766e;
  background: #e9fbf6;
  color: #075e55;
}

.message-email-button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.message-dashboard {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
}

.message-dashboard-hero,
.message-email-head,
.message-priority-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.message-dashboard-hero {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, #fff 0%, #effbf7 100%);
  padding: 20px;
}

.message-dashboard-hero h2,
.message-email-head h2,
.message-priority-head h3 {
  margin: 2px 0 4px;
}

.message-dashboard-hero span,
.message-email-head span,
.message-priority-head > span {
  color: var(--muted);
  font-size: 13px;
}

.message-dashboard-actions,
.message-email-head > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.message-email-head a.secondary-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border-radius: 8px;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: 850;
}

.message-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.message-kpi-grid > button {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 15px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(22, 56, 49, .04);
}

.message-kpi-grid > button:hover,
.message-kpi-grid > button:focus-visible {
  border-color: #0f766e;
  box-shadow: 0 8px 22px rgba(15, 118, 110, .12);
}

.message-kpi-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.message-kpi-grid strong {
  color: #075e55;
  font-size: 30px;
  line-height: 1;
}

.message-kpi-grid small {
  min-height: 30px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.message-priority-card {
  display: grid;
  gap: 12px;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 16px;
}

.message-priority-list {
  display: grid;
  gap: 7px;
  max-height: min(58vh, 590px);
  overflow-y: auto;
}

.message-priority-list > button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid #e1e7e4;
  border-radius: 10px;
  background: #fbfdfc;
  color: var(--ink);
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.message-priority-list > button:hover,
.message-priority-list > button:focus-visible {
  border-color: #0f766e;
  background: #f3fffb;
}

.message-priority-list > button > span:not(.message-priority-meta) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.message-priority-list strong,
.message-priority-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-priority-list small,
.message-priority-meta time {
  color: var(--muted);
  font-size: 12px;
}

.message-priority-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.message-priority-meta b {
  border-radius: 999px;
  background: #e9fbf6;
  color: #075e55;
  padding: 4px 7px;
  font-size: 10px;
}

.message-email-followup-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid #e1e7e4;
  border-radius: 10px;
  background: #fbfdfc;
  padding: 10px;
}

.message-email-followup-row > span:not(.message-priority-meta) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.message-email-followup-row .lead-stage {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
}

.message-email-followup-actions {
  display: grid;
  gap: 6px;
  justify-items: stretch;
}

.message-email-followup-actions .secondary-button {
  font-size: 12px;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 720px) {
  .message-email-followup-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .message-email-followup-row .message-thread-avatar {
    display: none;
  }
  .message-email-followup-actions {
    grid-auto-flow: column;
    justify-content: start;
  }
}

.message-email-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.message-email-head {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px;
}

.message-email-toolbar {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 7px;
}

.message-email-shell {
  display: grid;
  grid-template-columns: minmax(285px, 360px) minmax(0, 1fr);
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.message-email-list {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  overflow-y: auto;
}

.message-email-list > button {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.message-email-list > button.has-unread {
  border-color: #8bcaba;
  background: #f2fffb;
}

.message-email-list > button.is-active {
  border-color: #0f766e;
  box-shadow: inset 4px 0 0 #0f766e;
}

.message-email-list > button > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.message-email-list strong,
.message-email-list b,
.message-email-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-email-list strong,
.message-email-list b {
  font-size: 13px;
}

.message-email-list small,
.message-email-list time {
  color: var(--muted);
  font-size: 11px;
}

.message-email-list i {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #0f766e;
}

.message-email-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.message-email-detail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 16px;
}

.message-email-detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.message-email-detail > header input.secondary-button {
  flex: 0 0 auto;
  cursor: pointer;
}

.message-email-detail h3 {
  margin: 2px 0 5px;
}

.message-email-detail header span,
.message-email-detail time {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.message-email-body {
  min-height: 0;
  overflow-y: auto;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.message-email-reply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.message-email-reply label {
  display: grid;
  gap: 5px;
}

.message-email-reply label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.message-email-reply textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  font: inherit;
}

.message-email-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  color: var(--muted);
  padding: 24px;
  text-align: center;
}

.message-toolbar label,
.message-playgroup-field,
.message-manual-field {
  display: grid;
  gap: 5px;
}

.message-toolbar span,
.message-toolbar label span,
.message-playgroup-field span,
.message-manual-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.message-disabled-banner {
  border: 1px solid #f0b429;
  border-radius: 8px;
  background: #fffaf0;
  color: #744210;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.message-toolbar input,
.message-composer input,
.message-composer select,
.message-composer textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  color: var(--ink);
  font: inherit;
  font-weight: 750;
}

.message-shell {
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  gap: 12px;
  min-height: 520px;
}

.message-thread-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.message-thread-list button {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  color: var(--ink);
  text-align: left;
}

.message-thread-list button.is-active {
  border-color: var(--accent);
  background: #eefaf7;
  box-shadow: inset 4px 0 0 var(--accent);
}

.message-thread-list strong,
.message-thread-list span,
.message-thread-list small,
.message-thread-list time {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-thread-list strong {
  font-size: 15px;
  font-weight: 950;
}

.message-thread-list span,
.message-thread-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.message-thread-list time {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.message-thread-panel,
.message-composer {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
}

.message-thread-panel header,
.message-compose-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 12px;
}

.message-thread-panel h3,
.message-compose-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1;
}

.message-thread-panel header span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.message-bubbles {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 420px;
  max-height: 58vh;
  overflow: auto;
  padding: 12px;
}

.message-bubble {
  display: grid;
  gap: 4px;
  max-width: min(72%, 520px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 9px 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  /* Phase E: thread-style message lists can run to hundreds of bubbles.
     content-visibility lets the browser skip layout/paint for off-
     screen bubbles. contain-intrinsic-size is approximate (most
     bubbles are 2-3 lines); the scrollbar self-corrects as visible
     ones get measured. */
  content-visibility: auto;
  contain-intrinsic-size: 0 64px;
}

.message-bubble.is-outbound {
  justify-self: end;
  border-color: #9bd4c8;
  background: #e9faf5;
}

.message-bubble time,
.message-bubble small,
.message-empty,
.message-contact-empty,
.message-recipient-placeholder {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.message-composer {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.message-composer textarea {
  min-height: 92px;
  resize: vertical;
}

.message-compose-top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 0.75fr);
  gap: 10px;
  align-items: end;
}

.message-number-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 7px;
}

.message-to-field {
  position: relative;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 9px;
}

.message-recipient-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 30px;
}

.message-recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #9bd4c8;
  border-radius: 999px;
  background: #eefaf7;
  color: var(--accent);
  padding: 4px 7px;
  font-size: 12px;
  font-weight: 950;
}

.message-recipient-chip.is-summary {
  border-color: #f0c06a;
  background: #fff6df;
  color: #6f4a06;
}

.message-recipient-chip small {
  color: #47635d;
  font-size: 10px;
}

.message-recipient-chip button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.message-contact-results {
  display: grid;
  gap: 6px;
}

.message-contact-choice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 7px;
  text-align: left;
}

.message-contact-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #edf5f2;
  color: var(--accent);
  font-size: 14px;
  font-weight: 950;
  overflow: hidden;
}

.message-contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-contact-pet {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d7ebe6;
  border-radius: 8px;
  background: #eefaf7;
}

.message-contact-pet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-contact-choice strong,
.message-contact-choice small {
  display: block;
}

.message-contact-choice small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.message-attachment-row input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.app.is-messages .room-board {
  overflow: hidden;
}

.message-board {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.message-shell {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}

.message-thread-list {
  display: grid;
  grid-auto-rows: max-content;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  padding-right: 4px;
  scrollbar-gutter: stable;
  contain: layout paint;
}

.message-thread-list.is-virtualized {
  display: block;
}

.message-thread-list.is-virtualized button {
  min-height: 88px;
  margin-bottom: 8px;
}

.message-thread-spacer {
  display: block;
  width: 100%;
  pointer-events: none;
}

.message-thread-list button {
  grid-template-columns: 46px minmax(0, 1fr) minmax(74px, max-content);
  grid-template-rows: auto auto;
  align-items: start;
  width: 100%;
  content-visibility: auto;
  contain-intrinsic-size: 72px;
  position: relative;
}

.message-thread-list button.has-many-pets {
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 116px;
}

.message-thread-list button.has-unread {
  border-color: #0f766e;
  background: #e9fbf6;
  box-shadow: inset 5px 0 0 #0f766e;
}

.message-unread-count {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .16);
  z-index: 2;
}

.message-list-more {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  padding: 10px;
  text-align: center;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
}

.message-list-more:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.message-load-older-thread {
  align-self: center;
  max-width: 280px;
}

.message-thread-copy {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-right: 4px;
}

.message-thread-list button.has-many-pets .message-thread-copy {
  grid-row: 1;
  padding-right: 18px;
}

.message-thread-avatar,
.message-owner-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #edf5f2;
  color: var(--accent);
  font-weight: 950;
}

.message-thread-avatar {
  width: 42px;
  height: 42px;
  font-size: 14px;
}

.message-owner-avatar {
  width: 62px;
  height: 62px;
  font-size: 20px;
}

.message-thread-avatar img,
.message-owner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-thread-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  contain: layout paint;
}

.message-thread-panel header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 76px;
}

.message-mark-unread {
  align-self: start;
  white-space: nowrap;
}

.message-conversation-identity {
  display: grid;
  grid-template-columns: 62px minmax(180px, .85fr) minmax(260px, 1.15fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.message-conversation-identity > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.message-conversation-identity h3,
.message-conversation-identity span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-permission-info {
  display: grid;
  gap: 2px;
  margin-top: 3px;
}

.message-permission-info strong {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.message-permission-info span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: normal;
}

.message-conversation-pets,
.message-thread-pets {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
}

.message-conversation-pets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
  justify-self: start;
  max-width: 100%;
  max-height: 122px;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 8px;
}

.message-conversation-identity > .message-conversation-pets {
  display: flex;
}

.message-conversation-pets span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.message-thread-pets {
  grid-column: 3;
  grid-row: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: start;
  justify-self: end;
  max-width: 138px;
  overflow: visible;
}

.message-thread-pets.has-many-pets {
  grid-column: 2 / -1;
  grid-row: 2;
  align-self: start;
  justify-self: stretch;
  justify-content: flex-start;
  max-width: 100%;
  max-height: 82px;
  overflow-y: auto;
  margin-top: 5px;
}

.message-pet-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  max-width: 160px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8f7f2;
  color: var(--ink);
  padding: 2px 7px 2px 2px;
  font-size: 11px;
  font-weight: 900;
}

.message-pet-chip.is-clickable {
  cursor: pointer;
}

.message-pet-chip.is-clickable:hover,
.message-pet-chip.is-clickable:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.message-pet-chip.has-dayplay {
  border-color: #168a63;
  box-shadow: inset 0 0 0 1px rgba(22, 138, 99, .28);
}

.message-pet-chip.has-boarding {
  border-color: #2563eb;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .32);
}

.message-pet-chip.has-grooming {
  border-color: #7c3aed;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .3);
}

.message-thread-pets .message-pet-chip {
  display: inline-flex;
  align-items: flex-start;
  max-width: 148px;
  min-width: 0;
  min-height: 30px;
  overflow: hidden;
  padding: 3px 7px 3px 3px;
  border-color: #9bd4c8;
  background: #eefaf7;
  white-space: nowrap;
}

.message-conversation-pets .message-pet-chip {
  display: inline-flex;
  width: 124px;
  max-width: 124px;
  min-height: 52px;
  flex: 0 1 124px;
  flex-wrap: nowrap;
  align-items: flex-start;
  border-color: #9bd4c8;
  border-radius: 8px;
  background: #eefaf7;
  padding: 4px 7px 4px 4px;
  font-size: 14px;
}

.message-pet-photo {
  position: relative;
  display: inline-grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid transparent;
  overflow: hidden;
  border-radius: 999px;
  background: #edf5f2;
  color: var(--accent);
  font-size: 9px;
  font-weight: 950;
}

button.message-pet-photo {
  cursor: pointer;
  padding: 0;
}

.message-pet-photo.has-vaccine-alert {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .18);
}

.message-pet-vaccine-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  z-index: 2;
}

.message-pet-vaccine-badge svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

.message-pet-service-badges {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 10px;
  margin: 3px 0 0;
}

.message-pet-service-badges i {
  display: grid;
  place-items: center;
  min-width: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 0;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  padding: 0;
}

.message-pet-service-badges i.is-dayplay {
  background: #168a63;
}

.message-pet-service-badges i.is-boarding {
  background: #2563eb;
}

.message-pet-service-badges i.is-grooming {
  background: #7c3aed;
}

.message-conversation-pets .message-pet-photo {
  flex-basis: 42px;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  font-size: 14px;
}

.message-thread-pets .message-pet-photo {
  display: inline-grid;
  flex-basis: 26px;
  width: 26px;
  height: 26px;
  overflow: hidden;
  font-size: 10px;
  white-space: normal;
}

.message-pet-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-pet-chip b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.05;
}

.message-pet-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 1px;
}

.message-pet-photo-ai {
  min-height: 22px;
  border: 1px solid #9bd4c8;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  padding: 0 7px;
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}

.message-pet-photo-ai:hover,
.message-pet-photo-ai:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.message-thread-pets .message-pet-copy {
  flex: 1 1 auto;
  max-width: calc(100% - 31px);
}

.message-thread-pets.has-many-pets .message-pet-copy {
  max-width: calc(100% - 34px);
}

.message-conversation-pets .message-pet-copy {
  min-width: 42px;
  padding-top: 2px;
}

.message-conversation-pets .message-pet-chip b {
  color: var(--accent);
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.05;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.message-thread-pets .message-pet-chip b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.05;
}

.message-bubbles {
  max-height: none;
  min-height: 0;
  overflow-anchor: none;
  contain: layout paint;
}

.message-bottom-anchor {
  width: 1px;
  height: 1px;
}

.message-reply-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 10px;
}

.message-reply-methods {
  display: grid;
  gap: 8px;
  margin-bottom: 9px;
}

.message-reply-methods-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.message-reply-methods-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.message-reply-methods-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.message-reply-method-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.message-reply-method {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 11px;
}

.message-reply-method:has(input:checked) {
  border-color: var(--accent);
  background: rgba(18, 109, 95, 0.1);
  color: var(--accent);
}

.message-reply-method input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.message-reply-method small {
  color: var(--muted);
  font-size: 10px;
}

.message-reply-method.is-unavailable {
  cursor: not-allowed;
  opacity: 0.58;
}

.message-reply-box textarea {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  padding: 11px 12px;
  resize: vertical;
}

.message-reply-box .primary-button {
  min-width: 92px;
}

.message-body-box {
  position: relative;
  display: grid;
}

.message-body-box textarea,
.message-reply-box .message-body-box textarea {
  width: 100%;
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  padding: 11px 104px 52px 12px;
  resize: vertical;
}

.message-body-box.is-reply textarea,
.message-reply-box .message-body-box.is-reply textarea {
  min-height: 72px;
  max-height: 150px;
}

.message-body-tools {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  max-width: calc(100% - 16px);
}

.message-icon-button,
.message-send-icon {
  position: relative;
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}

.message-send-icon {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.message-icon-button svg,
.message-send-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-icon-button input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.message-media-pill {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(260px, calc(100vw - 180px));
  gap: 6px;
  border: 1px solid #9bd4c8;
  border-radius: 999px;
  background: #eefaf7;
  color: var(--accent);
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-media-pill button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.message-media-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.message-media-preview {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
  border: 1px solid #cfe1dc;
  border-radius: 8px;
  background: #f7fffc;
  padding: 6px;
}

.message-media-preview-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 18px rgba(17, 24, 39, .18);
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
}

.message-media-preview-remove:hover,
.message-media-preview-remove:focus-visible {
  border-color: #ef4444;
  color: #b91c1c;
  outline: none;
}

.message-media-preview img {
  width: 100%;
  height: 112px;
  border-radius: 6px;
  object-fit: cover;
  background: #eef2f0;
}

.message-media-preview figcaption {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-reply-box {
  display: block;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 10px;
}

.owner-photo-upload {
  position: relative;
  cursor: pointer;
}

.owner-photo-upload:hover,
.owner-photo-upload:focus-within {
  box-shadow: 0 0 0 4px rgba(18, 109, 95, 0.16);
  outline: none;
}

.owner-photo-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .message-head,
  .message-toolbar,
  .message-shell,
  .message-thread-panel header,
  .message-compose-head,
  .message-compose-top {
    grid-template-columns: 1fr;
  }

  .message-head {
    display: grid;
  }

  .message-shell {
    min-height: 0;
  }

  .message-bubbles {
    max-height: none;
    min-height: 280px;
  }

  .message-bubble {
    max-width: 92%;
  }

  .message-body-box textarea,
  .message-reply-box .message-body-box textarea {
    padding-right: 92px;
  }

  .message-media-pill {
    max-width: min(180px, calc(100vw - 170px));
  }

  .message-conversation-identity {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .message-conversation-pets {
    grid-column: 1 / -1;
    justify-content: flex-start;
    justify-self: stretch;
    max-width: 100%;
  }

  .message-conversation-pets .message-pet-chip {
    max-width: min(100%, 220px);
  }
}

.settings-board {
  display: grid;
  gap: 14px;
  --settings-section-accent: #11615b;
  --settings-section-soft: #eef8f4;
}

.settings-board[data-settings-current-view="business"],
.settings-board[data-settings-current-view="business-rules"],
.settings-board[data-settings-current-view="lodgings"] {
  --settings-section-accent: #226e93;
  --settings-section-soft: #eef7fb;
}

.settings-board[data-settings-current-view="staff"],
.settings-board[data-settings-current-view="roles-permissions"],
.settings-board[data-settings-current-view="customers-pets"],
.settings-board[data-settings-current-view="pets"] {
  --settings-section-accent: #7a4c8f;
  --settings-section-soft: #f6eef9;
}

.settings-board[data-settings-current-view="retail"],
.settings-board[data-settings-current-view="payments"],
.settings-board[data-settings-current-view="checkout"],
.settings-board[data-settings-current-view="pricing"] {
  --settings-section-accent: #9a6500;
  --settings-section-soft: #fff6df;
}

.settings-board[data-settings-current-view="automation"],
.settings-board[data-settings-current-view="communication"],
.settings-board[data-settings-current-view="report-card"],
.settings-board[data-settings-current-view="smart-scheduling"],
.settings-board[data-settings-current-view="integrations"] {
  --settings-section-accent: #a24742;
  --settings-section-soft: #fff1ef;
}

.settings-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.settings-header h2 {
  color: var(--ink);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 950;
}

.settings-header > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-card {
  display: grid;
  gap: 12px;
  max-width: 760px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.settings-card label,
.vet-form-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.settings-card label > span,
.vet-form-grid label > span {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.settings-card textarea,
.settings-card input,
.settings-card select,
.vet-form-grid input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
  text-overflow: ellipsis;
}

.settings-wide-card {
  max-width: none;
}

.settings-card input[type="color"] {
  min-height: 42px;
  padding: 4px;
}

.system-announcement-settings-card textarea {
  min-height: 92px;
  resize: vertical;
}

.system-announcement-color-field input[type="color"] {
  width: min(100%, 120px);
}

.system-announcement-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 8px;
  background: var(--system-announcement-preview-bg, #ffeb00);
  color: var(--system-announcement-preview-fg, #111827);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.system-announcement-preview.is-disabled {
  opacity: 0.45;
}

.vaccine-indicator-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.vaccine-rule-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
  border: 1px solid #cfe6df;
  border-radius: 8px;
  background: #f7fffc;
  padding: 12px;
}

.vaccine-rule-settings > div,
.vaccine-rule-settings > p {
  grid-column: 1 / -1;
}

.vaccine-rule-settings h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.settings-card p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.settings-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.settings-section-title h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.settings-section-title span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.settings-toggle-label {
  display: flex !important;
  grid-template-columns: none;
  flex-direction: row;
  align-items: center;
  gap: 10px !important;
}

.settings-toggle-label input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
}

.settings-card code {
  border-radius: 6px;
  background: #f1f5f9;
  color: var(--ink);
  font-size: 12px;
  padding: 2px 5px;
}

.settings-editable-list {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
  padding: 12px;
}

.settings-editable-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.settings-editable-list-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

.settings-editable-list-rows {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.settings-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: end;
}

.pet-type-settings-list {
  gap: 12px;
}

.pet-type-settings-rows {
  display: grid;
  gap: 10px;
}

.pet-type-settings-row {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.pet-type-settings-row.is-cat {
  border-color: #e5bf8a;
  background: #fffaf1;
}

.pet-type-settings-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, .45fr) 38px;
  gap: 10px;
  align-items: end;
}

.pet-type-settings-options,
.pet-type-settings-locations,
.pet-type-vaccine-list {
  display: grid;
  gap: 8px;
}

.pet-type-settings-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pet-type-settings-locations > span,
.pet-type-vaccine-list > span,
.lodging-pet-type-panel > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.pet-type-vaccine-list textarea {
  min-height: 108px;
}

.settings-list-remove {
  align-self: end;
  width: 38px;
  height: 38px;
}

.settings-card-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-card-inline-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.settings-card-inline-head > div {
  min-width: 0;
}

.settings-card-inline-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.1;
}

.settings-card[data-settings-accent],
.settings-metric-card[data-settings-accent],
.settings-location-card[data-settings-accent],
.service-table-section[data-settings-accent],
.pricing-rule-group[data-settings-accent],
.automation-section[data-settings-accent],
.calendar-setup-row[data-settings-accent],
.package-section[data-settings-accent],
.grooming-pricing-settings-card[data-settings-accent],
.checkout-tip-preset-row[data-settings-accent] {
  box-shadow: inset 4px 0 0 var(--settings-section-accent);
}

.settings-overview-section[data-settings-accent] {
  border-top: 3px solid var(--settings-section-accent);
  padding-top: 12px;
}

.service-form-section[data-settings-accent] {
  border-left: 4px solid var(--settings-section-accent);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--settings-section-soft), rgba(255, 255, 255, 0) 180px);
  margin-inline: 18px;
  padding: 16px 18px 0;
}

[data-settings-accent="0"] {
  --settings-section-accent: #11615b;
  --settings-section-soft: #eef8f4;
}

[data-settings-accent="1"] {
  --settings-section-accent: #226e93;
  --settings-section-soft: #eef7fb;
}

[data-settings-accent="2"] {
  --settings-section-accent: #9a6500;
  --settings-section-soft: #fff6df;
}

[data-settings-accent="3"] {
  --settings-section-accent: #7a4c8f;
  --settings-section-soft: #f6eef9;
}

[data-settings-accent="4"] {
  --settings-section-accent: #a24742;
  --settings-section-soft: #fff1ef;
}

[data-settings-accent="5"] {
  --settings-section-accent: #4f5f72;
  --settings-section-soft: #f1f5f9;
}

.settings-card-headline h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

.settings-section-head,
.settings-card-headline,
.settings-section-title,
.service-section-title,
.grooming-pricing-head,
.checkout-tip-preset-head,
.package-section-head,
.calendar-setup-row-head {
  align-items: center;
}

.settings-section-head > div,
.settings-card-headline > div,
.settings-section-title > div,
.grooming-pricing-head > div,
.calendar-setup-row-head > div {
  flex: 1 1 auto;
}

.service-form-section > h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.vaccine-map-card {
  max-width: none;
}

.vaccine-map-card h3 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.vaccine-map-table {
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 8px;
  font-size: 14px;
}

.vaccine-map-table th,
.vaccine-map-table td {
  border-top: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.vaccine-map-table th {
  background: #f6f4ee;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.vaccine-map-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vaccine-map-aliases span {
  border: 1px solid #cfe5df;
  border-radius: 999px;
  background: #eef8f4;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  padding: 3px 8px;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.settings-services-board {
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  min-height: 100%;
}

.settings-sidebar {
  position: sticky;
  top: 0;
  display: grid;
  gap: 12px;
  max-height: calc(100dvh - 132px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
  padding: 16px 12px;
}

.settings-sidebar-head {
  display: grid;
  gap: 2px;
  padding: 0 2px 2px;
}

.settings-sidebar h2 {
  color: var(--ink);
  font-size: 24px;
  font-weight: 950;
}

.settings-sidebar nav {
  display: grid;
  gap: 12px;
}

.settings-nav-group {
  display: grid;
  gap: 6px;
}

.settings-nav-group h3 {
  margin: 4px 10px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.settings-sidebar button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, .7);
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  text-align: left;
  padding: 9px 10px;
}

.settings-nav-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-sidebar button .settings-nav-label,
.settings-sidebar button small {
  min-width: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.settings-sidebar button .settings-nav-label {
  color: inherit;
}

.settings-sidebar button small {
  color: #80796d;
  font-size: 11px;
  font-weight: 800;
}

.settings-sidebar button:hover,
.settings-sidebar button.is-active {
  border-left-color: var(--accent);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(17, 97, 91, .05);
}

.settings-sidebar button.is-active small {
  color: var(--accent);
}

.settings-sidebar-summary {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding: 12px 10px 0;
}

.settings-sidebar-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.settings-sidebar-summary strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.settings-sidebar .settings-mobile-menu-toggle {
  display: none;
}

.settings-menu-bars {
  display: grid;
  gap: 4px;
  place-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--settings-section-soft);
}

.settings-menu-bars i {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.settings-menu-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-menu-copy strong,
.settings-menu-copy small {
  min-width: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.settings-menu-copy strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.settings-menu-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.settings-nav-symbol,
.settings-title-symbol,
.settings-section-symbol,
.settings-overview-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--settings-section-accent);
}

.settings-nav-symbol svg,
.settings-title-symbol svg,
.settings-section-symbol svg,
.settings-overview-symbol svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.settings-nav-symbol {
  width: 30px;
  height: 30px;
  background: #f2f7f5;
  color: var(--accent);
  padding: 6px;
}

.settings-sidebar button.is-active .settings-nav-symbol,
.settings-sidebar button:hover .settings-nav-symbol {
  background: var(--settings-section-soft);
  color: var(--settings-section-accent);
}

.settings-title-symbol {
  width: 48px;
  height: 48px;
  background: var(--settings-section-soft);
  color: var(--settings-section-accent);
  padding: 11px;
}

.settings-section-symbol,
.settings-overview-symbol {
  width: 32px;
  height: 32px;
  background: var(--settings-section-soft);
  color: var(--settings-section-accent);
  padding: 7px;
}

.settings-workspace,
.service-settings-page,
.settings-overview-page,
.service-form-shell {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.service-settings-head,
.service-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
}

.service-settings-head > div,
.service-form-head > div,
.settings-card-headline > div,
.settings-section-head > div,
.grooming-pricing-head > div,
.calendar-setup-row-head > div,
.package-section-head > div {
  min-width: 0;
}

.service-settings-head h2,
.service-form-head h2 {
  color: var(--ink);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 950;
  line-height: 1.05;
}

.service-settings-head span,
.service-form-head span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.service-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.settings-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 280px));
  gap: 12px;
}

.settings-summary-grid,
.settings-overview-grid,
.settings-inline-grid,
.settings-location-grid,
.integration-settings-grid {
  display: grid;
  gap: 12px;
}

.settings-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.settings-summary-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.settings-metric-card,
.settings-overview-card,
.settings-location-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 14px;
}

.settings-metric-card {
  display: grid;
  gap: 4px;
  min-height: 106px;
}

.settings-metric-card > span,
.settings-overview-card .settings-overview-kicker > span:last-child,
.settings-location-card > span,
.settings-muted {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.settings-metric-card strong {
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.settings-metric-card small,
.settings-overview-card small,
.settings-overview-card em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.settings-overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
}

.settings-overview-section {
  display: grid;
  gap: 10px;
}

.settings-overview-card {
  display: grid;
  gap: 8px;
  min-height: 150px;
  text-align: left;
}

.settings-overview-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.settings-overview-card:hover {
  border-color: var(--accent);
  background: #fffaf1;
}

.settings-overview-card strong {
  font-size: 20px;
  font-weight: 950;
  line-height: 1.1;
}

.settings-overview-card em {
  align-self: end;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.settings-inline-grid,
.integration-settings-grid {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.settings-inline-grid .wide,
.integration-settings-grid .wide {
  grid-column: 1 / -1;
}

.integration-secret-card {
  gap: 14px;
}

.integration-secret-groups {
  display: grid;
  gap: 14px;
}

.integration-secret-group {
  display: grid;
  gap: 8px;
}

.integration-secret-group h4 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.integration-secret-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.integration-secret-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
  padding: 12px;
}

.payment-settings-page {
  gap: 14px;
}

.payment-settings-section {
  gap: 0;
  max-width: none;
  overflow: hidden;
  padding: 0;
}

.payment-settings-section > summary {
  list-style: none;
}

.payment-settings-section > summary::-webkit-details-marker {
  display: none;
}

.payment-settings-summary {
  cursor: pointer;
  padding: 14px 16px;
}

.payment-settings-summary h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.payment-settings-summary-meta,
.payment-settings-section-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.payment-settings-summary-meta {
  flex: 0 0 auto;
  margin-left: auto;
}

.payment-settings-section-chevron {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdfa;
  color: var(--muted);
}

.payment-settings-section-chevron::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}

.payment-settings-section[open] .payment-settings-section-chevron::before {
  transform: translateY(2px) rotate(225deg);
}

.payment-settings-panel {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  background: linear-gradient(90deg, var(--settings-section-soft), #fff 210px);
  padding: 14px 16px 16px;
}

.payment-settings-section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border: 1px solid #e8deca;
  border-radius: 8px;
  background: rgba(255, 255, 255, .8);
  padding: 10px 12px;
}

.payment-settings-section-toolbar p {
  margin: 0;
  min-width: 0;
}

.payment-settings-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.payment-settings-section .pricing-rule-grid {
  align-items: stretch;
}

.stripe-terminal-settings-card {
  display: grid;
  gap: 14px;
}

.stripe-terminal-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.stripe-terminal-summary article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
  padding: 12px;
}

.stripe-terminal-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.stripe-terminal-summary strong {
  color: var(--accent);
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.stripe-terminal-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.stripe-terminal-form {
  display: grid;
  gap: 12px;
}

.stripe-terminal-background-form {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
  padding: 12px;
}

.stripe-terminal-background-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stripe-terminal-background-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.stripe-terminal-background-grid {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.stripe-terminal-background-preview {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #102a43;
  margin: 0;
}

.stripe-terminal-background-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stripe-terminal-background-fields {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.stripe-terminal-background-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.stripe-terminal-background-meta article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.stripe-terminal-background-meta span,
.stripe-terminal-background-meta strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.stripe-terminal-background-meta span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.stripe-terminal-background-meta strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.stripe-terminal-background-actions {
  justify-content: flex-start;
}

@media (max-width: 720px) {
  .stripe-terminal-background-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stripe-terminal-background-preview {
    max-width: 220px;
  }
}

.stripe-terminal-list {
  display: grid;
  gap: 8px;
}

.stripe-terminal-row {
  display: grid;
  grid-template-columns: 42px minmax(160px, 1fr) minmax(180px, 260px) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.stripe-terminal-details,
.stripe-terminal-name-field {
  min-width: 0;
}

.stripe-terminal-name-field {
  display: grid;
  gap: 4px;
}

.stripe-terminal-name-field span,
.stripe-terminal-kiosk-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stripe-terminal-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.stripe-terminal-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stripe-terminal-section-head h4 {
  margin: 0;
}

.stripe-terminal-kiosk-form {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
  padding: 12px;
}

.stripe-terminal-kiosk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.stripe-terminal-kiosk-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.stripe-terminal-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #ecf7f3;
  color: var(--accent);
}

.stripe-terminal-icon svg,
.checkout-terminal-reader svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.stripe-terminal-row strong,
.stripe-terminal-row small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.stripe-terminal-row strong {
  color: var(--ink);
  font-weight: 950;
}

.stripe-terminal-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 860px) {
  .stripe-terminal-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .stripe-terminal-name-field,
  .stripe-terminal-row-actions {
    grid-column: 1 / -1;
  }

  .stripe-terminal-row-actions {
    justify-content: flex-start;
  }
}

.integration-secret-row.is-configured {
  border-color: #c9e5d9;
  background: #f6fcf8;
}

.integration-secret-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  min-width: 0;
}

.integration-secret-main .settings-status-pill {
  justify-self: end;
}

.integration-secret-main strong {
  min-width: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.integration-secret-main small,
.integration-secret-main code {
  grid-column: 1 / -1;
}

.integration-secret-main small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.integration-secret-main code {
  justify-self: start;
}

.integration-secret-row-note {
  grid-column: 1 / -1;
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.integration-secret-row-note:empty {
  display: none;
}

.integration-secret-row-note.is-ok {
  color: var(--accent);
}

.integration-secret-row-note.is-error {
  color: #b42318;
}

.integration-secret-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.integration-secret-form label {
  display: grid;
  gap: 5px;
}

.integration-secret-form input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 8px 10px;
}

.integration-secret-delete {
  justify-self: end;
}

.settings-location-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.settings-location-form {
  display: grid;
  gap: 12px;
}

.settings-location-card {
  display: grid;
  gap: 14px;
}

.settings-location-card label {
  display: grid;
  gap: 6px;
}

.settings-location-card label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.settings-location-card input,
.settings-location-card textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  min-width: 0;
  padding: 10px;
}

.settings-location-card textarea {
  min-height: 74px;
  resize: vertical;
}

.settings-location-card strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  font-weight: 950;
}

.settings-location-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.settings-location-card dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.settings-location-card dd {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 950;
}

.staff-settings-list,
.lodging-settings-list,
.display-settings-list,
.camera-settings-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.display-settings-list {
  overflow-x: auto;
  padding-bottom: 2px;
}

.staff-settings-page {
  align-content: start;
}

.staff-suite-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(17, 97, 91, 0.04);
  padding: 16px;
}

.staff-suite-panel label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.staff-suite-panel label > span {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.staff-suite-panel input,
.staff-suite-panel select,
.staff-suite-panel textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 10px;
}

.staff-suite-panel input:focus,
.staff-suite-panel select:focus,
.staff-suite-panel textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(17, 97, 91, 0.12);
  outline: 0;
}

.staff-suite-panel textarea {
  resize: vertical;
}

.staff-suite-panel input[type="checkbox"],
.staff-suite-panel input[type="radio"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  accent-color: var(--accent);
  padding: 0;
}

.staff-suite-panel input[type="color"] {
  min-height: 42px;
  padding: 4px;
}

.staff-suite-panel .staff-color-field {
  justify-items: start;
}

.staff-suite-panel .staff-color-field input[type="color"] {
  width: 52px;
  min-width: 52px;
  height: 38px;
}

.staff-settings-row {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.staff-settings-row[open] {
  background: #fdfcf8;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
}

.staff-settings-row > summary {
  list-style: none;
}

.staff-settings-row > summary::-webkit-details-marker {
  display: none;
}

.staff-row-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.staff-row-head strong,
.staff-row-head small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.staff-row-head strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.staff-row-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.staff-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid color-mix(in srgb, var(--staff-color, var(--accent)) 55%, #fff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--staff-color, var(--accent)) 12%, #fff);
  color: var(--staff-color, var(--accent));
  font-size: 14px;
  font-weight: 950;
  overflow: hidden;
}

.staff-avatar.has-photo {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--staff-color, var(--accent));
  color: #fff;
}

.staff-avatar img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  object-fit: cover;
}

.staff-avatar.is-broken img {
  display: none;
}

.staff-avatar-fallback {
  display: none;
}

.staff-avatar.is-broken .staff-avatar-fallback {
  display: grid;
  place-items: center;
}

.staff-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-photo-preview.is-broken img {
  display: none;
}

.staff-photo-preview.is-broken::before {
  content: attr(data-staff-photo-initials);
}

.staff-row-grid,
.staff-access-grid,
.staff-notification-grid,
.staff-payroll-grid,
.staff-payroll-settings-grid,
.staff-clock-settings,
.staff-role-main,
.staff-commission-row,
.staff-clock-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 10px;
  min-width: 0;
}

.staff-settings-profile-grid {
  display: grid;
  grid-template-columns: minmax(128px, 160px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.staff-row-grid .wide {
  grid-column: 1 / -1;
}

.staff-editor-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.staff-editor-section-head,
.staff-details > summary {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.staff-editor-section-head h4 {
  margin: 0;
  font: inherit;
}

.staff-details > summary {
  cursor: pointer;
  list-style: none;
}

.staff-details > summary::-webkit-details-marker {
  display: none;
}

.staff-details > summary::after {
  content: "+";
  float: right;
  color: var(--muted);
}

.staff-details[open] > summary::after {
  content: "-";
}

.staff-photo-field,
.staff-invitation-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbf8;
  padding: 10px;
}

.staff-photo-field {
  display: grid;
  position: relative;
  grid-template-columns: 82px;
  width: max-content;
  align-items: center;
  justify-content: start;
  align-content: start;
}

.staff-profile-photo-field {
  display: grid;
  grid-template-columns: 54px;
  gap: 0;
  align-items: center;
  justify-content: start;
  border: 0;
  background: transparent;
  padding: 0;
}

.staff-profile-photo-field .staff-profile-avatar {
  grid-row: auto;
}

.staff-photo-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, #fff);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 16px;
  font-weight: 950;
  overflow: hidden;
}

.staff-photo-action {
  display: grid;
  place-items: center;
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font-size: 18px;
  font-weight: 950;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(20, 24, 22, 0.14);
}

.staff-profile-photo-field .staff-photo-action,
.staff-profile-photo-field .staff-photo-remove {
  width: 28px;
  height: 28px;
}

.staff-profile-photo-field .staff-photo-action {
  font-size: 18px;
}

.staff-profile-photo-field .staff-photo-remove {
  font-size: 13px;
}

.staff-photo-action:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(17, 97, 91, 0.1);
}

.staff-photo-action input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.staff-photo-remove {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 950;
}

.staff-photo-remove:hover:not(:disabled) {
  border-color: #d9534f;
  color: #d9534f;
}

.staff-photo-remove:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.staff-photo-field.has-photo .staff-photo-action {
  display: none;
}

.staff-row-save {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.staff-invitation-panel {
  justify-content: space-between;
}

.staff-invitation-panel > div {
  display: grid;
  gap: 3px;
  min-width: 180px;
}

.staff-invitation-panel span,
.staff-invitation-panel small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.staff-invitation-panel span {
  text-transform: uppercase;
  font-weight: 950;
}

.staff-invitation-status {
  width: fit-content;
  border-radius: 999px;
  background: #eef1ed;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  padding: 4px 9px;
}

.staff-invitation-status.is-sent {
  background: var(--accent-soft);
  color: var(--accent);
}

.staff-invitation-status.is-accepted {
  background: #e6f7ec;
  color: #168a63;
}

.staff-details {
  min-width: 0;
}

.staff-details summary {
  cursor: pointer;
}

.staff-details[open] summary {
  margin-bottom: 10px;
}

.staff-location-grid,
.staff-role-permissions,
.staff-commission-list,
.staff-clock-list,
.staff-role-list,
.staff-weekly-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.staff-location-grid,
.staff-role-permissions {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.staff-permission-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.staff-permission-group {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.staff-permission-group h5,
.staff-payroll-settings-grid h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.staff-permission-group > div {
  display: grid;
  gap: 6px;
}

.staff-permission-chip {
  min-height: 34px;
  padding: 8px;
}

.staff-suite-panel .settings-check-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  align-content: start;
  border-color: var(--line);
  background: #fff;
  min-width: 0;
}

.staff-suite-panel .settings-check-card:hover {
  border-color: #cfe5df;
  background: #f6fbf8;
}

.staff-suite-panel .settings-check-card:has(input:checked) {
  border-color: #b9ddd2;
  background: var(--accent-soft);
}

.staff-suite-panel .settings-check-card small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.staff-suite-panel .settings-check-card span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-transform: none;
}

.staff-suite-panel .settings-check-card:has(input:checked) span {
  color: var(--accent);
}

.staff-permission-chip span,
.staff-mini-check span {
  font-size: 12px;
  line-height: 1.2;
}

.staff-weekday-row {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) repeat(4, minmax(110px, .6fr));
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.staff-shift-head {
  max-width: 320px;
  margin-bottom: 10px;
}

.staff-role-row {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.staff-role-main {
  grid-template-columns: minmax(150px, .7fr) minmax(220px, 1fr) 40px;
  align-items: end;
}

.staff-role-permission-board {
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.staff-role-profiles,
.staff-role-permission-section-head,
.staff-role-permission-row {
  display: grid;
  grid-template-columns: minmax(280px, .95fr) repeat(var(--staff-role-count), minmax(200px, 1fr));
  gap: 0;
  min-width: var(--staff-role-board-min);
}

.staff-role-profiles {
  gap: 10px;
  align-items: stretch;
}

.staff-role-board-corner,
.staff-role-profile {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.staff-role-board-corner {
  background: #fbfaf6;
}

.staff-role-board-corner strong,
.staff-role-profile-head strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.1;
}

.staff-role-profile-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
}

.staff-role-profile textarea {
  min-height: 72px;
}

.staff-role-permission-sections {
  display: grid;
  gap: 12px;
  min-width: var(--staff-role-board-min);
}

.staff-role-permission-section {
  min-width: var(--staff-role-board-min);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.staff-role-permission-section summary {
  cursor: pointer;
  list-style: none;
}

.staff-role-permission-section summary::-webkit-details-marker {
  display: none;
}

.staff-role-permission-section-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #fbfaf6;
}

.staff-role-permission-section-head strong,
.staff-role-permission-section-head span {
  min-height: 44px;
  border-right: 1px solid var(--line);
  padding: 12px 10px;
}

.staff-role-permission-section-head strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.staff-role-permission-section-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.staff-role-permission-row {
  align-items: stretch;
  border-top: 1px solid #ece9e1;
}

.staff-role-permission-section-head + .staff-role-permission-row,
.staff-role-permission-row:first-of-type {
  border-top: 0;
}

.staff-role-permission-row > span {
  display: flex;
  align-items: center;
  min-height: 42px;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  padding: 9px 10px;
}

.staff-role-permission-row .staff-permission-check {
  min-height: 42px;
  border: 0;
  border-right: 1px solid #ece9e1;
  border-radius: 0;
  padding: 9px 10px;
}

.staff-role-permission-row .staff-permission-check:last-child,
.staff-role-permission-section-head span:last-child {
  border-right: 0;
}

.staff-role-permission-all-row {
  background: #f8fbfa;
}

.staff-role-permission-all-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.staff-role-permission-row .staff-permission-check span {
  color: transparent;
  font-size: 0;
}

.staff-role-permission-row .staff-permission-check span::after {
  content: "Allowed";
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.staff-role-permission-row .staff-permission-check:has(input:checked) span::after {
  color: var(--accent);
}

.staff-payroll-settings-grid section {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.staff-commission-row {
  grid-template-columns: minmax(160px, 1.2fr) minmax(120px, .7fr) minmax(130px, .7fr) minmax(150px, .8fr) 40px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.staff-clock-row {
  grid-template-columns: minmax(170px, 1fr) repeat(4, minmax(120px, .7fr)) 40px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.lodging-settings-row {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.display-settings-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(130px, .8fr) minmax(150px, .95fr) minmax(150px, .95fr) minmax(170px, 1fr) 40px;
  gap: 10px;
  align-items: end;
  min-width: 980px;
  border: 1px solid #e5dfd1;
  border-radius: 8px;
  background: #fffcf6;
  padding: 10px;
}

.camera-settings-card {
  display: grid;
  gap: 16px;
}

.camera-settings-section {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.camera-settings-section > summary,
.camera-settings-row > summary,
.camera-settings-panel > summary {
  cursor: pointer;
  list-style: none;
}

.camera-settings-section > summary::-webkit-details-marker,
.camera-settings-row > summary::-webkit-details-marker,
.camera-settings-panel > summary::-webkit-details-marker {
  display: none;
}

.camera-section-summary {
  min-height: 68px;
  padding: 14px;
}

.camera-settings-section[open] > .camera-section-summary {
  border-bottom: 1px solid var(--line);
  background: #fbfaf6;
}

.camera-section-count {
  flex: 0 0 auto;
  border: 1px solid #d9e8e4;
  border-radius: 999px;
  background: #f1faf7;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  padding: 7px 10px;
}

.camera-section-chevron,
.camera-summary-chevron,
.camera-panel-chevron {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.camera-section-chevron::before,
.camera-summary-chevron::before,
.camera-panel-chevron::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}

.camera-settings-section[open] > summary .camera-section-chevron::before,
.camera-settings-row[open] > summary .camera-summary-chevron::before,
.camera-settings-panel[open] > summary .camera-panel-chevron::before {
  transform: translateY(2px) rotate(225deg);
}

.camera-section-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.camera-settings-row {
  display: block;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
}

.camera-settings-row.is-room {
  background: #fff;
}

.camera-settings-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.camera-settings-row[open] > .camera-settings-summary {
  border-bottom: 1px solid var(--line);
  background: #fbfaf6;
}

.camera-summary-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.camera-summary-main strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-summary-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-summary-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.camera-summary-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  padding: 6px 9px;
  white-space: nowrap;
}

.camera-summary-badge.is-ok {
  border-color: #b9dccc;
  background: #edf8f2;
  color: var(--green);
}

.camera-summary-badge.is-warn {
  border-color: #f1d3b6;
  background: #fff6ed;
  color: #9a5b18;
}

.camera-summary-badge.is-muted {
  border-color: #dbe0e6;
  background: #f6f7f8;
  color: #64748b;
}

.camera-settings-body {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.camera-settings-panels {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.camera-settings-panel {
  display: block;
  overflow: hidden;
  min-width: 0;
  border: 1px solid #eee7d8;
  border-radius: 8px;
  background: #fff;
}

.camera-basic-panel {
  background: #fffdf8;
}

.camera-panel-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 11px 12px;
}

.camera-settings-panel[open] > .camera-panel-summary {
  border-bottom: 1px solid #eee7d8;
  background: #fbfaf6;
}

.camera-panel-summary > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.camera-panel-summary strong,
.camera-panel-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-panel-summary strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.camera-panel-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

.camera-panel-body {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.camera-primary-settings {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, .8fr) minmax(170px, 1fr) minmax(240px, 1.25fr) minmax(118px, .55fr) 40px;
  gap: 10px;
  align-items: end;
}

.camera-stream-field input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.camera-advanced-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.camera-option-group {
  display: block;
  min-width: 0;
  border: 1px solid #eee7d8;
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}

.camera-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.camera-playback-grid {
  grid-template-columns: minmax(0, 1fr);
}

.camera-operation-group,
.camera-wide-field,
.camera-weekday-grid {
  grid-column: 1 / -1;
}

.camera-weekday-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.camera-logo-url-field input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.camera-embed-panel {
  display: block;
  min-width: 0;
  border: 1px solid #e7decc;
  border-radius: 8px;
  background: #fffaf0;
}

.camera-embed-panel[open] > .camera-panel-summary {
  border-bottom-color: #e7decc;
  background: #fff7e9;
}

.camera-embed-panel-body {
  gap: 10px;
}

.camera-embed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.camera-embed-panel textarea {
  width: 100%;
  min-height: 188px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
}

.camera-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.camera-save-button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.camera-row-lock,
.camera-settings-remove {
  width: 38px;
  height: 38px;
}

.camera-room-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.camera-room-summary span {
  border: 1px solid #cfe5df;
  border-radius: 999px;
  background: #eef8f4;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  padding: 7px 10px;
}

@media (max-width: 1180px) {
  .camera-settings-summary {
    grid-template-columns: minmax(0, 1fr) 28px;
  }

  .camera-summary-badges {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .camera-panel-body.camera-primary-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .camera-stream-field,
  .camera-context-field {
    grid-column: 1 / -1;
  }

  .camera-enabled-toggle,
  .camera-settings-remove,
  .camera-row-lock {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .camera-section-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .camera-section-count {
    align-self: flex-start;
  }

  .camera-section-body,
  .camera-settings-body {
    padding: 10px;
  }

  .camera-panel-summary,
  .camera-settings-summary {
    gap: 9px;
    padding: 10px;
  }

  .camera-panel-summary small,
  .camera-summary-main small {
    white-space: normal;
  }

  .camera-panel-body.camera-primary-settings,
  .camera-panel-body.camera-option-grid,
  .camera-advanced-settings,
  .camera-weekday-grid {
    grid-template-columns: 1fr;
  }

  .camera-settings-remove,
  .camera-row-lock {
    width: 100%;
  }

  .camera-row-actions {
    display: grid;
  }

  .camera-row-actions .camera-save-button,
  .camera-embed-head button {
    width: 100%;
  }

  .camera-embed-head {
    display: grid;
  }

  .camera-embed-panel textarea {
    font-size: 12px;
  }

  /* Full-width, 44px-tall, 16px text fields make the camera form comfortable to
     fill out on a phone — and 16px specifically stops iOS Safari from zooming in
     every time a field is focused (the smaller sizes did, which made entering a
     stream URL on a phone a fight with the zoom). */
  .camera-settings-body input:not([type="checkbox"]):not([type="radio"]),
  .camera-settings-body select {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    font-size: 16px;
  }

  .camera-settings-body label:not(.settings-check-card) {
    display: grid;
    gap: 4px;
    min-width: 0;
  }
}

.display-link-cell {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.display-link-cell > span,
.display-link-cell small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.display-link-cell a {
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}

.display-link-cell a:hover {
  text-decoration: underline;
}

.lodging-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.lodging-card-head > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  min-width: 0;
}

.lodging-card-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 19px;
  font-weight: 950;
  line-height: 1.1;
}

.lodging-card-head small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.lodging-type-pill {
  align-self: start;
  border-radius: 999px;
  background: #e7f5ee;
  color: var(--green);
  font-size: 11px;
  font-weight: 950;
  min-height: 24px;
  padding: 5px 9px;
  text-transform: uppercase;
}

.lodging-type-pill.is-boarding {
  background: #fff3d8;
  color: #7a4b00;
}

.lodging-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
  min-width: 0;
  align-items: start;
}

.lodging-primary-fields,
.lodging-capacity-fields {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.lodging-primary-fields {
  grid-column: 1;
  grid-template-columns: minmax(220px, 1.35fr) minmax(150px, .85fr) minmax(130px, .7fr) minmax(120px, .7fr);
}

.lodging-settings-row.is-dayplay .lodging-primary-fields {
  grid-template-columns: minmax(220px, 1.35fr) minmax(150px, .85fr) minmax(130px, .7fr);
}

.lodging-settings-row.is-dayplay .lodging-price-field {
  display: none;
}

.lodging-capacity-panel {
  grid-column: 1;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  border: 1px solid #e5dfd1;
  border-radius: 8px;
  background: #fffcf6;
  padding: 10px;
}

.lodging-capacity-summary {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.lodging-capacity-summary span,
.lodging-capacity-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.lodging-capacity-summary strong {
  color: var(--accent);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.lodging-capacity-summary small {
  line-height: 1.2;
  text-transform: none;
}

.lodging-capacity-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lodging-camera-toggle {
  grid-column: 1 / -1;
  display: grid;
  gap: 2px 8px;
  align-items: center;
}

.lodging-camera-toggle small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.lodging-pet-type-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  border-top: 1px solid #e8dec8;
  padding-top: 8px;
}

.lodging-pet-type-panel .settings-check-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.lodging-pet-type-check:has(input:checked) {
  border-color: #9dcfc5;
  background: #eefaf7;
}

.lodging-unit-pet-type-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  border-top: 1px solid #e8dec8;
  padding-top: 8px;
}

.lodging-unit-pet-type-panel > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lodging-unit-pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.lodging-unit-pet-row {
  display: grid;
  gap: 5px;
  border: 1px solid #e6dfd2;
  border-radius: 8px;
  background: #fffdfa;
  padding: 7px;
}

.lodging-unit-pet-row strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.lodging-unit-pet-row label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: 11px;
  font-weight: 850;
}

.unit-pet-type-badge {
  justify-self: start;
  width: fit-content;
  border: 1px solid #7ac7bb;
  border-radius: 999px;
  background: #e7f8f5;
  color: #0f635b;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.lodging-photo-field {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
  align-content: start;
}

.lodging-photo-field > span {
  grid-column: 1 / -1;
  color: #6d675d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lodging-photo-preview-shell {
  grid-column: 1 / -1;
  width: 100%;
}

.lodging-photo-field img,
.lodging-photo-preview-empty {
  width: 100%;
  height: 96px;
  border: 1px solid #d8d0bf;
  border-radius: 8px;
  background: #f6f1e8;
  object-fit: cover;
}

.lodging-photo-preview-empty {
  display: grid;
  place-items: center;
}

.lodging-photo-preview-empty::after {
  content: "No photo";
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.lodging-photo-field input[type="file"] {
  display: none;
}

.lodging-photo-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 38px);
  gap: 8px;
  justify-content: end;
}

.lodging-photo-action {
  appearance: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  border: 1px solid #d8d0bf;
  border-radius: 8px;
  background: #fffdfa;
  color: var(--green);
  cursor: pointer;
  font: inherit;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.lodging-photo-action:hover:not(:disabled) {
  border-color: var(--green);
  background: #f0fbf7;
}

.lodging-photo-action:disabled {
  color: #b7ada0;
  cursor: not-allowed;
  opacity: .62;
}

.staff-settings-remove,
.lodging-settings-remove,
.display-settings-remove,
.camera-settings-remove {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}

.settings-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.settings-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.settings-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.settings-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cfe5df;
  border-radius: 999px;
  background: #eef8f4;
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
  min-height: 34px;
  padding: 4px 8px 4px 12px;
}

.settings-chip button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #d8eee6;
  color: var(--green);
  font-weight: 950;
}

.settings-inline-create {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 10px;
}

.settings-inline-create input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 10px;
}

.settings-check-card {
  display: grid;
  align-content: center;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  border: 1px solid #e5dfd1;
  border-radius: 8px;
  background: #fffcf6;
  padding: 10px;
}

.settings-check-card input {
  width: auto;
  min-width: 18px;
  height: 18px;
}

.settings-filter-row label {
  display: grid;
  gap: 6px;
}

.settings-filter-row span,
.service-form-grid label > span,
.radio-card > span,
.service-color-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.settings-filter-row select,
.service-form-grid input,
.service-form-grid select,
.service-form-grid textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  padding: 10px 12px;
}

.service-table-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.service-table-section.compact {
  padding-top: 4px;
}

.service-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.service-section-title h3,
.pricing-rule-group h3,
.service-form-section h3 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.service-section-title h3,
.package-section-head h3,
.checkout-tip-preset-head h4 {
  flex: 1 1 auto;
  min-width: 0;
}

.service-section-title > span {
  border: 1px solid #cfe5df;
  border-radius: 999px;
  background: #eef8f4;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  padding: 6px 10px;
}

.service-table-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

.service-table {
  display: grid;
  min-width: 920px;
}

.service-table.is-addons {
  min-width: 955px;
}

.service-table-row {
  display: grid;
  grid-template-columns: var(--service-columns);
  align-items: center;
  gap: 16px;
  min-height: 62px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
}

.service-table-row > span,
.service-table-row > strong {
  min-width: 0;
}

.service-table-row > span {
  overflow-wrap: break-word;
  line-height: 1.18;
}

.service-table.is-addons .service-table-row {
  gap: 12px;
  font-size: 14px;
}

.service-table.is-addons .service-table-heading {
  font-size: 11px;
  line-height: 1.1;
}

.service-table.is-addons .service-name-cell {
  font-size: 15px;
  line-height: 1.12;
}

.service-table-row:first-child {
  border-top: 0;
}

.service-table-heading {
  min-height: 42px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.service-name-cell {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 950;
}

.service-name-cell i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
}

.service-menu-button {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
}

.service-menu-button:hover {
  border-color: var(--line);
  background: #f8f6f0;
}

.service-menu-button svg,
.settings-link-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.evaluation-table {
  min-width: 760px;
}

.evaluation-table .service-table-row {
  grid-template-columns: minmax(240px, 1.4fr) 120px 120px minmax(260px, 1fr) 42px;
}

.settings-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: #e7f5ee;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  padding: 0 9px;
}

.service-vaccine-header {
  margin-top: 4px;
}

.settings-link-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pricing-rule-group {
  display: grid;
  gap: 10px;
}

.pricing-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
}

.pricing-rule-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  padding: 16px;
}

.pricing-rule-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.pricing-rule-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #fff4e8;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 950;
}

.pricing-rule-card strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.pricing-rule-card em {
  border-radius: 999px;
  background: #e7f5ee;
  color: var(--green);
  font-size: 11px;
  font-style: normal;
  padding: 3px 8px;
}

.pricing-rule-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.pricing-detail-table {
  min-width: 860px;
}

.pricing-detail-table .service-table-row {
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.4fr) 150px 120px;
}

.service-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-back-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 24px;
  font-weight: 950;
}

.service-form-page {
  max-width: 1180px;
}

.service-form-shell {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 0 18px;
}

.service-form-head {
  position: sticky;
  top: 0;
  z-index: 5;
  border-width: 0 0 1px;
  border-radius: 8px 8px 0 0;
}

.service-form-section {
  display: grid;
  gap: 12px;
  padding: 18px 24px 0;
}

.service-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.service-form-grid label,
.radio-card,
.service-color-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.service-form-grid .wide,
.radio-card.wide {
  grid-column: 1 / -1;
}

.radio-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 12px;
}

.radio-card label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.service-color-field div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-color-field input[type="color"] {
  width: 56px;
  min-width: 56px;
  min-height: 42px;
  padding: 4px;
}

.service-color-field button {
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line);
}

.settings-inline-add {
  justify-self: start;
  align-self: end;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--green);
  font-weight: 950;
}

.checkout-open-settings-list {
  display: grid;
  gap: 10px;
}

.checkout-promotion-settings-list {
  display: grid;
  gap: 10px;
}

.checkout-promotion-setting-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) 38px;
  gap: 8px;
  align-items: end;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.checkout-promotion-name,
.checkout-promotion-description,
.checkout-promotion-locations,
.checkout-promotion-services {
  grid-column: 1 / -1;
}

.checkout-promotion-locations select[multiple] {
  min-height: 64px;
}

.checkout-promotion-services {
  display: grid;
  gap: 4px;
}

.checkout-promotion-service-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkout-promotion-service-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.checkout-promotion-flag {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.checkout-promotion-locations small,
.checkout-promotion-services small {
  color: #8a8378;
  font-size: 11px;
}

.checkout-promotion-setting-remove {
  align-self: end;
  width: 38px;
  height: 38px;
}

.booking-promotions-banner.is-promo {
  border: 1px solid rgba(34, 139, 87, .35);
  background: rgba(34, 139, 87, .08);
}

.booking-promotions-list {
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.text-button.is-danger {
  color: #b3261e;
}

.checkout-tip-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.checkout-tip-preset-group {
  display: grid;
  align-content: start;
  gap: 10px;
}

.checkout-tip-preset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.checkout-tip-preset-head h4 {
  margin: 0;
  color: #6d675d;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.checkout-tip-preset-head .secondary-button {
  min-height: 34px;
  padding-inline: 12px;
}

.checkout-tip-preset-list {
  display: grid;
  gap: 8px;
}

.checkout-tip-preset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 38px;
  gap: 8px;
  align-items: end;
}

.checkout-tip-preset-row.is-fixed {
  grid-template-columns: 34px minmax(0, 1fr) 38px;
}

.checkout-tip-preset-unit {
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid #e2dacb;
  border-radius: 8px;
  background: #fffcf6;
  color: var(--green);
  font-weight: 950;
}

.checkout-tip-preset-remove {
  align-self: end;
  width: 38px;
  height: 38px;
}

.checkout-open-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: end;
}

.checkout-open-setting-remove {
  align-self: end;
  width: 38px;
  height: 38px;
}

.grooming-pricing-settings-card {
  gap: 14px;
  margin-bottom: 14px;
}

.grooming-pricing-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.grooming-pricing-head h3 {
  margin: 2px 0;
  font-size: 18px;
  font-weight: 950;
}

.grooming-pricing-head span,
.grooming-pricing-settings-card p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.grooming-pricing-list {
  display: grid;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.grooming-pricing-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) 70px 96px 96px minmax(130px, .8fr) 96px minmax(110px, .7fr) minmax(120px, .7fr) minmax(125px, .8fr) minmax(140px, .8fr) 38px;
  gap: 8px;
  align-items: end;
  min-width: 1380px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.grooming-pricing-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.grooming-pricing-row label > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.grooming-pricing-row input,
.grooming-pricing-row select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 7px 8px;
}

.grooming-pricing-check {
  align-self: center;
  display: inline-flex !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px !important;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.grooming-pricing-check input {
  width: auto;
  min-height: auto;
  accent-color: var(--accent);
}

.grooming-pricing-remove {
  align-self: end;
  width: 38px;
  height: 36px;
}

.tour-settings-card {
  max-width: 980px;
}

.tour-rule-list {
  display: grid;
  gap: 10px;
}

.tour-rule-row {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr) minmax(180px, 1fr) 38px;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.tour-rule-row label {
  display: grid;
  gap: 4px;
}

.tour-rule-row select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 8px;
}

.tour-rule-remove {
  align-self: end;
  width: 38px;
  height: 38px;
}

.settings-table-card {
  gap: 14px;
}

.settings-table-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, auto);
  align-items: end;
  gap: 12px;
}

.settings-table-toolbar > div:first-of-type {
  min-width: 0;
}

.settings-table-toolbar h3,
.automation-section h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

.settings-table-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.settings-table-controls label,
.automation-section label,
.retail-settings-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.settings-table-controls label {
  flex: 1 1 190px;
}

.settings-table-controls input,
.settings-table-controls select,
.automation-section input,
.automation-section select,
.automation-section textarea,
.retail-settings-row input,
.retail-settings-row select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 8px 10px;
}

.automation-section textarea {
  min-height: 70px;
  resize: vertical;
}

.settings-column-panel {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid #dde6dc;
  border-radius: 8px;
  background: #f7fbf6;
  padding: 10px;
}

.settings-column-panel label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid #cddcc9;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
}

.settings-column-panel input,
.retail-taxable-check input {
  width: auto;
  min-height: auto;
}

.settings-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.settings-data-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: #fff;
  color: var(--ink);
}

.settings-data-table th,
.settings-data-table td {
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}

.settings-data-table th {
  border-top: 0;
  background: #f6f4ee;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-data-table tr[data-open-owner],
.settings-data-table tr[data-open-pet] {
  cursor: pointer;
}

.settings-data-table tr[data-open-owner]:hover,
.settings-data-table tr[data-open-pet]:hover {
  background: #fffaf1;
}

.settings-table-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.settings-table-chip-list span {
  border: 1px solid #d7eadf;
  border-radius: 999px;
  background: #f1faf4;
  color: #21483c;
  font-size: 12px;
  font-weight: 900;
  padding: 3px 8px;
}

.settings-table-empty {
  color: var(--muted);
  font-weight: 850;
  text-align: center !important;
}

.settings-status-pill.is-warning {
  background: #fff3d8;
  color: #7a4b00;
}

.settings-status-pill.is-ok {
  background: #e7f5ee;
  color: #0f6c4f;
}

.settings-status-pill.is-info {
  background: #e0f2fe;
  color: #075985;
}

.settings-status-pill.is-pending {
  background: #eef2ff;
  color: #4338ca;
}

.settings-status-pill.is-danger {
  background: #fff1f2;
  color: #991b1b;
}

.retail-settings-card,
.package-settings-card,
.business-rules-page form,
.automation-settings-page form {
  display: grid;
  gap: 14px;
}

.business-rule-card {
  gap: 12px;
}

.business-rule-card > summary {
  list-style: none;
}

.business-rule-card > summary::-webkit-details-marker {
  display: none;
}

.business-rule-summary {
  cursor: pointer;
  align-items: center;
}

.business-rule-summary-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.business-rule-section-chevron {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdfa;
  color: var(--muted);
}

.business-rule-section-chevron::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}

.business-rule-card[open] .business-rule-section-chevron::before {
  transform: translateY(2px) rotate(225deg);
}

.business-rule-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.business-rule-section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.business-rule-section-toolbar > p {
  margin: 0;
}

.business-holiday-scope {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.business-holiday-scope p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

[data-holiday-scope="all"] [data-holiday-location-field] {
  display: none;
}

.business-rule-section-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.business-rule-section-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.business-rule-card[data-dirty="true"] .business-rule-section-status {
  color: #8a5b00;
}

.business-rule-section-save:disabled {
  cursor: default;
  opacity: .65;
}

.business-rule-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.business-rule-row {
  position: relative;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 48px 12px 12px;
}

.business-rule-row-grid,
.business-policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.business-rule-row-grid .wide,
.business-policy-grid .wide {
  grid-column: 1 / -1;
}

.business-rule-control-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.business-rule-group-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
  text-transform: uppercase;
}

.business-holiday-service-grid,
.business-holiday-window-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  min-width: 0;
}

.business-holiday-window-grid {
  align-items: end;
}

.settings-check-card.owner-communications-disable {
  border-color: #f0b429;
  background: #fffaf0;
}

.settings-check-card.owner-communications-disable small {
  display: block;
  color: #744210;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-transform: none;
}

.business-rule-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(96px, 1fr));
  gap: 8px;
  min-width: 0;
}

.business-hours-editor {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.business-hours-mode {
  max-width: 220px;
}

.business-hours-same-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
}

.business-hours-day {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.business-hours-day strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.business-hours-day label {
  min-width: 0;
}

.business-hours-editor[data-hours-mode="same"] .business-hours-daily-grid,
.business-hours-editor[data-hours-mode="daily"] .business-hours-same-grid {
  display: none;
}

.business-rule-remove {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
}

@media (max-width: 900px) {
  .business-rule-row {
    padding: 52px 12px 12px;
  }

  .business-rule-week-grid {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }

  .business-hours-same-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .business-rule-section-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .business-holiday-scope {
    grid-template-columns: 1fr;
  }

  .business-rule-section-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

.automation-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.automation-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.automation-queue-grid {
  display: grid;
  gap: 14px;
}

.automation-workflow-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.retail-settings-list,
.package-settings-list,
.automation-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.package-settings-scroll {
  overflow-x: auto;
}

.retail-settings-row,
.package-settings-row {
  display: grid;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.retail-settings-row {
  grid-template-columns: minmax(96px, .7fr) minmax(170px, 1.4fr) minmax(120px, .9fr) 90px 86px minmax(105px, .8fr) 82px 38px;
  min-width: 960px;
}

.package-settings-row {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  align-items: stretch;
  border-color: #d8cdbd;
  border-left: 6px solid #0f766e;
  background: #fffefd;
  box-shadow: 0 8px 22px rgba(58, 44, 28, .08);
}

.package-settings-row:nth-child(2n) {
  border-left-color: #b7791f;
}

.package-settings-row:nth-child(3n) {
  border-left-color: #2563eb;
}

.package-name-field {
  min-width: 0;
}

.package-settings-main,
.package-settings-sections,
.package-section,
.package-items-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.package-settings-row-head {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(140px, 180px) 38px;
  gap: 10px;
  align-items: end;
}

.package-settings-row-summary {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) minmax(150px, auto) repeat(2, auto);
  gap: 8px;
  align-items: center;
  border: 1px solid #e8dfd2;
  border-radius: 8px;
  background: linear-gradient(90deg, #f5fbf8 0%, #fffaf0 100%);
  padding: 8px 10px;
  color: var(--ink);
  min-width: 0;
}

.package-settings-row-summary span,
.package-settings-row-summary em,
.package-settings-row-summary b {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd4c8;
  border-radius: 999px;
  background: #fff;
  color: #53605c;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.2;
  padding: 5px 9px;
  white-space: nowrap;
}

.package-settings-row-summary strong {
  min-width: 0;
  overflow: hidden;
  color: #17211e;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.package-settings-row-summary em {
  color: #075985;
}

.package-settings-row-summary b {
  color: #744210;
}

.package-settings-row label,
.package-item-row label {
  min-width: 0;
}

.package-settings-row textarea {
  min-height: 78px;
  resize: vertical;
}

.package-section {
  border: 1px solid #e5dfd5;
  border-radius: 8px;
  background: #fdfcf8;
  padding: 12px;
}

.package-section h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.package-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.package-section-head h3 {
  margin: 0;
}

.package-settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.package-settings-grid.is-basic {
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.4fr);
}

.package-settings-grid.is-validity {
  grid-template-columns: minmax(150px, .7fr) minmax(150px, .7fr) minmax(240px, 1.2fr);
}

.package-item-row {
  display: grid;
  grid-template-columns: minmax(120px, .6fr) minmax(240px, 1.4fr) minmax(90px, .45fr) 38px;
  gap: 8px;
  align-items: end;
}

.package-online-toggle {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
  color: var(--ink);
  font-weight: 900;
}

.package-online-toggle input {
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.compact-button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 13px;
}

.retail-settings-remove,
.package-settings-remove,
.package-item-remove {
  width: 38px;
  height: 38px;
}

.automation-section {
  max-width: none;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.automation-section summary {
  cursor: pointer;
  list-style: none;
}

.automation-section summary::-webkit-details-marker {
  display: none;
}

.automation-section .settings-section-head {
  min-height: 72px;
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 14px 16px;
}

.automation-section[open] .settings-section-head {
  border-bottom: 1px solid var(--line);
  background: #fbfaf6;
}

.automation-section-summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
}

.automation-section-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.automation-section-toggle::before,
.automation-section-toggle::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  transition: transform .15s ease;
}

.automation-section-toggle::after {
  transform: rotate(90deg);
}

.automation-section[open] .automation-section-toggle::after {
  transform: rotate(0deg);
}

.automation-section-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.automation-section-actions {
  display: flex;
  justify-content: flex-end;
}

.automation-office-grid {
  align-items: end;
}

.automation-row {
  display: grid;
  gap: 8px;
  align-items: end;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.automation-reminder-row {
  grid-template-columns: 78px repeat(3, minmax(0, 1fr)) 38px;
}

.automation-accept-row {
  grid-template-columns: 78px repeat(2, minmax(0, 1fr)) 38px;
}

.automation-simple-row {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-right: 58px;
}

.automation-simple-row .wide,
.automation-reminder-row .wide {
  grid-column: 1 / -1;
}

.automation-simple-row > .message-icon-button {
  position: absolute;
  top: 10px;
  right: 10px;
}

.automation-required-check {
  min-height: 38px;
  align-items: center;
  align-content: center;
  grid-template-columns: 22px minmax(0, max-content);
  justify-content: start;
  padding: 8px 10px;
}

.automation-required-check span {
  align-self: center;
  line-height: 1.1;
}

.automation-row > .message-icon-button {
  width: 38px;
  height: 38px;
}

.agreement-template-row {
  position: relative;
  grid-template-columns: 118px repeat(3, minmax(0, 1fr)) auto 38px;
  align-items: end;
}

.agreement-template-row .wide {
  grid-column: 1 / -1;
}

.agreement-template-row textarea {
  min-height: 180px;
  line-height: 1.45;
}

.agreement-version-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: center;
}

.agreement-version-meta span {
  border: 1px solid #d8e8df;
  border-radius: 999px;
  background: #f1faf4;
  color: #21483c;
  font-size: 12px;
  font-weight: 950;
  padding: 5px 8px;
}

.agreement-version-history {
  display: grid;
  gap: 6px;
  border: 1px solid #e5dfd5;
  border-radius: 8px;
  background: #fdfcf8;
  padding: 8px;
}

.agreement-version-history span {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #ece7de;
  padding: 4px 0;
}

.agreement-version-history span:last-child {
  border-bottom: 0;
}

.agreement-version-history strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.agreement-version-history small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.agreement-signature-settings {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.agreement-signature-table {
  display: grid;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.agreement-signature-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(150px, .9fr) minmax(80px, .45fr) minmax(130px, .75fr) minmax(140px, .9fr);
  gap: 10px;
  min-width: 780px;
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  align-items: center;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.agreement-signature-row:first-child {
  border-top: 0;
}

.agreement-signature-row.is-head {
  background: #f6f4ee;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.agreement-signature-row span {
  min-width: 0;
}

.agreement-signature-row strong,
.agreement-signature-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agreement-signature-row small {
  color: var(--muted);
  font-size: 12px;
}

.agreement-signing-overlay {
  position: fixed;
  inset: 0;
  z-index: 70000;
  display: grid;
  place-items: center;
  background: rgba(23, 23, 23, .58);
  padding: 14px;
}

.agreement-signing-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  width: min(880px, 100%);
  height: min(760px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px;
}

.agreement-signing-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 12px;
  align-items: start;
}

.agreement-signing-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 950;
}

.agreement-signing-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.agreement-document-scroll {
  min-height: 0;
  max-height: none;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.55;
  padding: 16px;
}

.agreement-viewer-panel {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.agreement-viewer-signature {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 10px 12px;
}

.agreement-viewer-signature .eyebrow {
  color: var(--muted);
}

.agreement-viewer-signature img {
  max-height: 120px;
  max-width: 100%;
  object-fit: contain;
  align-self: start;
}

.agreement-viewer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.agreement-signature-field {
  display: grid;
  gap: 6px;
  align-self: center;
}

.agreement-signature-grid {
  display: grid;
  grid-template-columns: minmax(180px, .82fr) minmax(260px, 1.18fr);
  gap: 12px;
  align-items: stretch;
}

.agreement-signature-field span,
.agreement-drawn-signature-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.agreement-signature-field input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  padding: 9px 10px;
}

.agreement-drawn-signature {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.agreement-drawn-signature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agreement-drawn-signature-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.agreement-signature-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agreement-inline-sign-button {
  min-width: 124px;
}

.agreement-signature-pad {
  width: 100%;
  height: clamp(118px, 18dvh, 160px);
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  touch-action: none;
}

.agreement-signing-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
  background: #fff;
  padding-top: 12px;
}

.agreement-signing-actions span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.agreement-signing-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.agreement-signing-message {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
}

.agreement-signing-message.is-error {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #b91c1c;
  font-weight: 950;
}

.automation-request-table {
  min-width: 820px;
}

.tasks-board {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.task-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.task-page-head h2 {
  color: var(--ink);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 950;
  line-height: 1.05;
}

.task-page-head span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.task-page-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.task-run-card-button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 158px;
  min-height: 74px;
  text-align: left;
}

.task-run-card-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.task-run-card-button span {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.task-run-card-button strong {
  color: var(--accent);
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.task-page-count {
  display: grid;
  min-width: 142px;
  min-height: 74px;
  align-content: center;
  border: 1px solid #b8d8d2;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 10px 14px;
}

.task-page-count span,
.task-summary-card span,
.task-detail-grid small,
.task-row-title p {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.task-page-count strong {
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.task-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.task-summary-card {
  display: grid;
  gap: 5px;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.task-summary-card.is-total {
  border-color: #b8d8d2;
  background: #f1fbf8;
}

.task-summary-card strong {
  color: var(--ink);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.task-summary-card.is-total strong {
  color: var(--accent);
}

.task-summary-card small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.task-stats {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.task-stat {
  --task-tone: #0f6c4f;
  --task-tone-bg: #f0fbf7;
  --task-tone-border: #b8d8d2;
  min-height: 88px;
  border-color: var(--task-tone-border);
  background: var(--task-tone-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--task-tone) 6%, transparent);
}

button.task-stat:hover {
  border-color: var(--task-tone);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--task-tone) 18%, transparent);
}

.task-stat strong,
.task-stat span,
.task-stat small {
  color: var(--task-tone);
}

.task-stat small {
  line-height: 1.25;
}

.task-stat.is-requested {
  --task-tone: #0f6c4f;
  --task-tone-bg: #f0fbf7;
  --task-tone-border: #b8d8d2;
}

.task-stat.is-pending-owner {
  --task-tone: #6d28d9;
  --task-tone-bg: #f5f0ff;
  --task-tone-border: #d8c8ff;
}

.task-stat.is-waitlist {
  --task-tone: #b45309;
  --task-tone-bg: #fff7ed;
  --task-tone-border: #fed7aa;
}

.task-stat.is-abandoned {
  --task-tone: #be123c;
  --task-tone-bg: #fff1f2;
  --task-tone-border: #fecdd3;
}

.task-stat.is-leads {
  --task-tone: #0369a1;
  --task-tone-bg: #f0f9ff;
  --task-tone-border: #bae6fd;
}

.task-stat.is-reviews {
  --task-tone: #a21caf;
  --task-tone-bg: #fdf4ff;
  --task-tone-border: #f5d0fe;
}

.task-stat.is-calls {
  --task-tone: #475569;
  --task-tone-bg: #f8fafc;
  --task-tone-border: #cbd5e1;
}

.task-stat.is-total {
  --task-tone: #0f172a;
  --task-tone-bg: #f8fafc;
  --task-tone-border: #cbd5e1;
  background: var(--task-tone-bg);
  border-color: var(--task-tone-border);
}

.task-stat.is-total strong,
.task-stat.is-total span,
.task-stat.is-total small {
  color: var(--task-tone);
}

.task-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.task-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

/* Cross-channel contact badges on lead rows. */
.lead-channel-badges {
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.lead-channel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  background: #64748b;
}

.lead-channel-badge.is-red { background: #d32323; }
.lead-channel-badge.is-blue { background: #1877f2; }
.lead-channel-badge.is-green { background: #059669; }
.lead-channel-badge.is-amber { background: #d97706; }
.lead-channel-badge.is-gray { background: #64748b; }

.task-panel.is-primary {
  border-color: #b8d8d2;
  background: #fff;
}

.task-panel.is-abandoned {
  --task-lane-color: #be123c;
  --task-lane-border: #fecdd3;
  --task-lane-bg: #fffafa;
  scroll-margin-top: 14px;
  border-color: var(--task-lane-border);
  background: var(--task-lane-bg);
  box-shadow: inset 4px 0 0 var(--task-lane-color);
}

.task-panel.is-abandoned .task-panel-head h3 {
  color: var(--task-lane-color);
}

.task-panel.is-leads {
  --task-lane-color: #0369a1;
  --task-lane-border: #bae6fd;
  --task-lane-bg: #f7fcff;
  scroll-margin-top: 14px;
  border-color: var(--task-lane-border);
  background: var(--task-lane-bg);
  box-shadow: inset 4px 0 0 var(--task-lane-color);
}

.task-panel.is-leads .task-panel-head h3 {
  color: var(--task-lane-color);
}

.task-panel.is-reviews {
  --task-lane-color: #a21caf;
  --task-lane-border: #f5d0fe;
  --task-lane-bg: #fdfcff;
  scroll-margin-top: 14px;
  border-color: var(--task-lane-border);
  background: var(--task-lane-bg);
  box-shadow: inset 4px 0 0 var(--task-lane-color);
}

.task-panel.is-reviews .task-panel-head h3 {
  color: var(--task-lane-color);
}

.task-panel.is-phone-calls,
.task-panel.is-calls {
  --task-lane-color: #475569;
  --task-lane-border: #cbd5e1;
  --task-lane-bg: #f8fafc;
  scroll-margin-top: 14px;
  border-color: var(--task-lane-border);
  background: var(--task-lane-bg);
  box-shadow: inset 4px 0 0 var(--task-lane-color);
}

.task-panel.is-phone-calls .task-panel-head h3,
.task-panel.is-calls .task-panel-head h3 {
  color: var(--task-lane-color);
}

.task-panel.is-portal-messages {
  --task-lane-color: #0f766e;
  --task-lane-border: #99f6e4;
  --task-lane-bg: #f4fffd;
  scroll-margin-top: 14px;
  border-color: var(--task-lane-border);
  background: var(--task-lane-bg);
  box-shadow: inset 4px 0 0 var(--task-lane-color);
}

.task-panel.is-portal-messages .task-panel-head h3 {
  color: var(--task-lane-color);
}

.task-portal-message-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-portal-message {
  display: grid;
  gap: 6px;
  border: 1px solid var(--task-lane-border, #99f6e4);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  cursor: pointer;
}

.task-portal-message-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-portal-message-badge {
  font-size: 11px;
  font-weight: 600;
  color: #0f766e;
  background: #ccfbf1;
  border-radius: 999px;
  padding: 2px 8px;
}

.task-portal-message-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted, #64748b);
}

.task-portal-message-body {
  margin: 0;
  color: #0f172a;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.task-portal-message-open {
  justify-self: start;
}

.task-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: end;
  gap: 8px;
}

.task-section-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.task-section-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}

.is-collapsed > .task-panel-head .task-section-toggle svg,
.task-booking-lane.is-collapsed .task-section-toggle svg {
  transform: rotate(-90deg);
}

.task-section-toggle:hover,
.task-section-toggle:focus-visible {
  border-color: var(--task-lane-color, var(--accent));
  color: var(--task-lane-color, var(--accent));
}

.task-panel-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.1;
}

.task-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.task-booking-lanes {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.task-booking-lane {
  --task-lane-color: #0f6c4f;
  --task-lane-border: #b8d8d2;
  --task-lane-bg: #fbfefd;
  display: grid;
  gap: 8px;
  min-width: 0;
  scroll-margin-top: 14px;
  border: 1px solid var(--task-lane-border);
  border-radius: 8px;
  background: var(--task-lane-bg);
  padding: 10px;
  box-shadow: inset 4px 0 0 var(--task-lane-color);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.task-booking-lane.is-requested {
  --task-lane-color: #0f6c4f;
  --task-lane-border: #b8d8d2;
  --task-lane-bg: #fbfefd;
}

.task-booking-lane.is-pending-owner {
  --task-lane-color: #6d28d9;
  --task-lane-border: #d8c8ff;
  --task-lane-bg: #fbf8ff;
}

.task-booking-lane.is-waitlist {
  --task-lane-color: #b45309;
  --task-lane-border: #fed7aa;
  --task-lane-bg: #fffaf2;
}

.task-booking-lane.is-drag-target {
  border-color: var(--accent);
  background: #f0fbf7;
  box-shadow: inset 4px 0 0 var(--task-lane-color, var(--accent)), 0 0 0 3px rgba(17, 97, 91, 0.12);
}

.task-booking-lane.is-focus-pulse,
.task-panel.is-focus-pulse {
  border-color: var(--task-lane-color, var(--accent));
  box-shadow: inset 4px 0 0 var(--task-lane-color, var(--accent)), 0 0 0 4px color-mix(in srgb, var(--task-lane-color, var(--accent)) 18%, transparent);
}

.task-booking-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.task-booking-lane-head h4 {
  margin: 0;
  color: var(--task-lane-color, var(--ink));
  font-size: 17px;
  font-weight: 950;
  line-height: 1.15;
}

.task-booking-lane-head span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.task-table {
  display: grid;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.task-table-row {
  display: grid;
  gap: 10px;
  align-items: center;
  min-width: 980px;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}

.task-table-row:last-child {
  border-bottom: 0;
}

.task-booking-table .task-table-row {
  grid-template-columns: minmax(240px, 1.35fr) minmax(160px, .85fr) minmax(220px, 1fr) minmax(150px, .75fr) minmax(150px, .75fr) 260px;
  min-width: 1230px;
}

.task-abandoned-table .task-table-row {
  grid-template-columns: minmax(210px, 1fr) minmax(150px, .75fr) minmax(130px, .65fr) minmax(150px, .7fr) minmax(170px, .8fr) minmax(140px, .65fr) 260px;
  min-width: 1250px;
}

.task-leads-table .task-table-row {
  /* 9 columns: date, owner, pet, location, source, status, responded, phone,
     actions. Every record stays on ONE row with the actions pinned right. */
  grid-template-columns: minmax(100px, .55fr) minmax(190px, 1fr) minmax(120px, .65fr) minmax(120px, .65fr) minmax(120px, .65fr) minmax(120px, .62fr) minmax(140px, .7fr) minmax(130px, .68fr) 200px;
  min-width: 1300px;
}

.task-leads-table .task-lead-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
}

.task-lead-platform-breakdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-right: 10px;
}

.task-lead-platform-title {
  font-size: 11px;
  font-weight: 950;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.task-lead-platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.task-lead-platform-chip strong {
  color: var(--accent);
}

.task-reviews-table .task-table-row {
  grid-template-columns: minmax(115px, .62fr) minmax(210px, 1.05fr) minmax(130px, .65fr) minmax(145px, .72fr) minmax(110px, .55fr) minmax(160px, .8fr) minmax(230px, 1.1fr) 210px;
  min-width: 1320px;
}

.task-review-row.needs-follow-up {
  background: #fffbeb;
}

.task-review-status,
.task-review-response,
.task-review-actions {
  min-width: 0;
}

.task-review-response strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.task-table-heading {
  min-height: 38px;
  background: #f8f7f2;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.task-table-filter-row {
  min-height: 46px;
  background: #fff;
}

.task-table-filter-row span {
  min-width: 0;
}

.task-lead-filter {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 0 8px;
}

select.task-lead-filter {
  padding-right: 24px;
}

.task-lead-clear-filters {
  width: 100%;
  min-height: 34px;
}

.task-sort-button {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-align: left;
  text-transform: inherit;
}

.task-sort-button span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-sort-button.is-active,
.task-sort-button:hover,
.task-sort-button:focus-visible {
  color: var(--task-lane-color, var(--accent));
}

.task-sort-indicator {
  font-size: 12px;
  line-height: 1;
}

.task-booking-row {
  border-left: 4px solid var(--task-lane-color, #207d68);
  cursor: grab;
}

.task-booking-row:active {
  cursor: grabbing;
}

.task-abandoned-row {
  border-left: 4px solid var(--task-lane-color, #be123c);
}

.task-lead-row {
  border-left: 4px solid var(--task-lane-color, #0369a1);
}

.task-panel.is-calls {
  --task-lane-color: #5b6f2a;
  --task-lane-border: #d8e2b8;
  --task-lane-bg: #fbfdf4;
}

.task-panel.is-phone-calls {
  --task-lane-color: #8a4b0f;
  --task-lane-border: #f3d19d;
  --task-lane-bg: #fffaf0;
}

.task-call-answer-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.task-call-answer-metrics article {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.task-call-answer-metrics span,
.task-call-answer-metrics small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.task-call-answer-metrics strong {
  color: #16643b;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.1;
}

.task-phone-follow-up-lane {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid #d8e2e8;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.task-phone-follow-up-lane.is-voicemail {
  border-color: #f0b7b7;
  background: #fff7f7;
  box-shadow: inset 4px 0 0 #b42318;
}

.task-phone-follow-up-lane > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.task-phone-follow-up-lane > header h4 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.task-phone-follow-up-lane > header span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.task-phone-follow-up-lane > header b {
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 28px;
  border-radius: 8px;
  background: #e2e8f0;
  color: #334155;
  font-size: 14px;
  font-weight: 950;
}

.task-phone-follow-up-lane.is-voicemail > header h4,
.task-phone-follow-up-lane.is-voicemail > header b {
  color: #991b1b;
}

.task-phone-follow-up-lane.is-voicemail > header b {
  background: #fee2e2;
}

@media (max-width: 900px) {
  .task-call-answer-metrics { grid-template-columns: 1fr; }
}

.task-primary-cell {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.task-dog-photo {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: #eef2f0;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 950;
}

.task-dog-photo-button {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.task-dog-photo-button .task-dog-photo {
  width: 54px;
  height: 54px;
}

.task-primary-cell span,
.task-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.task-primary-text .dog-icon-strip {
  display: inline-flex;
  gap: 4px;
  margin-top: 2px;
}

.task-dog-name-button {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
  padding: 0;
  text-align: left;
}

.task-dog-name-button:hover,
.task-dog-name-button:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.task-primary-cell strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
}

.task-primary-cell small,
.task-cell small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.task-cell strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.task-table-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.task-booking-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-table-actions button {
  min-height: 36px;
  padding: 0 10px;
}

.task-status-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.task-review-pill {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.task-review-pill:hover,
.task-review-pill:focus-visible {
  box-shadow: 0 0 0 2px rgba(17, 97, 91, 0.16);
}

.task-recovery-status {
  align-content: center;
}

.task-recovery-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-recovery-button {
  white-space: nowrap;
}

.task-lead-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.task-lead-summary article {
  display: grid;
  gap: 4px;
  min-height: 74px;
  border: 1px solid var(--task-lane-border, var(--line));
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.task-lead-summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.task-lead-summary strong {
  color: var(--task-lane-color, var(--accent));
  font-size: 25px;
  font-weight: 950;
  line-height: 1;
}

.task-lead-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.task-lead-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.task-lead-actions .date-nav-button {
  flex: 1 1 68px;
  min-width: 0;
  padding-inline: 8px;
  white-space: nowrap;
}

.lead-call-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.lead-call-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.05fr) minmax(150px, .72fr) minmax(170px, .8fr) minmax(280px, 1.45fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid #5b6f2a;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.lead-call-list.is-compact .lead-call-row {
  grid-template-columns: minmax(210px, 1fr) minmax(145px, .72fr) minmax(145px, .72fr) minmax(260px, 1.35fr);
}

.lead-call-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lead-call-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-call-row small,
.lead-call-row p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.lead-call-recording {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.lead-call-recording a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid #bed1e7;
  border-radius: 8px;
  background: #f4f8fb;
  color: #245078;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  padding: 0 9px;
  text-decoration: none;
}

.lead-call-recording-player {
  display: block;
  /* Take a full-width row within the wrapping flex container so the seek bar is
     long enough to scrub a multi-minute call (was capped at 340px / 34px tall). */
  flex: 1 0 100%;
  width: 100%;
  min-width: 240px;
  max-width: 100%;
  height: 40px;
}

.lead-call-follow-up-status {
  display: grid;
  justify-items: start;
  gap: 2px;
  margin-top: 2px;
  min-width: 0;
}

.lead-call-follow-up-status b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  padding: 0 8px;
  white-space: nowrap;
}

.lead-call-follow-up-status.is-resolved b {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.lead-call-follow-up-button {
  justify-self: start;
  min-height: 34px;
  margin-top: 4px;
  padding: 0 10px;
}

.lead-call-disconnect-status {
  display: grid;
  justify-items: start;
  gap: 2px;
  margin-top: 2px;
  min-width: 0;
}

.lead-call-disconnect-status b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  padding: 0 8px;
  white-space: nowrap;
}

.lead-call-disconnect-status small {
  color: #7f1d1d;
}

.lead-call-qa-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.lead-call-qa-flag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 100%;
  border: 1px solid #d8e2b8;
  border-radius: 999px;
  background: #f8faf0;
  color: #3f551d;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  padding: 0 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-call-qa-flag.is-high {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.lead-call-qa-flag.is-low {
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
}

.lead-call-log {
  min-width: 0;
}

.lead-call-log summary {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid #d8e2b8;
  border-radius: 8px;
  color: #3f551d;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  padding: 0 9px;
}

.lead-call-log-body {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.lead-call-log-body h4 {
  margin: 2px 0 -2px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lead-call-turns,
.lead-call-events {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.lead-call-turn,
.lead-call-events article {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid #ebe6dc;
  border-radius: 8px;
  background: #fbfaf6;
  padding: 8px;
}

.lead-call-turn.is-assistant {
  background: #f4f8f7;
}

.lead-call-turn.is-location {
  background: #f7f4ec;
}

.lead-call-turn.is-location-agent {
  background: #f3f5fb;
  border-color: #d8e1f5;
}

.lead-call-events article.is-openai {
  border-color: #cfe0ea;
  background: #f4f8fb;
}

.lead-call-events article.is-twilio {
  border-color: #d8e2b8;
  background: #f8faf0;
}

.lead-call-events article.is-tool {
  border-color: #d9d4ea;
  background: #f7f5fb;
}

.lead-call-events article.is-error {
  border-color: #efc6bd;
  background: #fff6f4;
}

.lead-call-turn-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.lead-call-turn-meta span {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.lead-call-turn b,
.lead-call-events strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-call-turn em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: none;
}

.lead-call-turn time {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
}

.lead-call-turn p,
.lead-call-events span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  white-space: normal;
}

.lead-lost-panel {
  max-width: 520px;
}

.google-lsa-feedback-panel {
  max-width: 580px;
}

.task-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.task-row.is-booking-request {
  border-color: #cfe6df;
}

.task-row.is-abandoned {
  grid-template-columns: 42px minmax(0, 1fr);
  background: #fffdfa;
}

.task-row-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.task-row.is-abandoned .task-row-icon {
  background: #b45309;
}

.task-row-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.task-row-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.task-row-title h4 {
  margin: 1px 0 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
}

.task-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  min-width: 0;
}

.task-detail-grid > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.task-detail-grid strong,
.task-owner-link {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.task-owner-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.task-owner-link:hover,
.task-owner-link:focus-visible {
  text-decoration: underline;
}

.task-row-actions {
  display: grid;
  gap: 8px;
  min-width: 118px;
}

.task-row-actions button {
  min-height: 38px;
}

.task-empty-state {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 118px;
  border: 1px dashed #cfd8d3;
  border-radius: 8px;
  background: #fbfaf6;
  padding: 18px;
  text-align: center;
}

.task-empty-state strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.task-empty-state span {
  max-width: 420px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.task-review-modal,
.task-reject-modal {
  display: grid;
  gap: 14px;
  width: min(720px, calc(100vw - 32px));
}

.task-review-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding-right: 42px;
}

.task-review-head h2 {
  margin: 2px 0;
  color: var(--ink);
  font-size: 28px;
  font-weight: 950;
  line-height: 1.05;
}

.task-review-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.task-review-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 2px;
}

.task-review-issue-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
  color: var(--ink);
  padding: 12px;
  text-align: left;
}

.task-review-issue-button:hover,
.task-review-issue-button:focus-visible {
  border-color: var(--accent);
  background: #f7fffc;
}

.task-review-issue-button span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.task-review-issue-button b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.task-review-issue-button strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.15;
}

.task-review-issue-button small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.task-review-issue-button em {
  border-radius: 999px;
  background: #e7f5ee;
  color: #0f6c4f;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  padding: 6px 10px;
  white-space: nowrap;
}

.task-review-issue-button .task-review-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: min(260px, 100%);
}

.task-review-line-action {
  border: 1px solid #b7dccc;
  border-radius: 999px;
  background: #e7f5ee;
  color: #0f6c4f;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  min-height: 34px;
  padding: 0 10px;
  white-space: nowrap;
}

.task-review-line-action:hover,
.task-review-line-action:focus-visible {
  border-color: var(--accent);
  background: #d9f1e6;
}

.task-review-line-action.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.task-review-empty {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 148px;
  border: 1px dashed #b8d8d2;
  border-radius: 8px;
  background: #f1fbf8;
  color: var(--accent);
  padding: 18px;
  text-align: center;
}

.task-review-empty strong {
  color: #0f6c4f;
  font-size: 22px;
  font-weight: 950;
}

.task-review-empty span {
  color: #47635b;
  font-size: 13px;
  font-weight: 850;
}

.task-reject-field {
  display: grid;
  gap: 6px;
}

.task-reject-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.task-reject-field textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.4;
  padding: 10px;
  resize: vertical;
}

.run-card-picker-panel {
  width: min(920px, calc(100vw - 24px));
  display: grid;
  gap: 14px;
}

.run-card-picker-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding-right: 46px;
}

.run-card-picker-head h2 {
  margin: 2px 0 5px;
  color: var(--ink);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 950;
  line-height: 1;
}

.run-card-picker-head span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.run-card-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.run-card-picker-select-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: start;
}

.run-card-picker-controls {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.run-card-care-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.run-card-care-filter button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  padding: 0 12px;
}

.run-card-care-filter button.is-active {
  border-color: var(--accent);
  background: #eef8f5;
  color: var(--accent);
}

.run-card-care-filter span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(20, 24, 22, 0.08);
  font-size: 12px;
}

.run-card-care-filter button.is-active span {
  background: var(--accent);
  color: #fff;
}

.run-card-layout-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 300px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 10px;
}

.run-card-layout-toggle legend {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 4px;
}

.run-card-layout-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.run-card-layout-toggle input,
.run-card-picker-row input {
  accent-color: var(--accent);
}

.run-card-picker-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 3px;
}

.run-card-picker-row {
  display: grid;
  grid-template-columns: 24px 64px minmax(0, 1fr) minmax(180px, .55fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.run-card-picker-row.is-selected {
  border-color: #9dcfc5;
  background: #f7fffc;
}

.run-card-picker-photo {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: #eef2f0;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 950;
}

.run-card-picker-main,
.run-card-picker-service {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.run-card-picker-main strong,
.run-card-picker-service strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.15;
}

.run-card-picker-main small,
.run-card-picker-service small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.run-card-picker-actions {
  align-items: center;
}

.run-card-picker-actions > span {
  margin-right: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.run-card-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 80000;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 22, .58);
  padding: 16px;
}

.run-card-preview-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1040px, calc(100vw - 24px));
  height: min(900px, calc(var(--app-visual-viewport-height, 100dvh) - 24px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.run-card-preview-panel > header,
.run-card-preview-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.run-card-preview-panel > header {
  border-bottom: 1px solid var(--line);
}

.run-card-preview-panel > header div {
  display: grid;
  gap: 2px;
}

.run-card-preview-panel > header span,
.run-card-preview-panel > footer > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.run-card-preview-panel > header strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.run-card-preview-panel > iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

.run-card-preview-panel > footer {
  border-top: 1px solid var(--line);
}

.run-card-preview-panel > footer div {
  display: flex;
  gap: 8px;
}

.daily-test-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(1040px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  max-height: calc(var(--app-visual-viewport-height, 100dvh) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.checkin-overlay[data-daily-test-overlay] {
  z-index: 60080;
  top: calc(var(--system-announcement-height, 0px) + var(--app-visual-viewport-offset-top, 0px));
  min-height: calc(var(--app-visual-viewport-height, 100dvh) - var(--system-announcement-height, 0px));
}

.daily-test-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: flex-start;
  gap: 10px;
}

.daily-test-head > div {
  min-width: 0;
}

.daily-test-head .date-nav-button {
  justify-self: end;
  width: auto;
  min-width: 96px;
}

.daily-test-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
}

.daily-test-head-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-width: 0;
}

.daily-test-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.daily-test-message {
  display: grid;
  gap: 6px;
}

.daily-test-message span,
.daily-test-message small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.daily-test-message small {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.daily-test-message textarea {
  width: 100%;
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.4;
  padding: 10px;
  resize: vertical;
}

.daily-test-composer {
  display: grid;
  gap: 8px;
}

.daily-test-recipients {
  display: grid;
  gap: 8px;
  border: 1px solid #cfe1dc;
  border-radius: 8px;
  background: #f7fffc;
  padding: 10px 12px;
}

.daily-test-recipients.is-empty {
  background: #fbfaf6;
}

.daily-test-recipients-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.daily-test-recipients-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.daily-test-recipients-head strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}

.daily-test-recipient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 86px;
  overflow: auto;
}

.daily-test-recipient-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid #b9d9d2;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.daily-test-recipient-pill strong,
.daily-test-recipient-pill small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-test-recipient-pill small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.daily-test-recipient-search {
  display: grid;
  gap: 6px;
  border: 1px solid #e1ded4;
  border-radius: 8px;
  background: #fbfaf6;
  padding: 9px 10px;
}

.daily-test-recipient-search > label {
  display: grid;
  grid-template-columns: minmax(160px, .45fr) minmax(220px, 1fr);
  gap: 10px;
  align-items: center;
}

.daily-test-recipient-search > label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.daily-test-recipient-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 8px 10px;
}

.daily-test-recipient-search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.daily-test-recipient-search-results > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 8px;
  text-align: left;
}

.daily-test-recipient-search-results > button span {
  min-width: 0;
}

.daily-test-recipient-search-results strong,
.daily-test-recipient-search-results small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-test-recipient-search-results small,
.daily-test-search-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.daily-test-recipient-search-results b {
  color: var(--accent);
  font-size: 12px;
}

.daily-test-search-photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.daily-test-search-empty {
  grid-column: 1 / -1;
  padding: 8px;
}

.daily-test-added-recipients {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.daily-test-added-recipients > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #b9d9d2;
  border-radius: 999px;
  background: #fff;
  padding: 4px 6px 4px 9px;
}

.daily-test-added-recipients button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #eef2f0;
  color: var(--muted);
  cursor: pointer;
  font-weight: 950;
}

.daily-test-template-label {
  display: grid;
  gap: 3px;
}

.daily-test-template-label span,
.daily-test-template-label small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.daily-test-template-label small {
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.daily-test-template-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.daily-test-template-row .daily-test-template-label {
  min-width: 0;
}

.daily-test-template-row > .secondary-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px;
}

.daily-photo-batch {
  display: grid;
  gap: 10px;
  border-top: 2px solid #202a2f;
  border-bottom: 1px solid #d8d5cc;
  background: #f8f9f9;
  padding: 12px 0;
}

.daily-photo-batch-head,
.daily-photo-batch-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.daily-photo-batch-head > div {
  min-width: 0;
}

.daily-photo-batch-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.daily-photo-batch-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.daily-photo-batch-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  cursor: pointer;
}

.daily-photo-batch-picker svg {
  width: 16px;
  height: 16px;
}

.daily-photo-batch-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.daily-photo-batch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.daily-photo-batch-item {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  border: 1px solid #d7d9d8;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.daily-photo-batch-item.is-ready {
  border-color: #65a683;
  box-shadow: inset 3px 0 0 #2f7d5a;
}

.daily-photo-batch-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #e8eceb;
}

.daily-photo-batch-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.daily-photo-batch-image > button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: rgba(24, 29, 31, .82);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.daily-photo-batch-fields {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.daily-photo-batch-fields > label:not(.daily-photo-batch-check) {
  display: grid;
  gap: 4px;
}

.daily-photo-batch-fields > label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.daily-photo-batch-fields select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 7px 8px;
}

.daily-photo-batch-match-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.daily-photo-batch-match-line strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-photo-batch-match-line span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 950;
}

.daily-photo-batch-match-line .is-suggested {
  background: #e2f4ea;
  color: #216447;
}

.daily-photo-batch-match-line .is-ambiguous {
  background: #fff1bf;
  color: #705400;
}

.daily-photo-batch-recipient {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  border-left: 3px solid #4c7f70;
  background: #f2f8f6;
  padding: 6px 8px;
}

.daily-photo-batch-recipient.is-blocked {
  border-left-color: #b3261e;
  background: #fff1f1;
}

.daily-photo-batch-recipient strong,
.daily-photo-batch-recipient span,
.daily-photo-batch-recipient small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-photo-batch-recipient strong {
  color: var(--ink);
  font-size: 12px;
}

.daily-photo-batch-recipient span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.daily-photo-batch-recipient small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.daily-photo-batch-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
}

.daily-photo-batch-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2f7d5a;
}

.daily-photo-batch-fields p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.daily-photo-batch-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid #d8d5cc;
  background: rgba(248, 249, 249, .96);
  padding-top: 10px;
}

.daily-test-body-box textarea {
  min-height: 38px;
}

.daily-test-body-box .message-media-preview-list.is-daily-test {
  grid-template-columns: minmax(0, 1fr);
}

.daily-test-body-box .message-media-preview img {
  height: clamp(180px, 36vh, 360px);
  max-height: 42dvh;
  object-fit: contain;
}

.daily-test-preview {
  display: grid;
  gap: 7px;
  border: 1px solid #d9e8e4;
  border-radius: 8px;
  background: #f7fffc;
  padding: 8px;
}

.daily-test-preview.is-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.daily-test-preview article {
  display: grid;
  gap: 3px;
}

.daily-test-preview span,
.daily-test-preview small {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.daily-test-preview p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.daily-test-toolbar,
.daily-test-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.daily-test-actions .primary-button,
.daily-test-actions .secondary-button {
  padding: 9px 18px;
  min-height: 0;
  font-size: 14px;
}

.daily-test-select-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.daily-test-toolbar strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  white-space: normal;
}

.daily-test-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid #e1ded4;
  border-radius: 8px;
  background: #fbfaf6;
  padding: 10px;
}

.daily-test-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.daily-test-filters span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.daily-test-filters select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 9px 10px;
}

.daily-test-notice {
  border: 1px solid #d9e8e4;
  border-radius: 8px;
  background: #f7fffc;
  color: var(--accent);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.daily-test-notice.is-error {
  border-color: #f5b4b4;
  background: #fff6f6;
  color: #b3261e;
}

.daily-test-notice.is-warning {
  border-color: #f0b429;
  background: #fffaf0;
  color: #744210;
}

.daily-test-list {
  display: grid;
  flex: 1 1 auto;
  gap: 12px;
  min-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e4e0d6;
  border-radius: 8px;
  background: #fbfaf6;
  padding: 10px;
}

.daily-test-list-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.daily-test-list-section + .daily-test-list-section {
  border-top: 1px solid #e4e0d6;
  padding-top: 12px;
}

.daily-test-list-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.daily-test-list-section-head > div:first-child {
  min-width: 0;
}

.daily-test-list-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.daily-test-list-section-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.daily-test-list-section-head strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.daily-test-list-head-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.daily-test-filter-menu {
  position: relative;
}

.daily-test-filter-menu summary {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.daily-test-filter-menu summary::-webkit-details-marker {
  display: none;
}

.daily-test-filter-menu summary svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.daily-test-filter-menu[open] summary,
.daily-test-filter-menu summary:hover,
.daily-test-filter-menu summary:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.daily-test-filter-menu-panel {
  position: absolute;
  z-index: 8;
  top: calc(100% + 8px);
  right: 0;
  width: min(520px, calc(100vw - 40px));
  border: 1px solid #d4e5e1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(17, 24, 39, .16);
  padding: 10px;
}

.daily-test-collapse-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.daily-test-collapse-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}

.daily-test-list-section.is-collapsed > .daily-test-list-section-head .daily-test-collapse-toggle svg,
.daily-test-playgroup-section.is-collapsed > .daily-test-playgroup-head .daily-test-collapse-toggle svg {
  transform: rotate(-90deg);
}

.daily-test-collapse-toggle:hover,
.daily-test-collapse-toggle:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.daily-test-playgroup-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.daily-test-playgroup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border: 1px solid #e6e1d7;
  border-radius: 8px;
  background: #fff;
  padding: 5px 8px 5px 10px;
}

.daily-test-playgroup-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.daily-test-playgroup-count {
  color: var(--muted);
  font-weight: 850;
}

.daily-test-playgroup-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.daily-test-playgroup-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.daily-test-playgroup-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.daily-test-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 8px;
}

.daily-test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}

.daily-test-card {
  position: relative;
  display: grid;
  grid-template-rows: 92px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  min-height: 214px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  cursor: pointer;
}

.daily-test-card:hover {
  border-color: #9dcfc5;
}

.daily-test-card.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px rgba(0, 103, 91, .16);
  background: #f7fffc;
}

.daily-test-card.is-sent {
  border-color: #d7ddd9;
  background: #f1f3f0;
  cursor: pointer;
  opacity: .82;
}

.daily-test-card.is-sent:hover,
.daily-test-card.is-sent.is-selected {
  border-color: #9dcfc5;
  background: #f7fffc;
  opacity: 1;
}

.daily-test-card.is-disabled:not(.is-sent),
.daily-test-card.has-error {
  background: #fbfaf6;
  cursor: not-allowed;
  opacity: .72;
}

.daily-test-card-check {
  position: absolute;
  inset: 8px auto auto 8px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.daily-test-card-photo,
.daily-test-card-photo.photo-frame {
  justify-self: center;
  width: 88px;
  height: 88px;
  border-radius: 8px;
  background: #eef2f0;
  color: var(--accent);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 24px;
  font-weight: 950;
}

.daily-test-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.daily-test-card-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.daily-test-card-copy strong,
.daily-test-card-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.daily-test-card-copy strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
}

.daily-test-card-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.daily-test-row {
  display: grid;
  grid-template-columns: 22px 40px minmax(0, 1fr) minmax(110px, auto);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 6px 8px;
  cursor: pointer;
}

.daily-test-row.is-selected {
  border-color: #9dcfc5;
  background: #f7fffc;
}

.daily-test-row.is-partial {
  box-shadow: inset 4px 0 0 #9dcfc5;
}

.daily-test-row.is-sent {
  border-color: #d7ddd9;
  background: #f0f2ef;
  color: #6a726d;
}

.daily-test-row.is-disabled:not(.is-sent) {
  background: #fbfaf6;
  cursor: not-allowed;
}

.daily-test-row.has-error {
  border-color: #f5b4b4;
  background: #fff8f8;
}

.daily-test-row.has-warning {
  border-color: #f0b429;
  background: #fffaf0;
}

.daily-test-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.daily-test-photo-stack {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 64px;
}

.daily-test-photo-stack .daily-test-photo {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(17, 24, 39, .08);
}

.daily-test-photo-stack .daily-test-photo + .daily-test-photo {
  margin-left: -18px;
}

.daily-test-photo-stack b {
  display: inline-grid;
  width: 30px;
  height: 30px;
  margin-left: -12px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.daily-test-photo,
.daily-test-photo.photo-frame {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #eef2f0;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 950;
}

.daily-test-row.is-sent .daily-test-photo {
  filter: grayscale(.8);
  opacity: .58;
}

.daily-test-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.daily-test-copy strong,
.daily-test-copy small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-test-copy strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.1;
}

.daily-test-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.daily-test-row-status {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8f7f2;
  color: var(--muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.daily-test-row-status svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.daily-test-row-status.is-sent {
  border-color: #b7dccc;
  background: #e7f5ee;
  color: #0f6c4f;
}

/* Inferred Dialpad photo match — informational only, the dog is still sendable. */
.daily-test-row-status.is-detected {
  border-color: #c7d7ea;
  background: #edf5ff;
  color: #275a88;
}

.daily-test-row-status.is-error {
  border-color: #f1b5b5;
  background: #fff1f1;
  color: #b3261e;
}

.daily-test-row-status.is-warning {
  border-color: #f0b429;
  background: #fffaf0;
  color: #744210;
}

.daily-test-row-status.is-checking {
  border-color: #c7d7ea;
  background: #edf5ff;
  color: #275a88;
}

.daily-test-row-status.is-missing {
  border-color: #ddd6c8;
  background: #fbfaf6;
  color: #6f6556;
}

@media (max-width: 980px) {
  .checkin-overlay[data-daily-test-overlay] {
    align-items: flex-start;
    overflow-y: auto;
    padding: 8px;
  }

  .daily-test-panel {
    width: min(760px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    gap: 10px;
  }

  .task-page-head,
  .task-row-title {
    align-items: stretch;
    flex-direction: column;
  }

  .task-page-actions,
  .run-card-picker-toolbar {
    grid-template-columns: 1fr;
  }

  .task-page-actions {
    display: grid;
  }

  .task-review-head {
    align-items: stretch;
    flex-direction: column;
  }

  .task-review-issue-button {
    grid-template-columns: 1fr;
  }

  .task-review-issue-button {
    align-items: start;
  }

  .task-review-issue-button .task-review-action-group {
    justify-content: flex-start;
  }

  .task-review-issue-button em {
    justify-self: start;
  }

  .task-summary-grid,
  .task-work-grid,
  .task-detail-grid {
    grid-template-columns: 1fr;
  }

  .run-card-layout-toggle {
    min-width: 0;
    flex-wrap: wrap;
  }

  .run-card-picker-row {
    grid-template-columns: 24px 56px minmax(0, 1fr);
  }

  .daily-test-row {
    grid-template-columns: 22px 40px minmax(0, 1fr) minmax(92px, auto);
  }

  .daily-photo-batch-grid {
    grid-template-columns: 1fr;
  }

  .daily-photo-batch-item {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .daily-test-filters {
    grid-template-columns: 1fr;
  }

  .daily-test-filter-menu-panel {
    width: min(420px, calc(100vw - 36px));
  }

  .daily-test-list {
    min-height: 190px;
    padding: 8px;
  }

  .daily-test-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .daily-test-card {
    min-height: 216px;
  }

  .daily-test-card-photo,
  .daily-test-card-photo.photo-frame {
    width: 76px;
    height: 76px;
  }

  .daily-test-photo,
  .daily-test-photo.photo-frame {
    width: 40px;
    height: 40px;
  }

  .daily-test-row-status {
    grid-column: 4;
    justify-self: end;
  }

  .run-card-picker-service,
  .run-card-picker-row .settings-status-pill {
    grid-column: 3 / -1;
  }

  .task-row,
  .task-row.is-abandoned {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .task-row-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .checkin-overlay[data-daily-test-overlay] {
    height: calc(var(--app-visual-viewport-height, 100dvh) - var(--system-announcement-height, 0px));
    min-height: 0;
    overflow: hidden;
    padding: 6px;
  }

  .daily-test-panel {
    width: min(100%, calc(100vw - 16px));
    height: calc(var(--app-visual-viewport-height, 100dvh) - var(--system-announcement-height, 0px) - 12px);
    min-height: 0;
    max-height: calc(var(--app-visual-viewport-height, 100dvh) - var(--system-announcement-height, 0px) - 12px);
    gap: 8px;
    overflow: hidden;
    padding: 9px;
  }

  .daily-test-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .daily-test-head .round-action {
    display: none;
  }

  .daily-test-head .date-nav-button {
    min-width: 72px;
    min-height: 42px;
  }

  .daily-test-head h2 {
    margin-bottom: 3px;
    font-size: 26px;
    line-height: 1;
  }

  .daily-test-head span {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;
  }

  .daily-test-composer {
    gap: 6px;
  }

  .daily-test-recipients {
    gap: 5px;
    padding: 7px 8px;
  }

  .daily-test-recipients-head {
    align-items: center;
    flex-direction: row;
  }

  .daily-test-recipients-head strong {
    text-align: right;
  }

  .daily-test-recipient-list {
    flex-wrap: nowrap;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1px;
  }

  .daily-test-recipient-pill {
    flex: 0 0 auto;
  }

  .daily-test-template-label {
    gap: 1px;
  }

  .daily-test-template-label small {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .message-body-box.daily-test-body-box textarea {
    height: 104px;
    min-height: 104px;
    max-height: 104px;
    padding: 9px 10px 48px;
    resize: none;
    scroll-margin-bottom: 180px;
  }

  .daily-test-body-box:has(.message-media-preview-list) textarea {
    height: 88px;
    min-height: 88px;
    max-height: 88px;
  }

  .daily-test-body-box .message-body-tools {
    right: 7px;
    bottom: 7px;
    gap: 6px;
  }

  .daily-test-body-box .message-send-icon {
    display: none;
  }

  .daily-test-body-box .message-icon-button {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .daily-test-body-box .message-media-preview img {
    height: min(22dvh, 160px);
    min-height: 120px;
  }

  .daily-test-template-row,
  .daily-photo-batch-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .daily-test-template-row > .secondary-button,
  .daily-photo-batch-picker,
  .daily-photo-batch-actions .primary-button {
    width: 100%;
  }

  .daily-photo-batch-item {
    grid-template-columns: 1fr;
  }

  .daily-photo-batch-image {
    max-height: 300px;
  }

  .daily-test-toolbar,
  .daily-test-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .daily-test-toolbar strong {
    text-align: left;
    white-space: normal;
  }

  .daily-test-actions {
    position: relative;
    z-index: 4;
    display: block;
    flex: 0 0 auto;
    border-top: 1px solid var(--line);
    background: #fff;
    margin: 0 -9px -9px;
    padding: 8px 9px 9px;
    box-shadow: 0 -12px 22px -20px rgba(15, 23, 42, .7);
  }

  .daily-test-actions .secondary-button {
    display: none;
  }

  .daily-test-actions .primary-button {
    width: 100%;
    min-height: 44px;
  }

  .daily-test-toolbar,
  .daily-test-preview.is-empty {
    display: none;
  }

  .daily-test-preview:not(.is-empty) {
    max-height: 76px;
    overflow-y: auto;
  }

  .daily-test-list {
    flex: 1 1 auto;
    min-height: 140px;
    max-height: none;
    gap: 8px;
    padding: 7px;
  }

  .daily-test-list-section-head,
  .daily-test-playgroup-head {
    gap: 8px;
  }

  .daily-test-list-section-head {
    align-items: flex-start;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    position: relative;
  }

  .daily-test-list-head-actions {
    gap: 6px;
    position: static;
  }

  .daily-test-filter-menu {
    position: static;
  }

  .daily-test-filter-menu-panel {
    left: 8px;
    right: 8px;
    width: auto;
  }

  .daily-test-list-section-head h3 {
    font-size: 16px;
  }

  .daily-test-row {
    grid-template-columns: 18px 42px minmax(0, 1fr);
    min-height: 0;
    gap: 7px;
    padding: 7px;
  }

  .daily-test-photo,
  .daily-test-photo.photo-frame {
    width: 42px;
    height: 42px;
  }

  .daily-test-copy strong {
    font-size: 16px;
  }

  .daily-test-copy small {
    line-height: 1.25;
    white-space: normal;
  }

  .daily-test-row-status {
    grid-column: 3 / -1;
    justify-self: start;
    min-height: 24px;
    border-radius: 7px;
    padding: 0 8px;
    font-size: 10px;
    white-space: normal;
  }
}

@media (max-width: 640px) and (max-height: 680px) {
  .daily-test-head .eyebrow,
  .daily-test-template-label small,
  .daily-test-preview {
    display: none;
  }

  .daily-test-head h2 {
    font-size: 23px;
  }

  .daily-test-head span {
    display: -webkit-box;
    max-height: 25px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .daily-test-composer {
    gap: 4px;
  }

  .daily-test-recipients {
    padding-block: 5px;
  }

  .daily-test-list {
    min-height: 80px;
  }
}

.calendar-setup-page form {
  display: grid;
  gap: 16px;
}

.calendar-setup-card {
  gap: 14px;
}

.calendar-setup-card > summary {
  list-style: none;
}

.calendar-setup-card > summary::-webkit-details-marker {
  display: none;
}

.calendar-setup-summary {
  cursor: pointer;
  align-items: center;
}

.calendar-setup-summary h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.calendar-setup-summary-meta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.calendar-setup-section-chevron {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdfa;
  color: var(--muted);
}

.calendar-setup-section-chevron::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}

.calendar-setup-card[open] .calendar-setup-section-chevron::before {
  transform: translateY(2px) rotate(225deg);
}

.calendar-setup-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.calendar-setup-section-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.calendar-setup-section-toolbar.has-detail {
  justify-content: space-between;
}

.calendar-setup-section-toolbar > p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.calendar-setup-section-head {
  align-items: center;
}

.calendar-setup-section-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.calendar-setup-page .settings-inline-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: end;
}

.calendar-setup-page .settings-check-card {
  min-height: 48px;
  align-content: center;
}

.calendar-setup-list {
  display: grid;
  gap: 10px;
}

.calendar-setup-row {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.calendar-setup-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendar-setup-row-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.calendar-setup-row-head strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.calendar-setup-row-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.calendar-setup-grid,
.calendar-week-grid {
  display: grid;
  gap: 10px;
}

.calendar-setup-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.calendar-week-grid {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  border: 1px solid #e4ebef;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.calendar-week-time-grid {
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
}

.calendar-week-day {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.calendar-week-day legend {
  grid-column: 1 / -1;
  padding: 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.calendar-week-day label {
  min-width: 0;
}

.calendar-week-day input[type="time"] {
  min-width: 112px;
  overflow: visible;
  padding-right: 6px;
  text-overflow: clip;
}

.calendar-staff-availability-note {
  display: grid;
  gap: 4px;
  border: 1px solid #d5e8e5;
  border-radius: 8px;
  background: #f2fbf8;
  color: var(--ink);
  padding: 12px;
}

.calendar-staff-availability-note strong {
  color: var(--teal);
  font-weight: 950;
}

.calendar-staff-availability-note span {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.calendar-grooming-capabilities {
  display: grid;
  gap: 10px;
  border: 1px solid #efe3d2;
  border-radius: 8px;
  background: #fffaf2;
  padding: 12px;
}

.calendar-grooming-capabilities h4 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.calendar-grooming-capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.calendar-block-row {
  grid-template-columns: 92px repeat(7, minmax(110px, 1fr)) 38px;
  align-items: end;
}

.calendar-email-row {
  grid-template-columns: 92px minmax(150px, 1fr) minmax(150px, 1fr) minmax(140px, .85fr) minmax(170px, 1fr) minmax(112px, 120px) 38px;
  align-items: end;
}

.calendar-email-offset {
  min-width: 112px;
}

.calendar-email-row .wide {
  grid-column: 1 / -2;
}

.settings-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-table-link {
  color: var(--accent);
  font-weight: 950;
}

@media (max-width: 900px) {
  .settings-services-board {
    grid-template-columns: 1fr;
  }

  .settings-sidebar {
    position: static;
  }

  .settings-sidebar .settings-mobile-menu-toggle {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--accent);
    text-align: left;
    padding: 10px 12px;
  }

  .settings-sidebar .settings-mobile-menu-toggle:hover,
  .settings-sidebar .settings-mobile-menu-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    background: #fffdfa;
    box-shadow: 0 1px 0 rgba(17, 97, 91, .08);
  }

  .settings-sidebar nav {
    display: none;
    gap: 8px;
    overflow: visible;
  }

  .settings-sidebar.is-menu-open nav {
    display: grid;
  }

  .settings-nav-group {
    display: grid;
    gap: 6px;
  }

  .settings-nav-group h3,
  .settings-sidebar-summary {
    display: none;
  }

  .settings-sidebar button {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    border-left: 0;
    border-bottom: 0;
    white-space: normal;
    min-height: 44px;
  }

  .settings-nav-symbol {
    width: 28px;
    height: 28px;
    padding: 5px;
  }

  .settings-sidebar button small {
    display: none;
  }

  .settings-sidebar .settings-mobile-menu-toggle .settings-menu-copy small {
    display: block;
  }

  .settings-sidebar button:hover,
  .settings-sidebar button.is-active {
    border-left-color: transparent;
    box-shadow: inset 4px 0 0 var(--accent);
  }

  .service-settings-head,
  .service-form-head {
    align-items: stretch;
    flex-direction: column;
  }

  .service-head-actions {
    justify-content: stretch;
  }

  .service-head-actions button {
    flex: 1 1 180px;
  }

  .payment-settings-summary,
  .payment-settings-section-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .payment-settings-summary-meta,
  .payment-settings-section-actions {
    justify-content: stretch;
  }

  .payment-settings-section-actions button {
    flex: 1 1 160px;
  }

  .settings-editable-list-head {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-filter-row,
  .automation-overview-grid,
  .automation-workflow-grid,
  .settings-list-row,
  .settings-summary-grid,
  .settings-summary-grid.compact,
  .settings-inline-grid,
  .checkout-tip-preset-grid,
  .checkout-promotion-setting-row,
  .integration-settings-grid,
  .integration-secret-form,
  .pricing-rule-grid,
  .service-form-grid,
  .tour-rule-row,
  .retail-settings-row,
  .package-settings-row,
  .package-settings-row-summary,
  .package-settings-row-head,
  .package-settings-grid,
  .package-settings-grid.is-basic,
  .package-settings-grid.is-validity,
  .package-item-row,
	  .automation-reminder-row,
	  .automation-accept-row,
	  .automation-simple-row,
	  .agreement-template-row,
	  .calendar-block-row,
	  .calendar-email-row {
	    grid-template-columns: 1fr;
	    min-width: 0;
	  }

  .staff-settings-row,
  .staff-settings-profile-grid,
  .staff-row-grid,
  .staff-access-grid,
  .staff-notification-grid,
  .staff-payroll-grid,
  .staff-payroll-settings-grid,
  .staff-role-main,
  .staff-role-permissions,
  .staff-commission-row,
  .staff-clock-row,
  .staff-clock-settings,
  .staff-weekday-row,
  .lodging-settings-row,
  .display-settings-row,
  .camera-settings-row,
  .camera-primary-settings,
  .camera-advanced-settings,
  .camera-panel-body.camera-primary-settings,
  .camera-panel-body.camera-option-grid,
  .camera-option-group,
  .camera-weekday-grid,
  .settings-inline-create {
    grid-template-columns: 1fr;
  }

  .lodging-card-body,
  .lodging-primary-fields,
  .lodging-capacity-panel,
  .lodging-capacity-fields,
  .lodging-photo-field,
  .pet-type-settings-head,
  .pet-type-settings-options {
    grid-template-columns: 1fr;
  }

  .lodging-card-head > div {
    grid-template-columns: 1fr;
  }

  .lodging-card-head small {
    grid-column: auto;
  }

  .staff-settings-row,
  .lodging-settings-row,
  .display-settings-row,
  .camera-settings-row,
  .retail-settings-row,
  .automation-row,
  .calendar-setup-row,
  .checkout-promotion-setting-row,
  .grooming-pricing-row {
    min-width: 0;
  }

  .calendar-setup-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-setup-section-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-setup-section-actions {
    justify-content: stretch;
    margin-left: 0;
  }

  .calendar-setup-section-actions button {
    flex: 1 1 180px;
  }

  .settings-table-toolbar {
    grid-template-columns: 1fr;
  }

  .settings-table-controls {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .service-form-grid .wide,
  .settings-inline-grid .wide,
  .integration-settings-grid .wide,
	  .automation-simple-row .wide,
	  .automation-reminder-row .wide,
	  .agreement-template-row .wide,
	  .calendar-email-row .wide,
	  .radio-card.wide {
	    grid-column: auto;
	  }

	  .agreement-signing-panel {
	    width: calc(100vw - 16px);
	    height: calc(100dvh - 16px);
	    max-height: calc(100dvh - 16px);
	    gap: 8px;
	    padding: 10px;
	  }

	  .agreement-document-scroll {
	    padding: 12px;
	    font-size: 14px;
	    line-height: 1.42;
	  }

	  .agreement-signature-grid {
	    grid-template-columns: minmax(0, 1fr);
	    gap: 8px;
	  }

	  .agreement-signature-field {
	    gap: 5px;
	  }

	  .agreement-signature-pad {
	    height: clamp(96px, 16dvh, 124px);
	  }

	  .agreement-drawn-signature-head {
	    align-items: center;
	  }

	  .agreement-signature-tools {
	    flex-wrap: wrap;
	    justify-content: flex-end;
	  }

	  .agreement-signing-actions {
	    grid-template-columns: minmax(0, 1fr) auto;
	    gap: 8px;
	    padding-top: 8px;
	  }

	  .agreement-signing-actions .secondary-button {
	    width: auto;
	  }
	}

@media (max-width: 600px) {
  .settings-sidebar {
    padding: 10px;
  }

  .settings-sidebar nav {
    gap: 8px;
  }

  .settings-sidebar button {
    padding: 8px 10px;
  }

  .settings-title-symbol {
    width: 42px;
    height: 42px;
    padding: 9px;
  }

  .settings-section-symbol,
  .settings-overview-symbol {
    width: 28px;
    height: 28px;
    padding: 6px;
  }

  .settings-overview-grid {
    grid-template-columns: 1fr;
  }

  .service-settings-head,
  .service-form-head,
  .settings-card,
  .service-table-section {
    padding: 12px;
  }

  .settings-card-headline,
  .settings-card-inline-head,
  .settings-section-head,
  .settings-section-title,
  .grooming-pricing-head,
  .package-section-head {
    flex-wrap: wrap;
  }

  .automation-section-summary {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
  }

  .service-form-section[data-settings-accent] {
    margin-inline: 10px;
    padding: 14px 12px 0;
  }
}

.pet-detail-board {
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}

.pet-detail-board.is-cat .pet-detail-hero {
  border-color: #d9ad76;
  background:
    linear-gradient(135deg, #fffaf1 0%, #ffffff 48%, #eefaf8 100%);
  box-shadow: inset 5px 0 0 #c27a28;
}

.pet-detail-board.is-cat .pet-detail-photo {
  background: #fff3df;
  color: #8a4b0f;
}

.pet-detail-board.is-pet-disabled .pet-detail-hero,
.pet-detail-board.is-pet-disabled .pet-card {
  background: #f3f4f2;
  border-color: #cfcfc8;
  color: #62635f;
}

.pet-detail-board.is-pet-disabled .pet-detail-photo,
.pet-detail-board.is-pet-disabled .pet-detail-photo-panel img {
  filter: grayscale(1);
  opacity: .62;
}

.pet-detail-board.is-pet-disabled .primary-button:not(.pet-enable-button),
.pet-detail-board.is-pet-disabled .secondary-button:not(.pet-enable-button):not([data-open-reservation-history]):not([data-tab="today"]),
.pet-detail-board.is-pet-disabled input,
.pet-detail-board.is-pet-disabled select,
.pet-detail-board.is-pet-disabled textarea {
  opacity: .72;
}

.pet-detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px 238px 16px 16px;
}

.pet-detail-hero.is-birthday-banner {
  isolation: isolate;
  overflow: hidden;
  border-color: #ec4899;
  background:
    radial-gradient(circle at 12% 18%, rgba(236, 72, 153, 0.38) 0 5px, transparent 6px),
    radial-gradient(circle at 31% 76%, rgba(56, 189, 248, 0.42) 0 4px, transparent 5px),
    radial-gradient(circle at 58% 20%, rgba(139, 92, 246, 0.34) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 72%, rgba(34, 211, 238, 0.32) 0 5px, transparent 6px),
    linear-gradient(120deg, #fdf2ff 0%, #fbcfe8 34%, #dbeafe 68%, #cffafe 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.7),
    0 12px 26px rgba(124, 58, 237, 0.18);
}

.pet-detail-hero.is-birthday-banner::before,
.pet-detail-hero.is-birthday-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.pet-detail-hero.is-birthday-banner::before {
  z-index: 0;
  opacity: 0.82;
  background:
    linear-gradient(22deg, transparent 0 22px, rgba(236, 72, 153, 0.7) 23px 27px, transparent 28px 78px),
    linear-gradient(128deg, transparent 0 34px, rgba(56, 189, 248, 0.72) 35px 39px, transparent 40px 92px),
    linear-gradient(72deg, transparent 0 44px, rgba(139, 92, 246, 0.62) 45px 49px, transparent 50px 104px),
    linear-gradient(156deg, transparent 0 56px, rgba(34, 211, 238, 0.68) 57px 61px, transparent 62px 116px);
  background-size: 96px 82px, 118px 92px, 110px 84px, 128px 96px;
}

.pet-detail-hero.is-birthday-banner::after {
  inset: 6px;
  z-index: 0;
  border: 2px dashed rgba(255, 255, 255, 0.82);
}

.pet-detail-hero.is-birthday-banner > :not(.pet-profile-corner-action):not(.pet-quick-actions) {
  position: relative;
  z-index: 1;
}

.pet-detail-hero.is-birthday-banner .pet-profile-corner-action,
.pet-detail-hero.is-birthday-banner .pet-quick-actions {
  z-index: 3;
}

.pet-profile-corner-action {
  position: absolute;
  /* Disable / enable button lives at the BOTTOM right of the hero so
     the more frequently used quick-actions sit at the top. */
  bottom: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  padding: 0;
}

.pet-profile-corner-action.is-disable {
  border-color: #fca5a5;
  background: #fff1f2;
  color: #991b1b;
}

.pet-profile-corner-action.is-enable {
  border-color: var(--accent);
  background: #f1fbf8;
  color: var(--accent);
}

.pet-profile-corner-action svg,
.pet-profile-icon-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pet-detail-photo {
  width: 118px;
  height: 118px;
  border-radius: 8px;
  object-fit: cover;
  background: #ebe8df;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 950;
}

.pet-detail-title h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 2px;
  font-size: clamp(32px, 4vw, 52px);
}

.pet-detail-title {
  min-width: 0;
  max-width: 100%;
}

.pet-detail-title h2 .pet-title-name,
.pet-detail-title h2 .owner-title-name {
  color: var(--ink);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.owner-title-source-badges {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  align-self: flex-start;
  flex: 0 0 auto;
  padding-top: 3px;
}

.owner-title-source-badge {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(21, 28, 38, 0.14);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(21, 28, 38, 0.12);
}

.owner-title-source-badge img {
  display: block;
  width: 18px;
  height: 18px;
}

.pet-title-edit-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  padding: 0;
}

.pet-title-edit-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pet-hero-type-badge {
  align-self: center;
  font-size: 12px;
  padding: 5px 8px;
}

.pet-disabled-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid #b91c1c;
  border-radius: 999px;
  background: #fef2f2;
  color: #991b1b;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 950;
}

.pet-trial-failed-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid #b45309;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 950;
}

.pet-trial-failed-banner strong,
.pet-trial-failed-banner span {
  color: inherit;
  font-size: inherit;
  line-height: 1.15;
}

.quick-reservation-warning.is-trial-failed {
  border-color: #b91c1c;
  background: #fef2f2;
  color: #991b1b;
}

.pet-disabled-banner strong,
.pet-disabled-banner span {
  color: inherit;
  font-size: inherit;
  line-height: 1.15;
}

.pet-detail-title span {
  color: var(--muted);
  font-size: 16px;
  font-weight: 850;
}

.pet-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 850;
}

.pet-hero-meta > * + *::before {
  content: "|";
  margin-right: 8px;
  color: #b6d5cb;
}

.pet-hero-owner-link,
.pet-hero-owner-phone {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 950;
  padding: 0;
}

.pet-hero-owner-link:hover,
.pet-hero-owner-phone:hover,
.pet-hero-owner-link:focus-visible,
.pet-hero-owner-phone:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  outline: none;
}

.pet-detail-title .pet-hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 2px 0 7px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.pet-detail-title .pet-hero-stats span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.pet-detail-title .pet-hero-stats .pet-hero-completed-badge {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.pet-detail-title .pet-hero-stats span + span::before {
  content: "|";
  margin-right: 8px;
  color: #b6d5cb;
}

.pet-detail-title .pet-hero-stats .completed-reservation-badge::before,
.pet-detail-title .pet-hero-stats .completed-reservation-badge + span::before {
  content: none;
}

.owner-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  max-width: 100%;
  overflow: visible;
  color: var(--muted);
  font-size: 16px;
  font-weight: 850;
}

.owner-detail-hero {
  grid-template-columns: 118px minmax(0, 1fr) auto;
  padding: 14px 16px;
}

.owner-detail-hero .pet-detail-title {
  min-width: 0;
}

.owner-credit-indicators {
  align-self: start;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, auto));
  gap: 8px;
}

.owner-package-credit-indicator,
.owner-store-credit-indicator {
  display: grid;
  min-width: 158px;
  max-width: 220px;
  gap: 2px;
  border: 1px solid #70bd92;
  border-radius: 8px;
  background: #edf8f1;
  color: #17402a;
  padding: 10px 12px;
  text-align: right;
}

.owner-store-credit-indicator {
  border-color: #d5be6c;
  background: #fff9e8;
  color: #5a430b;
}

.owner-package-credit-indicator span,
.owner-package-credit-indicator small,
.owner-store-credit-indicator span,
.owner-store-credit-indicator small {
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.owner-package-credit-indicator strong,
.owner-store-credit-indicator strong {
  color: inherit;
  font-size: 34px;
  font-weight: 950;
  line-height: .98;
}

.owner-store-credit-indicator strong {
  font-size: 28px;
  white-space: nowrap;
}

.owner-package-credit-indicator small,
.owner-store-credit-indicator small {
  overflow-wrap: anywhere;
  opacity: .78;
}

.owner-header-phone,
.owner-header-pet-link {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
  line-height: 1.15;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.owner-header-phone {
  color: var(--accent);
  flex: 0 1 auto;
}

.owner-header-phone::after {
  content: "|";
  margin-left: 10px;
  color: var(--line);
  font-weight: 900;
}

.owner-header-account-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  border: 1px solid #b9d7c6;
  border-radius: 999px;
  background: #f1f8f4;
  color: #255741;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.owner-header-account-badge.is-package {
  border-color: #d7c882;
  background: #fff9df;
  color: #5a430b;
}

.owner-header-account-badge svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

.owner-header-pets {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
}

.owner-header-pet-link {
  color: var(--ink);
  white-space: normal;
  overflow-wrap: anywhere;
}

.owner-header-phone:hover,
.owner-header-pet-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pet-hero-labels {
  margin-top: 4px;
}

.owner-tag-assignment {
  margin-top: 8px;
  max-width: min(760px, 100%);
}

/* When the labels/tags strip is rendered INSIDE the h2 next to the
   name (saves an entire row in the hero), normalize line-height /
   font-size so chip dimensions don't inherit the giant h2 type. */
.pet-detail-title h2 .pet-hero-labels,
.pet-detail-title h2 .owner-tag-assignment {
  margin-top: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  flex: 0 1 auto;
  min-width: 0;
}
.pet-detail-title h2 .pet-hero-labels .pet-label-strip,
.pet-detail-title h2 .owner-tag-assignment .pet-label-strip {
  flex-wrap: wrap;
  gap: 4px;
}
.pet-detail-title h2 .pet-hero-labels .pet-icon-empty,
.pet-detail-title h2 .owner-tag-assignment .pet-icon-empty {
  display: none;
}

.pet-hero-labels .pet-label-strip {
  align-items: center;
}

.pet-hero-labels .add-label-button,
.owner-tag-assignment .add-label-button {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
  font-size: 20px;
}

.owner-tag-menu {
  top: calc(100% + 6px);
}

.owner-rates-section,
.owner-rates-content,
.owner-rates-card {
  grid-column: 1 / -1;
}

.owner-rates-content {
  display: grid;
  gap: 12px;
  margin-left: 16px;
  padding-left: 12px;
  border-left: 3px solid #a5f3fc;
}

.owner-rates-card {
  --pet-section-accent: #7c3aed;
  --pet-section-bg: #f5f3ff;
  --pet-section-border: #ddd6fe;
  --pet-section-heading: #6d28d9;
}

.owner-rates-toggle-button .owner-rates-toggle-summary {
  margin-left: auto;
  color: #0e7490;
  font-size: 12px;
  font-weight: 900;
}

.owner-rates-card form,
.owner-rate-steps,
.owner-rate-step-main,
.owner-rate-service-panel,
.owner-rate-table,
.owner-rate-section,
.owner-rate-list {
  display: grid;
  gap: 12px;
}

.owner-rate-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid #d8e8e3;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.owner-rate-step-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.owner-rate-step label,
.owner-rate-money,
.owner-rate-rule,
.owner-rate-date {
  display: grid;
  gap: 5px;
}

.owner-rate-step label > span,
.owner-rate-money > span,
.owner-rate-rule > span,
.owner-rate-date > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.owner-rate-step select,
.owner-rate-row input,
.owner-rate-row select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 8px 9px;
}

.owner-rate-step-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.owner-rate-step-title > div {
  display: grid;
  gap: 2px;
}

.owner-rate-service-step.is-collapsed .owner-rate-step-main {
  gap: 0;
}

.owner-rate-step-title strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.owner-rate-step-title span,
.owner-rate-section-head span,
.owner-rate-service span,
.owner-rate-readonly {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.owner-rate-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.owner-rate-tab {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 10px;
}

.owner-rate-tab.is-active {
  border-color: #0f766e;
  background: #e9f7f4;
  color: #0f766e;
}

.owner-rate-section {
  border: 1px solid #dde7e4;
  border-radius: 8px;
  background: #fbfdfc;
  overflow: hidden;
}

.owner-rate-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f1f5f4;
  border-bottom: 1px solid #dde7e4;
  padding: 9px 10px;
}

.owner-rate-section-head strong,
.owner-rate-service strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.owner-rate-list {
  gap: 0;
}

.owner-rate-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 84px minmax(100px, 120px) minmax(145px, 170px) minmax(140px, 160px);
  gap: 8px;
  align-items: end;
  padding: 10px;
}

.owner-rate-row + .owner-rate-row {
  border-top: 1px solid #e5ece9;
}

.owner-rate-row.is-enabled {
  background: #f6fbf9;
}

.owner-rate-service {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.owner-rate-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.owner-rate-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #0f766e;
}

.owner-rate-deposit-exemption > .owner-rate-toggle {
  justify-content: flex-start;
  border: 1px solid #d8e8e3;
  border-radius: 8px;
  background: #f6fbf9;
  padding: 10px 12px;
}

.owner-rate-deposit-exemption > .owner-rate-toggle > span {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.owner-rate-actions {
  justify-content: flex-end;
}

.pet-quick-actions {
  position: absolute;
  /* Quick actions sit at the TOP right of the hero (disable button
     swapped to the bottom). */
  top: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 220px;
  padding-top: 0;
}

.pet-profile-icon-button {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  display: grid;
  place-items: center;
  padding: 0;
}

.pet-profile-icon-button.is-checkin {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.pet-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  /* Auto-place at the top of each grid cell — paired-row stretch is
     scoped to specific card classes (Owners + Incidents) below; all
     other sections take their natural height. */
  align-items: start;
}

/* Details and Tour & Trial were paired in the grid's second row, but
   they have very different natural heights (the Details form is ~2×
   the height of the trial location list). The previous stretch fix
   moved the whitespace inside the shorter card, which still read as
   "whitespace under it". Make both span the full grid width instead,
   so each card sits on its own row at its natural height — no row
   pairing, no leftover space. */
.pet-detail-grid > .pet-collapsible-card.pet-edit-card,
.pet-detail-grid > .pet-collapsible-card.trial-profile-card {
  grid-column: 1 / -1;
  height: auto;
  align-self: auto;
}

.pet-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  --pet-section-accent: var(--accent);
  --pet-section-bg: #fff;
  --pet-section-border: var(--line);
  --pet-section-heading: var(--ink);
  border: 1px solid var(--pet-section-border);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--pet-section-accent) 0 5px, transparent 5px),
    var(--pet-section-bg);
  padding: 14px;
}

.pet-card > *,
.pet-card-head,
.pet-card-body {
  min-width: 0;
  max-width: 100%;
}

.vaccine-summary-card {
  --pet-section-accent: #2563eb;
  --pet-section-bg: #eff6ff;
  --pet-section-border: #93c5fd;
  --pet-section-heading: #1d4ed8;
}

.pet-edit-card {
  --pet-section-accent: #0f766e;
  --pet-section-bg: #f0fdfa;
  --pet-section-border: #99f6e4;
  --pet-section-heading: #0f766e;
}

.trial-profile-card {
  --pet-section-accent: #b45309;
  --pet-section-bg: #fffbeb;
  --pet-section-border: #fcd34d;
  --pet-section-heading: #92400e;
}

.feeding-care-card {
  --pet-section-accent: #16a34a;
  --pet-section-bg: #f0fdf4;
  --pet-section-border: #86efac;
  --pet-section-heading: #166534;
}

.medication-care-card {
  --pet-section-accent: #7c3aed;
  --pet-section-bg: #f5f3ff;
  --pet-section-border: #c4b5fd;
  --pet-section-heading: #6d28d9;
}

.pet-owners-card {
  --pet-section-accent: #0891b2;
  --pet-section-bg: #ecfeff;
  --pet-section-border: #67e8f9;
  --pet-section-heading: #0e7490;
}

.pet-reservations-card {
  --pet-section-accent: #ea580c;
  --pet-section-bg: #fff7ed;
  --pet-section-border: #fdba74;
  --pet-section-heading: #c2410c;
}

.pet-incident-card {
  --pet-section-accent: #173b63;
  --pet-section-bg: #eef6ff;
  --pet-section-border: #b7d0ea;
  --pet-section-heading: #173b63;
}

.pet-incident-card.has-incidents {
  --pet-section-accent: #dc2626;
  --pet-section-bg: #fff5f5;
  --pet-section-border: #fca5a5;
  --pet-section-heading: #b91c1c;
}

.pet-audit-card {
  --pet-section-accent: #475569;
  --pet-section-bg: #f8fafc;
  --pet-section-border: #cbd5e1;
  --pet-section-heading: #334155;
}

.pet-detail-board:not(.is-pet-disabled) .pet-detail-grid > .pet-card:not(.pet-incident-card.has-incidents) {
  --pet-section-accent: #173b63;
  --pet-section-bg: #f7fbff;
  --pet-section-border: #b6cee8;
  --pet-section-heading: #173b63;
}

.pet-detail-board:not(.is-pet-disabled) .pet-detail-grid > .pet-card:nth-of-type(even):not(.pet-incident-card.has-incidents) {
  --pet-section-bg: #dcecff;
  --pet-section-border: #8fb7df;
}

.pet-icon-card {
  grid-column: 1 / -1;
}

.vaccine-summary-card {
  grid-column: 1 / -1;
}

.vaccine-summary-card.is-vaccine-ok .pet-card-head h3 {
  color: #166534;
}

.vaccine-summary-card.is-vaccine-expiring .pet-card-head h3 {
  color: #9a6b00;
}

.vaccine-summary-card.is-vaccine-expired .pet-card-head h3 {
  color: var(--vaccine-expired-color);
}

.vaccine-summary-card.is-vaccine-critical .pet-card-head h3,
.vaccine-summary-card.is-vaccine-alert .pet-card-head h3 {
  color: var(--vaccine-critical-color);
}

.pet-reservations-card,
.pet-audit-card {
  grid-column: 1 / -1;
}

/* Owners and Incidents share a 2-column row sitting right under
   Medication on the pet detail grid (per user request). The legacy
   `grid-column: 1 / -1` on .pet-owners-card / .pet-incident-card is
   replaced with auto so they land in their natural single column. */
.pet-detail-grid .pet-collapsible-card.pet-owners-card,
.pet-detail-grid .pet-collapsible-card.pet-incident-card {
  grid-column: auto;
}

.vaccine-owner-alert {
  display: grid;
  gap: 3px;
  border: 1px solid #d7a647;
  border-radius: 8px;
  background: #fff8e7;
  box-shadow: inset 4px 0 0 #b47a12;
  color: #6f4b09;
  padding: 10px;
}

.vaccine-owner-alert strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.vaccine-owner-alert span {
  font-size: 13px;
  font-weight: 850;
}

.vaccine-status {
  display: grid;
  grid-template-columns: 34px minmax(0, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid #a7d8c8;
  border-radius: 8px;
  background: #f1fbf8;
  padding: 10px;
  color: #207d68;
}

.vaccine-status.is-alert {
  border-color: #f1b3a6;
  background: #fff4f1;
  color: #d84532;
}

.vaccine-status svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vaccine-status strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  min-width: 0;
  overflow-wrap: anywhere;
}

.vaccine-status span {
  font-size: 13px;
  font-weight: 850;
  min-width: 0;
  overflow-wrap: anywhere;
}

.vaccine-mini-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.vaccine-mini-list button,
.vet-mini {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 10px;
}

.vaccine-mini-list button {
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vaccine-mini-list button:hover,
.vaccine-mini-list button:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(18, 109, 95, 0.12);
  outline: none;
}

.vaccine-mini-list button.is-critical {
  border-color: var(--vaccine-critical-color);
  background: #fef2f2;
  box-shadow: inset 4px 0 0 var(--vaccine-critical-color);
}

.vaccine-mini-list button.is-expired {
  border-color: var(--vaccine-expired-color);
  background: #fff3ed;
  box-shadow: inset 4px 0 0 var(--vaccine-expired-color);
}

.vaccine-mini-list button.is-expiring {
  border-color: var(--vaccine-expiring-color);
  background: #fff9d7;
  box-shadow: inset 4px 0 0 var(--vaccine-expiring-color);
}

.vaccine-mini-list button.is-missing,
.vaccine-mini-list button.is-review,
.vaccine-mini-list button.is-file-missing {
  border-color: #f2d067;
  background: #fff9dc;
  box-shadow: inset 4px 0 0 #d99a00;
}

.vaccine-mini-list button.is-exempt,
.vaccine-mini-list button.is-age-deferred {
  border-color: #9dcfc5;
  background: #f1fbf8;
  box-shadow: inset 4px 0 0 #207d68;
}

.vaccine-mini-list button.is-critical:hover,
.vaccine-mini-list button.is-critical:focus-visible {
  border-color: var(--vaccine-critical-color);
  box-shadow: inset 4px 0 0 var(--vaccine-critical-color), 0 0 0 3px rgba(217, 48, 37, 0.14);
}

.vaccine-mini-list button.is-expired:hover,
.vaccine-mini-list button.is-expired:focus-visible {
  border-color: var(--vaccine-expired-color);
  box-shadow: inset 4px 0 0 var(--vaccine-expired-color), 0 0 0 3px rgba(249, 115, 22, 0.14);
}

.vaccine-mini-list button.is-expiring:hover,
.vaccine-mini-list button.is-expiring:focus-visible {
  border-color: var(--vaccine-expiring-color);
  box-shadow: inset 4px 0 0 var(--vaccine-expiring-color), 0 0 0 3px rgba(250, 204, 21, 0.22);
}

.vaccine-mini-list button.is-missing:hover,
.vaccine-mini-list button.is-missing:focus-visible,
.vaccine-mini-list button.is-review:hover,
.vaccine-mini-list button.is-review:focus-visible,
.vaccine-mini-list button.is-file-missing:hover,
.vaccine-mini-list button.is-file-missing:focus-visible {
  border-color: #d99a00;
  box-shadow: inset 4px 0 0 #d99a00, 0 0 0 3px rgba(217, 154, 0, 0.14);
}

.vaccine-mini-list strong,
.vet-mini strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.vaccine-mini-list span,
.vet-mini span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.vaccine-mini-list span.is-expired {
  color: #b23a00;
}

.vaccine-mini-list span.is-expiring {
  color: #7a4b00;
}

.vaccine-mini-list span.is-missing {
  color: #b23a00;
}

.vaccine-mini-list span.is-review,
.vaccine-mini-list span.is-file-missing {
  color: #7a4b00;
}

.vaccine-mini-list span.is-exempt {
  color: var(--accent);
}

.vaccine-mini-list span.is-age-deferred {
  color: #207d68;
}

.pet-edit-card {
  grid-row: span 3;
}

.pet-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Collapsible-section additions. ZERO restructuring of the original
   section markup — the wrapper just injects a chevron into the
   existing .pet-card-head-actions and adds an .is-collapsed/.is-open
   class to the outer <section>. Layout, colors, head row, and
   internal action buttons (View files, + Add, etc.) are preserved
   exactly as they always were. */

/* Original head row stays clickable so users can click anywhere on
   the head to collapse/expand. Pointer cursor signals the affordance.
   The global click handler ignores nested buttons/links so other head
   actions still work. */
.pet-card-head-clickable {
  cursor: pointer;
  user-select: none;
}

/* Inline single-line preview of the collapsed contents (name/type/
   breed/weight/fixed/birthday for Details; approved/failed/untested
   locations for Tour & Trial; etc.). Sits between the title and the
   actions div in the head row. Visible only when the section is
   collapsed — fully hidden when expanded so it never duplicates the
   form below. */
.pet-card-head-summary {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pet-collapsible-card.is-open .pet-card-head-summary {
  display: none;
}

/* Clickable name / phone / email tokens inside the Owners section's
   collapsed summary. Browsers apply default styles to <button> and
   <a> that override `font: inherit` (especially Safari/WebKit, where
   form-control fonts run smaller). Force every text-affecting
   property to match the surrounding summary span so the owner name +
   phone read identical to every other section's summary text. */
.pet-card-head-summary .pet-owner-summary-link {
  display: inline;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
  text-decoration: none;
  cursor: pointer;
  vertical-align: baseline;
  -webkit-appearance: none;
  appearance: none;
}
.pet-card-head-summary .pet-owner-summary-link:hover,
.pet-card-head-summary .pet-owner-summary-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  outline: none;
}
.pet-card-head-summary .pet-owner-summary-extra {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* Bold dog name inside the Details summary so it pops in the head. */
.pet-card-head-summary strong {
  color: var(--pet-section-heading, var(--ink));
  font-weight: 900;
}

/* When collapsed, hide every direct child of the section EXCEPT the
   head row. That leaves only a one-line head — small, dense, fits
   many sections on one screen. */
.pet-collapsible-card.is-collapsed > *:not(.pet-card-head) {
  display: none !important;
}
/* Slightly tighter padding when collapsed so the head is a compact
   one-liner. */
.pet-collapsible-card.is-collapsed {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pet-card-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
  margin-left: auto;
}

/* ────────────────────────────────────────────────────────────────
   Responsive: pet + owner detail pages
   ────────────────────────────────────────────────────────────────
   Targets:
     • iPad Pro 13" landscape ≈ 1366 × 1024 — pages already fit at this
       width; 2-col grid stays as-is.
     • iPad Pro 13" portrait  ≈ 1024 × 1366 — narrower columns; relax
       the minimum width on the right column of the pet grid so cards
       don't overflow.
     • iPad mini / smaller tablet ≈ 768–1024 px — keep 2 columns,
       tighter gaps.
     • iPhone Pro              ≈ 390–430 px — collapse both detail
       grids to a single column; reflow hero + quick actions; ensure
       chips wrap rather than overflow. */
@media (max-width: 1100px) {
  .pet-detail-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 10px;
  }
  .owner-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
}
@media (max-width: 860px) {
  .pet-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .owner-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Single-column mode — kill any pair-specific overrides so every
     card simply spans the full width. */
  .pet-detail-grid > .pet-collapsible-card,
  .owner-detail-grid > .pet-collapsible-card {
    grid-column: 1 / -1;
    height: auto;
    align-self: auto;
  }
  /* Hero rebalance: stack avatar / title vertically; quick-action
     icons drop below the hero rather than floating on the right. */
  .pet-detail-hero,
  .owner-detail-hero {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;
    padding: 12px;
  }
  .pet-detail-hero .pet-quick-actions {
    position: static;
    margin-top: 8px;
    grid-column: 1 / -1;
    max-width: none;
    justify-content: flex-start;
  }
  .pet-detail-hero .pet-profile-corner-action {
    bottom: 10px;
    right: 10px;
  }
  .owner-detail-hero .owner-credit-indicators {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    justify-self: stretch;
  }
}
@media (max-width: 540px) {
  /* iPhone Pro — title scales down, stat chips tighten, head text
     shrinks slightly, and long summaries wrap instead of clipping. */
  .pet-detail-title h2 {
    gap: 5px;
    font-size: clamp(20px, 6.4vw, 28px);
    line-height: 1.06;
  }
  .owner-title-source-badges {
    gap: 4px;
    padding-top: 0;
  }
  .owner-title-source-badge {
    width: 24px;
    height: 24px;
  }
  .pet-detail-hero,
  .owner-detail-hero {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }
  .pet-detail-photo,
  .owner-detail-avatar {
    width: 72px;
    height: 72px;
    font-size: 22px;
  }
  .pet-photo-open-button span {
    font-size: 11px;
    line-height: 1.1;
  }
  .owner-hero-stats {
    gap: 4px;
  }
  .owner-hero-stat {
    padding: 3px 8px;
    font-size: 11px;
  }
  .pet-card-head h3 {
    font-size: 16px;
  }
  .pet-detail-board .pet-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .pet-detail-board .pet-card-head-actions {
    order: 2;
  }
  .pet-card-head-summary {
    order: 3;
    flex: 1 0 100%;
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .pet-card-head-summary.is-alert {
    flex-basis: 100%;
    border-radius: 8px;
    padding: 4px 8px;
  }
  .vaccine-status {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
  }
  .vaccine-status svg {
    width: 22px;
    height: 22px;
  }
  .vaccine-status span {
    grid-column: 2;
  }
  .vaccine-owner-alert span {
    overflow-wrap: anywhere;
  }
}

/* When collapsed, sections that ARE paired in a 2-col row override
   their legacy full-width default so they share a row. The genuinely
   full-row sections (Upcoming Reservations / Past Invoices / Additional
   Details) are EXCLUDED here so they stay full-width even when
   collapsed — per user spec. */
.owner-detail-grid .pet-collapsible-card.is-collapsed.owner-pets-management-card,
.owner-detail-grid .pet-collapsible-card.is-collapsed.owner-notes-card,
.owner-detail-grid .pet-collapsible-card.is-collapsed.owner-agreements-card,
.owner-detail-grid .pet-collapsible-card.is-collapsed.owner-account-audit-card,
.owner-detail-grid .pet-collapsible-card.is-collapsed.owner-packages-card {
  grid-column: auto;
}

/* Final owner-detail grid layout (per user spec):
     Row 1: Upcoming Reservations | Notes
     Row 2: Client Details        | Packages & Credits
     Row 3: Pets                  | Agreements
     Row 4: Past Invoices                       (full width)
     Row 5: Additional Details                  (full width)
     Row 6: Custom Rates          | Account Activity
   Every "paired" card overrides any legacy `grid-column: 1 / -1` so it
   sits in its natural single column. Full-row sections (Past Invoices,
   Additional Details) get explicit full-width overrides further
   below. */
.owner-detail-grid .pet-collapsible-card.owner-upcoming-reservations-card,
.owner-detail-grid .pet-collapsible-card.owner-client-details-card,
.owner-detail-grid .pet-collapsible-card.owner-agreements-card,
.owner-detail-grid .pet-collapsible-card.owner-pets-management-card,
.owner-detail-grid .pet-collapsible-card.owner-packages-card,
.owner-detail-grid .pet-collapsible-card.owner-notes-card,
.owner-detail-grid .pet-collapsible-card.owner-rates-card,
.owner-detail-grid .pet-collapsible-card.owner-account-audit-card {
  grid-column: auto;
}

/* Compact horizontal stats strip in the hero, replacing the giant
   .owner-profile-stats block. Sits inside .pet-detail-title so it
   stays in the middle column of the hero grid and never overlaps the
   credit indicator boxes on the right. */
.owner-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-width: 100%;
}
.owner-hero-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7f8fa;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.owner-hero-stat > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.owner-hero-stat > strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}
.owner-hero-stat.is-alert {
  background: #fff5e1;
  border-color: #d7a647;
}
.owner-hero-stat.is-alert > strong {
  color: #b47a12;
}

/* Account Activity audit list (mirrors pet's Edit History styling). */
.owner-account-audit-list article {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.owner-account-audit-list article:first-child {
  border-top: 0;
}
.owner-account-audit-list strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.owner-account-audit-list span {
  font-size: 13px;
  color: var(--ink);
}
.owner-account-audit-list small {
  grid-column: 2;
  font-size: 11px;
  color: var(--muted);
}

.pet-card-head h3 {
  margin: 0;
  color: var(--pet-section-heading, var(--ink));
  font-size: 19px;
  font-weight: 950;
}

.pet-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.pet-detail-collapse-button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--pet-section-heading, var(--accent)) 30%, #d7ebe6);
  border-radius: 999px;
  background: #f7fffc;
  color: var(--pet-section-heading, var(--accent));
  cursor: pointer;
}

.pet-detail-collapse-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vaccine-file-count {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #93c5fd;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1;
  padding: 0 9px;
  white-space: nowrap;
}

.pet-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pet-form-grid label,
.pet-form-inline-row label {
  display: grid;
  gap: 5px;
}

.pet-form-grid label.is-wide {
  grid-column: 1 / -1;
}

.pet-notes-accordion {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.pet-notes-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
}

.pet-notes-accordion summary::-webkit-details-marker {
  display: none;
}

.pet-notes-accordion summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #b7d6cf;
  border-radius: 50%;
  color: var(--accent);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
}

.pet-notes-accordion[open] summary {
  border-bottom: 1px solid var(--line);
}

.pet-notes-accordion[open] summary::after {
  content: "-";
}

.pet-notes-fields {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.pet-form-grid span,
.pet-form-inline-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.pet-form-grid input,
.pet-form-grid select,
.pet-form-grid textarea,
.pet-form-inline-row input,
.pet-form-inline-row select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  padding: 10px;
}

.pet-form-grid textarea {
  min-height: 78px;
  resize: vertical;
}

.pet-form-inline-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(150px, 220px);
  gap: 10px;
  align-items: end;
}

.pet-weight-altered-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pet-weight-altered-row .weight-label {
  max-width: 250px;
}

.pet-birthday-row {
  width: min(100%, 470px);
  justify-self: start;
  grid-template-columns: minmax(160px, 240px) minmax(130px, 180px);
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 8px;
}

.pet-birthday-row label {
  gap: 4px;
}

.pet-birthday-row input[type="date"] {
  background: #fff;
  font-size: 14px;
  padding: 8px 10px;
}

.pet-form-inline-row .pet-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 10px;
}

.pet-birthday-row .pet-checkbox-label {
  min-height: 36px;
  border: 0;
  background: transparent;
  padding: 7px 8px;
}

/* Cleaner Details form layout. Every field sits directly in the
   .pet-form-grid 2-column grid so columns line up cleanly across rows.
   The Weight, Fixed, and Birthday fields used to be wrapped in
   .pet-form-inline-row sub-grids that introduced their own column
   widths and threw off the alignment. */
.pet-details-form-grid {
  grid-auto-rows: minmax(64px, auto);
  align-items: start;
}
.pet-details-form-grid > label {
  min-width: 0;
}
/* Weight field: number + "lbs" + history button — keep them on one row
   and aligned with the input height of the other fields. */
.pet-details-form-grid .weight-label .weight-field {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 0 10px;
}
.pet-details-form-grid .weight-label .weight-field input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 0;
}
.pet-details-form-grid .weight-label .weight-field b {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pet-details-form-grid .weight-label .weight-history-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--accent);
  padding: 6px;
  font-weight: 800;
}
.pet-details-form-grid .weight-label .weight-history-button small {
  font-size: 11px;
  color: var(--muted);
}
.pet-details-form-grid .weight-label .weight-alert-message {
  color: #b47a12;
  font-size: 11px;
}
/* Birthday field with inline "Approx." toggle — stays one row, same
   height as the other inputs in the grid. */
.pet-details-form-grid .pet-birthday-label .pet-birthday-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pet-details-form-grid .pet-birthday-label .pet-birthday-field input[type="date"] {
  flex: 1 1 auto;
  min-width: 0;
}
.pet-details-form-grid .pet-birthday-label .pet-birthday-approx-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.pet-details-form-grid .pet-birthday-label .pet-birthday-approx-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}
.pet-details-form-grid .pet-birthday-label .pet-birthday-approx-toggle span {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
}

.pet-birthday-row .pet-checkbox-label span {
  font-size: 11px;
}

.pet-form-inline-row .pet-checkbox-label input {
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--accent);
}

.pet-birthday-row .pet-checkbox-label input {
  width: 16px;
  height: 16px;
}

.weight-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.weight-field b {
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

.pet-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  /* Keep Save reachable without scrolling to the bottom of a long edit form. */
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 8px;
  padding: 10px 2px max(10px, env(safe-area-inset-bottom));
  background: var(--panel, #ffffff);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.care-card {
  grid-column: 1 / -1;
}

.care-photo-analyze-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid #9dcfc5;
  border-radius: 8px;
  background: #f7fffc;
  padding: 0 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.care-photo-analyze-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.care-photo-analyze-button.is-busy {
  opacity: 0.68;
  pointer-events: none;
}

.care-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  border: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.care-table {
  display: grid;
  gap: 0;
  overflow-x: auto;
}

.care-table-feeding {
  grid-template-columns: minmax(80px, .6fr) minmax(80px, .5fr) minmax(90px, .6fr) minmax(110px, .8fr) minmax(140px, 1fr) minmax(150px, 1fr) minmax(180px, 1.2fr) 80px;
}

.care-table-medication {
  grid-template-columns: minmax(80px, .6fr) minmax(80px, .5fr) minmax(100px, .7fr) minmax(170px, 1fr) minmax(240px, 1.4fr) 80px;
}

.care-table > b,
.care-table > span,
.care-table > button {
  border-bottom: 1px solid var(--line);
  padding: 10px;
}

.care-table > b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.care-table > span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.care-empty {
  grid-column: 1 / -1;
  color: var(--muted) !important;
}

.care-inline-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--accent) !important;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  text-align: left;
}

.care-inline-add span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #9dcfc5;
  border-radius: 999px;
  background: #f1fbf8;
  line-height: 1;
}

.care-inline-form {
  display: contents;
}

.care-inline-cell {
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px;
}

.care-inline-time {
  display: grid;
  gap: 5px;
}

.care-inline-time > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.care-inline-cell input,
.care-inline-cell select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 8px;
}

.care-time-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.care-time-options.is-compact {
  gap: 4px;
}

.care-time-option {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fdfcf8;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 9px;
}

.care-time-option input {
  width: 14px !important;
  min-height: 14px !important;
  accent-color: var(--accent);
  padding: 0 !important;
}

.care-time-option span {
  color: inherit !important;
  font: inherit !important;
}

.care-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding: 8px;
}

.care-row-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #f1fbf8;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.care-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(18, 18, 18, .45);
  padding: 20px;
}

.care-modal {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(720px, 96vw);
  max-height: min(90vh, calc(var(--app-visual-viewport-height, 100dvh) - 40px));
  overflow: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  padding: 18px;
}

@media (max-width: 700px), (pointer: coarse) {
  .care-overlay {
    align-items: start;
    padding: 8px;
  }

  .care-modal {
    width: 100%;
    max-height: calc(var(--app-visual-viewport-height, 100dvh) - 16px);
    overscroll-behavior: contain;
  }
}

.care-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  margin: -18px -18px 0;
  padding: 16px 58px 16px 18px;
}

.care-modal-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 950;
}

.care-modal-head button {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 28px;
}

.care-modal label,
.care-modal-field {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.care-modal label span,
.care-modal-field > span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.care-modal input,
.care-modal select,
.care-modal textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  padding: 10px;
}

.care-modal textarea {
  min-height: 80px;
  resize: vertical;
}

.care-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  margin: 0 -18px -18px;
  padding: 14px 18px;
}

.pet-disable-modal {
  width: min(520px, 96vw);
}

.pet-disable-copy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.pet-disable-options {
  display: grid;
  gap: 8px;
}

.care-modal .pet-disable-option {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 10px;
}

.care-modal .pet-disable-option input {
  width: auto;
  min-width: 18px;
  accent-color: var(--accent);
}

.care-modal .pet-disable-option span {
  color: var(--ink);
  font-size: 14px;
}

.pet-disable-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.reservation-history-modal {
  width: min(760px, 96vw);
}

.pet-icon-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pet-icon-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid #bfe3f7;
  border-radius: 999px;
  background: #f0f9ff;
  color: #2277a3;
  padding: 5px 9px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.pet-icon-emoji {
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.pet-label-assignment {
  position: relative;
  display: grid;
  gap: 10px;
}

.pet-label-strip {
  align-items: center;
}

.label-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(34, 119, 163, 0.12);
  color: #2277a3;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
}

.add-label-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #9dcfc5;
  border-radius: 999px;
  background: #f1fbf8;
  color: var(--accent);
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.pet-label-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 12;
  display: grid;
  gap: 4px;
  width: min(360px, 92vw);
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(20, 24, 22, 0.18);
  padding: 8px;
}

.pet-label-menu button {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  padding: 8px;
  text-align: left;
}

.pet-label-menu button:hover {
  background: #f8f7f2;
}

.pet-label-menu .pet-label-manage-link {
  display: block;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--accent);
  font-weight: 950;
  text-align: center;
}

.label-overlay {
  position: fixed;
  inset: 0;
  z-index: 60000;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 22, 0.38);
  padding: 18px;
}

.settings-empty-state {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fffdfa;
  color: var(--muted);
  padding: 14px;
  font-weight: 750;
  text-align: left;
}

.label-manager {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 64px rgba(20, 24, 22, 0.28);
  padding: 14px;
}

.pet-label-assignment-modal {
  display: grid;
  gap: 12px;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 64px rgba(20, 24, 22, 0.28);
  padding: 14px;
}

.pet-label-modal-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdfa;
  padding: 12px;
}

.pet-label-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.pet-label-choice-grid button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
  text-align: left;
}

.pet-label-choice-grid button:hover,
.pet-label-choice-grid button:focus-visible {
  border-color: #9dcfc5;
  background: #f1fbf8;
}

.label-manager-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  background: #f8f7f2;
  padding: 12px 52px 12px 12px;
}

.label-manager-head h2 {
  color: var(--ink);
  font-size: 28px;
  font-weight: 950;
}

.label-manager-head .checkin-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.label-manager-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(320px, 0.55fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.label-editor-list,
.label-history-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}

.label-row {
  display: grid;
  grid-template-columns: 58px minmax(220px, 1fr) 90px 38px;
  gap: 8px;
  align-items: center;
}

.label-row input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 8px 10px;
}

.label-row .label-emoji-input {
  text-align: center;
  font-size: 20px;
  padding: 5px;
}

.label-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

.label-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 10px;
}

.label-history-item div {
  display: grid;
  gap: 3px;
}

.label-history-item strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-transform: capitalize;
}

.label-history-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.label-manager-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.label-manager-actions > div {
  display: flex;
  gap: 8px;
}

.pet-icons-form,
.pet-icon-rows {
  display: grid;
  gap: 8px;
}

.pet-icon-row-head,
.pet-icon-row {
  display: grid;
  grid-template-columns: 56px minmax(180px, 0.8fr) minmax(220px, 1fr) 34px;
  gap: 8px;
  align-items: center;
}

.pet-icon-row-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pet-icon-row input,
.pet-add-icon-form input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 10px;
}

.pet-icon-row .pet-icon-emoji-input,
.pet-add-icon-form input:first-child {
  text-align: center;
  font-size: 20px;
  padding: 5px;
}

.icon-remove-button {
  width: 34px;
  height: 34px;
  border: 1px solid #f2c5bd;
  border-radius: 999px;
  background: #fff8f6;
  color: #b9442f;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.pet-icon-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.pet-icon-actions {
  display: flex;
  justify-content: flex-end;
}

.pet-add-icon-form {
  display: grid;
  grid-template-columns: 64px minmax(160px, 0.8fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.emoji-choice {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f8f7f2;
  color: var(--ink);
  padding: 8px;
  text-align: left;
}

.emoji-choice:hover {
  border-color: #9dcfc5;
  background: #f1fbf8;
}

.emoji-choice span {
  font-size: 20px;
  line-height: 1;
}

.emoji-choice strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-list,
.history-list {
  display: grid;
  gap: 8px;
}

.owner-card,
.history-list article,
.reservation-summary {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 10px;
}

.reservation-history-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.reservation-history-groups {
  display: grid;
  gap: 10px;
}

.reservation-history-section {
  display: grid;
  gap: 8px;
}

.reservation-history-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.reservation-history-section-head span {
  min-width: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  padding: 2px 7px;
  text-align: center;
}

.reservation-history-row.is-upcoming {
  border-color: #95cfc1;
  background: #f0fbf8;
  box-shadow: inset 4px 0 0 #13816b;
}

.reservation-history-row.is-completed {
  border-color: #bdd0e7;
  background: #f5f8fc;
  box-shadow: inset 4px 0 0 #58799d;
}

.owner-invoice-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.owner-invoice-row > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.owner-invoice-row small {
  color: #315543;
  font-size: 11px;
  font-weight: 900;
}

.owner-invoice-refund-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  width: max-content;
  margin-top: 2px;
}
.owner-invoice-refund-status.is-full {
  background: #fbe5dc;
  color: #7a1f0c;
}
.owner-invoice-refund-status.is-partial {
  background: #fff3cf;
  color: #654a05;
}
.owner-invoice-row.is-refunded > b,
.owner-invoice-row.is-refunded > div > strong {
  text-decoration: line-through;
  opacity: 0.7;
}

.owner-invoice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.owner-invoice-print-button,
.owner-invoice-refund-button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

.owner-open-invoice-total {
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: #fda4af;
  background: #fff1f2;
  color: #9f1239;
  font-weight: 950;
}

.owner-invoice-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(12, 22, 19, 0.48);
}

.owner-invoice-preview-panel {
  width: min(980px, 100%);
  height: min(92vh, 920px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(20, 30, 26, 0.28);
}

.owner-invoice-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #d9e2dd;
  background: #f7fbf9;
}

.owner-invoice-preview-head h2 {
  margin: 0;
  color: #0e5d50;
  font-size: 22px;
}

.owner-invoice-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.owner-invoice-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 720px) {
  .owner-invoice-preview-overlay {
    padding: 0;
    align-items: stretch;
  }

  .owner-invoice-preview-panel {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }

  .owner-invoice-preview-head {
    align-items: flex-start;
  }

  .owner-invoice-preview-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

.owner-payment-history-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.owner-payment-history-summary > div {
  display: grid;
  min-width: 150px;
  gap: 2px;
  border: 1px solid #b9dfc4;
  border-radius: 8px;
  background: #f7fcf7;
  padding: 9px 11px;
}

.owner-payment-history-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.owner-payment-history-summary strong {
  color: #166534;
  font-size: 18px;
  font-weight: 1000;
}

.owner-payment-history-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 10px;
  border: 1px solid #b9dfc4;
  border-radius: 8px;
  background: #f7fcf7;
  padding: 3px;
}

.owner-payment-history-tabs button {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #315543;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.owner-payment-history-tabs button.is-active {
  background: #166534;
  color: #fff;
}

.owner-payment-history-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.owner-payment-history-table {
  display: grid;
  width: 100%;
  min-width: 100%;
}

.owner-payment-history-row {
  display: grid;
  grid-template-columns: var(--owner-payment-history-grid);
  align-items: center;
  border-top: 1px solid #e2e8df;
}

.owner-payment-history-row:first-child {
  border-top: 0;
}

.owner-payment-history-head {
  background: #f1f8f0;
}

.owner-payment-history-row > span,
.owner-payment-history-row > strong,
.owner-payment-history-row > button,
.owner-payment-history-header-cell,
.owner-payment-history-actions {
  min-width: 0;
  padding: 8px 9px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-payment-history-row > .owner-payment-client-cell {
  display: grid;
  gap: 1px;
  white-space: normal;
}

.owner-payment-client-cell > strong,
.owner-payment-client-cell > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-payment-client-cell > strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.owner-payment-client-cell > small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.owner-payment-history-row > span:hover,
.owner-payment-history-row > span:focus,
.owner-payment-history-row > strong:hover,
.owner-payment-history-row > strong:focus {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

.owner-payment-history-header-cell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 36px;
}

.owner-payment-history-header-cell > span {
  color: #315543;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.owner-payment-sort-button {
  border: 0;
  background: transparent;
  color: #315543;
  font-size: 11px;
  font-weight: 1000;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.owner-payment-sort-button.is-active {
  color: #166534;
}

.owner-payment-sort-indicator {
  margin-left: 3px;
}

.owner-payment-resize-handle {
  position: absolute;
  top: 6px;
  right: -3px;
  bottom: 6px;
  width: 7px;
  cursor: col-resize;
  z-index: 1;
}

.owner-payment-resize-handle::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  margin: 0 auto;
  background: #b9dfc4;
}

.owner-payment-history-row > strong {
  color: #166534;
  text-align: right;
}

.owner-payment-history-row.is-refund > strong {
  color: #b42318;
}

.owner-payment-history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.owner-payment-history-actions .text-button {
  min-height: 0;
  padding: 0;
  font-size: 12px;
  white-space: nowrap;
}

.owner-payment-history-empty {
  display: grid;
  gap: 3px;
  padding: 12px;
}

.owner-payment-history-empty strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.owner-payment-history-empty span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.reservation-history-row.is-canceled {
  border-color: #f0c7bd;
  background: #fff8f5;
  box-shadow: inset 4px 0 0 #c4442e;
}

.reservation-history-row.is-no-show {
  border-color: #e4c36e;
  background: #fff8e7;
  box-shadow: inset 4px 0 0 #b47a12;
}

.reservation-history-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.owner-recent-reservation-row {
  grid-template-columns: 1fr;
  padding: 0;
  overflow: hidden;
}

.owner-recent-reservation-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.owner-reservation-row-total {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 88px;
}

.owner-reservation-row-total strong {
  color: var(--accent);
}

.owner-reservation-detail {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  background: #fffdf8;
  padding: 10px;
}

.owner-reservation-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.owner-reservation-detail-grid div,
.owner-reservation-line-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}

.owner-reservation-detail-grid span,
.owner-reservation-line-row small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.owner-reservation-detail-grid strong,
.owner-reservation-line-row b,
.owner-reservation-line-row strong {
  display: block;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-reservation-detail-section {
  display: grid;
  gap: 6px;
}

.owner-reservation-detail-section > strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.owner-reservation-detail-section p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.owner-reservation-line-list {
  display: grid;
  gap: 6px;
}

.owner-reservation-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.owner-reservation-line-row strong {
  color: var(--accent);
}

.reservation-history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.reservation-history-actions .round-action {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.owner-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.owner-card-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.owner-card.is-primary {
  border-color: #97c8bd;
  background: #f1fbf8;
}

.owner-card strong,
.history-list strong,
.reservation-summary strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.owner-card span,
.owner-card small,
.history-list span,
.history-list small,
.reservation-summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.history-list small {
  display: block;
  font-size: 11px;
  font-weight: 850;
}

.pet-incident-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf5;
  padding: 12px;
}

.pet-incident-checkbox {
  display: flex !important;
  align-items: center;
  gap: 8px;
  align-self: end;
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 10px;
}

.pet-incident-checkbox input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  padding: 0;
  accent-color: var(--accent);
}

.pet-incident-list .pet-incident-row {
  box-shadow: inset 4px 0 0 #7f8fa6;
}

.pet-incident-list .pet-incident-row.is-moderate {
  border-color: #e4c36e;
  background: #fff8e7;
  box-shadow: inset 4px 0 0 #b47a12;
}

.pet-incident-list .pet-incident-row.is-high,
.pet-incident-list .pet-incident-row.is-critical {
  border-color: #f0b4aa;
  background: #fff5f3;
  box-shadow: inset 4px 0 0 #c4442e;
}

.pet-incident-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pet-incident-row-head strong {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.pet-incident-row-head strong span,
.pet-incident-row-head b {
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  padding: 4px 7px;
}

.pet-grooming-note-list {
  display: grid;
  gap: 8px;
}

.pet-grooming-note {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 4px 0 0 #7f8fa6;
}

.pet-grooming-note.is-legacy {
  box-shadow: inset 4px 0 0 var(--line);
}

.pet-grooming-note-text {
  margin: 0;
  white-space: pre-wrap;
}

.pet-grooming-note-meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.pet-grooming-note-legacy-edit {
  margin-top: 8px;
}

.pet-grooming-note-legacy-edit summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 640px) {
  .owner-rate-step,
  .owner-rate-row {
    grid-template-columns: 1fr;
  }

  .owner-rate-step-number {
    width: 26px;
    height: 26px;
  }

  .reservation-history-row {
    grid-template-columns: 1fr;
  }

  .owner-recent-reservation-summary,
  .owner-reservation-detail-grid,
  .owner-reservation-line-row {
    grid-template-columns: 1fr;
  }

  .owner-reservation-row-total {
    justify-items: start;
    min-width: 0;
  }

  .reservation-history-actions {
    justify-content: flex-start;
  }
}

.owner-card b {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.pet-owner-form {
  display: grid;
  gap: 10px;
}

.pet-owner-edit-row {
  align-items: start;
}

.pet-owner-fields {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.85fr);
  gap: 8px;
}

.pet-owner-fields label {
  display: grid;
  gap: 4px;
}

.pet-owner-fields span,
.pet-owner-primary-check span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.pet-owner-fields input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 8px;
}

.pet-owner-search-field,
.pet-owner-modal-search {
  position: relative;
}

.pet-owner-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  display: none;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(28, 32, 36, 0.14);
  padding: 6px;
}

.pet-owner-search-results.is-modal {
  position: static;
  display: grid;
  min-height: 42px;
  max-height: 220px;
  box-shadow: none;
}

.pet-owner-search-field:focus-within .pet-owner-search-results,
.pet-owner-search-field:hover .pet-owner-search-results {
  display: grid;
}

.pet-owner-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-radius: 7px;
  padding: 8px;
}

.pet-owner-search-result:hover {
  background: #f1fbf8;
}

.pet-owner-search-result.is-disabled {
  opacity: 0.58;
}

.pet-owner-search-result strong,
.pet-owner-search-result small,
.pet-owner-search-empty {
  display: block;
}

.pet-owner-search-result strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.pet-owner-search-result small,
.pet-owner-search-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pet-owner-create-link {
  justify-self: start;
  margin-top: 4px;
}

.pet-owner-add-panel {
  border: 1px solid #cde5df;
  border-radius: 8px;
  background: #f8fbfa;
  padding: 10px;
}

.pet-owner-add-panel[hidden] {
  display: none;
}

.pet-owner-add-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.pet-owner-add-actions {
  display: grid;
  gap: 5px;
  justify-items: end;
}

.pet-owner-add-new-button {
  font-size: 13px;
  padding: 0;
}

.pet-owner-add-search .pet-owner-search-results {
  margin-top: 6px;
}

.pet-owner-row-actions,
.pet-owner-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.pet-owner-primary-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pet-owner-row-toggles {
  display: grid;
  gap: 5px;
  justify-items: end;
}

.pet-owner-primary-check input {
  accent-color: var(--accent);
}

.pet-owner-messaging-check input {
  accent-color: #0e7490;
}

.pet-owner-permissions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pet-owner-permission {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 8px;
}

.pet-owner-permission input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

.pet-owner-permission.is-selected,
.pet-owner-permission:has(input:checked) {
  border-color: #9dcfc5;
  background: #eefaf7;
  color: var(--accent);
}

.pet-owner-permission.is-messaging:has(input:checked) {
  border-color: #0e7490;
  background: #ecfeff;
  color: #0e7490;
}

.pet-owner-create-modal {
  max-width: 720px;
}

.pet-owner-modal-search {
  display: grid;
  gap: 6px;
}

.pet-owner-modal-search span,
.pet-owner-new-grid span,
.pet-owner-new-form h3 {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.pet-owner-modal-search input,
.pet-owner-new-grid input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  padding: 9px 10px;
}

.pet-owner-new-form,
.pet-owner-new-grid,
.pet-owner-create-permissions {
  display: grid;
  gap: 9px;
}

.pet-owner-new-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pet-owner-new-grid label {
  display: grid;
  gap: 4px;
}

.pet-owner-create-permissions {
  display: flex;
  flex-wrap: wrap;
}

.pet-owner-create-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.owner-card .owner-card-link {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.owner-card-phone {
  width: max-content;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 0;
  text-align: left;
}

.owner-card-phone:hover,
.owner-card-phone:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.owner-profile-link,
.calendar-owner-button,
.owner-card-link,
.dog-owner-link,
.assigned-owner-link,
.play-group-owner-link,
.message-owner-link {
  display: inline;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  text-align: inherit;
}

.owner-link-with-photo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  vertical-align: middle;
}

.owner-link-avatar {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 999px;
  background: #eef3ef;
  color: var(--accent);
  font-size: 9px;
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.08);
}

.owner-link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.owner-card-on-file-icon {
  display: inline-flex;
  width: 13px;
  height: 13px;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  color: #2f6f57;
  vertical-align: -2px;
}

.owner-card-on-file-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checkin-owner-link .owner-link-avatar {
  width: 28px;
  height: 28px;
}

.calendar-owner-button .owner-link-avatar,
.owner-card-link .owner-link-avatar {
  width: 24px;
  height: 24px;
}

.owner-profile-link:not(.is-static),
.calendar-owner-button:not(.is-static),
.owner-card-link:not(.is-static),
.dog-owner-link:not(.is-static),
.assigned-owner-link:not(.is-static),
.play-group-owner-link:not(.is-static),
.message-owner-link:not(.is-static) {
  cursor: pointer;
}

.owner-profile-link:not(.is-static):hover,
.calendar-owner-button:not(.is-static):hover,
.owner-card-link:not(.is-static):hover,
.dog-owner-link:not(.is-static):hover,
.assigned-owner-link:not(.is-static):hover,
.play-group-owner-link:not(.is-static):hover,
.message-owner-link:not(.is-static):hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.message-owner-link {
  color: var(--ink);
  font-size: inherit;
}

.owner-detail-avatar {
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  border: 1px solid #9dcfc5;
  border-radius: 8px;
  background: #f1fbf8;
  color: var(--accent);
  font-size: 34px;
  font-weight: 950;
}

.owner-pet-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

.owner-message-action,
.vaccine-request-button,
.vaccine-request-record-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.owner-message-action {
  border: 1px solid #9dcfc5;
  border-radius: 999px;
  background: #f0fbf8;
  color: var(--accent);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

.owner-message-action svg,
.vaccine-request-button svg,
.vaccine-request-record-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.owner-pet-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 10px;
}

.owner-pet-photo {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #edf5f2;
  color: var(--accent);
  font-size: 17px;
  font-weight: 950;
}

.owner-pet-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.owner-pet-card strong,
.owner-pet-card span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-pet-card strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.owner-pet-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.owner-pets-management-card .owner-pets-form {
  display: grid;
  gap: 8px;
}

.owner-pets-management-card.pet-card {
  gap: 8px;
  padding: 10px 12px;
}

.owner-pets-management-card .owner-household-field {
  border: 0;
  background: transparent;
  padding: 0;
}

.owner-pets-management-card .owner-household-field legend {
  display: none;
}

.owner-pets-management-card .owner-pet-access-card.is-selected:not(.is-pending) {
  border-color: var(--line);
  background: #f8f7f2;
}

.owner-pets-management-card .owner-household-pets {
  gap: 6px;
}

.owner-pets-management-card .owner-pet-access-card {
  gap: 5px;
  padding: 6px 8px;
}

.owner-pets-management-card .owner-pet-access-main {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
}

.owner-pets-management-card .owner-pet-toggle-photo {
  width: 38px;
  height: 38px;
}

.owner-pets-management-card .owner-pet-permission-editor {
  padding-left: 45px;
}

.owner-pet-vaccine-file-line {
  color: #166534;
  font-weight: 900;
}

.owner-pet-vaccine-file-line.is-empty {
  color: var(--muted);
  font-weight: 800;
}

.owner-pet-vaccine-file-line.has-dates-no-file {
  color: #9a6a00;
  font-weight: 950;
}

.owner-pets-management-card .owner-pet-add-panel summary {
  padding: 6px 10px;
}

.owner-pet-management-actions {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.owner-pet-management-actions .owner-pet-add-panel {
  min-width: 0;
}

.owner-pet-management-actions > button {
  flex: 0 0 auto;
}

.owner-pets-management-card .owner-household-pets.is-inactive {
  border-top: 1px dashed var(--line);
  margin-top: 2px;
  padding-top: 8px;
}

.owner-pets-management-card .owner-pet-access-card.is-inactive {
  background: #f3f4f6;
  opacity: 0.82;
}

.owner-inactive-pets-toggle-row {
  display: flex;
  justify-content: flex-start;
  padding: 2px 0 4px;
}

.owner-pet-status-note {
  color: #6b7280;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  padding: 0;
}

.service-rail {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 9px;
  overflow: hidden;
  background: var(--line);
}

.service-rail i {
  flex: 1 1 0;
  min-height: 8px;
  background: #6b7280;
}

.service-rail i.is-dayplay {
  background: var(--daycare-full);
}

.service-rail i.is-daycare-hourly {
  background: var(--daycare-hourly);
}

.service-rail i.is-daycare-half {
  background: var(--daycare-half);
}

.service-rail i.is-daycare-full {
  background: var(--daycare-full);
}

.service-rail i.is-boarding {
  background: var(--overnight);
}

.service-rail i.is-grooming-service {
  background: var(--grooming);
}

.service-rail i.is-completed {
  background: #9ca3af;
}

.service-label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 3px 0;
}

.service-label {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--service-color, #64748b);
  border-radius: 999px;
  background: var(--service-bg, #f1f5f9);
  color: var(--service-color, #475569);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  padding: 3px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-label.is-dayplay {
  --service-color: var(--daycare-full-text);
  --service-bg: var(--daycare-full-bg);
}

.service-label.is-daycare-hourly {
  --service-color: var(--daycare-hourly-text);
  --service-bg: var(--daycare-hourly-bg);
}

.service-label.is-daycare-half {
  --service-color: var(--daycare-half-text);
  --service-bg: var(--daycare-half-bg);
}

.service-label.is-daycare-full {
  --service-color: var(--daycare-full-text);
  --service-bg: var(--daycare-full-bg);
}

.service-label.is-boarding {
  --service-color: var(--overnight);
  --service-bg: var(--overnight-bg);
}

.service-label.is-grooming-service {
  --service-color: var(--grooming);
  --service-bg: var(--grooming-bg);
}

.service-label.is-grooming-level-2 {
  --service-color: #6d28d9;
  --service-bg: #ede9fe;
}

.service-label.is-grooming-level-3 {
  --service-color: #5b21b6;
  --service-bg: #ddd6fe;
}

.service-label.is-grooming-level-4 {
  --service-color: #4c1d95;
  --service-bg: #c4b5fd;
}

.service-label.is-completed {
  --service-color: #6b7280;
  --service-bg: #e5e7eb;
  text-decoration: line-through;
}

.calendar-event {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  min-height: 92px;
  overflow: hidden;
  padding: 9px 10px 32px 18px;
}

.calendar-event.is-tour {
  border-color: #f59e0b;
  background: #fff7ed;
}

.calendar-event.is-grooming {
  background: #f7fcfd;
}

.calendar-event.is-grooming-task {
  border-color: #b8d8d2;
  background: #f1faf8;
}

.calendar-event.is-block {
  border-color: #c6cbd4;
  background: #f3f4f6;
}

.calendar-event.is-block .calendar-time {
  color: #4b5563;
}

.calendar-event.is-grooming.is-checked-in {
  border-color: #9dd7b5;
  background: #ecfdf3;
}

.calendar-event.is-moveable-grooming {
  background: #fffaf0;
  cursor: grab;
}

.calendar-event.is-moveable-grooming.is-checked-in {
  border-color: #9dd7b5;
  background: #ecfdf3;
}

.calendar-event.is-moveable-grooming:active {
  cursor: grabbing;
}

.calendar-event.is-tour .calendar-time {
  color: #9a3412;
}

.calendar-event.is-tour .service-rail i {
  background: #f59e0b;
}

.calendar-event.is-grooming .calendar-time {
  color: var(--grooming);
}

.calendar-event.has-dayplay .calendar-time {
  color: var(--daycare-full-text);
}

.calendar-event.has-daycare-hourly .calendar-time {
  color: var(--daycare-hourly-text);
}

.calendar-event.has-daycare-half .calendar-time {
  color: var(--daycare-half-text);
}

.calendar-event.has-daycare-full .calendar-time {
  color: var(--daycare-full-text);
}

.calendar-event.has-boarding .calendar-time {
  color: var(--overnight);
}

.calendar-event.has-grooming .calendar-time {
  color: var(--grooming);
}

.calendar-event.is-grooming.is-checked-in .calendar-time,
.calendar-event.has-grooming.is-checked-in .calendar-time {
  color: #166534;
}

.calendar-time {
  position: absolute;
  left: 18px;
  bottom: 8px;
  color: var(--ink);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.calendar-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.calendar-meta,
.calendar-deposit,
.calendar-checkin {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.calendar-deposit {
  margin-top: 4px;
  color: var(--warning);
}

.calendar-checkin {
  margin-top: 4px;
  color: var(--accent);
}

.calendar-event.is-moveable-grooming .calendar-checkin {
  color: #7a4b00;
}

.calendar-grooming-pending {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--warning-soft, rgba(180, 120, 0, 0.14));
  color: #7a4b00;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.calendar-event.is-checked-in .calendar-checkin {
  color: #166534;
}

.calendar-deposit.is-paid {
  color: var(--accent);
}

.calendar-empty,
.calendar-warning {
  display: grid;
  place-items: center;
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.calendar-warning {
  min-height: auto;
  place-items: start;
  color: var(--warning);
  padding: 12px 14px;
  text-align: left;
}

.trend-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.32);
  padding: 16px;
}

.trend-report {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 12px;
  width: min(1180px, 100%);
  max-height: min(900px, 92dvh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 12px;
  box-shadow: var(--shadow);
}

.trend-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

/* Title + description sit on their own row; the controls become a full-width
   toolbar below, so a report with several filters reads as one horizontal bar
   instead of a vertical stack squeezed into the right column. */
.trend-actions {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Push the action buttons (Download CSV / period nav) to the right edge so the
   filter selects group on the left and the actions group on the right. */
.trend-actions > button:first-of-type {
  margin-left: auto;
}

.trend-actions .date-nav-button {
  min-height: 36px;
}

.profit-report-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 100%;
}

.report-filter-select {
  display: grid;
  gap: 3px;
  min-width: 172px;
}

.report-filter-select span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.report-filter-select select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 32px 0 10px;
}

.report-filter-select input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 10px;
}

.report-month-picker {
  min-width: 138px;
}

.profit-location-filter {
  min-width: min(430px, 100%);
}

.profit-location-checks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.profit-location-checks label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 0 9px;
  white-space: nowrap;
}

.profit-location-checks input {
  width: 14px;
  min-height: 14px;
  margin: 0;
  accent-color: var(--accent);
}

.report-search-control {
  min-width: min(260px, 100%);
}

.trend-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.trend-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.trend-insights div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 8px;
}

.trend-day {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.trend-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.trend-day-head strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.trend-day-head span {
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

.trend-bar {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.trend-bar div {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #ece9df;
}

.trend-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.trend-bar.grooms i {
  background: #2b7a92;
}

.trend-bar.tours i {
  background: #6f5fa8;
}

.trend-bar strong {
  color: var(--ink);
  text-align: right;
}

.weekday-trends {
  display: grid;
  gap: 8px;
}

.weekday-table {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 8px;
}

.weekday-row {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.weekday-row strong {
  color: var(--accent);
  font-size: 18px;
  font-weight: 950;
}

.reports-board {
  min-height: 100%;
}

.reports-board .trend-report {
  width: 100%;
  max-height: none;
}

.reports-workspace {
  min-width: 0;
}

.report-detail {
  align-content: start;
}

.trend-header > div:first-child {
  display: grid;
  gap: 3px;
}

.trend-header > div:first-child > span {
  max-width: 780px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.trend-header .report-update-status {
  width: fit-content;
  border-radius: 999px;
  background: #fff2c2;
  color: #714f00;
  padding: 4px 9px;
}

.report-library-nav {
  gap: 10px;
  max-height: calc(100vh - 185px);
  overflow: auto;
  padding-right: 2px;
}

.report-nav-group {
  display: grid;
  gap: 4px;
  border: 1px solid #e6e1d5;
  border-radius: 8px;
  background: #fffdf8;
  padding: 4px;
}

.report-sidebar .report-category-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px 7px;
  text-align: left;
}

.report-category-toggle span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.report-category-toggle strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.report-category-toggle small {
  color: #817b6f;
  font-size: 11px;
  font-weight: 800;
}

.report-category-toggle b {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.report-category-toggle i {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
  transition: transform 0.16s ease;
}

.report-nav-group.is-open .report-category-toggle i {
  transform: rotate(90deg);
}

.report-nav-items {
  display: grid;
  gap: 3px;
}

.report-nav-items[hidden] {
  display: none;
}

.report-sidebar .report-menu-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  overflow: hidden;
  padding: 7px 8px;
  font-size: 13px;
}

.report-menu-button span {
  min-width: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.report-menu-button b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
}

.report-meta-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.report-meta-bar > div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.report-meta-bar span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.report-meta-bar strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.report-meta-select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  padding: 5px 8px;
}

.report-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-summary .calendar-stat.is-warning {
  border-color: #c97b00;
  background: #fff7e6;
}

.report-summary .calendar-stat.is-warning strong,
.report-summary .calendar-stat.is-warning span {
  color: #7a4b00;
}

.report-dashboard {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.report-dashboard-kpis,
.report-dashboard-metrics {
  display: grid;
  gap: 8px;
}

.report-dashboard-kpis {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.report-dashboard-metrics {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
}

.report-dashboard-metric {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.report-dashboard-metric.is-large {
  min-height: 96px;
}

.report-dashboard-metric.is-warning {
  border-color: #c97b00;
  background: #fff7e6;
}

.report-dashboard-metric span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.report-dashboard-metric strong {
  min-width: 0;
  color: var(--accent);
  font-size: 24px;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}

.report-dashboard-metric small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.report-dashboard-metric.is-warning span,
.report-dashboard-metric.is-warning strong {
  color: #7a4b00;
}

.report-dashboard-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.report-dashboard-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.report-dashboard-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.report-dashboard-card > header > div {
  min-width: 0;
}

.report-dashboard-card h3 {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
}

.report-mini-table {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow: auto;
}

.report-mini-row {
  display: grid;
  grid-template-columns: repeat(var(--mini-cols), minmax(86px, 1fr));
  gap: 6px;
  align-items: center;
  min-width: max(100%, calc(var(--mini-cols) * 86px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 8px 10px;
}

.report-mini-row.is-head {
  border-color: transparent;
  background: transparent;
  padding: 0 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.report-mini-row > span {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.report-mini-row .is-number {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.report-chart-card,
.profit-analysis-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.report-chart-card.is-featured {
  border-color: #b8d7ec;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 72%);
  box-shadow: 0 14px 34px rgba(31, 76, 111, 0.1);
}

.profit-projection-dashboard {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.profit-projection-performance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.profit-dashboard-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.profit-dashboard-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.profit-dashboard-card > header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.profit-dashboard-card h3 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
}

.profit-dashboard-card header span,
.report-badge {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.report-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid #cfe8e5;
  border-radius: 999px;
  background: #e8f7f5;
  color: var(--accent);
  padding: 3px 9px;
  white-space: nowrap;
}

.profit-summary-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px 18px;
}

.profit-summary-hero {
  display: grid;
  gap: 4px;
  border-left: 4px solid var(--accent);
  padding: 4px 0 4px 12px;
}

.profit-summary-hero span,
.profit-summary-grid dt,
.profit-category-bars dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profit-summary-hero strong {
  color: var(--ink);
  font-size: 32px;
  font-weight: 950;
  line-height: 1.05;
}

.profit-summary-hero small {
  font-size: 12px;
  font-weight: 900;
}

.profit-summary-hero .is-positive {
  color: #0f8a4b;
}

.profit-summary-hero .is-negative {
  color: #c62828;
}

.profit-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

.profit-summary-grid > div {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 3px;
  min-width: 0;
}

.profit-summary-grid dt {
  margin: 0;
}

.profit-summary-grid dd,
.profit-category-bars dd {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
}

.profit-summary-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

/* Compact horizontal Revenue Scenarios strip */
.profit-scenario-strip {
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(17, 97, 91, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.profit-scenario-strip > header {
  display: grid;
  gap: 2px;
}

.profit-scenario-strip > header .eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.profit-scenario-strip > header > span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.profit-scenario-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.profit-scenario-chips > span {
  display: grid;
  grid-template-columns: minmax(82px, auto) 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.profit-scenario-chips em {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  font-style: normal;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profit-scenario-chips strong {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  text-align: right;
}

.profit-scenario-chips small {
  grid-row: 2 / 3;
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.profit-scenario-chips .is-base {
  border-color: var(--accent);
  background: rgba(17, 97, 91, 0.06);
}

.profit-scenario-chips .is-base strong {
  color: var(--accent);
}

.profit-scenario-chips .is-conservative em {
  color: #c97b00;
}

.profit-scenario-chips .is-aggressive em {
  color: #7c3aed;
}

.profit-category-bars {
  display: grid;
  gap: 10px;
}

.profit-category-bars article {
  display: grid;
  gap: 8px;
}

.profit-category-bars article > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.profit-category-bars strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.profit-category-bars article > div:first-child span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.profit-category-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0eee8;
}

.profit-category-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #c97b00);
}

.profit-category-bars dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profit-category-bars dl div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profit-category-bars dl dd {
  text-align: left;
}

.profit-category-table {
  display: grid;
  gap: 6px;
}

.profit-category-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(92px, 0.6fr) minmax(130px, 0.75fr) minmax(70px, 0.45fr) minmax(76px, 0.5fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid #eee8dc;
  padding: 8px 0;
}

.profit-category-row:last-child {
  border-bottom: 0;
}

.profit-category-row.is-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 0;
}

.profit-category-row.is-head > span {
  text-align: left;
}

.profit-category-row > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.profit-category-row strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.profit-category-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.profit-category-row > span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  min-width: 0;
  text-align: right;
}

.profit-category-share {
  display: grid;
  gap: 4px;
  text-align: left !important;
}

.profit-category-share i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #eee9df;
}

.profit-category-share em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #c97b00);
}

.profit-category-note {
  margin: 0;
  border-top: 1px solid #eee8dc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
  padding-top: 8px;
}

.profit-tour-panel {
  gap: 14px;
}

.profit-tour-summary {
  border-top: 0;
  padding-top: 0;
}

.profit-tour-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.profit-tour-chart article {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 10px;
}

.profit-tour-chart article.is-projected {
  background: #f6fbfa;
  border-color: #d3e6e3;
}

.profit-tour-chart article > header,
.profit-tour-chart article > footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.profit-tour-chart article > header strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.profit-tour-chart article > header small,
.profit-tour-chart article > footer span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.profit-tour-bars {
  display: grid;
  gap: 7px;
}

.profit-tour-bars > div {
  display: grid;
  grid-template-columns: minmax(82px, 0.8fr) minmax(70px, 1fr) minmax(42px, auto);
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.profit-tour-bars span {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profit-tour-bars i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eee9df;
}

.profit-tour-bars em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #c97b00);
}

.profit-tour-bars b {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

.profit-tour-source-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.profit-tour-source-table .is-head,
.profit-tour-source-table article {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) repeat(3, minmax(88px, 0.7fr)) minmax(120px, 0.9fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-top: 1px solid var(--line);
}

.profit-tour-source-table .is-head {
  border-top: 0;
  background: rgba(17, 97, 91, 0.05);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profit-tour-source-table strong,
.profit-tour-source-table span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.profit-tour-source-table small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.profit-projection-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.profit-occupancy-panel,
.profit-formula-panel,
.profit-notes-panel {
  grid-column: 1 / -1;
}

.profit-projection-section-grid > .report-chart-card {
  min-width: 0;
}

.profit-scenario-rows,
.profit-occupancy-list,
.profit-note-list {
  display: grid;
  gap: 8px;
}

.profit-occupancy-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profit-note-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

.profit-occupancy-panel {
  align-items: start;
}

.profit-occupancy-panel > header {
  align-items: center;
}

.profit-occupancy-panel > header > span {
  white-space: nowrap;
}

.profit-scenario-rows article {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(90px, auto);
  gap: 4px 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
}

.profit-scenario-rows article > small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.profit-scenario-rows strong,
.profit-occupancy-list article > strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.profit-scenario-rows span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.profit-expense-panel .profit-category-row {
  grid-template-columns: minmax(110px, 1.1fr) repeat(4, minmax(74px, auto));
}

.profit-expense-panel .profit-category-row.is-total {
  background: rgba(17, 97, 91, 0.05);
  border-top: 1px solid var(--line);
  font-weight: 950;
}

.profit-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.profit-method-grid article {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(17, 97, 91, 0.03);
}

.profit-method-grid strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profit-method-grid span {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.1;
}

.profit-method-grid em {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  font-style: normal;
}

.profit-method-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.profit-method-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.profit-method-context > div {
  display: grid;
  gap: 2px;
}

.profit-method-context dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.profit-method-context dd {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.1;
}

.profit-method-context small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.profit-annual-outlook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.profit-annual-outlook-grid article {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(17, 97, 91, 0.05), rgba(124, 58, 237, 0.04));
}

.profit-annual-outlook-grid strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profit-annual-outlook-grid span {
  color: var(--ink);
  font-size: 26px;
  font-weight: 950;
  line-height: 1.05;
}

.profit-annual-outlook-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

/* Monthly Service Volume table — per-service units + revenue + MoM delta */
.profit-volume-panel {
  display: grid;
  gap: 12px;
}

.profit-volume-table {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.profit-volume-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.1fr) repeat(4, minmax(110px, 1.15fr)) minmax(110px, 1fr) minmax(120px, 1fr);
  gap: 12px;
  padding: 10px 14px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.profit-volume-row:first-child {
  border-top: 0;
}

.profit-volume-row.is-head {
  background: rgba(17, 97, 91, 0.05);
  border-top: 0;
}

.profit-volume-row.is-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profit-volume-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profit-volume-row > div > strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.profit-volume-row > div > small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.profit-volume-row > div > small.profit-volume-actual {
  display: block;
  margin-top: 2px;
  color: #11615b;
}

.profit-volume-service > b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  font-style: normal;
}

.profit-volume-service > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.profit-volume-service > small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.profit-volume-total > strong {
  color: var(--accent);
  font-size: 15px;
  font-weight: 950;
}

.profit-volume-delta > strong {
  font-size: 12px;
  font-weight: 950;
}

.profit-volume-delta.is-up > strong {
  color: #0f8a4b;
}

.profit-volume-delta.is-down > strong {
  color: #c62828;
}

.profit-volume-delta.is-flat > strong {
  color: var(--muted);
}

.profit-volume-delta > small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .profit-volume-row {
    grid-template-columns: 1fr 1fr;
  }
  .profit-volume-row.is-head {
    display: none;
  }
}

.profit-occupancy-list article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
}

.profit-occupancy-list article > div {
  display: grid;
  grid-template-columns: minmax(80px, 0.7fr) minmax(90px, auto);
  gap: 4px 10px;
  align-items: center;
}

.profit-occupancy-list span,
.profit-occupancy-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.profit-occupancy-list small {
  text-align: right;
}

.profit-occupancy-list i {
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  min-width: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.profit-weekly-forecast {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.profit-weekly-title {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.profit-weekly-title strong,
.profit-weekly-service header strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.profit-weekly-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.profit-weekly-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profit-weekly-legend span {
  border: 1px solid #d9e5df;
  border-radius: 999px;
  background: #f6fbfa;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  padding: 4px 8px;
}

.profit-weekly-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.profit-weekly-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.profit-weekly-card > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.profit-weekly-card > header strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.profit-weekly-card > header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.profit-weekly-day-list {
  display: grid;
  gap: 5px;
}

.profit-weekly-day-list > div {
  display: grid;
  grid-template-columns: 40px repeat(3, minmax(0, 1fr));
  gap: 5px;
  align-items: stretch;
}

/* Days that have already passed: grayed out, showing ACTUAL occupancy. */
.profit-weekly-day-list > div.is-past {
  opacity: 0.5;
  filter: grayscale(0.7);
}

.profit-weekly-actual-tag {
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7280;
  margin-left: 3px;
}

.profit-weekly-day-list > div > strong,
.profit-weekly-day-list span {
  border: 1px solid #ece5d9;
  border-radius: 6px;
  background: #fffdf8;
  min-width: 0;
}

.profit-weekly-day-list > div > strong {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
}

.profit-weekly-day-list span {
  display: grid;
  gap: 2px;
  padding: 5px 6px;
}

.profit-weekly-day-list small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.profit-weekly-day-list b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.profit-weekly-service {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.profit-weekly-grid {
  display: grid;
  grid-template-columns: minmax(74px, 0.9fr) repeat(7, minmax(42px, 1fr));
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
}

.profit-weekly-grid > span {
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 30px;
  min-width: 0;
  border: 1px solid #e8dfd1;
  border-radius: 6px;
  background: #fffdf8;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  padding: 5px;
  text-align: center;
}

.profit-weekly-grid > span:first-child,
.profit-weekly-grid > span:nth-child(8n + 1) {
  justify-items: start;
}

.profit-weekly-grid .is-head {
  min-height: 24px;
  background: #f4f0e8;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profit-weekly-grid small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.profit-weekly-grid .is-muted {
  background: #f7f4ed;
  color: transparent;
}

.profit-note-list span {
  display: block;
  border: 1px solid #e6e1d5;
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.28;
  padding: 7px 9px;
}

.profit-formula-panel {
  gap: 10px;
}

.profit-formula-panel > header {
  align-items: center;
}

.profit-formula-panel h3 {
  font-size: 16px;
}

.profit-formula-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.profit-formula-list span {
  display: block;
  border: 1px solid #e6e1d5;
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  padding: 7px 9px;
}

.report-chart-card > header,
.profit-analysis-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.report-chart-card > header > div,
.profit-analysis-card > header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.report-chart-card.is-featured > header {
  display: grid;
  grid-template-columns: 1fr;
}

.report-chart-card.is-featured > header > .report-chart-legend {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 1px;
}

.report-chart-card h3,
.profit-analysis-card h3 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
}

.report-chart-card header span,
.profit-analysis-card header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.report-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(260px, 100%);
}

.report-chart-card.is-featured > header {
  display: grid;
  grid-template-columns: 1fr;
}

.report-chart-card.is-featured .report-chart-legend {
  flex-wrap: nowrap;
  justify-content: flex-start;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 1px;
}

.report-chart-legend button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.report-chart-legend button i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.report-chart-legend button.is-off {
  color: #9b968d;
  opacity: 0.6;
}

.report-chart-legend button.is-off i {
  opacity: 0.4;
}

.report-chart-legend-groups {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.report-chart-legend.is-locations {
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}

.report-chart-legend.is-locations button {
  font-weight: 900;
}

.report-chart-legend button.is-off {
  opacity: 0.45;
  text-decoration: line-through;
}

.report-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.report-chart-scroll {
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.report-chart-scenario-strip,
.report-chart-annotation-strip,
.report-chart-status-strip {
  display: grid;
  gap: 8px;
}

.report-chart-scenario-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-chart-scenario-strip span,
.report-chart-annotation-strip span,
.report-chart-status-strip span {
  min-width: 0;
  border: 1px solid #dfd8cb;
  border-radius: 8px;
  background: #fff;
}

.report-chart-scenario-strip span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  padding: 8px 10px;
}

.report-chart-annotation-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.report-chart-annotation-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  padding: 6px 8px;
}

.report-chart-annotation-strip strong {
  color: #7a4b00;
  font-size: 11px;
  font-weight: 950;
}

.profit-daily-revenue-facility {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline, rgba(0,0,0,0.08));
}

.profit-daily-revenue-facility:first-of-type {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

.profit-daily-revenue-facility h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
}

.profit-daily-revenue-panel .report-chart-annotation-strip em {
  font-style: normal;
  font-weight: 900;
}

.profit-daily-revenue-panel .report-chart-annotation-strip em.is-up { color: #1a7f3c; }
.profit-daily-revenue-panel .report-chart-annotation-strip em.is-down { color: #b3261e; }

.pp-section-location-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
}

.pp-section-location-filter button {
  border: 1px solid var(--hairline, rgba(0,0,0,0.14));
  background: var(--surface, #fff);
  color: var(--muted, #5b6470);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.pp-section-location-filter button:hover {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}

.pp-section-location-filter button.is-on {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}

.pp-section-location-loading {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #5b6470);
}

.profit-momentum-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pp-window-toggle {
  display: inline-flex;
  gap: 4px;
}

.pp-window-toggle button {
  border: 1px solid var(--hairline, rgba(0,0,0,0.14));
  background: var(--surface, #fff);
  color: var(--muted, #5b6470);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.pp-window-toggle button.is-on {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}

/* Month momentum strip: wrapping grid so the last month never overlaps text. */
.profit-momentum-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.profit-momentum-strip span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-radius: 8px;
  background: var(--surface-muted, #fafafa);
  line-height: 1.2;
  min-width: 0;
}

.profit-momentum-strip strong {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted, #5b6470);
}

.profit-momentum-strip b {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink, #111827);
}

.profit-momentum-strip em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted, #5b6470);
}

.profit-momentum-strip em.is-up { color: #1a7f3c; }
.profit-momentum-strip em.is-down { color: #b3261e; }

/* Collapsible report sections */
.pp-collapse {
  margin: 10px 0;
}

.pp-collapse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(0,0,0,0.10));
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink, #111827);
  text-align: left;
}

.pp-collapse-head:hover {
  border-color: var(--accent, #2563eb);
}

.pp-collapse-title {
  flex: none;
}

.pp-customer-map-svg {
  width: 100%;
  min-width: 520px;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(0,0,0,0.08));
  background: #f4f6f8;
}

.pp-map-facility-label {
  font-size: 11px;
  font-weight: 800;
  fill: #111827;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
}

.pp-customer-map .report-chart-legend {
  margin: 8px 0;
}

.pp-collapse-summary {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 6px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #5b6470);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .pp-collapse-summary { display: none; }
}

.pp-collapse-chevron {
  width: 18px;
  height: 18px;
  color: var(--muted, #5b6470);
  transition: transform .15s ease;
  flex: none;
}

.pp-collapse.is-collapsed .pp-collapse-chevron {
  transform: rotate(-90deg);
}

.pp-collapse-body {
  margin-top: 8px;
}

.client-action-export-btn {
  border: 1px solid var(--hairline, rgba(0,0,0,0.14));
  background: var(--surface, #fff);
  color: var(--accent, #2563eb);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.client-action-export-btn:hover {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}

.client-action-note-btn.has-note {
  color: #1a7f3c;
  border-color: #1a7f3c;
  font-weight: 800;
}

.client-action-head {
  border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.10));
  padding-bottom: 4px;
  margin-bottom: 2px;
}

.client-action-sort {
  background: none;
  border: 0;
  padding: 2px 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted, #5b6470);
  cursor: pointer;
}

.client-action-sort:hover,
.client-action-sort.is-active {
  color: var(--accent, #2563eb);
}

.client-action-note-tag {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted, #5b6470);
  background: var(--surface-muted, #f3f4f6);
  border-radius: 6px;
  padding: 1px 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-chart-scenario-strip strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-chart-scenario-strip small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}

.report-chart-status-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.report-chart-status-strip span {
  display: grid;
  gap: 3px;
  flex: 0 0 112px;
  border-left: 4px solid #0f8a4b;
  padding: 6px 8px;
}

.report-chart-status-strip span.is-down {
  border-left-color: #c62828;
}

.report-chart-status-strip span.is-muted {
  border-left-color: #8a8175;
}

.report-chart-status-strip strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.report-chart-status-strip small,
.report-chart-status-strip em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
}

.report-chart-card.is-featured > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.report-chart-card.is-featured > header > .report-chart-legend,
.report-chart-card.is-featured .report-chart-legend {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 6px;
  max-width: none;
  min-width: 0;
  overflow: visible;
  padding-bottom: 0;
}

.report-chart-card.is-featured .report-chart-scroll {
  border: 1px solid #d9e8f2;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef7ff 100%);
  padding: 4px 6px 0;
}

.report-chart-status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px;
  overflow: visible;
  padding-bottom: 0;
}

.report-chart-status-strip span {
  flex: initial;
  padding: 6px 7px;
}

.report-line-chart {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.report-chart-grid {
  stroke: #eee9dd;
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.7;
}

.report-chart-region {
  opacity: 0.58;
}

.report-chart-region.is-historical {
  fill: #eef2f7;
}

.report-chart-region.is-closed-projection {
  fill: #d9dee6;
  opacity: 0.78;
}

.report-chart-region.is-forecast {
  fill: #e8f4ff;
}

.report-chart-annotation-line {
  stroke: #b45309;
  stroke-dasharray: 5 5;
  stroke-width: 1.5;
}

.report-chart-annotation-text {
  fill: #7a4b00;
  font-size: 10px;
  font-weight: 950;
  text-anchor: middle;
}

.report-chart-x,
.report-chart-y {
  fill: #95918a;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}

.report-chart-y {
  text-anchor: end;
}

.report-chart-x {
  text-anchor: middle;
}

.report-chart-point-label {
  fill: #0f172a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 3px;
}

/* Prior-year ("Same Month LY") point labels — smaller and lighter than
   the base-case labels so the base line stays the visual headline. */
.report-chart-point-label.is-secondary {
  font-size: 8px;
  font-weight: 600;
  stroke-width: 2.5px;
}

/* MoeGo-style filled area under the primary (base) line */
.report-chart-area {
  opacity: 0.08;
}

/* Pipeline / Inactive Owner / Growth panels reuse profit-summary-grid */
.profit-pipeline-panel,
.profit-inactive-panel,
.profit-growth-panel {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}

.profit-growth-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profit-growth-panel header span.report-badge {
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.18);
}

.profit-growth-kpi-panel {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
}

.profit-growth-kpi-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profit-growth-kpi-panel header span.report-badge {
  background: rgba(11, 124, 110, 0.08);
  color: var(--accent);
  border: 1px solid rgba(11, 124, 110, 0.18);
}

.profit-kpi-formula {
  display: grid;
  gap: 4px;
  background: rgba(11, 124, 110, 0.04);
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}

.profit-kpi-formula > strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profit-kpi-formula > code {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}

.profit-kpi-section {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.profit-kpi-section > h4 {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profit-data-science-panel {
  display: grid;
  gap: 16px;
  padding: 18px 20px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(135deg, rgba(11, 124, 110, 0.02), rgba(124, 58, 237, 0.02));
}

.profit-client-actions-panel {
  display: grid;
  gap: 16px;
  padding: 20px 22px;
  border-left: 3px solid #0b7c6e;
  background: linear-gradient(135deg, rgba(11, 124, 110, 0.04), rgba(11, 80, 170, 0.02));
}
.profit-client-actions-panel > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.profit-client-actions-panel .client-action-card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 1100px) {
  .profit-client-actions-panel .client-action-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .client-action-card--at-risk,
  .client-action-card--migrators,
  .client-action-card--dormant,
  .client-action-card--owner-health,
  .client-action-card--loyalists,
  .client-action-card--cohorts {
    grid-column: 1 / -1;
  }
}
.client-action-card {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}
.client-action-card > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.client-action-card > header h4 {
  margin: 4px 0 0 0;
  font-size: 1.05rem;
  color: #0f172a;
}
.client-action-card--at-risk {
  border-left: 3px solid #d97706;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.05), rgba(255, 255, 255, 0.85));
}
.client-action-card--migrators {
  border-left: 3px solid #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(255, 255, 255, 0.85));
}
.client-action-card--dormant {
  border-left: 3px solid #64748b;
}
.client-action-card--cohorts {
  border-left: 3px solid #16a34a;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.04), rgba(255, 255, 255, 0.85));
}
.client-action-card--loyalists {
  border-left: 3px solid #b45309;
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(255, 255, 255, 0.85));
}
.client-action-desc {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.5;
}
.client-action-desc strong {
  color: #0f172a;
}
.client-action-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.client-action-stat {
  font-size: 0.85rem;
  color: #475569;
}
.client-action-copy-btn {
  appearance: none;
  border: 1px solid #0b7c6e;
  background: #fff;
  color: #0b7c6e;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.client-action-copy-btn:hover {
  background: #0b7c6e;
  color: #fff;
}
.client-action-copy-btn.is-copied {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}
.client-action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.client-action-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 0.8fr 1fr 0.5fr;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  /* Phase E: at-risk / cohorts / loyalists lists can run 200+ rows on
     the projection report. content-visibility skips off-screen rows;
     contain-intrinsic-size keeps scroll geometry stable. */
  content-visibility: auto;
  contain-intrinsic-size: 0 56px;
  font-size: 0.88rem;
  align-items: center;
}
.client-action-row--with-actions {
  /* extra column reserved for the SMS/Tag/Mark Lost cluster */
  grid-template-columns: 1.3fr 1.3fr 0.8fr 1fr 0.5fr auto;
}
@media (max-width: 760px) {
  .client-action-row--with-actions {
    grid-template-columns: 1fr;
  }
}
.client-action-row:first-child {
  border-top: 0;
}
.client-action-actions-cell {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.client-action-actions-cell button {
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  color: #0f172a;
  line-height: 1.1;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.client-action-actions-cell button:hover {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.32);
}
.client-action-sms-btn {
  color: #0b7c6e !important;
  border-color: rgba(11, 124, 110, 0.35) !important;
}
.client-action-sms-btn:hover {
  background: rgba(11, 124, 110, 0.08) !important;
}
.client-action-tag-btn {
  color: #4f46e5 !important;
  border-color: rgba(79, 70, 229, 0.35) !important;
}
.client-action-tag-btn:hover {
  background: rgba(79, 70, 229, 0.08) !important;
}
.client-action-mark-lost-btn {
  color: #b91c1c !important;
  border-color: rgba(185, 28, 28, 0.35) !important;
}
.client-action-mark-lost-btn:hover {
  background: rgba(185, 28, 28, 0.08) !important;
}
.client-action-unmark-btn {
  color: #475569 !important;
  border-color: rgba(71, 85, 105, 0.35) !important;
}
.client-action-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.client-action-panel-loc select {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.78rem;
  color: #0f172a;
  font-weight: 500;
  cursor: pointer;
}
.client-action-panel-loc select:hover,
.client-action-panel-loc select:focus {
  border-color: rgba(11, 124, 110, 0.5);
  outline: none;
}
.client-action-lost-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.profit-projection-history-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profit-projection-history-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.profit-projection-history-target {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
}
.profit-projection-history-target-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.92rem;
}
.profit-projection-history-actual {
  color: #0b7c6e;
  font-weight: 600;
  font-size: 0.82rem;
}
.profit-projection-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.profit-projection-history-table th,
.profit-projection-history-table td {
  text-align: left;
  padding: 6px 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}
.profit-projection-history-table th {
  color: #64748b;
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.profit-projection-history-table tbody tr:hover {
  background: rgba(15, 23, 42, 0.02);
}

.profit-projection-backtest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.profit-projection-closed-list {
  overflow-x: auto;
  padding: 12px;
  border: 1px solid #d8dee7;
  border-radius: 8px;
  background: #f7f8fa;
}

.profit-projection-history-table tr.is-closed-projection td {
  background: #eef1f5;
}

.profit-projection-history-table td small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.72rem;
}

.profit-projection-learning-signal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #d8dee7;
  color: #475569;
  font-size: 0.78rem;
}

.profit-projection-learning-signal strong {
  color: #0f172a;
}

/* ──────────────────────────────────────────────────────────────────────
 * Responsive treatment for the Advanced Revenue Projection report.
 *
 * Target devices: iPad portrait (≤1024px) → stack 2-col card grid
 * inside individual panels; phone (≤640px) → collapse every grid to
 * a single column, switch the 6-column action row into a stacked
 * card, give the projection-history table a horizontal scroll wrapper
 * so its 5 columns stay readable instead of squashing.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* iPad portrait & smaller — drop dense grids to single column so cards
     don't get sub-260px wide. */
  .profit-projection-section-grid {
    grid-template-columns: 1fr !important;
  }
  .client-action-cohort-grid,
  .client-action-migration-grid,
  .client-action-bucket-grid {
    grid-template-columns: 1fr !important;
  }
  .profit-projection-history-grid {
    gap: 12px;
  }
  /* Header rows that pack title + filter dropdown + badge can wrap on
     iPad so nothing overflows the card. */
  .profit-client-actions-panel > header,
  .profit-dashboard-card > header {
    flex-wrap: wrap;
  }
  .client-action-header-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  /* Phone — full single-column for the report; tighter padding. */
  .profit-dashboard-card {
    padding: 14px;
  }
  .profit-dashboard-card > header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .profit-dashboard-card h3 {
    font-size: 1.05rem;
  }
  .client-action-bucket-strip {
    grid-template-columns: 1fr;
  }
  .client-action-bucket-tabs {
    flex-wrap: wrap;
    gap: 6px;
  }
  .client-action-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Stack the 6-column owner row into a vertical card with explicit
     section labels via grid-area names. Each row gets a clear name +
     stacked contact / spend / actions. */
  .client-action-row,
  .client-action-row--with-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
  }
  .client-action-spend-cell {
    text-align: left;
  }
  .client-action-actions-cell {
    justify-content: flex-start;
    margin-top: 4px;
  }
  /* Migration & cohort cards: compress dl pairs to single column. */
  .client-action-migration dl,
  .client-action-cohort dl {
    grid-template-columns: 1fr;
  }
  /* Growth Levers cards: drop dense column layout to single column so
     numeric pills and labels don't truncate. */
  .profit-lever-list {
    grid-template-columns: 1fr !important;
  }
  /* History table — too wide for phone; wrap in horizontal scroller. */
  .profit-projection-history-target {
    padding: 10px;
    overflow-x: auto;
  }
  .profit-projection-history-table {
    min-width: 520px;
  }
  .profit-projection-history-target-head {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Per-section location dropdown gets full width so it's tappable. */
  .client-action-panel-loc {
    width: 100%;
  }
  .client-action-panel-loc select {
    width: 100%;
  }
  /* Chart container — let the canvas resize down. */
  .profit-projection-section-grid > .report-chart-card {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  /* Extra-small phones — tighten further; hide the eyebrow chip on
     ultra narrow viewports so the title doesn't get cramped. */
  .profit-dashboard-card {
    padding: 12px;
  }
  .client-action-actions-cell button {
    padding: 6px 10px;
    font-size: 0.78rem;
  }
  /* Make the lost tag a block so it lines up under the name on its own
     row instead of crowding the pet list. */
  .client-action-lost-tag {
    display: block;
    width: max-content;
  }
}
.client-action-name-cell strong {
  display: block;
  color: #0f172a;
  font-size: 0.92rem;
}
.client-action-pets {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
  margin-top: 1px;
}
/* Owner Health — service badge, deterministic context, upcoming-booking tag */
.client-action-svc-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  background: #eef2ff;
  color: #4338ca;
}
.client-action-svc-boarding { background: #ede9fe; color: #6d28d9; }
.client-action-svc-daycare { background: #dcfce7; color: #15803d; }
.client-action-svc-grooming { background: #fef3c7; color: #b45309; }
.client-action-svc-mixed { background: #e0f2fe; color: #0369a1; }
.client-action-context {
  display: block;
  color: #475569;
  font-size: 0.76rem;
  margin-top: 2px;
  font-style: italic;
}
.client-action-context--ai {
  color: #5b21b6;
  font-style: normal;
}
.client-action-ai-action {
  display: block;
  color: #6d28d9;
  font-size: 0.74rem;
  font-weight: 600;
  margin-top: 1px;
}
.client-action-upcoming-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #0369a1;
  background: #e0f2fe;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
}
.client-action-subline {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: #b91c1c;
  font-weight: 600;
}
.client-action-contact-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.83rem;
}
.client-action-phone-link,
.client-action-email-link {
  color: #0b7c6e;
  text-decoration: none;
}
.client-action-phone-link:hover,
.client-action-email-link:hover {
  text-decoration: underline;
}
.client-action-email-link {
  color: #475569;
  font-size: 0.78rem;
}
.client-action-spend-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0f172a;
  text-align: right;
}
.client-action-last-cell {
  color: #475569;
  font-size: 0.83rem;
}
.client-action-loc {
  color: #64748b;
  font-size: 0.78rem;
}
.client-action-days-cell {
  color: #c97b00;
  font-weight: 600;
  text-align: right;
  font-size: 0.85rem;
}
.client-action-more-row {
  padding: 10px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(11, 124, 110, 0.03);
}
.client-action-more-btn {
  appearance: none;
  border: 0;
  background: none;
  color: #0b7c6e;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}
.client-action-more-btn:hover {
  text-decoration: underline;
}
.client-action-empty {
  color: #64748b;
  font-style: italic;
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  text-align: center;
}
.client-action-bucket-grid,
.client-action-cohort-grid,
.client-action-migration-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* Dormant Owners — 3 stat tiles + tab bar + full-width list below */
.client-action-bucket-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.client-action-bucket-stat {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  background: #fff;
  display: grid;
  gap: 2px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.client-action-bucket-stat.is-active {
  border-color: #0b7c6e;
  box-shadow: 0 0 0 1px rgba(11, 124, 110, 0.25);
}
.client-action-bucket-stat-label {
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.client-action-bucket-stat-count {
  font-size: 1.6rem;
  color: #0f172a;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.client-action-bucket-stat-meta {
  font-size: 0.75rem;
  color: #475569;
}
.client-action-bucket-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin-top: 4px;
}
.client-action-bucket-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.client-action-bucket-tab:hover {
  color: #0b7c6e;
}
.client-action-bucket-tab.is-active {
  color: #0b7c6e;
  border-bottom-color: #0b7c6e;
}
.client-action-bucket-tab-count {
  display: inline-block;
  background: rgba(15, 23, 42, 0.08);
  color: #475569;
  font-size: 0.75rem;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 4px;
  font-weight: 700;
}
.client-action-bucket-tab.is-active .client-action-bucket-tab-count {
  background: #0b7c6e;
  color: #fff;
}
/* Owner Health card — tab variants */
.client-action-bucket-stat.is-positive.is-active {
  border-color: #16a34a;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.25);
}
.client-action-bucket-stat.is-positive .client-action-bucket-stat-count {
  color: #15803d;
}
.client-action-bucket-stat.is-warning.is-active {
  border-color: #b91c1c;
  box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.25);
}
.client-action-bucket-stat.is-warning .client-action-bucket-stat-count {
  color: #b91c1c;
}
.client-action-card--owner-health {
  border-left: 3px solid #0b7c6e;
}
.client-action-list--with-actions .client-action-row--with-actions {
  grid-template-columns: 1.3fr 1.4fr 0.8fr 1fr 0.5fr 0.9fr;
}
.client-action-actions-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.client-action-mark-lost-btn,
.client-action-unmark-btn,
.client-action-expand-btn {
  appearance: none;
  border: 1px solid #b91c1c;
  background: #fff;
  color: #b91c1c;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.client-action-mark-lost-btn:hover {
  background: #b91c1c;
  color: #fff;
}
.client-action-unmark-btn {
  border-color: #475569;
  color: #475569;
}
.client-action-unmark-btn:hover {
  background: #475569;
  color: #fff;
}
.client-action-expand-btn {
  border-color: #0b7c6e;
  color: #0b7c6e;
}
.client-action-expand-btn:hover {
  background: #0b7c6e;
  color: #fff;
}
.client-action-lost-tag {
  display: inline-block;
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 3px;
}
.client-action-bucket,
.client-action-cohort,
.client-action-migration {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  display: grid;
  gap: 8px;
}
.client-action-bucket-head,
.client-action-cohort-head,
.client-action-migration-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.client-action-bucket-head strong,
.client-action-cohort-head strong,
.client-action-migration-head strong {
  font-size: 0.95rem;
  color: #0f172a;
}
.client-action-bucket dl,
.client-action-cohort dl,
.client-action-migration dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 0.8rem;
}
.client-action-bucket dl > div,
.client-action-cohort dl > div,
.client-action-migration dl > div {
  display: flex;
  flex-direction: column;
}
.client-action-bucket dt,
.client-action-cohort dt,
.client-action-migration dt {
  color: #64748b;
  font-size: 0.75rem;
}
.client-action-bucket dd,
.client-action-cohort dd,
.client-action-migration dd {
  margin: 0;
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.client-action-bucket-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #0b7c6e;
  font-weight: 600;
  padding: 4px 0;
}
.client-action-bucket-details summary:hover {
  text-decoration: underline;
}
.client-action-bucket-details[open] summary {
  margin-bottom: 8px;
}

.profit-growth-levers-panel {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border-left: 3px solid #c97b00;
  background: linear-gradient(135deg, rgba(201, 123, 0, 0.03), rgba(11, 124, 110, 0.02));
}

.profit-growth-levers-panel header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.profit-growth-levers-panel header > span.report-badge {
  background: #c97b00;
  color: #fff;
  border: 1px solid #c97b00;
  font-weight: 950;
  padding: 4px 12px;
  border-radius: 999px;
}
/* Every text element inside Growth Levers — the section was rendering
   eyebrow / h3 / category note / per-lever description / metric labels
   all in --muted (gray ~#9b968d) against the tinted panel background.
   Force ink-dark text on titles, slate-700 on body, slate-600 on
   labels. Per-lever titles also bumped a notch. */
.profit-growth-levers-panel > header .eyebrow {
  color: #c97b00 !important;
  font-weight: 900;
}
.profit-growth-levers-panel > header h3 {
  color: #0f172a !important;
  font-weight: 900;
}
.profit-growth-levers-panel > .profit-category-note {
  color: #334155 !important;
  font-weight: 700;
  border-top-color: rgba(201, 123, 0, 0.18);
}
.profit-growth-levers-panel .profit-lever header > div > strong {
  background: #0f172a;
  color: #fff !important;
  font-weight: 950;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
}
.profit-growth-levers-panel .profit-lever.is-top header > div > strong {
  background: #c97b00;
  color: #fff !important;
}
.profit-growth-levers-panel .profit-lever-desc {
  color: #334155 !important;
  font-weight: 650;
}
.profit-growth-levers-panel .profit-lever-metric dt {
  color: #475569 !important;
  font-weight: 800;
}
.profit-growth-levers-panel .profit-lever-metric dd {
  color: #0f172a !important;
  font-weight: 950;
}
.profit-growth-levers-panel .profit-lever-actions li {
  color: #1e293b;
}

.profit-lever-list {
  display: grid;
  gap: 10px;
}

.profit-lever {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  border-left: 4px solid #cbd5e1;
}

.profit-lever.is-top {
  border-left-color: #c97b00;
  background: linear-gradient(135deg, #fff, rgba(201, 123, 0, 0.03));
}

.profit-lever header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profit-lever header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profit-lever-rank,
.profit-growth-levers-panel .profit-lever-rank {
  background: #11615b !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  line-height: 1.2 !important;
}

.profit-lever.is-top .profit-lever-rank,
.profit-growth-levers-panel .profit-lever.is-top .profit-lever-rank {
  background: #c97b00 !important;
  color: #ffffff !important;
}

.profit-lever header > div > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.profit-lever-opportunity,
.profit-growth-levers-panel .profit-lever-opportunity {
  background: #c97b00 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  line-height: 1.2 !important;
}

.profit-lever.is-top .profit-lever-opportunity,
.profit-growth-levers-panel .profit-lever.is-top .profit-lever-opportunity {
  background: #c97b00 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  padding: 6px 14px !important;
}

.profit-lever-desc {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.profit-lever-metric {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}

.profit-lever-metric > div {
  display: grid;
  gap: 1px;
}

.profit-lever-metric dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.profit-lever-metric dd {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  margin: 0;
}

.profit-lever-actions {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 3px;
}

.profit-lever-actions li {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.profit-lever.is-needs-data {
  border-left-color: #9b968d;
  background: rgba(0, 0, 0, 0.02);
}

.profit-lever.is-needs-data .profit-lever-opportunity {
  background: rgba(155, 150, 141, 0.18);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  font-style: italic;
  padding: 3px 10px;
}

.profit-lever-flag {
  font-style: normal;
  background: rgba(155, 150, 141, 0.12);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
}

.profit-driver-scenario-panel {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
}

.profit-growth-bridge-panel {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
}

.growth-bridge-rows {
  display: grid;
  gap: 8px;
}

.growth-bridge-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(80px, 2fr) minmax(96px, auto);
  align-items: center;
  gap: 12px;
}

.growth-bridge-label {
  display: grid;
  gap: 2px;
}

.growth-bridge-label > strong { font-size: 13px; }
.growth-bridge-label > small { color: var(--muted, #6b7280); font-size: 11px; }

.growth-bridge-bar {
  position: relative;
  height: 12px;
  background: #f1f1f4;
  border-radius: 6px;
  overflow: hidden;
}

.growth-bridge-bar > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 6px;
  display: block;
}

.growth-bridge-row.is-up .growth-bridge-bar > span { background: #1f9d55; }
.growth-bridge-row.is-down .growth-bridge-bar > span { background: #c0392b; }

.growth-bridge-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
  display: grid;
  gap: 1px;
}

.growth-bridge-amount > small { font-weight: 500; color: var(--muted, #6b7280); font-size: 11px; }
.growth-bridge-row.is-up .growth-bridge-amount { color: #1f9d55; }
.growth-bridge-row.is-down .growth-bridge-amount { color: #c0392b; }

.report-badge.is-positive { background: rgba(31,157,85,0.12); color: #1f7a43; }
.report-badge.is-negative { background: rgba(192,57,43,0.12); color: #a5281c; }

.profit-driver-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.profit-driver-scenario {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  border-top: 3px solid var(--line);
}

.profit-driver-scenario.is-conservative { border-top-color: #c97b00; }
.profit-driver-scenario.is-base { border-top-color: var(--accent); }
.profit-driver-scenario.is-aggressive { border-top-color: #7c3aed; }

.profit-driver-scenario header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.profit-driver-scenario header > strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profit-driver-scenario.is-conservative header > strong { color: #c97b00; }
.profit-driver-scenario.is-base header > strong { color: var(--accent); }
.profit-driver-scenario.is-aggressive header > strong { color: #7c3aed; }

.profit-driver-scenario header > span {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.profit-driver-scenario > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.profit-driver-multipliers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}

.profit-driver-multipliers > div {
  display: grid;
  gap: 1px;
  text-align: center;
}

.profit-driver-multipliers dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.profit-driver-multipliers dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.profit-driver-multipliers small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.profit-driver-outcome {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.profit-driver-outcome > span {
  display: grid;
  gap: 1px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  text-align: center;
}

.profit-driver-outcome em {
  font-style: normal;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profit-driver-outcome span > span,
.profit-driver-outcome > span:not(:has(em)) {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.profit-driver-rationale {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 2px;
}

.profit-driver-rationale li {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.35;
}

.profit-seasonal-panel {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border-left: 3px solid #7c3aed;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.02), rgba(11, 124, 110, 0.02));
}

.profit-seasonal-panel header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.profit-seasonal-panel header span.report-badge {
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.profit-seasonal-table-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.profit-seasonal-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.profit-seasonal-table th,
.profit-seasonal-table td {
  padding: 8px 6px;
  text-align: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.profit-seasonal-table thead th {
  background: rgba(0, 0, 0, 0.02);
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profit-seasonal-table th:first-child {
  text-align: left;
  background: rgba(0, 0, 0, 0.02);
  color: var(--ink);
  padding-left: 12px;
  width: 90px;
}

.profit-seasonal-table th.is-peak {
  background: rgba(124, 58, 237, 0.06);
  color: #7c3aed;
}

.profit-seasonal-table td.is-peak {
  border-color: rgba(124, 58, 237, 0.2);
}

.profit-seasonal-table td > strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  display: block;
}

.profit-seasonal-table td > small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.profit-seasonal-table td > span {
  color: var(--muted);
  font-size: 12px;
}

.profit-seasonal-table td.is-mature {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(124, 58, 237, 0.05) 4px,
    rgba(124, 58, 237, 0.05) 6px
  );
}

.profit-seasonal-forecast {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  gap: 12px;
}

.profit-seasonal-forecast h4 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profit-seasonal-formula {
  margin: 0;
  padding: 8px 12px;
  background: rgba(124, 58, 237, 0.04);
  border-left: 3px solid #7c3aed;
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.profit-seasonal-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.profit-seasonal-services article {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
}

.profit-seasonal-services strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profit-seasonal-services span {
  color: #7c3aed;
  font-size: 20px;
  font-weight: 950;
}

.profit-seasonal-services small {
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.profit-seasonal-services em {
  font-style: normal;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}

.profit-data-science-panel header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.profit-ensemble-arms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.profit-ensemble-arm {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.profit-ensemble-arm > strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profit-ensemble-arm > span {
  color: var(--accent);
  font-size: 20px;
  font-weight: 950;
}

.profit-ensemble-arm > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.profit-retention-bar {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  align-items: end;
  height: 80px;
  margin-top: 8px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.profit-retention-bar > span {
  display: grid;
  align-items: end;
  position: relative;
}

.profit-retention-bar i {
  display: block;
  width: 100%;
  background: linear-gradient(to top, var(--accent), rgba(11, 124, 110, 0.5));
  border-radius: 2px 2px 0 0;
}

.profit-retention-bar small {
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}

.profit-weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.profit-weekday-grid article {
  display: grid;
  gap: 3px;
  padding: 8px 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}

.profit-weekday-grid strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.profit-weekday-grid span {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 4px;
  align-items: baseline;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.profit-weekday-grid em {
  font-style: normal;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-align: left;
}

.profit-cohort-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.profit-cohort-strip article {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 2px;
}

.profit-cohort-strip strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.profit-cohort-strip span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.profit-cohort-strip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

/* ChatGPT-driven forecast panel */
.profit-ai-forecast-panel {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(11, 124, 110, 0.18);
  background: linear-gradient(135deg, rgba(11, 124, 110, 0.03), rgba(124, 58, 237, 0.03));
}

.profit-ai-forecast-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profit-ai-forecast-panel header span.report-badge {
  background: rgba(11, 124, 110, 0.08);
  color: var(--accent);
  border: 1px solid rgba(11, 124, 110, 0.18);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profit-ai-loading {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding: 18px 0;
  text-align: center;
}

.profit-ai-forecast-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.profit-ai-forecast-totals > span {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
}

.profit-ai-forecast-totals > span > strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.profit-ai-forecast-totals > span.is-base {
  border-color: var(--accent);
  background: rgba(11, 124, 110, 0.04);
}

.profit-ai-forecast-totals > span.is-base > strong {
  color: var(--accent);
  font-size: 20px;
}

.profit-ai-forecast-totals > span > small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profit-ai-forecast-grid {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.profit-ai-forecast-row {
  display: grid;
  grid-template-columns: 70px 90px 100px 90px 70px minmax(0, 1.8fr);
  gap: 10px;
  padding: 8px 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.profit-ai-forecast-row:first-child { border-top: 0; }

.profit-ai-forecast-row.is-head {
  background: rgba(11, 124, 110, 0.04);
  font-weight: 900;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.profit-ai-forecast-row > strong {
  font-weight: 950;
  color: var(--ink);
}

.profit-ai-forecast-row > span {
  text-align: right;
  font-weight: 800;
}

.profit-ai-forecast-row > span.is-base {
  color: var(--accent);
  font-weight: 950;
}

.profit-ai-forecast-row > small {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.3;
  font-size: 11px;
}

.profit-ai-reasoning,
.profit-ai-assumptions {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  display: grid;
  gap: 6px;
}

.profit-ai-reasoning > strong,
.profit-ai-assumptions > strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profit-ai-reasoning > p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.profit-ai-assumptions ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 3px;
}

.profit-ai-assumptions li {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.profit-analysis-summary {
  display: grid;
  gap: 5px;
  border-left: 4px solid var(--accent);
  background: #f6fbfa;
  padding: 10px 12px;
}

.profit-analysis-summary strong,
.profit-analysis-list strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.profit-analysis-summary p {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.4;
}

.profit-analysis-list {
  display: grid;
  gap: 6px;
}

.profit-analysis-list span {
  border: 1px solid #e6e1d5;
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  padding: 8px 10px;
}

.report-table-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.report-table-card > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.report-table-card h3 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.report-table-card > header > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.report-table {
  display: grid;
  gap: 6px;
  min-width: 0;
  overflow: auto;
}

.report-table-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(11, 124, 110, 0.04);
  padding: 10px 12px;
}

.report-table-more > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.bounded-collection-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(11, 124, 110, 0.04);
  padding: 9px 12px;
  contain: layout paint;
}

.bounded-collection-pager > span,
.bounded-collection-export-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.bounded-collection-pager > div {
  display: flex;
  gap: 8px;
}

.bounded-collection-pager .secondary-button {
  min-height: 34px;
  padding: 7px 12px;
}

.bounded-collection-export-note {
  margin: 0;
}

.owner-invoice-row,
.owner-payment-history-row:not(.owner-payment-history-head),
.report-row:not(.is-head),
.settings-data-table tbody tr,
.calendar-reservation-row,
.task-table-row:not(.task-table-heading):not(.task-table-filter-row) {
  content-visibility: auto;
  contain-intrinsic-size: auto 58px;
}

.report-row {
  display: grid;
  grid-template-columns: repeat(var(--report-cols), minmax(112px, 1fr));
  gap: 8px;
  align-items: center;
  min-width: max(100%, calc(var(--report-cols) * 112px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.report-row.is-suggestion-resolved {
  border-color: #a7dcc4;
  background: #f2fbf6;
}

.report-row.is-expanded {
  border-color: rgba(0, 107, 99, 0.36);
  background: #f3fbfa;
}

.report-row.report-row-total {
  border-color: rgba(11, 124, 110, 0.28);
  background: rgba(11, 124, 110, 0.06);
  font-weight: 700;
}

.report-row.report-row-total > span {
  font-weight: 700;
}

.report-row.is-head {
  border-color: transparent;
  background: rgba(11, 124, 110, 0.04);
  padding: 8px 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 1;
}

.report-row.is-head > span {
  white-space: normal;
  line-height: 1.25;
  font-size: 10px;
}

.report-row > span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-row .is-number {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 900;
}

/* Highlight projected revenue and delta columns visually so the table
   tells a clearer story at a glance. The advanced revenue projection
   table has many columns — this nudges the eye to the conclusions. */
.report-row.is-head > span:nth-child(6) { color: var(--accent); }
.report-row.is-head > span:nth-child(8) { color: #c97b00; }

.report-row .report-long-text {
  white-space: normal;
  line-height: 1.35;
}

.report-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.report-expand-toggle i {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #cfe2dd;
  border-radius: 5px;
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.report-expand-panel {
  display: grid;
  gap: 8px;
  min-width: 100%;
  border: 1px solid #cfe2dd;
  border-radius: 8px;
  background: #fbfffe;
  padding: 10px;
}

.report-expand-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.report-expand-toolbar > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.report-expand-toolbar > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.report-sort-button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 9px;
}

.report-sort-button.is-active {
  border-color: var(--accent);
  background: #e9f7f4;
  color: var(--accent);
}

.report-detail-table {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow: auto;
}

.report-detail-row {
  display: grid;
  grid-template-columns: repeat(var(--detail-cols), minmax(110px, 1fr));
  gap: 6px;
  align-items: center;
  min-width: max(100%, calc(var(--detail-cols) * 110px));
  border: 1px solid #e4eee9;
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}

.report-detail-row.is-head {
  border-color: transparent;
  background: transparent;
  padding: 0 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.report-detail-row > span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-detail-row .is-number {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.report-detail-row .report-actions {
  justify-content: flex-end;
}

.report-link {
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 950;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
  overflow: visible !important;
}

.report-actions .date-nav-button {
  flex: 0 1 auto;
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .report-dashboard-kpis,
  .report-dashboard-section-grid {
    grid-template-columns: 1fr;
  }

  .profit-projection-section-grid,
  .profit-occupancy-list,
  .profit-summary-list,
  .profit-formula-list {
    grid-template-columns: 1fr;
  }

  .profit-summary-panel {
    grid-template-columns: 1fr;
  }

  .profit-weekly-forecast {
    grid-template-columns: 1fr;
  }

  .report-library-nav {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    max-height: none;
    overflow-x: auto;
    padding: 0 2px 6px;
  }

  .report-nav-group {
    align-content: start;
    align-self: flex-start;
    display: grid;
    flex: 0 0 auto;
    gap: 8px;
    min-width: min(240px, 78vw);
  }

  .report-nav-items {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .report-menu-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 170px;
    max-width: min(210px, 70vw);
    min-height: 42px;
  }

  .report-menu-button span {
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .report-dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  /* Reports menu on phones: the ≤900px rules turn the open menu into a nested
     horizontal-scroll list (sideways category columns + sideways report chips) with
     no height bound, which pushes the report off-screen and is unusable on a phone.
     Make the open menu a bounded, scrollable, full-width VERTICAL list instead. */
  .settings-sidebar.is-menu-open nav.report-library-nav {
    display: grid;
    gap: 8px;
    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .report-library-nav .report-nav-group {
    min-width: 0;
    flex: initial;
  }
  .report-library-nav .report-nav-items {
    display: grid;
    gap: 4px;
    overflow-x: visible;
  }
  .report-library-nav .report-menu-button {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    justify-content: flex-start;
  }
  .report-library-nav .report-menu-button span {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .report-dashboard-metrics,
  .report-summary {
    grid-template-columns: 1fr;
  }

  .report-dashboard-card > header {
    align-items: stretch;
    flex-direction: column;
  }
}

.lead-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lead-source-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 8px;
}

.lead-source-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.lead-source-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-source-card strong {
  color: var(--accent);
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.lead-source-card small {
  color: var(--warning);
  font-size: 12px;
  font-weight: 900;
}

.lead-list-report {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.lead-list-report > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.lead-list-report h3 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.lead-list-report > header > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-table {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.lead-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(140px, 0.9fr) minmax(190px, 1fr) minmax(170px, 1fr) minmax(120px, 0.7fr) minmax(150px, auto);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.lead-row.is-head {
  border-color: transparent;
  background: transparent;
  padding: 0 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-row span {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.lead-row strong,
.lead-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-row strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.lead-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.lead-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.lead-row-actions .date-nav-button {
  flex: 0 1 auto;
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
  white-space: nowrap;
}

.lead-stage {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid #cfe6df;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.lead-stage.is-green {
  border-color: #9fd4b8;
  background: #e8f8ef;
  color: #16643b;
}

.lead-stage.is-amber {
  border-color: #f0d39a;
  background: #fdf4e3;
  color: #8a5a12;
}

.lead-stage.is-muted {
  border-color: #d8d8d8;
  background: #f3f3f3;
  color: #707070;
}

.task-lead-row.is-archived {
  opacity: 0.62;
}

.task-tour-summary article.is-good strong {
  color: #16643b;
}

.task-tour-summary article.is-warning strong {
  color: #8a5a12;
}

.task-tour-group {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  /* overflow: hidden CLIPPED the 980px-min-width rows inside — scroll instead. */
  overflow-x: auto;
}

.task-tour-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--accent-soft);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  list-style: none;
}

.task-tour-group > summary::-webkit-details-marker {
  display: none;
}

.task-tour-group > summary::before {
  content: "\25B8";
  margin-right: 8px;
  color: var(--accent);
}

.task-tour-group[open] > summary::before {
  content: "\25BE";
}

.task-tour-group .task-tour-row {
  grid-template-columns: minmax(80px, .6fr) minmax(150px, 1fr) minmax(110px, .8fr) minmax(100px, .7fr) minmax(90px, .7fr) minmax(100px, .7fr) minmax(150px, 1fr);
  min-width: 860px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.task-tour-group .task-tour-row:last-child {
  border-bottom: 0;
}

/* Colored icon action buttons on lead rows (tooltip = label). */
.lead-action-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 0;
}

.lead-action-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lead-action-icon.is-blue { color: #0369a1; border-color: #bae6fd; background: #f0f9ff; }
.lead-action-icon.is-green { color: #16643b; border-color: #9fd4b8; background: #e8f8ef; }
.lead-action-icon.is-red { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.lead-action-icon.is-amber { color: #8a5a12; border-color: #f0d39a; background: #fdf4e3; }
.lead-action-icon.is-gray { color: #52525b; border-color: #d8d8d8; background: #f6f6f6; }

.lead-action-icon:hover { filter: brightness(0.95); }

/* Keep the task table action rail compact. The full action name remains
   available through title/aria-label without overflowing the icon button. */
.lead-action-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.task-search-input {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  min-width: 150px;
}

@media (max-width: 900px) {
  .task-page-head {
    flex-wrap: wrap;
    align-items: start;
  }

  .task-lead-platform-breakdown {
    order: 3;
    width: 100%;
    margin-right: 0;
  }

  .task-panel-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }

  .task-search-input {
    flex: 1 1 140px;
    min-width: 120px;
  }

  /* Tour rows collapse to stacked cards on phones instead of a clipped grid. */
  .task-tour-group .task-tour-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
    row-gap: 6px;
    padding: 10px 12px;
  }

  .task-tour-group .task-tour-row .task-table-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .task-call-load-more {
    width: 100%;
  }
}

.lead-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  padding: 16px;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.yelp-reply-panel {
  max-width: min(660px, calc(100vw - 20px));
}

.yelp-reply-panel textarea {
  width: 100%;
  box-sizing: border-box;
}

.yelp-reply-panel .lead-message-history {
  max-height: 34vh;
  overflow-y: auto;
}

@media (max-width: 900px) {
  .yelp-reply-panel {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
}

.lead-detail-panel {
  max-width: min(860px, calc(100vw - 28px));
}

.suggestion-review-panel {
  width: min(940px, calc(100vw - 28px));
}

.suggestion-review-comment,
.suggestion-review-screenshot,
.suggestion-resolution-card {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.suggestion-review-comment {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 12px;
}

.suggestion-review-comment span,
.suggestion-review-screenshot header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.suggestion-review-comment strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.suggestion-resolution-card {
  border: 1px solid #d9e6de;
  border-radius: 8px;
  background: #fbfdfb;
  padding: 12px;
}

.suggestion-resolution-card.is-resolved {
  border-color: #a7dcc4;
  background: #f2fbf6;
}

.suggestion-resolution-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.suggestion-resolution-card header div,
.suggestion-resolution-card label {
  display: grid;
  gap: 6px;
}

.suggestion-resolution-card header span,
.suggestion-resolution-card label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.suggestion-resolution-card header strong {
  color: var(--ink);
  font-size: 15px;
}

.suggestion-resolution-card input,
.suggestion-resolution-card textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 11px;
}

.suggestion-resolution-card textarea {
  min-height: 96px;
  resize: vertical;
}

.suggestion-resolution-card input:focus,
.suggestion-resolution-card textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 112, 83, 0.12);
  outline: none;
}

.suggestion-resolution-card small {
  color: #16643b;
  font-size: 12px;
  font-weight: 900;
}

.suggestion-review-screenshot header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.suggestion-review-screenshot img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
}

.yelp-reply-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.lead-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.lead-detail-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.lead-detail-grid strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-detail-grid span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.lead-message-history {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.lead-message-history article {
  display: grid;
  gap: 4px;
  width: min(88%, 520px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.lead-message-history article.is-outbound {
  justify-self: end;
  border-color: #cfe6df;
  background: var(--accent-soft);
}

.lead-message-history strong,
.lead-message-history small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-message-history span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.lead-conversation-list {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
}

.lead-conversation-list article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.lead-conversation-list header,
.lead-conversation-meta,
.lead-conversation-attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lead-conversation-list header {
  justify-content: space-between;
}

.lead-conversation-list strong,
.lead-conversation-list small,
.lead-conversation-meta span,
.lead-conversation-meta a,
.lead-conversation-attachments a {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-conversation-list p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.lead-reply-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.play-group-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 100%;
}

.play-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
}

.play-group-header span {
  color: var(--accent);
  font-size: 18px;
  font-weight: 950;
}

.play-group-drop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  align-content: start;
  min-height: 340px;
  border: 2px dashed #b8d6d0;
  border-radius: 8px;
  background: #f8fcfb;
  padding: 12px;
  cursor: pointer;
}

.play-group-drop > .empty-cabin {
  grid-column: 1 / -1;
  align-self: center;
  min-height: 180px;
}

.play-group-drop.is-drop-target {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.play-group-dog {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.play-group-dog.is-expected {
  background: #fbfaf6;
  border-style: dashed;
}

.play-group-dog strong,
.play-group-dog span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.play-group-dog strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.05;
}

.play-group-dog span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.play-group-dog button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.play-group-dog .dog-icon-strip {
  display: inline-flex;
  color: inherit;
  overflow: visible;
}

.play-group-dog .dog-icon-token {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 18px;
  border-radius: 999px;
  font-size: 12px;
  padding: 0;
}

.play-group-dog .fixed-age-icon {
  color: var(--fixed-age-color);
}

.play-group-dog .fixed-age-icon .unaltered-sex-icon {
  width: 15px;
  height: 15px;
}

.play-group-dog .dog-name-vaccine-alert {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 0;
  border-radius: 999px;
  padding: 0;
}

.cabin-grid {
  display: grid;
  gap: 8px;
  align-items: stretch;
}

.cabin-grid.is-moego {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  min-width: 0;
}

.cabin-grid.is-local {
  width: 100%;
  grid-template-columns: repeat(var(--room-cols), minmax(0, 1fr));
  grid-auto-rows: minmax(136px, 1fr);
}

.cabin {
  display: grid;
  grid-template-rows: auto minmax(54px, 1fr) auto;
  min-height: 142px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  cursor: pointer;
}

.cabin button,
.play-group-drop button {
  cursor: pointer;
}

.cabin-grid.is-moego .cabin {
  min-height: 156px;
}

.cabin.is-drop-target {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.cabin.is-clean {
  border-color: #bfd8d3;
  background: #fbfffe;
}

.cabin.is-dirty {
  border-color: #b7832d;
  background: #fff8e8;
}

.cabin.is-cat-unit {
  border-color: #7ac7bb;
  background: #f1fbf8;
}

.cabin-title {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.cabin-title span {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.assigned-dog-list {
  display: grid;
  gap: 4px;
}

.assigned-dog {
  display: grid;
  align-content: center;
  gap: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 6px 0;
}

.assigned-dog:last-child {
  border-bottom: 0;
}

.assigned-main {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.assigned-photo,
.assigned-initials {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: #ebe8df;
}

.assigned-photo.has-vaccine-alert,
.assigned-initials.has-vaccine-alert {
  border-width: 2px;
}

.assigned-initials {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 16px;
  font-weight: 950;
}

.assigned-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.05;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}

.assigned-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
}

.empty-cabin {
  display: grid;
  place-items: center;
  min-height: 62px;
  color: #aaa;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.cabin-status {
  min-height: 70px;
  font-size: 24px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cabin-status.is-clean {
  color: var(--accent);
}

.cabin-status.is-dirty {
  color: var(--warning);
}

.clear-button,
.status-button,
.moego-button {
  justify-self: start;
  max-width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
  white-space: normal;
}

.status-button {
  color: var(--ink);
}

.moego-button {
  color: var(--accent);
}

.cabin.is-dirty .status-button {
  border-color: #b7832d;
}

.cabin.is-clean .status-button {
  border-color: #8fbdb5;
}

.drag-ghost {
  position: fixed;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 3px solid var(--accent);
  border-radius: 14px;
  background: #fff;
  padding: 6px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow);
}

.drag-ghost .dog-photo,
.drag-ghost .dog-initials {
  width: 60px;
  height: 60px;
}

.drag-ghost span {
  display: none;
}

.dog-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: end center;
  background: rgba(0, 0, 0, 0.28);
  padding: 16px;
}

.dog-picker {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(720px, 100%);
  max-height: min(680px, 88dvh);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.dog-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.picker-current {
  margin-top: 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 850;
}

.picker-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.picker-search {
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.picker-search input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 16px;
  text-transform: none;
}

.picker-dogs {
  display: grid;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.picker-dog {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  color: var(--ink);
  text-align: left;
}

.picker-dog.is-assigned {
  background: #f2f1ec;
}

.picker-dog .dog-photo,
.picker-dog .dog-initials {
  width: 44px;
  height: 44px;
}

.picker-dog strong,
.picker-dog span span {
  display: block;
  overflow-wrap: anywhere;
}

.picker-dog strong {
  font-size: 17px;
  font-weight: 950;
  line-height: 1.1;
}

.picker-dog span span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.picker-empty {
  display: grid;
  place-items: center;
  min-height: 100px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 900;
}

@media (max-width: 900px) {
  .app {
    grid-template-rows: minmax(0, 1fr) 146px;
    gap: 8px;
    padding: 8px;
  }

  .board-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-home {
    width: min(180px, 52vw);
    height: 58px;
  }

  .brand-logo {
    width: 100%;
    height: 100%;
  }

  .header-metrics {
    width: 100%;
    align-items: stretch;
  }

  .metric,
  .status {
    flex: 1;
    min-width: 0;
  }

  .dog-panel {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: 1fr;
  }
}

@media (max-width: 640px) {
  body {
    min-height: 100dvh;
  }

  .app {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }

  .app.is-calendar .board-panel {
    min-height: 100dvh;
  }

  .board-panel {
    min-height: 72dvh;
    overflow: visible;
  }

  .board-header {
    gap: 10px;
    padding: 12px;
  }

  .brand-home {
    width: min(156px, 48vw);
    height: 52px;
  }

  .brand-logo {
    width: 100%;
    height: 100%;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 21px;
  }

  .header-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .header-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
    gap: 5px;
    width: 100%;
    min-width: 0;
  }

  .header-actions .message-button {
    width: 100%;
    min-width: 0;
    height: 38px;
  }

  .header-actions .message-button.has-count::after {
    top: -6px;
    right: -5px;
  }

  .suggestion-overlay {
    align-items: start;
    padding: 10px;
  }

  .suggestion-dialog {
    gap: 13px;
  }

  .suggestion-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric {
    min-height: 50px;
    padding: 7px 10px;
  }

  .metric strong {
    font-size: 18px;
  }

  .status {
    grid-column: 1 / -1;
    min-height: 42px;
    min-width: 0;
    padding: 10px;
  }

  .room-tabs {
    gap: 6px;
    padding: 8px;
  }

  .room-tab {
    min-height: 38px;
    padding: 0 12px;
    font-size: 16px;
    white-space: nowrap;
  }

  .today-tab {
    min-width: 160px;
  }

  .nav-select {
    min-height: 38px;
    padding: 0 10px;
    font-size: 16px;
  }

  .nav-select select {
    min-width: 120px;
    font-size: 14px;
  }

  .room-board {
    padding: 8px;
    overflow: visible;
  }

  .cabin-grid.is-moego {
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)) !important;
    min-width: 0 !important;
  }

  .cabin-grid.is-local {
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: auto;
  }

  .cabin {
    min-height: 136px;
  }

  .cabin-title {
    font-size: 11px;
  }

  .cabin-status {
    min-height: 60px;
    font-size: 22px;
  }

  .play-group-drop {
    grid-template-columns: 1fr;
    min-height: 260px;
    padding: 8px;
  }

  .play-group-dog {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .assigned-name {
    font-size: 16px;
  }

  .dog-panel {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: 1fr;
    margin-top: 8px;
    min-height: 138px;
    overflow: hidden;
  }

  .dog-controls {
    border-right: 1px solid var(--line);
  }

  .panel-header {
    border-right: 0;
    padding: 8px 10px;
  }

  .icon-button {
    width: 38px;
    height: 38px;
  }

  .search {
    grid-template-columns: 1fr;
    border-right: 0;
    padding: 8px 10px;
  }

  .search input {
    min-height: 30px;
    font-size: 13px;
  }

  .dog-list {
    display: flex;
    flex-wrap: nowrap;
    max-height: none;
    align-items: center;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .dog-card {
    grid-template-columns: 42px minmax(0, 1fr);
    width: clamp(190px, 48vw, 236px);
    min-width: clamp(190px, 48vw, 236px);
    height: 88px;
    min-height: 88px;
  }

  .dog-photo,
  .dog-initials {
    width: 42px;
    height: 42px;
  }

  .calendar-header {
    grid-template-columns: 1fr;
  }

  .calendar-date-side {
    justify-self: stretch;
  }

  .calendar-date-side .eyebrow {
    text-align: left;
  }

  .calendar-date-nav,
  .calendar-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-date-nav {
    align-items: stretch;
    width: 100%;
  }

  .date-nav-button,
  .sync-button,
  .trend-button {
    width: 100%;
  }

  .pet-detail-hero {
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 10px;
  }

  .pet-detail-photo {
    width: 72px;
    height: 72px;
    font-size: 22px;
  }

  .owner-detail-avatar {
    width: 72px;
    height: 72px;
    font-size: 22px;
  }

  .owner-credit-indicators {
    grid-column: 1 / -1;
    justify-self: stretch;
    grid-template-columns: 1fr;
  }

  .owner-package-credit-indicator,
  .owner-store-credit-indicator {
    max-width: none;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    text-align: left;
  }

  .owner-package-credit-indicator strong,
  .owner-store-credit-indicator strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-size: 30px;
  }

  .pet-quick-actions {
    position: static;
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 0;
    max-width: none;
  }

  .pet-quick-actions button {
    flex: 0 0 42px;
  }

  .pet-detail-grid,
  .owner-historical-info-content,
  .pet-form-grid,
  .pet-form-inline-row,
  .pet-owner-fields,
  .pet-owner-add-controls,
  .pet-owner-new-grid,
  .owner-pet-card,
  .label-manager-grid,
  .label-row,
  .pet-icon-row-head,
  .pet-icon-row,
  .pet-add-icon-form,
  .vaccine-workspace,
  .vaccine-grid-head,
  .vaccine-edit-row,
  .vet-form-grid,
  .reservation-form-grid,
  .reservation-care-grid,
  .reservation-money,
  .reservation-actions {
    grid-template-columns: 1fr;
  }

  .reservation-money .reservation-deposit-action {
    grid-template-columns: 1fr;
  }

  .reservation-client-card {
    --reservation-photo-size: 88px;
    grid-template-columns: var(--reservation-photo-size) minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }

  .reservation-client-card .text-button {
    grid-column: 1 / -1;
  }

  .reservation-photo {
    font-size: 26px;
  }

  .reservation-pet-name {
    font-size: 28px;
    line-height: 1;
  }

  .pet-icon-row-head {
    display: none;
  }

  .icon-remove-button {
    justify-self: start;
  }

  .emoji-picker-grid {
    grid-template-columns: 1fr;
  }

  .settings-header {
    align-items: start;
    flex-direction: column;
  }

  .vaccine-overlay {
    padding: 8px;
  }

  .vaccine-drawer {
    max-height: 96vh;
  }

  .label-overlay {
    padding: 8px;
  }

  .label-manager {
    width: 100%;
    max-height: 96vh;
  }

  .label-manager-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .label-manager-actions > div {
    flex-direction: column;
  }

  .vaccine-document-preview {
    min-height: clamp(96px, 22dvh, 180px);
  }

  /* Top-align the (grid-centered) editor so a tall reservation-editor modal's
     head/first fields stay reachable — a centered overflowing grid item clips
     its top ABOVE the scroll origin, which staff can never scroll up to. Matches
     .checkin-overlay / .quick-reservation-overlay on mobile. */
  .reservation-overlay {
    place-items: start center;
    padding: 8px;
  }

  .reservation-drawer {
    width: 100%;
    /* Track the visible viewport (shrinks for the iOS keyboard) instead of a
       fixed 100dvh so the editor's fields stay above the keyboard. */
    max-height: calc(var(--app-visual-viewport-height, 100dvh) - 16px);
    border-radius: 14px;
  }

  .reservation-client-card .text-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .pet-edit-card {
    grid-row: auto;
  }

  .calendar-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trend-backdrop {
    align-items: stretch;
    padding: 8px;
  }

  .trend-report {
    max-height: none;
  }

  .trend-header,
  .trend-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .trend-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-summary,
  .report-meta-bar {
    grid-template-columns: 1fr;
  }

  .report-chart-card > header,
  .profit-analysis-card > header,
  .profit-dashboard-card > header {
    align-items: stretch;
    flex-direction: column;
  }

  .profit-projection-performance-grid,
  .profit-projection-section-grid,
  .profit-category-bars dl,
  .report-chart-scenario-strip {
    grid-template-columns: 1fr;
  }

  .profit-report-toolbar {
    justify-content: stretch;
  }

  .profit-report-toolbar > *,
  .profit-location-filter {
    min-width: 100%;
  }

  .profit-summary-panel,
  .profit-summary-list {
    grid-template-columns: 1fr;
  }

  .profit-category-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .profit-category-row.is-head {
    display: none;
  }

  .profit-category-row > span {
    text-align: right;
  }

  .profit-category-row > span:nth-of-type(2),
  .profit-category-row > span:nth-of-type(3),
  .profit-category-row > span:nth-of-type(4) {
    grid-column: 1 / -1;
    text-align: left;
  }

  .profit-weekly-title {
    align-items: stretch;
    flex-direction: column;
  }

  .profit-weekly-grid {
    grid-template-columns: minmax(68px, 0.9fr) repeat(7, minmax(38px, 1fr));
  }

  .profit-scenario-rows article {
    grid-template-columns: 1fr;
  }

  .profit-scenario-rows span {
    text-align: left;
  }

  .report-chart-legend {
    justify-content: flex-start;
  }

  .report-row {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    min-width: 0;
  }

  .report-row.is-head {
    display: none;
  }

  .report-row > span {
    white-space: normal;
  }

  .report-table-more {
    align-items: stretch;
    flex-direction: column;
  }

  .report-expand-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .report-expand-toolbar > div {
    justify-content: stretch;
  }

  .report-sort-button {
    flex: 1 1 auto;
  }

  .report-detail-row {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    min-width: 0;
  }

  .report-detail-row.is-head {
    display: none;
  }

  .report-detail-row > span {
    white-space: normal;
  }

  .report-actions {
    justify-content: stretch;
  }

  .report-actions .date-nav-button {
    flex: 1 1 auto;
  }

  .lead-source-grid,
  .lead-summary {
    grid-template-columns: 1fr;
  }

  .lead-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .lead-call-row,
  .lead-call-list.is-compact .lead-call-row {
    grid-template-columns: 1fr;
  }

  .lead-row.is-head {
    display: none;
  }

  .lead-row .date-nav-button {
    width: 100%;
  }

  .trend-grid,
  .weekday-table {
    grid-template-columns: 1fr;
  }

  .calendar-dog-flow {
    grid-template-columns: 1fr;
  }

  .calendar-dog-chip {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 47px 8px 17px;
  }

  .calendar-dog-chip.is-checkout {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .calendar-dog-photo {
    width: 48px;
    height: 48px;
  }

  .calendar-dog-name {
    font-size: 16px;
  }

  .calendar-dog-time {
    justify-self: start;
    text-align: left;
  }

  .calendar-dog-actions {
    top: 7px;
    right: 7px;
  }

  .calendar-owner-line {
    grid-template-columns: 1fr;
    justify-items: end;
    justify-self: end;
    gap: 5px;
    text-align: right;
  }

  .parent-contact-actions {
    justify-content: flex-end;
  }

  .dog-picker-backdrop {
    align-items: end;
    padding: 8px;
  }

  .dog-picker {
    max-height: 84dvh;
  }
}

@media (max-width: 380px) {
  .pet-detail-hero {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .pet-detail-photo,
  .owner-detail-avatar {
    width: 64px;
    height: 64px;
    font-size: 20px;
  }

  .reservation-client-card {
    --reservation-photo-size: 68px;
    gap: 10px;
    padding: 10px;
  }

  .reservation-photo {
    font-size: 22px;
  }

  .reservation-pet-name {
    font-size: 24px;
  }

  .header-metrics {
    grid-template-columns: 1fr;
  }

  .header-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .status {
    grid-column: auto;
  }

  .dog-list {
    display: flex;
  }
}

/* Ops dashboard animal cards: photo/room left, details center, parent actions right. */
.calendar-dog-section,
.calendar-dog-stack,
.calendar-dog-grid,
.calendar-dog-chip,
.calendar-dog-details,
.calendar-dog-name-line,
.calendar-dog-chip .dog-icon-strip {
  overflow: visible;
}

.calendar-dog-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.calendar-dog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.calendar-dog-chip,
.calendar-dog-chip.is-checkout {
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-rows: auto minmax(22px, auto) 1fr auto;
  gap: 5px 18px;
  min-height: 186px;
  overflow: visible;
  padding: 14px 70px 15px 32px;
}

.calendar-dog-photo {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  align-self: start;
}

.calendar-lodging-line {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  color: var(--muted);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
  max-height: 46px;
  overflow: hidden;
}

.calendar-dog-details {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: grid;
  grid-template-rows: auto auto minmax(48px, 1fr);
  min-width: 0;
  padding: 0 0 54px;
}

.calendar-dog-name-line {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  row-gap: 3px;
  padding-right: 70px;
  min-height: 34px;
}

.calendar-dog-chip.is-checkout .calendar-dog-name-line {
  padding-right: 112px;
}

.calendar-dog-name {
  min-width: 0;
  max-width: 100%;
  font-size: 22px;
  line-height: 1.05;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.calendar-dog-chip .dog-icon-token {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  font-size: 17px;
  position: relative;
  z-index: 5;
}

.calendar-dog-chip .service-label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
  min-height: 26px;
  margin-top: 10px;
  padding-right: 70px;
}

.calendar-dog-chip.is-checkout .service-label-row {
  min-height: 42px;
  margin-top: 12px;
  padding-right: 112px;
}

.calendar-dog-chip .service-label {
  min-width: 0;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.calendar-dog-time {
  position: static;
  grid-column: 1;
  grid-row: 4;
  align-self: end;
  left: auto;
  bottom: auto;
  width: auto;
  min-width: 0;
}

.calendar-dog-time b {
  font-size: clamp(27px, 2.25vw, 36px);
  letter-spacing: 0;
  white-space: nowrap;
}

.calendar-owner-line {
  right: 15px;
  bottom: 14px;
  width: min(56%, 210px);
  max-width: calc(100% - 150px);
  z-index: 2;
  justify-items: end;
  align-items: end;
  text-align: right;
}

.calendar-owner-line > span {
  font-size: 14px;
  line-height: 1.05;
  text-align: right;
}

.parent-contact-actions {
  gap: 5px;
}

.calendar-dog-actions {
  top: 10px;
  right: 10px;
  z-index: 3;
}

.dog-icon-token:hover,
.dog-icon-token:focus-visible {
  z-index: 90;
}

.dog-icon-token:hover::after,
.dog-icon-token:focus-visible::after {
  content: attr(data-tooltip);
}

.dog-icon-token:hover::after,
.dog-icon-token:focus-visible::after,
.parent-contact-actions button:hover::after,
.parent-contact-actions button:focus-visible::after,
.round-action:hover::after,
.round-action:focus-visible::after {
  z-index: 80;
}

.photo-frame:not(.has-loaded) img,
.photo-frame.is-broken img {
  display: none;
}

.photo-frame.has-loaded:not(.is-broken) img {
  display: block;
}

.photo-frame .photo-fallback-letter {
  position: absolute;
  inset: 0;
  display: grid !important;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #eef3ef;
  color: var(--accent);
  font-size: inherit;
  font-weight: 950;
  line-height: 1;
  opacity: 1;
}

.photo-frame.has-loaded:not(.is-broken) .photo-fallback-letter {
  opacity: 0;
  pointer-events: none;
}

.photo-frame.is-broken .photo-fallback-letter,
.photo-frame:not(.has-loaded) .photo-fallback-letter {
  opacity: 1;
}

@media (max-width: 760px) {
  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    grid-template-columns: 82px minmax(0, 1fr);
    min-height: 176px;
    padding: 10px 52px 12px 25px;
  }

  .calendar-dog-photo {
    width: 76px;
    height: 76px;
  }

  .calendar-lodging-line {
    font-size: 14px;
    max-height: 33px;
  }

  .calendar-dog-details {
    padding-bottom: 50px;
  }

  .calendar-dog-name-line,
  .calendar-dog-chip .service-label-row {
    padding-right: 62px;
  }

  .calendar-dog-chip.is-checkout .calendar-dog-name-line,
  .calendar-dog-chip.is-checkout .service-label-row {
    padding-right: 96px;
  }

  .calendar-dog-name {
    font-size: 19px;
  }

  .calendar-dog-chip .dog-icon-token {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    font-size: 16px;
  }

  .calendar-dog-time {
    left: 25px;
    bottom: 11px;
    width: 82px;
  }

  .calendar-dog-time b {
    font-size: 24px;
    white-space: nowrap;
  }

  .calendar-owner-line {
    right: 10px;
    bottom: 10px;
    width: min(58%, 190px);
    max-width: calc(100% - 118px);
  }
}

@media (max-width: 420px) {
  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 174px;
    padding-right: 44px;
  }

  .calendar-dog-photo {
    width: 58px;
    height: 58px;
  }

  .calendar-lodging-line {
    font-size: 12px;
  }

  .calendar-dog-name-line,
  .calendar-dog-chip .service-label-row {
    padding-right: 42px;
  }

  .calendar-dog-chip.is-checkout .calendar-dog-name-line,
  .calendar-dog-chip.is-checkout .service-label-row {
    padding-right: 42px;
  }

  .calendar-owner-line {
    max-width: 66%;
  }
}

/* Compact ops card layout: this block intentionally wins over older card rules. */
.calendar-dog-section,
.calendar-dog-stack,
.calendar-dog-grid {
  overflow: visible;
}

.calendar-dog-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
}

.calendar-dog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 238px), 1fr));
}

.calendar-dog-chip,
.calendar-dog-chip.is-checkout {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  gap: 2px 9px;
  min-height: 110px;
  padding: 7px 9px 7px 20px;
  overflow: visible;
}

.calendar-dog-photo,
.calendar-dog-chip .calendar-dog-photo,
.calendar-dog-chip .photo-frame {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 58px;
  height: 58px;
  border-radius: 9px;
}

.calendar-lodging-line {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  width: 58px;
  max-width: 58px;
  max-height: 24px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 950;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.calendar-dog-time {
  position: static;
  grid-column: 1;
  grid-row: 4;
  align-self: end;
  justify-self: start;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  text-align: left;
}

.calendar-dog-time b {
  display: block;
  color: var(--accent);
  font-size: clamp(22px, 1.45vw, 25px);
  line-height: 0.95;
  letter-spacing: 0;
  white-space: nowrap;
}

.calendar-dog-chip.has-dayplay .calendar-dog-time b {
  color: #065f46;
}

.calendar-dog-chip.has-boarding .calendar-dog-time b {
  color: #1d4ed8;
}

.calendar-dog-chip.has-grooming:not(.has-dayplay):not(.has-boarding) .calendar-dog-time b {
  color: #7c3aed;
}

.calendar-dog-details {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: stretch;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  padding: 0;
  gap: 1px;
}

.calendar-dog-name-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 4px;
  min-height: 21px;
  padding: 0 66px 0 0;
  overflow: visible;
}

.calendar-dog-chip.is-checkout .calendar-dog-name-line {
  padding-right: 86px;
}

.calendar-dog-name {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.02;
  text-overflow: clip;
  white-space: normal;
}

.calendar-dog-chip .dog-icon-strip {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 3px;
  overflow: visible;
}

.calendar-dog-chip .dog-icon-token {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  font-size: 14px;
  z-index: 30;
}

.calendar-dog-chip .service-label-row {
  display: flex;
  min-height: 17px;
  margin: 0 66px 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 3px;
  align-content: flex-start;
}

.calendar-dog-chip.is-checkout .service-label-row {
  min-height: 17px;
  margin-right: 86px;
  padding: 0;
}

.calendar-dog-chip .service-label {
  max-width: 100%;
  font-size: 9.5px;
  line-height: 1;
  white-space: nowrap;
}

.calendar-owner-line {
  position: static;
  display: flex;
  grid-row: 4;
  width: 100%;
  max-width: 100%;
  margin-top: auto;
  margin-left: auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  z-index: 2;
}

.calendar-owner-line > span {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 950;
  line-height: 1.05;
  text-align: right;
}

.calendar-owner-line .parent-contact-actions {
  justify-content: flex-end;
}

.calendar-dog-actions {
  position: static;
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  gap: 4px;
  align-self: start;
  justify-self: end;
  z-index: 12;
}

.round-action {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  font-size: 16px;
}

.round-action.is-cancel {
  border: 1px solid #f0b0a6;
  background: #fff7f4;
  color: #b73522;
  box-shadow: 0 8px 16px rgba(183, 53, 34, 0.12);
}

.dog-icon-token:hover,
.dog-icon-token:focus-visible {
  z-index: 300;
}

.dog-icon-token:hover::after,
.dog-icon-token:focus-visible::after {
  content: attr(data-tooltip);
  z-index: 350;
}

.dog-icon-token:hover::before,
.dog-icon-token:focus-visible::before {
  z-index: 351;
}

@media (max-width: 900px) {
  .calendar-dog-stack,
  .calendar-dog-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr));
  }

  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    min-height: 108px;
  }
}

@media (max-width: 760px) {
  .today-tab span {
    display: none;
  }

  .today-tab::after {
    content: "Today";
  }

  .nav-select span {
    display: none;
  }

  .calendar-dog-stack,
  .calendar-dog-grid {
    grid-template-columns: 1fr;
  }

  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    min-height: 120px;
    padding: 8px 9px 8px 21px;
  }

  .calendar-dog-photo,
  .calendar-dog-chip .calendar-dog-photo,
  .calendar-dog-chip .photo-frame {
    width: 56px;
    height: 56px;
  }

  .calendar-lodging-line {
    width: 58px;
    max-width: 58px;
    font-size: 10.5px;
  }

  .calendar-dog-name-line,
  .calendar-dog-chip .service-label-row,
  .calendar-dog-chip.is-checkout .calendar-dog-name-line,
  .calendar-dog-chip.is-checkout .service-label-row {
    padding-right: 64px;
    margin-right: 64px;
  }

  .calendar-dog-name {
    font-size: 18px;
  }

  .calendar-dog-time b {
    font-size: 24px;
  }
}

@media (max-width: 460px) {
  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    grid-template-columns: 60px minmax(0, 1fr) auto;
    min-height: 116px;
    padding-right: 8px;
  }

  .calendar-dog-photo,
  .calendar-dog-chip .calendar-dog-photo,
  .calendar-dog-chip .photo-frame {
    width: 54px;
    height: 54px;
  }

  .calendar-lodging-line {
    width: 56px;
    max-width: 56px;
    font-size: 10.5px;
  }

  .calendar-dog-name-line,
  .calendar-dog-chip .service-label-row,
  .calendar-dog-chip.is-checkout .calendar-dog-name-line,
  .calendar-dog-chip.is-checkout .service-label-row {
    padding-right: 46px;
    margin-right: 46px;
  }

  .calendar-dog-chip .dog-icon-token {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    font-size: 13px;
  }

  .round-action {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }

  .calendar-owner-line > span {
    font-size: 11px;
  }
}

/* Final ops-card pass: compact, responsive, and resistant to earlier legacy rules. */
.calendar-dog-stack,
.calendar-dog-grid {
  align-items: stretch;
  overflow: visible;
}

.calendar-dog-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 292px), 1fr));
}

.calendar-dog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

.calendar-dog-chip,
.calendar-dog-chip.is-checkout {
  display: grid;
  grid-template-columns: 76px minmax(116px, 1fr) 96px;
  grid-template-rows: auto 1fr auto;
  gap: 3px 10px;
  min-height: 104px;
  padding: 8px 10px 8px 20px;
  align-items: start;
  overflow: visible;
}

.calendar-dog-chip .calendar-dog-photo,
.calendar-dog-chip .photo-frame {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  align-self: start;
  border-radius: 10px;
}

.calendar-lodging-line {
  grid-column: 1;
  grid-row: 3;
  width: 70px;
  max-width: 70px;
  max-height: 30px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.04;
  text-align: left;
  overflow-wrap: anywhere;
}

.calendar-dog-details {
  grid-column: 2 / span 2;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(86px, auto);
  grid-template-rows: auto auto minmax(8px, 1fr) auto;
  column-gap: 8px;
  row-gap: 1px;
  align-self: stretch;
  min-width: 0;
  padding: 0;
}

.calendar-dog-name-line {
  grid-column: 1 / span 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 4px;
  min-height: 24px;
  padding: 0 88px 0 0;
  overflow: visible;
}

.calendar-dog-chip.is-checkout .calendar-dog-name-line {
  padding-right: 90px;
}

.calendar-dog-name {
  color: var(--ink);
  font-size: clamp(18px, 1.25vw, 22px);
  line-height: 1;
  white-space: normal;
}

.calendar-dog-chip .dog-icon-strip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow: visible;
}

.calendar-dog-chip .dog-icon-token {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  font-size: 15px;
  overflow: visible;
}

.calendar-dog-chip .dog-icon-token::after {
  pointer-events: none;
}

.calendar-dog-chip .service-label-row {
  grid-column: 1 / span 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  min-height: 19px;
  gap: 3px 4px;
  margin: 0 90px 0 0;
  padding: 0;
}

.calendar-dog-chip .service-label {
  max-width: 100%;
  font-size: 10px;
  line-height: 1.05;
  white-space: nowrap;
}

.calendar-owner-line {
  grid-column: 2;
  grid-row: 4;
  justify-self: end;
  align-self: end;
  width: min(132px, 100%);
  max-width: 132px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.calendar-owner-line > span {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 950;
  line-height: 1.05;
  text-align: right;
}

.calendar-owner-line .parent-contact-actions {
  justify-content: flex-end;
  gap: 3px;
}

.calendar-owner-line .parent-contact-actions button {
  width: 22px;
  height: 22px;
  min-width: 22px;
}

.calendar-dog-time {
  position: static;
  grid-column: 1 / span 2;
  grid-row: 3;
  align-self: end;
  justify-self: start;
  min-width: 0;
  width: auto;
  max-width: 188px;
  margin: 0;
  padding-left: 0;
  text-align: left;
  z-index: 2;
}

.calendar-dog-time b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--accent);
  font-size: clamp(25px, 2vw, 33px);
  line-height: 0.95;
  letter-spacing: 0;
  text-overflow: clip;
  white-space: nowrap;
}

.calendar-dog-chip.has-dayplay .calendar-dog-time b {
  color: #065f46;
}

.calendar-dog-chip.has-boarding .calendar-dog-time b {
  color: #1d4ed8;
}

.calendar-dog-chip.has-grooming:not(.has-dayplay):not(.has-boarding) .calendar-dog-time b {
  color: #7c3aed;
}

.calendar-dog-actions {
  position: static;
  grid-column: 3;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  align-self: start;
  justify-self: end;
  z-index: 20;
}

.round-action {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: 17px;
}

.calendar-event {
  min-height: 74px;
  padding: 9px 12px 9px 18px;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 8px;
}

.calendar-time {
  align-self: end;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1;
}

.calendar-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.02;
}

.calendar-title small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.05;
}

.calendar-event .calendar-meta {
  display: none;
}

@media (max-width: 920px) {
  .calendar-dog-stack,
  .calendar-dog-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }

  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    grid-template-columns: 70px minmax(110px, 1fr) 82px;
    min-height: 108px;
  }

  .calendar-dog-chip .calendar-dog-photo,
  .calendar-dog-chip .photo-frame {
    width: 58px;
    height: 58px;
  }

  .calendar-lodging-line {
    width: 62px;
    max-width: 62px;
  }

  .calendar-dog-name-line {
    padding-right: 80px;
  }

  .calendar-dog-chip .service-label-row {
    margin-right: 80px;
  }
}

@media (max-width: 760px) {
  .today-tab span {
    display: none;
  }

  .today-tab::after {
    content: "Today";
  }

  .nav-select {
    width: auto;
    min-width: 150px;
  }

  .nav-select span {
    display: none;
  }

  .calendar-dog-stack,
  .calendar-dog-grid {
    grid-template-columns: 1fr;
  }

  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    grid-template-columns: 74px minmax(0, 1fr) 76px;
    min-height: 116px;
    padding: 9px 10px 9px 21px;
  }

  .calendar-dog-chip .calendar-dog-photo,
  .calendar-dog-chip .photo-frame {
    width: 62px;
    height: 62px;
  }

  .calendar-dog-name-line {
    padding-right: 76px;
  }

  .calendar-dog-chip .service-label-row {
    margin-right: 76px;
  }

  .calendar-dog-details {
    grid-template-columns: minmax(0, 1fr) minmax(110px, auto);
  }

  .calendar-dog-time b {
    font-size: 28px;
  }

  .calendar-event {
    min-height: 62px;
    grid-template-columns: 74px minmax(0, 1fr);
    padding: 8px 10px 8px 16px;
  }
}

@media (max-width: 520px) {
  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    grid-template-columns: 76px minmax(0, 1fr) 54px;
    min-height: 124px;
  }

  .calendar-dog-details {
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  }

  .calendar-dog-name-line {
    padding-right: 52px;
  }

  .calendar-dog-chip .service-label-row {
    margin-right: 52px;
  }

  .calendar-dog-actions {
    flex-direction: column;
    gap: 4px;
  }

  .round-action {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .calendar-dog-time b {
    font-size: 27px;
  }

  .calendar-owner-line > span {
    font-size: 11px;
  }

  .calendar-event {
    min-height: 58px;
  }
}

/* Final responsive pass for the Ops dashboard cards. This intentionally sits last. */
.calendar-appointment-section {
  padding: 8px 10px;
}

.calendar-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 8px;
}

.calendar-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  min-height: 74px;
  padding: 8px 10px 8px 20px;
  gap: 2px;
}

.calendar-event .calendar-time {
  grid-column: 1;
  grid-row: 4;
  align-self: end;
  justify-self: start;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1;
  margin: 0;
}

.calendar-event .calendar-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 7px;
  min-width: 0;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.05;
}

.calendar-event .calendar-title small {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.calendar-event .service-label-row {
  margin: 1px 0 0;
}

.calendar-dog-flow {
  gap: 10px;
}

.calendar-dog-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 288px), 1fr));
  gap: 8px;
}

.calendar-dog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
  gap: 8px;
}

.calendar-dog-chip,
.calendar-dog-chip.is-checkout {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 76px;
  grid-template-rows: auto auto 1fr auto;
  min-height: 104px;
  padding: 8px 10px 8px 22px;
  gap: 2px 10px;
  overflow: visible;
}

.calendar-dog-chip .service-rail {
  left: 0;
  width: 7px;
  border-radius: 999px 0 0 999px;
}

.calendar-dog-chip .calendar-dog-photo,
.calendar-dog-chip .photo-frame {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 66px;
  height: 66px;
  border-radius: 10px;
  object-fit: cover;
}

.calendar-lodging-line {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  width: 66px;
  max-width: 66px;
  max-height: 30px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
}

.calendar-dog-time {
  grid-column: 1 / span 2;
  grid-row: 4;
  align-self: end;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
}

.calendar-dog-time b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--service-primary, var(--teal));
  font-size: clamp(25px, 1.8vw, 32px);
  font-weight: 1000;
  line-height: .95;
  text-overflow: clip;
  white-space: nowrap;
}

.calendar-dog-details {
  grid-column: 2 / 4;
  grid-row: 1 / span 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(94px, 34%);
  grid-template-rows: auto auto 1fr;
  gap: 0 8px;
  min-width: 0;
  padding: 0;
}

.calendar-dog-name-line {
  grid-column: 1 / 2;
  grid-row: 1;
  align-items: center;
  min-width: 0;
  min-height: 25px;
  padding-right: 4px;
  gap: 4px;
  overflow: visible;
}

.calendar-dog-name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-dog-chip .dog-icon-strip {
  gap: 4px;
  overflow: visible;
}

.calendar-dog-chip .dog-icon-token {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  overflow: visible;
  font-size: 15px;
  line-height: 1;
}

.calendar-dog-chip .service-label-row {
  grid-column: 1 / 2;
  grid-row: 2;
  align-content: start;
  min-width: 0;
  min-height: 20px;
  margin: 3px 76px 0 0;
  padding: 0;
  gap: 4px;
  overflow: visible;
}

.calendar-dog-chip .service-label {
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-owner-line {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
  justify-self: end;
  align-items: flex-end;
  width: 100%;
  margin: 0;
  text-align: right;
}

.calendar-owner-line > span {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--teal);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.05;
  text-align: right;
}

.calendar-owner-line .parent-contact-actions {
  justify-content: flex-end;
}

.calendar-dog-actions {
  position: static;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  display: flex;
  gap: 5px;
  z-index: 20;
}

.round-action {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: 17px;
  line-height: 1;
}

.dog-icon-token[data-tooltip]::before,
.dog-icon-token[data-tooltip]::after {
  pointer-events: none;
}

.dog-icon-token[data-tooltip]:hover::after,
.dog-icon-token[data-tooltip]:focus-visible::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 9999;
  width: max-content;
  max-width: 220px;
  padding: 6px 8px;
  border-radius: 7px;
  background: #1f2937;
  color: #fff;
  content: attr(data-tooltip);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
}

.dog-icon-token[data-tooltip]:hover::before,
.dog-icon-token[data-tooltip]:focus-visible::before {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  z-index: 9999;
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid #1f2937;
  content: "";
  transform: translateX(-50%);
}

@media (min-width: 900px) {
  .calendar-dog-section.is-checkin,
  .calendar-dog-section.is-checkout {
    align-self: start;
  }
}

@media (max-width: 900px) {
  .calendar-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  }

  .calendar-event {
    min-height: 66px;
  }

  .calendar-dog-stack,
  .calendar-dog-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 238px), 1fr));
  }

  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    grid-template-columns: 68px minmax(0, 1fr) 64px;
    min-height: 100px;
    gap: 2px 8px;
  }

  .calendar-dog-chip .calendar-dog-photo,
  .calendar-dog-chip .photo-frame,
  .calendar-lodging-line {
    width: 60px;
    max-width: 60px;
  }

  .calendar-dog-chip .calendar-dog-photo,
  .calendar-dog-chip .photo-frame {
    height: 60px;
  }

  .calendar-dog-details {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 33%);
  }

  .calendar-dog-chip .service-label-row {
    margin-right: 66px;
  }
}

@media (max-width: 760px) {
  .today-tab span {
    display: none;
  }

  .today-tab::after {
    content: "Today";
  }

  .nav-select {
    min-width: 142px;
  }

  .nav-select span {
    display: none;
  }

  .calendar-header {
    grid-template-columns: 1fr;
  }

  .calendar-date-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .calendar-date-actions input[type="date"] {
    grid-column: 1 / -1;
  }

  .calendar-list {
    grid-template-columns: 1fr;
  }

  .calendar-event {
    min-height: 62px;
  }

  .calendar-dog-stack,
  .calendar-dog-grid {
    grid-template-columns: 1fr;
  }

  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    grid-template-columns: 74px minmax(0, 1fr) 46px;
    min-height: 118px;
  }

  .calendar-dog-details {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
  }

  .calendar-dog-name-line {
    padding-right: 42px;
  }

  .calendar-dog-chip .service-label-row {
    margin-right: 42px;
  }

  .calendar-owner-line {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
    justify-self: end;
  }

  .calendar-dog-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    flex-direction: column;
  }

  .calendar-dog-time b {
    font-size: 29px;
  }
}

/* Fast final pass for ops cards: keep cards compact, readable, and non-overlapping. */
.calendar-board,
.calendar-dogs,
.calendar-dog-flow,
.calendar-dog-section,
.calendar-dog-stack,
.calendar-dog-grid {
  min-width: 0;
}

.calendar-appointment-section {
  padding: 8px;
}

.calendar-appointment-section.is-grooming-tasks {
  --calendar-section-accent: var(--grooming);
  --calendar-section-bg: #f1faf8;
  --calendar-section-border: #b8d8d2;
}

.calendar-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 8px;
}

.calendar-event {
  min-height: 66px;
  padding: 8px 10px 8px 20px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 2px;
  overflow: hidden;
}

.calendar-event .calendar-time {
  grid-row: 4;
  align-self: end;
  justify-self: start;
  color: #7c3aed;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.calendar-event.is-tour .calendar-time {
  color: #9a3412;
}

.calendar-event .calendar-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
  min-width: 0;
  line-height: 1.05;
}

.calendar-event .calendar-title span {
  font-size: 16px;
  line-height: 1.05;
}

.calendar-event .calendar-title small {
  min-width: 0;
  font-size: 11px;
  line-height: 1.05;
}

.calendar-event .service-label-row {
  margin: 0;
}

.calendar-dog-flow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.calendar-dog-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 288px), 1fr));
  gap: 8px;
}

.calendar-dog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 8px;
}

.calendar-dog-section {
  padding: 8px;
}

.calendar-dog-chip,
.calendar-dog-chip.is-checkout {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(4px, 1fr) auto;
  min-height: 112px;
  padding: 8px 10px 8px 22px;
  gap: 2px 9px;
  overflow: visible;
}

.calendar-dog-chip .service-rail {
  left: 0;
  width: 7px;
  border-radius: 7px 0 0 7px;
}

.calendar-dog-chip .calendar-dog-photo,
.calendar-dog-chip .photo-frame,
.calendar-dog-chip .photo-upload-placeholder {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 68px;
  height: 68px;
  align-self: start;
  border-radius: 9px;
  object-fit: cover;
}

.calendar-lodging-line {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  width: 68px;
  max-width: 68px;
  max-height: 32px;
  margin: 0;
  overflow: hidden;
  color: #5f5f5f;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
}

.calendar-dog-time {
  grid-column: 1 / span 2;
  grid-row: 4;
  align-self: end;
  justify-self: start;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  white-space: nowrap;
}

.calendar-dog-time b {
  display: block;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: .92;
  white-space: nowrap;
}

.calendar-dog-chip.has-dayplay .calendar-dog-time b {
  color: #08755d;
}

.calendar-dog-chip.has-boarding .calendar-dog-time b {
  color: #1d4ed8;
}

.calendar-dog-chip.has-grooming:not(.has-dayplay):not(.has-boarding) .calendar-dog-time b {
  color: #7c3aed;
}

.calendar-dog-details {
  grid-column: 2 / 4;
  grid-row: 1 / 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(98px, max-content);
  grid-template-rows: auto auto minmax(8px, 1fr) auto;
  min-width: 0;
  height: 100%;
  padding: 0;
}

.calendar-dog-name-line {
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-right: 78px;
  overflow: visible;
}

.calendar-dog-name {
  max-width: min(100%, 150px);
  overflow: hidden;
  color: #171717;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-dog-chip .dog-icon-strip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  overflow: visible;
}

.calendar-dog-chip .dog-icon-token {
  position: relative;
  display: inline-grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  overflow: visible;
}

.calendar-dog-chip .service-label-row {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 18px;
  margin: 4px 82px 0 0;
  overflow: visible;
}

.calendar-dog-chip .service-label {
  max-width: 100%;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.calendar-owner-line {
  grid-column: 2;
  grid-row: 3 / 5;
  align-self: end;
  justify-self: end;
  display: flex;
  width: 100%;
  min-width: 98px;
  max-width: 140px;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
}

.calendar-owner-line > span {
  display: block;
  width: 100%;
  color: var(--accent);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.05;
  text-align: right;
  overflow-wrap: anywhere;
}

.calendar-owner-line .parent-contact-actions {
  justify-content: flex-end;
  gap: 4px;
}

.calendar-owner-line .parent-contact-actions button {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.calendar-dog-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  display: flex;
  gap: 5px;
  z-index: 30;
}

.round-action {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: 17px;
  line-height: 1;
}

.round-action.is-cancel {
  background: #fff7f7;
  color: #b91c1c;
  border: 1px solid #fecaca;
  box-shadow: none;
}

.calendar-dog-section,
.calendar-dog-stack,
.calendar-dog-grid,
.calendar-dog-chip,
.calendar-dog-details,
.calendar-dog-name-line,
.dog-icon-strip {
  overflow: visible;
}

.dog-icon-token[data-tooltip]::before,
.dog-icon-token[data-tooltip]::after {
  pointer-events: none;
}

.dog-icon-token[data-tooltip]:hover::after,
.dog-icon-token[data-tooltip]:focus-visible::after {
  bottom: calc(100% + 9px);
  z-index: 10000;
  font-size: 12px;
}

.photo-frame:not(.has-loaded) img,
.photo-frame.is-broken img {
  display: none;
}

.photo-frame.has-loaded:not(.is-broken) img {
  display: block;
}

.photo-frame .photo-fallback-letter {
  display: grid;
  place-items: center;
}

.photo-frame.has-loaded:not(.is-broken) .photo-fallback-letter {
  display: none;
}

@media (max-width: 900px) {
  .calendar-dog-flow {
    grid-template-columns: 1fr;
  }

  .calendar-dog-stack,
  .calendar-dog-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  }

  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    min-height: 106px;
    grid-template-columns: 72px minmax(0, 1fr) auto;
  }

  .calendar-dog-chip .calendar-dog-photo,
  .calendar-dog-chip .photo-frame,
  .calendar-dog-chip .photo-upload-placeholder {
    width: 64px;
    height: 64px;
  }

  .calendar-lodging-line {
    width: 64px;
    max-width: 64px;
    font-size: 11px;
  }
}

@media (max-width: 760px) {
  .today-tab {
    min-width: 74px;
  }

  .today-tab span {
    display: none;
  }

  .today-tab::after {
    content: "Today";
  }

  .calendar-header {
    grid-template-columns: 1fr;
  }

  .calendar-date-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .calendar-date-actions input[type="date"] {
    grid-column: 1 / -1;
  }

  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    min-height: 128px;
    grid-template-columns: 72px minmax(0, 1fr) 42px;
  }

  .calendar-dog-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-owner-line {
    grid-column: 1;
    grid-row: 4;
    max-width: 100%;
  }

  .calendar-dog-name-line {
    padding-right: 44px;
  }

  .calendar-dog-chip .service-label-row {
    margin-right: 44px;
  }
}

@media (max-width: 520px) {
  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    min-height: 132px;
  }

  .calendar-owner-line {
    align-items: flex-end;
  }

  .calendar-dog-time b {
    font-size: 26px;
  }

  .calendar-dog-actions {
    flex-direction: column;
  }
}

/* Final responsive card pass: keep the operational cards compact and readable. */
.calendar-dog-chip,
.calendar-dog-chip.is-checkout {
  position: relative;
  min-height: 104px;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 10px;
  row-gap: 2px;
  padding: 10px 82px 10px 22px;
  overflow: visible;
}

.calendar-dog-chip .calendar-dog-photo,
.calendar-dog-chip .photo-frame,
.calendar-dog-chip .photo-upload-placeholder {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 70px;
  height: 70px;
  align-self: start;
}

.calendar-dog-chip .photo-fallback-letter {
  display: grid;
  place-items: center;
}

.calendar-dog-chip .photo-frame.has-loaded:not(.is-broken) .photo-fallback-letter {
  display: none;
}

.calendar-dog-chip .photo-frame:not(.has-loaded) img,
.calendar-dog-chip .photo-frame.is-broken img {
  display: none;
}

.calendar-lodging-line {
  grid-column: 1;
  grid-row: 3;
  width: 70px;
  max-width: 70px;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.05;
  text-align: left;
}

.calendar-dog-details {
  position: static;
  grid-column: 2;
  grid-row: 1 / 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-right: 0;
}

.calendar-dog-name-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding-right: 0;
}

.calendar-dog-name {
  max-width: min(180px, 48%);
  font-size: clamp(18px, 1.5vw, 25px);
}

.calendar-dog-chip .dog-icon-strip {
  flex: 1 1 auto;
  min-width: 0;
}

.calendar-dog-chip .dog-icon-token {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  display: inline-grid;
  place-items: center;
  font-size: 17px;
}

.calendar-dog-chip .service-label-row {
  grid-column: auto;
  grid-row: auto;
  min-height: 20px;
  margin: 6px 0 0;
  padding-right: 0;
}

.calendar-dog-time {
  grid-column: 1;
  grid-row: 4;
  align-self: end;
  margin-top: 2px;
  z-index: 2;
}

.calendar-dog-time b {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: .9;
  white-space: nowrap;
}

.calendar-owner-line {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: flex;
  width: min(165px, 42%);
  max-width: 165px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  z-index: 6;
}

.calendar-owner-line > span {
  width: 100%;
  text-align: right;
}

.calendar-dog-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 15;
}

.calendar-dog-actions .round-action {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.dog-icon-token[data-tooltip] {
  position: relative;
}

.dog-icon-token[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 10000;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  padding: 7px 9px;
  border-radius: 6px;
  background: #17201d;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.dog-icon-token[data-tooltip]:hover::after,
.dog-icon-token[data-tooltip]:focus-visible::after {
  opacity: 1;
  overflow-wrap: anywhere;
  white-space: normal;
  visibility: visible;
}

.calendar-appointment-section {
  padding: 10px;
}

.calendar-list {
  gap: 8px;
}

.calendar-event {
  min-height: 70px;
  padding: 9px 10px 28px 18px;
}

.calendar-event .calendar-title {
  font-size: 15px;
  line-height: 1.05;
}

.calendar-event .calendar-title small {
  display: inline;
  margin-left: 4px;
  font-size: 12px;
}

.calendar-event .calendar-time {
  font-size: 17px;
}

@media (max-width: 900px) {
  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    min-height: 116px;
    grid-template-columns: 76px minmax(0, 1fr);
    padding-right: 58px;
  }

  .calendar-dog-chip .calendar-dog-photo,
  .calendar-dog-chip .photo-frame,
  .calendar-dog-chip .photo-upload-placeholder {
    width: 68px;
    height: 68px;
  }

  .calendar-lodging-line {
    width: 68px;
    max-width: 68px;
  }

  .calendar-owner-line {
    right: 10px;
    bottom: 8px;
    width: min(160px, 44%);
  }

  .calendar-dog-actions {
    flex-direction: column;
    gap: 4px;
  }

  .calendar-dog-actions .round-action {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

@media (max-width: 640px) {
  .today-tab {
    min-width: 64px;
  }

  .today-tab span {
    display: none;
  }

  .today-tab::after {
    content: "Today";
  }

  .nav-select {
    min-width: 150px;
  }

  .calendar-header {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .calendar-date-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
  }

  .calendar-date-actions input[type="date"] {
    grid-column: auto;
    min-width: 0;
  }

  .calendar-event {
    min-height: 62px;
    padding: 8px 10px 24px 16px;
  }

  .calendar-event .calendar-title {
    font-size: 14px;
  }

  .calendar-event .calendar-title small {
    display: inline;
    margin-left: 3px;
    font-size: 11px;
  }

  .calendar-event .calendar-time {
    font-size: 15px;
  }

  .calendar-dog-stack,
  .calendar-dog-grid {
    grid-template-columns: 1fr;
  }

  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    min-height: 132px;
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 10px 50px 10px 18px;
  }

  .calendar-owner-line {
    right: 12px;
    bottom: 10px;
    width: min(190px, 48%);
    max-width: 190px;
  }

  .calendar-dog-name {
    max-width: 58%;
    font-size: 20px;
  }
}

.calendar-dog-chip,
.calendar-dog-chip.is-checkout {
  grid-template-columns: 96px minmax(0, 1fr) auto;
  min-height: 126px;
}

.calendar-dog-stack {
  grid-template-columns: 1fr;
}

.calendar-dog-details {
  align-self: stretch;
  min-height: 104px;
}

.calendar-dog-meta {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  display: grid;
  gap: 2px;
  margin-top: 4px;
  min-width: 0;
  padding-right: 4px;
}

.calendar-dog-meta div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}

.calendar-dog-meta span {
  flex: 0 0 auto;
  color: #52645f;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.calendar-dog-meta strong {
  display: block;
  min-width: 0;
  overflow: visible;
  color: #1f3530;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: clip;
  white-space: normal;
}

.calendar-dog-meta-row.is-add-ons {
  align-items: center;
}

.calendar-addon-pill {
  display: inline-flex;
  min-height: 0;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid #facc15;
  border-radius: 999px;
  background: #fff3a3;
  color: #7c2d12;
  cursor: pointer;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  padding: 2px 6px;
  text-transform: uppercase;
}

.calendar-addon-pill span {
  color: inherit;
  font: inherit;
  line-height: 1;
}

.calendar-addon-pill:hover {
  border-color: #eab308;
  background: #fde047;
  transform: translateY(-1px);
}

.calendar-addon-pill:focus-visible {
  outline: 3px solid rgba(250, 204, 21, 0.4);
  outline-offset: 2px;
}

.calendar-addon-pill b {
  display: inline-flex;
  min-width: 10px;
  height: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #92400e;
  color: #ffffff;
  font-size: 7px;
  line-height: 1;
}

.calendar-addon-detail-overlay {
  align-items: center;
  justify-content: center;
}

.calendar-addon-detail-panel {
  width: min(460px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 48px));
  overflow: auto;
  padding: 18px;
}

.calendar-addon-detail-head {
  margin-bottom: 12px;
}

.calendar-addon-detail-list {
  display: grid;
  gap: 10px;
}

.calendar-addon-detail-dog {
  display: grid;
  gap: 8px;
}

.calendar-addon-detail-dog h3 {
  margin: 0;
  color: #1f3530;
  font-size: 15px;
  font-weight: 1000;
}

.calendar-addon-detail-row {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(250, 204, 21, 0.55);
  border-radius: 8px;
  background: #fffbeb;
  padding: 10px 12px;
}

.calendar-addon-detail-row strong {
  color: #183c35;
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.15;
}

.calendar-addon-detail-row span {
  color: #7c2d12;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.calendar-addon-detail-row small {
  color: #61716d;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}

.calendar-dog-time {
  position: static;
  left: auto;
  bottom: auto;
  width: max-content;
  min-width: max-content;
  max-width: 100%;
  justify-self: start;
}

.calendar-dog-time b {
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1;
}

.calendar-dog-name {
  max-width: min(100%, 220px);
}

.calendar-owner-line {
  position: static;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: none;
  margin-top: auto;
}

.calendar-dog-chip .photo-frame:not(.is-broken) img {
  display: block;
}

.calendar-dog-chip .photo-frame.is-broken img {
  display: none;
}

/* True final compact animal-card pass. */
.calendar-dog-stack {
  grid-template-columns: 1fr;
  gap: 7px;
}

.calendar-dog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 8px;
}

.calendar-dog-chip,
.calendar-dog-chip.is-checkout,
.calendar-dog-chip.is-staying {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(6px, 1fr) auto;
  min-height: 104px;
  gap: 2px 10px;
  padding: 8px 86px 8px 22px;
  overflow: visible;
}

.calendar-dog-chip.is-staying {
  min-height: 126px;
  padding-right: 56px;
}

.calendar-dog-chip[data-card-edit-reservation],
.calendar-event[data-card-edit-reservation],
.calendar-event[data-card-edit-calendar-event-time],
.calendar-event[data-card-edit-tour-event] {
  cursor: pointer;
}

.calendar-dog-chip[data-card-edit-reservation][draggable="true"] {
  cursor: grab;
}

.calendar-dog-chip[data-card-edit-reservation][draggable="true"].is-dragging {
  cursor: grabbing;
}

.calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-chip:not(.is-grouped) .calendar-dog-name-line {
  padding-right: 0;
}

.calendar-dog-chip.is-staying .calendar-dog-details {
  padding-bottom: 0;
}

.calendar-dog-chip.is-staying .calendar-owner-line {
  position: absolute;
  right: 12px;
  bottom: 8px;
  display: flex;
  width: min(160px, 42%);
  max-width: 160px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 3px;
  margin: 0;
  text-align: right;
}

.calendar-dog-chip.is-staying .calendar-owner-line > span {
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  text-align: right;
}

.calendar-dog-chip.is-staying .calendar-owner-line .parent-contact-actions {
  flex: 0 0 auto;
}

.calendar-dog-chip.is-staying .calendar-dog-meta {
  margin-top: 4px;
}

.calendar-dog-chip.is-staying .calendar-dog-meta-row.is-checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
}

.calendar-dog-chip.is-staying .calendar-dog-meta-row.is-checkout strong {
  display: block;
  line-height: 1.08;
  white-space: normal;
}

.calendar-dog-chip .calendar-dog-photo,
.calendar-dog-chip .photo-frame,
.calendar-dog-chip .photo-upload-placeholder {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 66px;
  height: 66px;
  align-self: start;
  border-radius: 9px;
}

.calendar-lodging-line {
  grid-column: 1;
  grid-row: 3;
  width: 66px;
  max-width: 66px;
  max-height: 31px;
  margin: 0;
  overflow: hidden;
  color: #525d59;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
  text-align: left;
}

.calendar-dog-time {
  position: static;
  grid-column: 1;
  grid-row: 4;
  align-self: end;
  justify-self: start;
  width: max-content;
  min-width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
}

.calendar-dog-time b {
  display: block;
  overflow: visible;
  font-size: clamp(25px, 1.95vw, 31px);
  line-height: .96;
  text-overflow: clip;
  white-space: nowrap;
}

.calendar-dog-details {
  position: static;
  grid-column: 2;
  grid-row: 1 / 5;
  display: flex;
  min-width: 0;
  min-height: 0;
  height: auto;
  flex-direction: column;
  align-self: stretch;
  padding: 0 0 28px;
}

.calendar-dog-name-line {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  row-gap: 2px;
  padding: 0;
}

.calendar-dog-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(100%, 230px);
  overflow: hidden;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-dog-chip .dog-icon-strip {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 3px;
}

.calendar-dog-chip .dog-icon-token {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  font-size: 14px;
}

.calendar-dog-chip .service-label-row {
  display: flex;
  min-height: 0;
  flex-wrap: wrap;
  gap: 3px;
  margin: 3px 0 0;
  padding: 0;
}

.calendar-dog-chip .service-label {
  font-size: 9px;
}

.calendar-dog-meta {
  display: grid;
  min-width: 0;
  gap: 1px;
  margin-top: 5px;
  padding: 0;
}

.calendar-dog-meta div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.calendar-dog-meta span {
  flex: 0 0 auto;
  color: #52645f;
  font-size: 9px;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
}

.calendar-dog-meta strong {
  min-width: 0;
  overflow: visible;
  color: #1f3530;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.08;
  text-overflow: clip;
  white-space: normal;
}

.calendar-owner-line {
  position: absolute;
  right: 12px;
  bottom: 8px;
  display: flex;
  width: min(160px, 40%);
  max-width: 160px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 3px;
  margin: 0;
  text-align: right;
  z-index: 8;
}

.calendar-owner-line > span {
  width: 100%;
  color: var(--teal);
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.05;
  text-align: right;
}

.calendar-owner-line .parent-contact-actions {
  justify-content: flex-end;
  gap: 3px;
}

.calendar-owner-line .parent-contact-actions button {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.calendar-dog-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  z-index: 20;
}

.calendar-dog-actions .round-action {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.calendar-dog-chip.is-staying .calendar-dog-actions {
  right: 9px;
}

@media (max-width: 900px) {
  .calendar-dog-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  }
}

@media (max-width: 640px) {
  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout,
  .calendar-dog-chip.is-staying {
    min-height: 116px;
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 8px 88px 8px 18px;
  }

  .calendar-dog-actions {
    flex-direction: row;
  }

  .calendar-owner-line {
    right: 10px;
    width: min(150px, 44%);
  }
}

/* Final calendar density pass. Keep appointment and movement cards visually even. */
.calendar-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 8px;
}

.calendar-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  min-height: 78px;
  gap: 2px;
  padding: 8px 10px 8px 18px;
}

.calendar-event .calendar-title {
  gap: 1px 6px;
  line-height: 1.03;
}

.calendar-event .calendar-title span {
  font-size: 15px;
  line-height: 1.03;
}

.calendar-event .calendar-title small {
  font-size: 11px;
  line-height: 1.03;
}

.calendar-event .calendar-time {
  grid-row: 4;
  align-self: end;
  justify-self: start;
  position: static;
  left: auto;
  bottom: auto;
  width: 100%;
  text-align: left;
  font-size: 16px;
  line-height: .95;
}

.calendar-dog-chip,
.calendar-dog-chip.is-checkout {
  min-height: 104px;
}

.calendar-dog-details > .calendar-lodging-line {
  width: auto;
  max-width: min(100%, 220px);
  max-height: none;
  margin: 3px 0 0;
  color: #46534f;
  font-size: 10px;
  line-height: 1.08;
}

.calendar-dog-chip.is-checkout .service-label-row {
  margin-top: 3px;
}

.calendar-dog-chip.is-checkout .calendar-dog-meta {
  margin-top: 4px;
}

@media (min-width: 701px) {
  .calendar-dog-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-dog-flow.is-single {
    grid-template-columns: 1fr;
  }

  .calendar-dog-section.is-checkin,
  .calendar-dog-section.is-checkout {
    min-width: 0;
  }

  .calendar-dog-section.is-checkin .calendar-dog-stack,
  .calendar-dog-section.is-checkout .calendar-dog-stack {
    grid-template-columns: 1fr;
  }

  .calendar-dog-section.is-staying .calendar-dog-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    justify-content: stretch;
  }

  .calendar-dog-chip.is-staying .calendar-owner-line {
    width: min(160px, 42%);
    max-width: 160px;
  }
}

@media (max-width: 700px) {
  .calendar-dog-flow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .calendar-event {
    min-height: 74px;
    padding: 7px 9px 7px 17px;
  }
}

@media (min-width: 900px) {
  @container (min-width: 520px) and (max-width: 619px) {
    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-stack {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip {
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 2px 6px;
      min-height: 112px;
      max-width: none;
      padding: 7px 8px 8px 13px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) :is(.calendar-dog-photo, .photo-frame, .photo-upload-placeholder) {
      width: 44px;
      height: 44px;
      border-radius: 7px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-lodging-line {
      width: 48px;
      max-width: 48px;
      max-height: 22px;
      font-size: 8.5px;
      line-height: 1.02;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-details > .calendar-lodging-line {
      width: calc(100% - 86px);
      max-width: calc(100% - 86px);
      max-height: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-time b {
      font-size: clamp(18px, 1.5vw, 21px);
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-details {
      overflow: visible;
      padding-bottom: 28px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-name-line {
      display: grid;
      grid-template-columns: minmax(40px, 1fr) auto auto;
      align-items: center;
      gap: 2px;
      width: calc(100% - 72px);
      max-width: calc(100% - 72px);
      overflow: visible;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-name {
      width: 100%;
      flex: 0 1 auto;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      overflow-wrap: normal;
      font-size: 15px;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .dog-name-vaccine-alert {
      width: 15px;
      height: 15px;
      min-width: 15px;
      flex: 0 0 15px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .dog-name-vaccine-alert svg {
      width: 10px;
      height: 10px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .dog-icon-strip {
      flex: 0 0 auto;
      width: max-content;
      max-width: min(42px, 40%);
      min-width: 0;
      flex-wrap: nowrap;
      gap: 2px;
      overflow: hidden;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .dog-icon-token {
      width: 15px;
      height: 15px;
      min-width: 15px;
      flex: 0 0 15px;
      font-size: 9px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .service-label-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 2px;
      max-width: calc(100% - 72px);
      overflow: visible;
    }

    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-chip:not(.is-grouped) .calendar-dog-name-line,
    .calendar-dog-flow .calendar-dog-section.is-checkout .service-label-row {
      width: calc(100% - 86px);
      max-width: calc(100% - 86px);
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .service-label {
      font-size: 8px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-meta,
    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-meta {
      margin-top: 2px;
      max-width: calc(100% - 76px);
      overflow: visible;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-meta span {
      font-size: 7.5px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-meta strong {
      font-size: 9px;
      line-height: 1.05;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line {
      position: absolute;
      right: 7px;
      bottom: 7px;
      width: min(126px, 50%);
      min-width: 0;
      max-width: 126px;
      align-items: flex-end;
      margin-top: 0;
      overflow: visible;
      text-align: right;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line > span {
      min-width: 0;
      max-width: 100%;
      overflow: visible;
      font-size: 9px;
      line-height: 1.05;
      text-overflow: clip;
      text-align: right;
      white-space: normal;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line .calendar-owner-button {
      max-width: 100%;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line .calendar-owner-button .owner-link-label {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line .parent-contact-actions {
      justify-content: flex-end;
      gap: 2px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line .parent-contact-actions button {
      width: 18px;
      height: 18px;
      flex-basis: 18px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-actions {
      top: 7px;
      right: 6px;
      flex-direction: row;
      gap: 3px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-actions .round-action {
      width: 27px;
      height: 27px;
      flex-basis: 27px;
      font-size: 14px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-actions .round-action svg {
      width: 15px;
      height: 15px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-addon-pill {
      font-size: 7.5px;
      padding: 2px 4px;
      white-space: nowrap;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-addon-pill span {
      white-space: nowrap;
    }
  }
}

/* Movement board density: use two card columns per section when the section has room. */
.calendar-dog-section {
  container-type: inline-size;
}

@media (min-width: 900px) {
  @container (min-width: 620px) {
    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-stack {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip {
      grid-template-columns: 58px minmax(0, 1fr);
      height: 112px;
      min-height: 112px;
      gap: 2px 7px;
      padding: 7px 38px 8px 17px;
    }

    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-chip.has-addons {
      min-height: 112px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) :is(.calendar-dog-photo, .photo-frame, .photo-upload-placeholder) {
      width: 52px;
      height: 52px;
      border-radius: 8px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-lodging-line {
      width: auto;
      max-width: 100%;
      max-height: none;
      overflow: hidden;
      font-size: 9px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-details > .calendar-lodging-line {
      width: calc(100% - 96px);
      max-width: calc(100% - 96px);
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout, .is-staying) .calendar-dog-time b {
      font-size: clamp(20px, 1.65vw, 24px);
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-details {
      overflow: hidden;
      padding-bottom: 28px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-name {
      max-width: 100%;
      font-size: clamp(16px, 1.2vw, 18px);
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-name-line {
      align-items: center;
      flex-wrap: nowrap;
      overflow: hidden;
      row-gap: 2px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .dog-icon-token {
      width: 19px;
      height: 19px;
      flex-basis: 19px;
      font-size: 12px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .dog-icon-strip,
    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .service-label-row {
      flex-wrap: nowrap;
      overflow: hidden;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .service-label-row {
      margin-top: 3px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .service-label {
      font-size: 9px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-meta {
      margin-top: 3px;
      max-width: calc(100% - 88px);
    }

    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-meta {
      max-width: calc(100% - 88px);
      max-height: 24px;
      overflow: hidden;
    }

    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-meta-row.is-add-ons {
      flex-wrap: nowrap;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-meta span {
      font-size: 8px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-meta strong {
      font-size: 10px;
      line-height: 1.05;
    }

    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-meta-row.is-add-ons strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line {
      position: absolute;
      right: 10px;
      bottom: 8px;
      width: min(128px, 44%);
      max-width: 128px;
      align-items: flex-end;
      margin-top: 0;
      text-align: right;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line > span {
      font-size: 10px;
      text-align: right;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line .calendar-owner-button,
    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line .calendar-owner-button .owner-link-label {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line .parent-contact-actions {
      justify-content: flex-end;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line .parent-contact-actions button {
      width: 20px;
      height: 20px;
      flex-basis: 20px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-actions {
      top: 7px;
      right: 6px;
      flex-direction: row;
      gap: 3px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-actions .round-action {
      width: 27px;
      height: 27px;
      flex-basis: 27px;
      font-size: 14px;
    }
  }
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line > span {
  display: flex;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-end;
  overflow: hidden;
  white-space: nowrap;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line .calendar-owner-button {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  white-space: nowrap;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line .calendar-owner-button .owner-link-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line .calendar-owner-button .owner-card-on-file-icon {
  flex: 0 0 auto;
}

@media (min-width: 900px) {
  @container (min-width: 620px) {
    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-owner-line {
      width: min(144px, 52%);
      max-width: 144px;
    }
  }
}

.calendar-dog-section.is-staying .calendar-dog-time b {
  font-size: clamp(20px, 1.65vw, 24px);
}

.calendar-event.has-event-action {
  padding-right: 10px;
}

.calendar-event.is-tour.has-event-action {
  padding-right: 10px;
}

.calendar-event.has-event-action .calendar-title,
.calendar-event.has-event-action .service-label-row {
  padding-right: 68px;
}

.calendar-event .calendar-checkin {
  max-width: 100%;
  overflow: visible;
  font-size: 11px;
  line-height: 1.08;
  white-space: normal;
}

.calendar-event-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  display: flex;
  gap: 5px;
}

.calendar-event-actions .round-action {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  font-size: 15px;
  box-shadow: none;
}

.calendar-event-actions .round-action svg {
  width: 15px;
  height: 15px;
}

.calendar-event-actions .round-action:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

.calendar-time-button,
.calendar-title-edit,
.calendar-title-profile-link {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0;
  padding: 0;
  text-align: left;
}

.calendar-time-button:hover,
.calendar-time-button:focus-visible,
.calendar-title-edit:hover span,
.calendar-title-edit:focus-visible span {
  color: var(--accent);
}

.calendar-title-profile-link:hover,
.calendar-title-profile-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.calendar-time-button {
  display: block;
  appearance: none;
}

.calendar-title-edit {
  display: grid;
  gap: 3px;
  max-width: 100%;
  width: 100%;
}

.calendar-event .calendar-title-subtitle {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  max-width: 100%;
  margin-left: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.calendar-event .calendar-title-edit .calendar-title-subtitle {
  display: flex;
  margin-left: 0;
  min-width: 0;
  width: 100%;
}

.calendar-event .calendar-title-subtitle span {
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
}

.calendar-event .calendar-title-subtitle i {
  color: inherit;
  font-style: normal;
}

.calendar-event .service-label-row {
  gap: 3px;
}

.calendar-event .service-label {
  font-size: 8px;
  padding: 3px 7px;
}

.service-label.has-night-count {
  gap: 3px;
}

.service-label.has-night-count svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keep appointment cards compact; only emphasize the editable time. */
.calendar-event .calendar-time {
  font-weight: 1000;
}

/* Parent profile dashboard */
.owner-profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.owner-metric {
  display: grid;
  align-content: stretch;
  container-type: inline-size;
  grid-template-rows: 30px minmax(30px, auto) auto;
  min-height: 94px;
  min-width: 0;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  padding: 12px;
}

.owner-metric.is-alert {
  border-color: #d7a647;
  background: #fff8e7;
  box-shadow: inset 4px 0 0 #b47a12;
}

.owner-metric span {
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .05em;
  line-height: 1.15;
  min-height: 26px;
  text-transform: uppercase;
}

.owner-metric strong {
  color: var(--accent);
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: clamp(22px, 14cqi, 32px);
  font-variant-numeric: tabular-nums;
  font-weight: 1000;
  line-height: 1;
}

.owner-metric small {
  color: #5c665f;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.owner-upcoming-section {
  border: 1px solid #a7d8c8;
  border-radius: 8px;
  background: #eefaf7;
  padding: 10px;
}

.owner-upcoming-section.is-collapsed {
  gap: 0;
}

/* COMPACT LIST view — used when an owner has > 4 upcoming reservations.
   Each row is a single line with date, dog, service label, add-ons.
   Service-type color is inherited from .serviceClassNames (.has-dayplay
   / .has-overnight / .has-grooming) via the left-side accent rail and
   the .service-label-row chip's existing palette — no need to
   reimplement the per-type tones here. */
/* COMPACT LIST view — used when an owner has > 4 upcoming reservations.
   Two-column layout: visits split in half, each column gets its own
   header row, with a vertical divider drawn between the two columns
   (the right column gets border-left). Rows are narrow strips
   (~32px tall, 2 stacked lines for date+time) so the iPad Pro 13"
   landscape view fits a lot of reservations without scrolling. */
.owner-upcoming-list-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  align-items: start;
}
.owner-upcoming-list-col {
  display: grid;
  gap: 3px;
  min-width: 0;
}
/* Vertical separator between the two columns. Drawn on the right
   column's left border so it lines up exactly with the column gap. */
.owner-upcoming-list-compact > .owner-upcoming-list-col + .owner-upcoming-list-col {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

/* Per-column grid: 5 content columns — date+time stack · dog ·
   service · location · add-ons. The colored type rail is rendered by
   serviceRailMarkup() as an absolutely-positioned <span class="service-rail">
   over the row's left edge, so the row reserves left padding for it
   rather than a grid column.
   RN5 (fix-rn5-resformat): #437 added a Location column to the header
   and row markup but left this grid at 4 tracks, so the 5th cell
   wrapped and the header labels no longer lined up with row content.
   Added the matching location track. */
.owner-upcoming-list-header,
.owner-upcoming-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.9fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.owner-upcoming-list-header {
  padding: 2px 8px 2px 18px;   /* match the row's padding-left so the
                                  Date label sits over the date column */
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.owner-upcoming-row {
  position: relative;          /* anchor for the absolute service-rail */
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  padding: 4px 8px 4px 18px;   /* 18px = ~9px rail + 9px gap */
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.owner-upcoming-row:hover,
.owner-upcoming-row:focus-visible {
  background: #f7fbfa;
  outline: none;
  box-shadow: 0 0 0 2px rgba(18, 109, 95, 0.18);
}
/* The rail is the existing .service-rail span — absolute-positioned
   over the row's left edge. Re-anchor it inside the row, give it a
   matched border-radius so it tucks into the rounded row corner. */
.owner-upcoming-row > .service-rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 9px;
  border-radius: 4px 0 0 4px;
}
/* Date column: weekday + month/day on one line, time muted on the
   line below. Two compact lines keep each row ~30-32px tall while
   making the day-of-week obvious. */
.owner-upcoming-row-date {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* clamp inner cells to the date
                                              track so a nowrap time can't
                                              widen past the column */
  gap: 0;
  min-width: 0;
  overflow: hidden;            /* clip the date/time stack to its own column
                                  so the time no longer spills over the pet
                                  column to its right */
  line-height: 1.15;
}
.owner-upcoming-row-date b {
  color: var(--ink);
  font-weight: 900;
  font-size: 12.5px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-upcoming-row-date small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;            /* match the date <b>: ellipsize instead of
                                  overflowing into the neighbouring cell */
  text-overflow: ellipsis;
}
.owner-upcoming-row-pet {
  color: var(--ink);
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owner-upcoming-row-service {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.owner-upcoming-row-service > span {
  font-size: 10.5px;
  font-weight: 900;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.4;
}
/* Location column (#437): site name, styled like the add-ons column
   so the two trailing text columns read consistently. */
.owner-upcoming-row-location {
  color: var(--muted);
  font-weight: 700;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owner-upcoming-row-location small {
  color: var(--muted);
  opacity: 0.7;
}
.owner-upcoming-row-addons {
  color: var(--muted);
  font-weight: 700;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owner-upcoming-row-addons small {
  color: var(--muted);
  opacity: 0.7;
}

/* Narrow widths (< 900px) — drop to a single-column outer layout so
   the per-row inner grid has enough horizontal room. */
@media (max-width: 900px) {
  .owner-upcoming-list-compact {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .owner-upcoming-list-compact > .owner-upcoming-list-col + .owner-upcoming-list-col {
    padding-left: 0;
    border-left: 0;
    margin-top: 8px;
  }
}

/* Phone widths (< 640px) — drop the column header and reflow each
   row into 3 mini sub-rows: date+pet on top, service+location next,
   add-ons last. Rail remains absolute-positioned (no need to
   grid-area it). RN5: location added to the area map so the #437
   column doesn't fall outside the named grid on phones. */
@media (max-width: 640px) {
  .owner-upcoming-list-header {
    display: none;
  }
  .owner-upcoming-row {
    grid-template-columns: minmax(0, 110px) minmax(0, 1fr);
    grid-template-areas:
      "date pet"
      "service location"
      "addons addons";
    row-gap: 1px;
    padding: 4px 8px 4px 18px;
  }
  .owner-upcoming-row-date     { grid-area: date; }
  .owner-upcoming-row-pet      { grid-area: pet; }
  .owner-upcoming-row-service  { grid-area: service; }
  .owner-upcoming-row-location { grid-area: location; }
  .owner-upcoming-row-addons   { grid-area: addons; }
}

.owner-upcoming-header {
  align-items: center;
}

.owner-upcoming-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.owner-upcoming-toggle {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #a7d8c8;
  border-radius: 999px;
  background: #ffffff;
  color: #0f766e;
  cursor: pointer;
}

.owner-upcoming-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}

.owner-upcoming-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.owner-upcoming-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 8px;
}

.owner-recent-checkouts-section {
  border-color: #f0bf6a;
  background: #fff7e8;
}

.owner-recent-checkout-card.calendar-dog-chip {
  position: relative;
  padding-right: 56px;
  box-shadow: inset 4px 0 0 #d97706;
}

.owner-recent-checkout-card .calendar-dog-details {
  padding-right: 44px;
}

.owner-recent-checkout-card .owner-reservation-actions {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 14;
  margin: 0;
  padding: 0;
}

.owner-recent-checkout-card .owner-reservation-actions .round-action {
  width: 34px;
  height: 34px;
}

.owner-recent-checkout-card .round-action:disabled {
  cursor: wait;
  opacity: .72;
}

.client-details-card {
  grid-column: 1 / -1;
  --pet-section-accent: #0f766e;
  --pet-section-bg: #f0fdfa;
  --pet-section-border: #99f6e4;
  --pet-section-heading: #0f766e;
}

.owner-client-details-card.is-collapsed {
  grid-row: auto;
  gap: 0;
}

.owner-pets-management-card {
  grid-column: 1 / -1;
  --pet-section-accent: #2563eb;
  --pet-section-bg: #eff6ff;
  --pet-section-border: #bfdbfe;
  --pet-section-heading: #1d4ed8;
}

.owner-notes-card {
  grid-column: 1 / -1;
  --pet-section-accent: #b45309;
  --pet-section-bg: #fffbeb;
  --pet-section-border: #fcd34d;
  --pet-section-heading: #92400e;
}

/* Per-section colors for every owner-detail collapsible. Mirrors the
   pet-profile color system (one distinct color per section) so staff
   can scan the page by hue. */
.owner-upcoming-reservations-card {
  --pet-section-accent: #0891b2;
  --pet-section-bg: #ecfeff;
  --pet-section-border: #67e8f9;
  --pet-section-heading: #0e7490;
}
.owner-client-details-card {
  --pet-section-accent: #0f766e;
  --pet-section-bg: #f0fdfa;
  --pet-section-border: #99f6e4;
  --pet-section-heading: #0f766e;
}
.owner-invoices-card {
  --pet-section-accent: #dc2626;
  --pet-section-bg: #fff5f5;
  --pet-section-border: #fca5a5;
  --pet-section-heading: #b91c1c;
}
.owner-open-invoices-card {
  --pet-section-accent: #be123c;
  --pet-section-bg: #fff1f2;
  --pet-section-border: #fda4af;
  --pet-section-heading: #9f1239;
}
.owner-agreements-card {
  --pet-section-accent: #7c3aed;
  --pet-section-bg: #f5f3ff;
  --pet-section-border: #c4b5fd;
  --pet-section-heading: #6d28d9;
}
.owner-packages-card {
  --pet-section-accent: #16a34a;
  --pet-section-bg: #f0fdf4;
  --pet-section-border: #86efac;
  --pet-section-heading: #166534;
}
.owner-rates-card {
  --pet-section-accent: #ea580c;
  --pet-section-bg: #fff7ed;
  --pet-section-border: #fdba74;
  --pet-section-heading: #c2410c;
}
.owner-additional-details-card {
  --pet-section-accent: #475569;
  --pet-section-bg: #f8fafc;
  --pet-section-border: #cbd5e1;
  --pet-section-heading: #334155;
}
.owner-account-audit-card {
  --pet-section-accent: #334155;
  --pet-section-bg: #f1f5f9;
  --pet-section-border: #94a3b8;
  --pet-section-heading: #1e293b;
}

/* Two full-row sections: Past Invoices and Additional Details — span
   the entire grid width whether collapsed or expanded. */
.owner-detail-grid .owner-invoices-card,
.owner-detail-grid .owner-open-invoices-card,
.owner-detail-grid .owner-additional-details-card {
  grid-column: 1 / -1;
}

/* Owner-detail grid: paired cards in the same row should match
   heights when BOTH are expanded so the layout reads as a clean
   two-column grid (Upcoming/Notes, Client Details/Packages, etc.).
   Override the parent .pet-detail-grid's `align-items: start`. */
.owner-detail-grid {
  align-items: stretch;
}
.owner-detail-grid > .pet-collapsible-card.is-open {
  height: 100%;
}
/* But when a card is collapsed, it should keep its natural one-line
   head height — even if the other card in the same row is expanded.
   `align-self: start` opts it out of the row's stretch, so the
   collapsed head sits flush at the top of its grid cell with empty
   space below it instead of being stretched to match the expanded
   neighbor. */
.owner-detail-grid > .pet-collapsible-card.is-collapsed {
  align-self: start;
  height: auto;
}

/* Compact pill button for the "View N expired packages" toggle inside
   the Packages section. */
.owner-package-expired-toggle-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
}
.owner-package-expired-toggle {
  font-size: 12px;
  font-weight: 800;
  color: var(--pet-section-heading, var(--muted));
}
.owner-package-list-expired {
  margin-top: 6px;
  border-top: 1px dashed var(--pet-section-border, var(--line));
  padding-top: 8px;
}

/* Green-styled summary chip — used by Packages when there are active
   credits available. Renders the inline summary text in green so it
   pops in the head row. */
.pet-card-head-summary.is-positive {
  color: #166534;
  font-weight: 800;
}
/* Red "needs attention" call-out shown inline next to a section title
   in the collapsed head (vaccinations when shots are expired/due,
   incidents when any are on file). The CARD itself keeps its native
   palette — only this inline summary is themed. */
.pet-card-head-summary.is-alert {
  color: #b91c1c;
  font-weight: 900;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 999px;
  padding: 2px 10px;
  flex: 0 0 auto;
}

@media (max-width: 540px) {
  .pet-card-head-summary.is-alert {
    flex: 1 0 100%;
    border-radius: 8px;
    padding: 4px 8px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

.owner-historical-subsection {
  grid-column: 1 / -1;
}

.owner-historical-subsection.pet-card {
  padding: 10px 12px;
}

.owner-historical-subsection.is-collapsed,
.owner-messages-card.is-collapsed {
  gap: 0;
}

.owner-historical-subsection .pet-card-head h3 {
  font-size: 16px;
}

.owner-historical-subsection .owner-upcoming-toggle {
  width: 30px;
  height: 30px;
}

.owner-historical-subsection .owner-upcoming-toggle svg {
  width: 16px;
  height: 16px;
}

.owner-history-thread-link {
  font-size: 12px;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}

.owner-historical-info-section,
.owner-historical-info-content {
  grid-column: 1 / -1;
}

.owner-historical-info-button {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  border: 1px solid #a5f3fc;
  border-radius: 8px;
  background: #ecfeff;
  color: #0e7490;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 950;
  padding: 12px 14px;
  text-align: left;
}

.owner-historical-info-button:hover,
.owner-historical-info-button:focus-visible {
  border-color: #0e7490;
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.12);
  outline: none;
}

.owner-historical-info-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 999px;
  background: #0e7490;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.owner-historical-info-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-left: 16px;
  padding-left: 12px;
  border-left: 3px solid #a5f3fc;
}

.owner-accordion-controls {
  margin-left: auto;
}

.owner-history-card {
  grid-column: 1 / -1;
}

.owner-history-card {
  --pet-section-accent: #0284c7;
  --pet-section-bg: #f0f9ff;
  --pet-section-border: #bae6fd;
  --pet-section-heading: #0369a1;
}

.owner-invoices-card {
  --pet-section-accent: #be123c;
  --pet-section-bg: #fff1f2;
  --pet-section-border: #fecdd3;
  --pet-section-heading: #be123c;
}

.owner-open-invoices-card {
  grid-column: 1 / -1;
  --pet-section-accent: #be123c;
  --pet-section-bg: #fff1f2;
  --pet-section-border: #fda4af;
  --pet-section-heading: #9f1239;
}

.owner-card-file-card {
  grid-column: 1 / -1;
  --pet-section-accent: #4f46e5;
  --pet-section-bg: #eef2ff;
  --pet-section-border: #c7d2fe;
  --pet-section-heading: #4338ca;
}

.owner-payment-history-card {
  --pet-section-accent: #15803d;
  --pet-section-bg: #f0fdf4;
  --pet-section-border: #bbf7d0;
  --pet-section-heading: #166534;
}

.owner-agreements-card {
  grid-column: 1 / -1;
  --pet-section-accent: #2563eb;
  --pet-section-bg: #eff6ff;
  --pet-section-border: #bfdbfe;
  --pet-section-heading: #1d4ed8;
}

.owner-reservations-history-card {
  --pet-section-accent: #0891b2;
  --pet-section-bg: #ecfeff;
  --pet-section-border: #a5f3fc;
  --pet-section-heading: #0e7490;
}

.owner-card-file-list {
  display: grid;
  gap: 8px;
}

.owner-card-file-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(79, 70, 229, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  padding: 10px;
}

.owner-card-file-toolbar-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.owner-card-file-toolbar-main strong,
.owner-card-file-toolbar-main span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.owner-card-file-toolbar-main strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.owner-card-file-toolbar-main span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.owner-card-file-toolbar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.owner-card-terminal-select,
.owner-card-setup-form,
.owner-terminal-card-setup {
  margin-top: 8px;
}

.owner-card-file-list > article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.owner-card-file-list > article > strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.owner-card-file-list > article > span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.owner-card-file-list > article.is-error {
  border-color: #f2aaa0;
  background: #fff5f3;
}

.owner-agreement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
}

.owner-agreement-row > span,
.owner-agreement-row > small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.owner-agreement-row > b {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.owner-agreement-row > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.owner-agreement-actions,
.owner-package-history {
  grid-column: 1 / -1;
}

.owner-agreement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.owner-package-list-section {
  display: grid;
  gap: 8px;
}

.owner-package-list-section + .owner-package-list-section {
  margin-top: 10px;
}

.owner-package-list-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf7;
  padding: 8px 10px;
}

.owner-package-list-section > summary strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.owner-package-list-section > summary span {
  min-width: 24px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  padding: 5px 8px;
  text-align: center;
}

.owner-package-list-section > .owner-package-list {
  margin-top: 8px;
}

.owner-package-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: start;
}

.owner-package-row > div {
  min-width: 0;
}

.owner-package-row strong,
.owner-package-row span {
  display: block;
}

.owner-package-history {
  font-size: 12px;
  font-weight: 800;
}

.owner-package-history summary {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 28px;
  cursor: pointer;
}

.owner-package-history span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.owner-card-file-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.owner-card-file-row.is-primary {
  border-color: #8fd0bd;
  background: #f3fbf8;
}

.owner-card-file-row.is-expired {
  border-color: #f0b3a0;
  background: #fff7f3;
}

.owner-card-file-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.owner-card-file-main strong,
.owner-card-file-main small,
.owner-card-file-main span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.owner-card-file-main strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.owner-card-file-main small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.owner-card-file-main span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.owner-card-file-row.is-expired .owner-card-file-main span {
  color: #b45309;
}

.owner-card-file-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .owner-card-file-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .owner-card-file-toolbar-actions {
    justify-content: flex-start;
  }

  .owner-card-file-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .owner-card-file-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

.client-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.owner-notes-form textarea {
  min-height: 118px;
}

.client-tags-field {
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
}

.owner-household-field {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
  padding: 12px;
}

.owner-household-field legend {
  padding: 0 6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.owner-household-pets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.owner-household-pets.is-assigned {
  max-height: none;
  overflow: visible;
}

.owner-household-pets.is-pending {
  margin-top: 8px;
  max-height: none;
  overflow: visible;
}

.owner-household-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  padding: 12px;
}

.owner-pet-add-panel {
  display: grid;
  gap: 8px;
}

.owner-pet-add-panel summary {
  width: max-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  font-weight: 950;
  list-style: none;
  padding: 8px 12px;
}

.owner-pet-add-panel summary::-webkit-details-marker {
  display: none;
}

.owner-pet-search-field {
  display: grid;
  gap: 5px;
}

.owner-pet-search-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.owner-pet-search-results {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow: auto;
}

.owner-pet-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.owner-pet-access-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.owner-pet-access-card.is-selected {
  border-color: #9dcfc5;
  background: #eefaf7;
}

.owner-pet-access-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.owner-pet-access-main.is-profile-link {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.owner-pet-access-main.is-profile-link:hover strong,
.owner-pet-access-main.is-profile-link:focus-visible strong {
  color: var(--accent);
  text-decoration: underline;
}

.owner-pet-access-main.is-profile-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, #fff);
  outline-offset: 2px;
}

.owner-pet-access-main.is-cat {
  color: #6f3f13;
}

.owner-pet-access-main strong,
.owner-pet-access-main small,
.owner-pet-access-main em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-pet-access-main em {
  color: #9a3412;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.owner-pet-access-main .owner-pet-type-badge {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
  overflow: visible;
  text-overflow: clip;
  color: #11615b;
  font-size: 10px;
}

.owner-pet-access-main .owner-pet-type-badge.is-cat {
  color: #8a4b0f;
}

.owner-pet-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 54px;
}

.owner-pet-permission-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fbfaf6;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 8px;
}

.owner-pet-permission-chip:has(input:checked),
.owner-pet-permission-chip.is-selected {
  border-color: #9dcfc5;
  background: #eefaf7;
  color: var(--accent);
}

.owner-pet-permissions.has-primary .owner-pet-permission-chip:not(.is-primary):not(.is-messaging) {
  display: none;
}

.owner-pet-primary-note,
.owner-pet-permission-required {
  align-self: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.owner-pet-primary-note {
  display: none;
}

.owner-pet-permissions.has-primary .owner-pet-primary-note {
  display: inline-flex;
}

.owner-pet-permission-required {
  color: #9a3412;
}

.owner-pet-permissions:has(input:checked) .owner-pet-permission-required {
  display: none;
}

.owner-pet-permission-editor {
  padding-left: 54px;
}

.owner-pet-permission-editor summary {
  width: max-content;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
}

.owner-pet-permission-editor .owner-pet-permissions {
  margin-top: 7px;
  padding-left: 0;
}

.owner-pet-remove-button {
  justify-self: start;
  margin-left: 54px;
}

.owner-new-pet-panel {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.owner-new-pet-panel h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.owner-new-pet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.owner-new-pet-grid label {
  display: grid;
  gap: 5px;
}

.owner-new-pet-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.owner-new-pet-grid input,
.owner-new-pet-grid select {
  min-width: 0;
}

.owner-pet-toggle {
  display: grid;
  grid-template-columns: auto 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.owner-pet-toggle.is-selected {
  border-color: #9dcfc5;
  background: #eefaf7;
}

.owner-pet-toggle-photo {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #edf5f2;
  color: var(--accent);
  font-weight: 950;
}

.owner-pet-toggle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.owner-pet-toggle strong,
.owner-pet-toggle small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-role-list {
  display: grid;
  gap: 8px;
}

.owner-role-row {
  display: grid;
  grid-template-columns: minmax(70px, auto) minmax(150px, 1.1fr) minmax(140px, 0.9fr) minmax(230px, 1.5fr) minmax(74px, auto);
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.owner-role-active,
.owner-role-primary {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.owner-role-field {
  display: grid;
  gap: 5px;
}

.owner-role-field > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.owner-role-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.owner-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fbfaf6;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 8px;
}

.owner-role-chip:has(input:checked),
.owner-role-chip.is-selected {
  border-color: #9dcfc5;
  background: #eefaf7;
  color: var(--accent);
}

@media (max-width: 760px) {
  .owner-role-row {
    grid-template-columns: 1fr;
  }
}

.client-tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.client-tag-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #bfe3f7;
  border-radius: 999px;
  background: #f0f9ff;
  color: #2277a3;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.client-tag-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.client-tag-option b {
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.client-tag-option strong {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.client-tag-option.is-selected,
.client-tag-option:has(input:checked) {
  border-color: #0b7266;
  background: #eefaf7;
  box-shadow: inset 0 0 0 1px #0b7266;
}

.owner-address-field {
  position: relative;
  display: grid;
  gap: 5px;
}

.owner-address-control {
  position: relative;
  display: grid;
}

.owner-address-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 45;
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(20, 24, 22, 0.16);
  padding: 6px;
}

.owner-address-menu[hidden] {
  display: none;
}

.owner-address-menu button {
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  text-align: left;
}

.owner-address-menu button strong,
.owner-address-menu button span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-address-menu button strong {
  font-size: 13px;
  font-weight: 900;
}

.owner-address-menu button span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.owner-address-menu button:hover,
.owner-address-menu button:focus-visible {
  background: #eefaf7;
  color: var(--accent);
  outline: none;
}

.owner-address-menu button:hover span,
.owner-address-menu button:focus-visible span {
  color: #446b64;
}

.owner-address-empty {
  color: var(--muted);
  padding: 10px;
  font-size: 12px;
  font-weight: 850;
}

.owner-address-attribution {
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding: 7px 10px 3px;
  font-size: 10px;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
}

.owner-address-field small {
  color: #6e756f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.owner-address-field[data-address-tone="valid"] small {
  color: #0b7266;
}

.owner-address-field[data-address-tone="review"] small {
  color: #996515;
}

.owner-history-list {
  display: grid;
  gap: 8px;
}

.owner-history-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
}

.owner-history-marker {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eefaf7;
  color: #0b7266;
  font-size: 14px;
  font-weight: 1000;
}

.owner-history-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.owner-history-row strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
}

.owner-history-row time {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
}

.owner-history-item span,
.owner-history-empty span,
.owner-history-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

.owner-history-item p {
  margin: 5px 0 0;
  color: #27312d;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.owner-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.owner-history-empty {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fdfcf8;
}

.owner-history-empty strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.owner-history-note {
  margin: 10px 0 0;
}

.owner-history-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.owner-history-footer .owner-history-note {
  margin: 0;
}

.owner-history-load-more {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 12px;
}

.message-board {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

[data-message-disabled-slot],
[data-message-composer-slot] {
  display: contents;
}

.message-board.has-message-banner {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.message-board.has-composer {
  min-height: 0;
}

.message-board.has-composer .message-shell {
  display: none;
}

.message-board.has-composer.has-message-banner {
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

.message-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.message-composer {
  flex: 0 0 auto;
}

.message-thread-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.message-bubbles {
  display: grid;
  align-content: start;
  gap: 8px;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-anchor: none;
  background: #fff;
  padding: 14px 18px;
}

.message-bubble {
  max-width: min(82%, 720px);
  border-radius: 18px;
  padding: 10px 13px;
  content-visibility: auto;
  contain-intrinsic-size: 72px;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.28;
}

.message-bubble.is-inbound {
  justify-self: start;
  border-color: #e5e5ea;
  background: #e5e5ea;
  color: #111827;
  border-bottom-left-radius: 6px;
}

.message-bubble.is-outbound {
  justify-self: end;
  border-color: #007aff;
  background: #007aff;
  color: #fff;
  border-bottom-right-radius: 6px;
}

.message-bubble.is-inbound time,
.message-bubble.is-inbound small {
  color: #5f6368;
}

.message-bubble.is-outbound time,
.message-bubble.is-outbound small {
  color: rgba(255, 255, 255, 0.78);
}

.message-bubble-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.message-source-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid rgba(95, 99, 104, 0.26);
  border-radius: 999px;
  padding: 0 7px;
  background: rgba(255, 255, 255, 0.6);
  color: #5f6368;
  font-size: 11px;
  font-weight: 900;
}

.message-source-pill.is-portal {
  border-color: #b8d6d0;
  background: #dff2ee;
  color: var(--accent);
}

.message-source-pill.is-email {
  border-color: #f2d28c;
  background: #fff4cf;
  color: #705000;
}

.message-media-gallery {
  display: grid;
  gap: 6px;
  max-width: 320px;
}

.message-media-item {
  display: grid;
  gap: 6px;
  margin: 0;
}

.message-media-gallery a,
.message-media-photo-button {
  display: block;
  color: inherit;
}

.message-media-photo-button {
  width: min(100%, 320px);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.message-media-photo-button:focus-visible {
  border-radius: 12px;
  outline: 3px solid rgba(13, 113, 105, .35);
  outline-offset: 2px;
}

.message-media-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15, 118, 110, .28);
  border-radius: 999px;
  background: #eefaf7;
  color: var(--accent);
  cursor: pointer;
}

.message-media-download-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-media-download-button:hover,
.message-media-download-button:focus-visible {
  border-color: var(--accent);
  background: #ddf6ef;
  outline: none;
}

.message-media-gallery img {
  display: block;
  width: min(100%, 320px);
  max-height: 240px;
  border-radius: 12px;
  object-fit: cover;
}

.message-media-photo-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.message-media-photo-action {
  min-height: 26px;
  border: 1px solid #9bd4c8;
  border-radius: 999px;
  background: #eefaf7;
  color: var(--accent);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.message-media-photo-action:hover,
.message-media-photo-action:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.message-media-link,
.message-recording-link {
  justify-self: start;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 5px 9px;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.message-media-missing {
  display: block;
  max-width: 360px;
  line-height: 1.25;
}

.message-call-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  width: min(82%, 620px);
  border: 1px solid #d7ebe6;
  border-radius: 16px;
  background: #f8f7f2;
  color: var(--ink);
  padding: 10px 12px;
}

.message-call-card.is-inbound {
  justify-self: start;
}

.message-call-card.is-outbound {
  justify-self: end;
  border-color: #9bd4c8;
  background: #eefaf7;
}

.message-call-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
}

.message-call-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.message-call-copy strong,
.message-call-copy span,
.message-call-copy p,
.message-call-copy time {
  min-width: 0;
  overflow-wrap: anywhere;
}

.message-call-copy strong {
  font-size: 14px;
  font-weight: 950;
}

.message-call-copy span,
.message-call-copy time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.message-call-copy p {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.message-call-summary {
  display: grid;
  gap: 4px;
}

.message-call-summary em,
.message-call-actions em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.message-call-actions {
  display: grid;
  gap: 3px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

.message-call-purposes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

.message-call-purposes b {
  border-radius: 999px;
  background: #e9f7f1;
  color: var(--accent);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 950;
}

.owner-history-message {
  display: grid;
  gap: 5px;
}

.owner-history-message.is-outbound {
  justify-items: end;
}

.owner-history-message.is-inbound {
  justify-items: start;
}

.owner-history-message .message-bubble {
  max-width: min(86%, 760px);
}

.owner-history-message .owner-history-actions {
  margin: 0;
}

.owner-reservation-card.calendar-dog-chip {
  min-height: 150px;
  padding-right: 22px;
}

.owner-reservation-card .calendar-dog-details {
  padding-bottom: 0;
  padding-right: 0;
}

.owner-reservation-card .calendar-dog-name {
  max-width: min(100%, 260px);
}

.owner-reservation-card.has-deposit-collected .calendar-dog-name-line,
.owner-reservation-card.has-deposit-collected .service-label-row,
.owner-reservation-card.has-deposit-collected .owner-reservation-meta {
  padding-right: min(220px, 36%);
}

.owner-reservation-deposit {
  position: absolute;
  top: 12px;
  right: 18px;
  z-index: 12;
  display: grid;
  max-width: 220px;
  justify-items: end;
  gap: 3px;
  color: #116b5b;
  pointer-events: none;
  text-align: right;
}

.owner-reservation-deposit strong {
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 1000;
  line-height: .95;
  text-transform: uppercase;
}

.owner-reservation-deposit span {
  color: #46615a;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.owner-reservation-card .owner-reservation-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 8px;
  margin-top: 6px;
}

.owner-reservation-card .owner-reservation-meta div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.owner-reservation-card .owner-reservation-meta span {
  font-size: 9px;
  line-height: 1.05;
}

.owner-reservation-card .owner-reservation-meta strong {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-reservation-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.owner-reservation-actions .round-action {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

@media (max-width: 760px) {
  .owner-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-reservation-card.calendar-dog-chip {
    min-height: 158px;
  }

  .owner-reservation-card .owner-reservation-meta {
    grid-template-columns: 1fr;
  }

  .owner-reservation-card.has-deposit-collected .calendar-dog-name-line,
  .owner-reservation-card.has-deposit-collected .service-label-row,
  .owner-reservation-card.has-deposit-collected .owner-reservation-meta {
    padding-right: min(150px, 42%);
  }

  .owner-reservation-deposit {
    right: 12px;
    max-width: 150px;
  }

  .owner-reservation-deposit strong {
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  .owner-profile-stats {
    grid-template-columns: 1fr;
  }

  .client-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .vaccine-overlay {
    align-items: stretch;
    padding: 4px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .vaccine-drawer {
    width: calc(100vw - 8px);
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 8px);
    align-content: start;
    grid-template-rows: auto auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
  }

  .vaccine-workspace {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
    overflow: visible;
  }

  .vaccine-document-panel,
  .vaccine-entry-panel {
    min-height: 0;
    overflow: visible;
  }

  .vaccine-document-preview,
  .vaccine-document-preview iframe {
    min-height: 54px;
  }

  .vaccine-grid-head,
  .vaccine-edit-row {
    grid-template-columns: minmax(104px, 1fr) minmax(112px, 128px) minmax(62px, 72px) minmax(62px, 72px);
    gap: 4px;
  }

  .vaccine-grid-head > span:last-child {
    display: none;
  }

  .vaccine-source-note {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 4px 7px;
  }

  .vet-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 6px;
  }

  .vaccine-entry-panel .vet-form-grid input {
    min-height: 28px;
    padding: 3px 6px;
  }
}

@media (max-width: 420px) {
  .vaccine-drawer-head h2 {
    font-size: 20px;
  }

  .vaccine-workspace {
    grid-template-rows: auto auto;
  }

  .vaccine-document-panel .pet-card-head h3 {
    display: none;
  }

  .vaccine-grid-head,
  .vaccine-edit-row {
    grid-template-columns: minmax(82px, 1fr) minmax(94px, 112px) 52px 52px;
    gap: 3px;
  }

  .vaccine-grid-head {
    font-size: 9px;
  }

  .vaccine-entry-panel h3,
  .vet-editor h3 {
    font-size: 15px;
  }

  .vaccine-name-static,
  .vaccine-edit-row input {
    font-size: 12px;
  }

  .vaccine-edit-row {
    min-height: 26px;
    padding-bottom: 2px;
  }

  .vaccine-name-static,
  .vaccine-edit-row input,
  .vaccine-entry-panel .vet-form-grid input {
    min-height: 26px;
  }

  .review-check {
    width: 22px;
    height: 22px;
    min-height: 22px;
  }

  .review-check input {
    width: 12px;
    height: 12px;
  }

  .vet-record-indicator {
    font-size: 11px;
    padding: 5px 7px;
  }

  .vet-phone-field,
  .vet-email-field {
    grid-column: auto;
  }

  .vaccine-actions .secondary-button,
  .vaccine-actions .primary-button {
    min-height: 32px;
    padding: 0 10px;
  }
}

/* Ops checkout, trial, and profile history additions */

.calendar-dog-time-button {
  display: grid;
  gap: 1px;
  width: max-content;
  min-width: max-content;
  max-width: 100%;
  appearance: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.calendar-dog-time-button:hover,
.calendar-dog-time-button:focus-visible {
  background: transparent;
  outline: 2px solid #9dcfc5;
  outline-offset: 3px;
}

.calendar-dog-time-button b,
.calendar-dog-time-button span {
  display: block;
}

.calendar-dog-chip .calendar-dog-time-button span {
  display: none;
}

.calendar-dog-actions .round-action.is-note {
  position: relative;
  top: auto;
  right: auto;
  opacity: 1;
  pointer-events: auto;
}

.round-action.is-note {
  border: 1px solid #d7dde6;
  background: #f5f7fa;
  color: #64748b;
  box-shadow: 0 8px 18px rgba(100, 116, 139, 0.12);
}

.visit-time-panel {
  width: min(620px, 100%);
}

.grooming-slot-action-panel {
  width: min(560px, 100%);
}

.grooming-slot-action-panel .checkin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-right: 42px;
}

.grooming-slot-action-panel .checkin-head > div {
  min-width: 0;
}

.grooming-slot-action-panel .checkin-head h2 {
  margin: 2px 0 4px;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: 0;
}

.grooming-slot-action-panel .checkin-head span {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.grooming-slot-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.calendar-slot-action-card {
  appearance: none;
  border: 1px solid #c9d8d3;
  border-radius: 8px;
  background: #f8fbfa;
  padding: 14px;
  color: #102a43;
  text-align: left;
  cursor: pointer;
}

.calendar-slot-action-card:hover,
.calendar-slot-action-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 110, 97, 0.12);
  outline: none;
}

.calendar-slot-action-card strong,
.calendar-slot-action-card span {
  display: block;
}

.calendar-slot-action-card strong {
  font-size: 16px;
  font-weight: 950;
}

.calendar-slot-action-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.visit-time-grid label.is-hidden {
  display: none;
}

.visit-time-window {
  margin: 10px 0 0;
  border: 1px solid #e2c06e;
  border-radius: 8px;
  background: #fffaf0;
  padding: 9px 10px;
  color: #7a4b00;
  font-size: 13px;
  font-weight: 850;
}

.visit-note-panel {
  width: min(640px, 100%);
}

.visit-note-field {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.visit-note-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.visit-note-field textarea {
  min-height: 140px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  padding: 12px;
  resize: vertical;
}

.checkout-cart-panel {
  width: min(1180px, calc(100vw - 24px));
  max-height: calc(100dvh - 20px);
  padding: 12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.checkout-cart-head {
  grid-template-columns: 60px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: start;
  padding-right: 58px;
}

/* Unapplied deposit prompt at checkout ("owner has an unattached $50 deposit"). */
.checkout-unattached-deposits {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.checkout-unattached-deposit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #f0c36d;
  border-radius: 10px;
  background: #fdf6e3;
}

.checkout-unattached-deposit-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.checkout-unattached-deposit-row small {
  color: #7a6a45;
}

.checkout-unattached-deposit-row .secondary-button {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Checkout batch grouping on the client page (dogs checked out together). */
.owner-recent-checkout-group {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px dashed #b9c7c3;
  border-radius: 12px;
}

.owner-recent-checkout-group-note {
  font-size: 0.78rem;
  color: #4c6660;
  font-weight: 600;
}

.checkout-pos-head {
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
}

.checkout-header-invoice-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.checkout-owner-avatar {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  background: #e8efec;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 950;
}

.checkout-cart-top {
  display: grid;
  grid-template-columns: minmax(260px, 420px);
  justify-content: end;
  gap: 10px;
  margin-top: 14px;
}

.checkout-header-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 4px;
}

.checkout-cart-head h2 {
  font-size: clamp(32px, 3.7vw, 42px);
}

.checkout-cart-head h2.checkout-pos-heading {
  color: var(--ink);
  font-size: 32px;
  line-height: 1;
}

.checkout-pos-customer-line {
  display: block;
  margin-top: 4px;
  color: #123b3a;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.25;
}

.checkout-header-dogs {
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
}

.checkout-single-dog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.checkout-owner-title-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  min-width: 0;
}

.checkout-owner-title-link {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  text-align: left;
}

.checkout-owner-title-link:hover,
.checkout-owner-title-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.checkout-owner-invoices-link {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  padding: 5px 9px;
  white-space: nowrap;
}

.checkout-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.checkout-deposit-status {
  display: grid;
  justify-items: end;
  gap: 6px;
  justify-self: end;
  align-self: start;
  min-width: 0;
  text-align: right;
}

.checkout-deposit-status strong {
  color: #13825f;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 950;
  line-height: 1.08;
  white-space: nowrap;
}

.checkout-card-on-file-shortcut {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.checkout-owner-card {
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 12px;
}

.checkout-owner-card > span,
.checkout-owner-tags > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-owner-card strong {
  color: var(--ink);
  font-size: 21px;
  font-weight: 950;
  line-height: 1.05;
}

.checkout-owner-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.checkout-owner-phone {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkout-owner-phone.is-missing {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.checkout-owner-tags {
  display: grid;
  gap: 5px;
  margin-top: 4px;
}

.checkout-tag-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.checkout-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 160px;
  border: 1px solid #d8d5cc;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  padding: 4px 8px;
}

.checkout-tag-chip b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-tag-empty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.checkout-total-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.checkout-total-dogs {
  display: flex;
  align-items: center;
  min-width: 80px;
}

.checkout-total-dog-photo,
.checkout-total-dog-more {
  width: 48px;
  height: 48px;
  margin-left: -10px;
  border: 3px solid #fff;
  border-radius: 999px;
  object-fit: cover;
  background: #ebe8df;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 950;
}

.checkout-total-dog-photo:first-child,
.checkout-total-dog-more:first-child {
  margin-left: 0;
}

.checkout-total-dog-photo.has-vaccine-alert {
  box-shadow: 0 0 0 3px var(--vaccine-critical-color);
}

.checkout-quick-add {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.checkout-quick-fields {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(130px, 0.8fr) minmax(220px, 1.4fr) minmax(110px, 0.6fr) auto;
  gap: 8px;
  align-items: end;
}

.checkout-quick-fields.is-single-dog {
  grid-template-columns: minmax(130px, 0.8fr) minmax(260px, 1.5fr) minmax(110px, 0.6fr) auto;
}

.checkout-quick-fields label,
.trial-conversion-grid label,
.trial-conversion-section label:not(.trial-confirm-row):not(.trial-location-option):not(.trial-service-option) {
  display: grid;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.checkout-quick-fields span,
.trial-conversion-grid span,
.trial-conversion-section label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-quick-fields input,
.checkout-quick-fields select,
.trial-conversion-grid input,
.trial-conversion-grid select,
.trial-conversion-grid textarea,
.trial-conversion-section textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 9px 10px;
}

.checkout-quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.checkout-quick-buttons .secondary-button {
  min-height: 32px;
  border-radius: 8px;
  font-size: 13px;
  padding: 0 10px;
}

.checkout-service-picker {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.checkout-service-picker-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.checkout-service-picker-head > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.checkout-service-picker-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.checkout-service-panel-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.checkout-service-dog-select {
  display: grid;
  gap: 5px;
  min-width: 180px;
}

.checkout-service-dog-select span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-service-dog-select select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 8px 10px;
}

.checkout-service-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
}

.checkout-service-form {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 12px;
}

.checkout-service-form h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.checkout-service-form p {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.checkout-service-form label {
  display: grid;
  gap: 5px;
}

.checkout-service-form label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-service-form input,
.checkout-service-form select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 8px 10px;
}

.checkout-service-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.checkout-service-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: 210px;
  overflow: auto;
}

.checkout-service-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 10px;
  text-align: left;
}

.checkout-service-option:hover,
.checkout-service-option:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 110, 91, 0.12);
  outline: 0;
}

.checkout-service-option span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.checkout-service-option strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-service-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.checkout-service-option b {
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
}

.checkout-addon-choice {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 0.8fr);
  gap: 8px;
  align-items: stretch;
}

.checkout-addon-choice .checkout-service-option {
  width: 100%;
}

.checkout-addon-form {
  grid-template-columns: minmax(150px, 0.7fr) minmax(260px, 1.4fr) minmax(220px, 1fr) auto;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 8px;
}

.checkout-addon-form .reservation-addon-service-groups,
.checkout-addon-form .addon-category-select,
.checkout-addon-form .reservation-addon-service-select,
.checkout-addon-form .addon-schedule-control {
  min-width: 0;
}

.checkout-addon-form .secondary-button {
  min-height: 38px;
  white-space: nowrap;
}

.checkout-addon-options {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  max-height: 160px;
  overflow-x: hidden;
  overflow-y: auto;
}

.checkout-addon-days {
  min-width: 0;
  width: 100%;
}

.checkout-addon-picker .addon-schedule-control {
  width: 100%;
  min-width: 0;
  margin-left: 0;
}

.checkout-addon-picker .addon-schedule-control[data-addon-has-quantity="true"] {
  grid-template-columns: minmax(0, 1fr) 92px;
}

.checkout-bottom-tools {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6faf8;
  padding: 8px;
}

.checkout-bottom-tools .checkout-payment-panel {
  margin-top: 0;
  min-height: 0;
}

.checkout-tools-section {
  display: grid;
  grid-template-columns: minmax(150px, 0.24fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid #cfe3dc;
  border-radius: 8px;
  background: #fff;
  padding: 7px 9px;
}

.checkout-tools-head {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.checkout-tools-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-tools-head strong {
  overflow: hidden;
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-payment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: 8px;
  align-items: stretch;
}

.checkout-payment-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.checkout-quick-buttons .secondary-button.is-active,
.pos-payer-mode .secondary-button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.checkout-pos-tools {
  background: #f7fbf8;
}

.checkout-pos-sale-items .checkout-pos-picker .checkout-service-options {
  max-height: 170px;
}

.checkout-pos-package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: min(360px, 38vh);
  overflow: auto;
  padding-right: 2px;
}

.checkout-pos-package-column {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.checkout-pos-package-column.is-other {
  grid-column: 1 / -1;
}

.checkout-pos-package-column h4 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.checkout-pos-package-stack {
  display: grid;
  gap: 8px;
}

.checkout-pos-package-option {
  min-height: 84px;
  padding: 12px;
}

.checkout-pos-package-option strong {
  font-size: 15px;
}

.checkout-pos-package-option small {
  font-weight: 780;
  line-height: 1.35;
  white-space: normal;
}

.checkout-pos-package-option b {
  font-size: 18px;
  white-space: nowrap;
}

.checkout-pos-package-option.is-full-day-package {
  --package-bg-5: #edf8f1;
  --package-bg-10: #d7f0e2;
  --package-bg-20: #bde3d1;
  --package-border-5: #a9d9bd;
  --package-border-10: #70bd92;
  --package-border-20: #328457;
  --package-ink: #17402a;
}

.checkout-pos-package-option.is-half-day-package {
  --package-bg-5: #e7f7f5;
  --package-bg-10: #bfe9e5;
  --package-bg-20: #86d2ca;
  --package-border-5: #9fdad4;
  --package-border-10: #43aaa2;
  --package-border-20: #08756f;
  --package-ink: #073f42;
}

.checkout-pos-package-option.is-5-credit-package {
  border-color: var(--package-border-5, var(--line));
  background: var(--package-bg-5, #fdfcf8);
  color: var(--package-ink, var(--ink));
}

.checkout-pos-package-option.is-10-credit-package {
  border-color: var(--package-border-10, var(--line));
  background: var(--package-bg-10, #fdfcf8);
  color: var(--package-ink, var(--ink));
}

.checkout-pos-package-option.is-20-credit-package {
  border-color: var(--package-border-20, var(--line));
  background: var(--package-bg-20, #fdfcf8);
  color: var(--package-ink, var(--ink));
}

.checkout-pos-package-option[class*="-package"] b {
  color: currentColor;
}

.checkout-pos-detail-body {
  grid-template-columns: minmax(0, 1fr);
}

.checkout-pos-detail-body .checkout-pos-account-panel {
  margin: 0;
}

.checkout-pos-account-panel {
  display: grid;
  gap: 8px;
}

.checkout-pos-customer-panel {
  margin-top: 8px;
  border: 1px solid #9dd8d2;
  border-radius: 8px;
  background: #edf9f7;
  padding: 8px;
}

.checkout-pos-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pos-customer-search {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid #5bb8b0;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: #f8fffe;
  padding: 10px;
  box-shadow: 0 1px 0 rgba(7, 86, 82, 0.06);
}

.pos-owner-search,
.pos-payer-panel {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.pos-owner-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.pos-owner-card {
  display: grid;
  gap: 3px;
  min-height: 48px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 8px 9px;
}

.pos-owner-card:not(.is-empty) {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pos-owner-card.is-empty {
  color: var(--muted);
}

.pos-owner-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-owner-card span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-customer-selected {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.pos-customer-selected .pos-owner-card {
  min-height: 42px;
  background: #f7fbf8;
}

.pos-customer-selected .pos-owner-card span {
  white-space: normal;
}

.pos-customer-search label,
.pos-owner-search label,
.pos-gift-card-form label {
  display: grid;
  gap: 5px;
}

.pos-customer-search label > span,
.pos-owner-search label > span,
.pos-gift-card-form label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.pos-customer-search input,
.pos-owner-search input,
.pos-gift-card-form input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  padding: 8px 10px;
}

.pos-customer-search input {
  min-height: 42px;
  border-color: #238d86;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(35, 141, 134, 0.12);
}

.pos-customer-search input:focus {
  border-color: #075651;
  box-shadow: 0 0 0 3px rgba(35, 141, 134, 0.18);
  outline: 0;
}

.pos-owner-results {
  display: grid;
  gap: 6px;
  max-height: 230px;
  overflow: auto;
}

.pos-owner-results button {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 7px 10px;
  text-align: left;
}

.pos-owner-result-photo {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 15px;
}

.pos-owner-result-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pos-owner-result-pets {
  color: var(--accent);
  font-size: 11px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-owner-card-photo {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 16px;
}

.pos-owner-card-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pos-owner-results button:hover,
.pos-owner-results button:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 110, 91, 0.12);
  outline: 0;
}

.pos-owner-results strong {
  font-size: 13px;
  font-weight: 950;
}

.pos-owner-results span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pos-open-invoices {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fdfcf8;
}

.pos-open-invoices-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pos-open-invoices-head strong {
  font-size: 13px;
  font-weight: 950;
}

.pos-open-invoices-head span {
  color: #9a3412;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pos-open-invoices-more {
  display: grid;
  gap: 8px;
}

.pos-open-invoices-more > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  padding: 5px 2px;
}

.pos-open-invoices-more[open] > summary {
  margin-bottom: 8px;
}

.pos-open-invoices-more > .pos-open-invoice-row + .pos-open-invoice-row {
  margin-top: 8px;
}

.pos-open-invoice-row {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.pos-open-invoice-row.is-added {
  border-color: #238d86;
  box-shadow: inset 0 0 0 1px rgba(35, 141, 134, 0.14);
}

.pos-open-invoice-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pos-open-invoice-info strong {
  font-size: 13px;
  font-weight: 950;
}

.pos-open-invoice-info small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-open-invoice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pos-open-invoice-actions b {
  font-size: 14px;
  margin-right: auto;
}

.pos-open-invoice-added {
  color: #075651;
  font-size: 12px;
  font-weight: 900;
}

.pos-invoice-reassign {
  display: grid;
  gap: 8px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fdfcf8;
}

.pos-invoice-reassign-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pos-invoice-reassign-head strong {
  font-size: 12px;
  font-weight: 950;
}

.pos-invoice-reassign input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 7px 10px;
}

.pos-payer-mode,
.pos-gift-card-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.pos-gift-card-form label {
  min-width: 180px;
}

.checkout-pos-picker .checkout-service-option:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.checkout-promotion-option:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.checkout-tip-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.checkout-tip-buttons .secondary-button {
  width: 100%;
  min-height: 31px;
  padding: 0 8px;
  font-size: 12px;
}

.checkout-tip-button b {
  margin-left: 4px;
  color: var(--accent);
  font-size: 12px;
}

.checkout-pending-warning {
  border: 1px solid #facc15;
  border-radius: 8px;
  background: #fff7d6;
  color: #7c2d12;
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
}

.checkout-cart-section {
  display: grid;
  gap: 0;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.checkout-cart-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--accent);
  color: #fff;
  padding: 9px 12px;
}

.checkout-cart-title-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.checkout-cart-toggle {
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  padding: 0 9px;
}

.checkout-cart-toggle:hover,
.checkout-cart-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  outline: 0;
}

.checkout-cart-title h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 950;
}

.checkout-cart-title svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checkout-cart-title span {
  font-size: 12px;
  font-weight: 900;
}

.checkout-cart-table {
  display: grid;
  overflow-x: auto;
}

.checkout-cart-collapsed-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}

.checkout-cart-collapsed-summary span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.checkout-cart-collapsed-summary strong {
  color: var(--ink);
  font-size: 24px;
  font-weight: 950;
}

.checkout-pickup-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.checkout-pickup-list {
  display: grid;
  gap: 6px;
  padding: 8px 10px 9px;
}

.checkout-pickup-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.36fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.checkout-pickup-dog,
.checkout-pickup-contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.checkout-pickup-dog-photo,
.checkout-pickup-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef3ef;
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  object-fit: cover;
}

.checkout-pickup-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.checkout-pickup-contact {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  cursor: pointer;
  padding: 7px;
}

.checkout-pickup-contact.is-selected,
.checkout-pickup-contact:has(input:checked) {
  border-color: #95cfc1;
  background: #f0fbf8;
  box-shadow: inset 4px 0 0 var(--accent);
}

.checkout-pickup-contact input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.checkout-pickup-contact strong,
.checkout-pickup-dog strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.checkout-pickup-contact small,
.checkout-pickup-dog small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.checkout-time-panel {
  display: grid;
  gap: 0;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.checkout-detail-body {
  display: grid;
  /* Wrap to a single column when the checkout panel is too narrow to fit both
     columns, instead of overflowing under the panel's `overflow: hidden` and
     clipping the check-in/checkout details (staff: "I can't see all the details
     and I can't expand for a check-in check out"). Cap the height so a long
     expanded list scrolls within the panel rather than running off-screen. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
  gap: 6px;
  padding: 8px 10px;
  max-height: min(60vh, 540px);
  overflow-x: hidden;
  overflow-y: auto;
}

.checkout-detail-section {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
  padding: 7px;
}

.checkout-detail-section-head {
  display: grid;
  gap: 2px;
}

.checkout-detail-section-head-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}

.checkout-save-times-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
  white-space: nowrap;
}

.checkout-detail-section-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-detail-section-head strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
}

.checkout-reservation-details-panel .checkout-time-list,
.checkout-reservation-details-panel .checkout-pickup-list {
  padding: 0;
}

.checkout-note-list {
  display: grid;
  gap: 5px;
}

.checkout-detail-notes {
  grid-column: 1 / -1;
}

.checkout-detail-collapsed-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
}

.checkout-detail-collapsed-summary span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-detail-collapsed-summary strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.checkout-time-title h3 {
  font-size: 16px;
}

.checkout-time-list {
  display: grid;
  gap: 6px;
  padding: 0;
}

.checkout-time-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.24fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 6px;
}

.checkout-reservation-details-panel .checkout-time-row {
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: stretch;
}

.checkout-time-dog {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.checkout-time-dog strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.checkout-time-dog small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-time-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 6px;
  min-width: 0;
}

.checkout-reservation-details-panel .checkout-time-fields {
  /* Let the four date/time inputs wrap (e.g. to 2x2) on a narrow panel instead
     of forcing a >520px row that overflows the clipped detail body. */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.checkout-time-fields label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.checkout-time-fields input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  padding: 6px 8px;
}

.checkout-time-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 7px 10px 8px;
}

.checkout-cart-row {
  display: grid;
  grid-template-columns: 132px minmax(220px, 1fr) 170px 176px 140px 160px;
  gap: 8px;
  align-items: center;
  min-width: 1080px;
  border-bottom: 1px solid var(--line);
  padding: 6px 12px;
}

.checkout-cart-row-head {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-line-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkout-remove-line,
.checkout-confirm-line {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  padding: 0;
}

.checkout-remove-line {
  background: #ef4444;
}

.checkout-confirm-line {
  background: var(--accent);
}

.checkout-delete-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  padding: 0 8px;
}

.checkout-delete-confirm input {
  accent-color: var(--accent);
}

.checkout-removed-pill {
  border-radius: 999px;
  background: #e5e7eb;
  color: #4b5563;
  font-size: 11px;
  font-weight: 950;
  padding: 5px 8px;
}

.checkout-restore-line {
  min-height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  padding: 0 10px;
}

.checkout-restore-line:hover,
.checkout-restore-line:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

.checkout-line-lock {
  border-radius: 999px;
  background: #f1fbf8;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  padding: 5px 8px;
}

.checkout-cart-desc {
  min-width: 0;
}

.checkout-cart-desc div {
  display: grid;
  gap: 3px;
}

.checkout-open-description {
  display: grid;
  gap: 4px;
  position: relative;
}

.checkout-open-description span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-open-description input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  padding: 7px 9px;
}

.checkout-open-description-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: center;
}

.checkout-save-description {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  color: var(--accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.checkout-save-description svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checkout-open-description-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  left: 0;
  right: 40px;
  display: none;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(28, 32, 36, 0.14);
  padding: 4px;
}

.checkout-open-description:focus-within .checkout-open-description-menu,
.checkout-open-description:hover .checkout-open-description-menu {
  display: grid;
}

.checkout-open-description-menu button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 7px 8px;
  text-align: left;
}

.checkout-open-description-menu button:hover,
.checkout-open-description-menu button:focus-visible {
  background: #f1fbf8;
  color: var(--accent);
  outline: 0;
}

.checkout-cart-desc strong,
.checkout-cart-number {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.checkout-cart-row > .checkout-cart-number {
  justify-self: stretch;
  text-align: right;
}

.checkout-cart-desc span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-pending-note {
  color: #9a3412;
  font-size: 11px;
  font-weight: 950;
}

.checkout-cart-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  padding: 8px 10px;
  text-align: right;
}

.checkout-groomer-field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  padding: 8px 10px;
}

.checkout-quantity-field {
  display: grid;
  gap: 6px;
}

.checkout-grooming-duration {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}

.checkout-grooming-duration > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-grooming-duration label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.checkout-grooming-duration input {
  min-height: 30px;
  padding: 5px 6px;
}

.checkout-cart-row.is-credit,
.checkout-cart-total-row.is-credit {
  background: #f1fbf8;
  color: var(--accent);
}

.checkout-cart-row.is-pending {
  background: #fff7d6;
  box-shadow: inset 4px 0 #d97706;
}

.checkout-cart-row.is-removed {
  background: #f3f4f6;
  box-shadow: inset 4px 0 #9ca3af;
  color: #6b7280;
}

.checkout-cart-row.is-removed .checkout-cart-desc strong,
.checkout-cart-row.is-removed .checkout-cart-number {
  color: #6b7280;
  text-decoration: line-through;
}

.checkout-cart-total-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 12px;
  align-items: center;
  min-width: 910px;
  padding: 5px 12px;
}

.checkout-cart-total-row span,
.checkout-cart-total-row strong {
  justify-self: end;
}

.checkout-cart-total-row.is-total {
  border-top: 2px solid var(--line);
  background: #f8f7f2;
  font-size: 20px;
  font-weight: 950;
}

.checkout-total-summary {
  display: grid;
  gap: 5px;
  min-width: 0;
  justify-self: stretch;
}

.checkout-total-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
}

.checkout-total-summary-row span,
.checkout-total-summary-row strong {
  justify-self: start;
  font-size: 13px;
}

.checkout-total-summary-row span {
  overflow: hidden;
  color: var(--muted);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-total-summary-row b {
  color: var(--ink);
}

.checkout-total-due-amount {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.checkout-total-due-amount span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.checkout-note-stack,
.checkout-dog-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.checkout-note-stack h3 {
  margin: 0;
  color: var(--accent);
  font-size: 15px;
  font-weight: 950;
}

.checkout-dog-note,
.checkout-dog-row {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 10px;
}

.checkout-dog-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.checkout-dog-main,
.checkout-dog-money,
.checkout-dog-note {
  min-width: 0;
}

.checkout-dog-main span,
.checkout-dog-note span,
.checkout-dog-money span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.checkout-dog-money {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.checkout-dog-money strong {
  font-size: 18px;
}

.checkout-cart-actions {
  position: sticky;
  bottom: -12px;
  margin: 10px -12px -12px;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 8px 12px 12px;
}

.checkout-cart-submit-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.checkout-print-invoice-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.checkout-print-invoice-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.checkout-cart-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.checkout-payment-panel button,
.checkout-cart-actions button {
  touch-action: manipulation;
}

.checkout-payment-panel {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  border: 1px solid #b8d9d0;
  border-radius: 8px;
  background: #f7fcfa;
  padding: 8px;
}

.checkout-adjustment-tools {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.checkout-card-file-panel {
  border-color: #ded6c7;
  background: #fffdfa;
}

.checkout-terminal-panel {
  border-color: #c7d8ee;
  background: #f8fbff;
}

.checkout-card-terminal-panel {
  border-color: #b8d9d0;
  background: #f7fcfa;
}

.checkout-card-terminal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px;
}

.checkout-card-terminal-panel.is-pos-guest .checkout-card-terminal-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.checkout-card-terminal-grid > .checkout-payment-panel {
  margin-top: 0;
  min-height: 0;
}

.checkout-card-terminal-grid > .checkout-payment-panel:not(.checkout-card-file-panel):not(.checkout-terminal-panel) {
  border-color: #b8d9d0;
  background: #f7fcfa;
}

.checkout-card-terminal-grid .checkout-payment-head {
  align-items: flex-start;
}

.checkout-card-terminal-grid .checkout-payment-head strong {
  font-size: 14px;
}

.checkout-card-terminal-grid .checkout-manual-card-charge {
  grid-template-columns: 1fr;
}

.checkout-card-terminal-grid .checkout-manual-card-charge .primary-button,
.checkout-card-terminal-grid .checkout-payment-head > .secondary-button {
  width: 100%;
}

.checkout-split-panel {
  border-color: #cfe3dc;
  background: #fbfefc;
}

.checkout-bottom-tools .checkout-split-panel {
  grid-template-columns: minmax(170px, 0.36fr) minmax(0, 0.64fr);
  align-items: start;
}

.checkout-bottom-tools .checkout-split-panel.is-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.checkout-bottom-tools .checkout-split-panel > .checkout-payment-message {
  grid-column: 1 / -1;
}

.checkout-tip-panel {
  align-content: start;
  border-color: #c7d8ee;
  background: #f8fbff;
}

.checkout-package-panel {
  border-color: #bedecd;
  background: #f4fbf4;
}

.checkout-package-panel:not(.is-active) {
  border-color: #ded6c7;
  background: #fffdfa;
}

.checkout-store-credit-panel {
  border-color: #d7c477;
  background: #fffbed;
}

.checkout-store-credit-panel.is-active {
  border-color: #c6ad43;
  background: #fff8dc;
}

.checkout-package-summary,
.checkout-store-credit-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(20, 116, 89, 0.16);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  color: var(--accent);
  font-weight: 950;
}

.checkout-store-credit-summary {
  display: grid;
  gap: 3px;
  color: var(--ink);
}

.checkout-store-credit-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.checkout-store-credit-summary strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.checkout-store-credit-grid {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}

.checkout-package-summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-payment-head,
.checkout-payment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.checkout-payment-head-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.checkout-payment-head-actions .secondary-button {
  min-height: 32px;
  padding: 0 10px;
}

.checkout-payment-head div {
  display: grid;
  gap: 2px;
}

.checkout-payment-head .checkout-payment-head-actions {
  display: flex;
  gap: 6px;
}

.checkout-payment-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-payment-head strong {
  color: var(--accent);
  font-size: 19px;
  font-weight: 950;
}

.checkout-bottom-tools .checkout-payment-head strong {
  font-size: 17px;
}

.checkout-tip-panel .checkout-payment-head strong {
  color: var(--muted);
  font-size: 13px;
}

.checkout-split-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.checkout-split-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.checkout-split-panel .checkout-cart-toggle {
  border-color: #bfd9d1;
  background: #fff;
  color: var(--accent);
}

.checkout-split-panel .checkout-cart-toggle:hover,
.checkout-split-panel .checkout-cart-toggle:focus-visible {
  background: #f7fbf8;
}

.checkout-split-actions .secondary-button,
.checkout-payment-head > .secondary-button {
  min-height: 32px;
  padding: 0 10px;
}

.checkout-split-grid {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}

.checkout-cash-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.checkout-cash-field input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  padding: 7px 9px;
}

.checkout-split-summary {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(117, 93, 40, 0.14);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}

.checkout-split-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.checkout-split-summary strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.checkout-split-collapsed-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(117, 93, 40, 0.14);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}

.checkout-split-collapsed-summary span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-split-collapsed-summary strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.checkout-stripe-element {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.checkout-card-payment-list,
.checkout-manual-card-charge {
  display: grid;
  gap: 8px;
}

.checkout-manual-card-charge {
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  align-items: end;
}

.checkout-card-payment-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(20, 116, 89, 0.16);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.checkout-card-payment-list strong {
  color: var(--accent);
  font-size: 14px;
  font-weight: 950;
}

.checkout-saved-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.checkout-saved-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.checkout-saved-card-charge {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.checkout-saved-card-charge input,
.checkout-manual-card-charge input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  padding: 8px 10px;
}

.checkout-save-card-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
}

.checkout-save-card-option input {
  width: 16px;
  min-height: 0;
  height: 16px;
  accent-color: var(--accent);
}

.checkout-terminal-save-card-option {
  align-items: flex-start;
  line-height: 1.2;
}

.checkout-terminal-save-card-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkout-saved-card-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.checkout-saved-card-actions > button {
  min-width: 0;
}

.checkout-saved-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #ecf7f3;
  color: var(--accent);
}

.checkout-saved-card-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.checkout-saved-card strong,
.checkout-saved-card small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkout-saved-card strong {
  color: var(--ink);
  font-weight: 950;
}

.checkout-saved-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.checkout-terminal-select {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.checkout-terminal-select select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  padding: 8px 10px;
}

.checkout-terminal-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.checkout-terminal-actions button {
  min-width: 0;
  min-height: 40px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.checkout-terminal-actions .secondary-button:not(:disabled) {
  border-color: #207d68;
  background: #207d68;
  color: #fff;
}

.checkout-terminal-actions .secondary-button:not(:disabled):hover,
.checkout-terminal-actions .secondary-button:not(:disabled):focus-visible {
  border-color: #176653;
  background: #176653;
}

.checkout-terminal-reader {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  padding: 10px;
}

.checkout-terminal-reader.is-active {
  border-color: #9cc8bb;
  background: #f7fcfa;
}

.checkout-terminal-reader > svg,
.checkout-terminal-reader > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #ecf7f3;
}

.checkout-terminal-reader strong,
.checkout-terminal-reader small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkout-terminal-reader strong {
  color: var(--ink);
  font-weight: 950;
}

.checkout-terminal-reader small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.checkout-card-setup-form {
  display: grid;
  gap: 10px;
}

.checkout-terminal-card-setup {
  display: grid;
  gap: 8px;
}

.checkout-card-setup-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.checkout-card-setup-form input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  padding: 8px 10px;
}

.checkout-payment-message {
  border: 1px solid #b8d9d0;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  padding: 10px;
}

.checkout-payment-message.is-error {
  border-color: #fecaca;
  background: #fff1f2;
  color: #991b1b;
}

.checkout-payment-locked {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.checkout-duplicate-overlay {
  z-index: 80;
}

.checkout-duplicate-panel {
  width: min(760px, calc(100vw - 32px));
}

.checkout-duplicate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.checkout-duplicate-grid article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 12px;
}

.checkout-duplicate-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-duplicate-grid strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.checkout-duplicate-grid p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.checkout-duplicate-grid b {
  color: var(--accent);
  font-size: 22px;
  font-weight: 950;
}

.checkout-duplicate-note {
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fff7d6;
  color: #7c2d12;
  font-size: 13px;
  font-weight: 900;
  margin: 12px 0 0;
  padding: 10px 12px;
}

.trial-conversion-panel {
  width: min(940px, calc(100vw - 32px));
  max-height: min(900px, calc(100dvh - 32px));
}

.trial-conversion-panel [hidden] {
  display: none !important;
}

.trial-conversion-panel .checkin-head {
  grid-template-columns: 160px minmax(0, 1fr) auto;
}

.tour-editor-panel .checkin-head {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-height: 86px;
  padding-right: 104px;
}

.tour-editor-panel .checkin-head > div:first-child {
  min-width: 0;
  max-width: 100%;
}

.tour-editor-panel .checkin-head h2 {
  max-width: 100%;
  margin: 2px 0 4px;
  font-size: clamp(42px, 4.2vw, 58px);
  line-height: 0.92;
  overflow-wrap: normal;
  word-break: normal;
}

.tour-editor-panel .checkin-head p:not(.eyebrow) {
  max-width: 100%;
  font-size: 18px;
  line-height: 1.08;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tour-editor-panel .trial-no-show-button {
  position: absolute;
  top: 14px;
  right: 58px;
}

.trial-photo-stack {
  display: grid;
  grid-template-columns: repeat(2, 76px);
  gap: 8px;
  align-self: start;
}

.trial-avatar {
  display: grid;
  place-items: center;
  position: relative;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 1px solid #cde5df;
  border-radius: 10px;
  background: #ecf5f2;
  color: var(--accent);
  cursor: pointer;
  font-size: 38px;
  font-weight: 850;
}

.trial-avatar input {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
}

.trial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trial-avatar-plus {
  display: grid;
  place-items: center;
  position: relative;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
}

.trial-avatar-kind-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #9dcfc5;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
}

.trial-avatar-kind-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trial-avatar-add-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.trial-avatar small {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
  padding: 2px 3px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trial-head-actions {
  display: flex;
  align-self: start;
  justify-self: end;
  gap: 8px;
}

.trial-no-show-button,
.trial-convert-button {
  justify-self: end;
  align-self: start;
}

.trial-no-show-button {
  background: #fff7ed;
  color: #c2410c;
}

.trial-head-actions .round-action:hover::after,
.trial-head-actions .round-action:focus-visible::after {
  top: calc(100% + 8px);
  right: 0;
  bottom: auto;
  left: auto;
  transform: none;
  width: 220px;
  text-align: left;
  white-space: normal;
  z-index: 5;
}

.trial-head-actions .round-action:hover::before,
.trial-head-actions .round-action:focus-visible::before {
  top: calc(100% + 3px);
  right: 14px;
  bottom: auto;
  left: auto;
  transform: none;
  border-top-color: transparent;
  border-bottom-color: #111827;
  z-index: 6;
}

.trial-no-show-button svg {
  width: 24px;
  height: 24px;
}

.trial-convert-button svg {
  width: 24px;
  height: 24px;
}

.trial-conversion-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.trial-owner-section {
  border-color: #cfe5df;
  background: #f8fbfa;
}

.trial-dog-section {
  border-color: #ead7b5;
  background: #fffaf0;
}

.trial-vaccine-section {
  border-color: #bfd8ef;
  background: #f7fbff;
}

.trial-vaccine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.trial-vaccine-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.trial-vaccine-actions .secondary-button,
.trial-vaccine-upload-button {
  min-height: 34px;
  border-radius: 8px;
  font-size: 12px;
  padding: 0 10px;
}

.trial-vaccine-status {
  display: grid;
  grid-template-columns: 30px minmax(110px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid #f0cfcf;
  border-radius: 8px;
  background: #fff7f7;
  color: #7f1d1d;
  padding: 9px 10px;
}

.trial-vaccine-status.is-ok {
  border-color: #bfe2d2;
  background: #f1fbf5;
  color: #0f6b4b;
}

.trial-vaccine-status svg {
  width: 22px;
  height: 22px;
}

.trial-vaccine-status strong {
  font-size: 13px;
  font-weight: 950;
}

.trial-vaccine-status span {
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: none;
}

.trial-vaccine-doc-list,
.trial-vaccine-mini-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.trial-vaccine-progress {
  display: grid;
  place-items: center;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.trial-vaccine-progress .vaccine-progress {
  width: min(520px, 100%);
  padding: 14px;
}

.trial-vaccine-grid-head,
.trial-vaccine-edit-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.35fr) minmax(145px, 0.9fr) 76px 68px;
  align-items: center;
  gap: 8px;
}

.trial-vaccine-grid-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.trial-vaccine-edit-list {
  display: grid;
  gap: 8px;
}

.trial-vaccine-edit-row {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.trial-vaccine-edit-row > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.trial-vaccine-edit-row strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trial-vaccine-edit-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: none;
}

.trial-vaccine-edit-row input[type="date"] {
  width: 100%;
}

.trial-vaccine-edit-row.is-current {
  border-color: #bfe2d2;
}

.trial-vaccine-edit-row.is-critical,
.trial-vaccine-edit-row.is-expired {
  border-color: #fecaca;
  background: #fff7f7;
}

.trial-vaccine-edit-row.is-expiring {
  border-color: #f4c36d;
  background: #fffbeb;
}

.trial-vaccine-edit-row.is-missing,
.trial-vaccine-edit-row.is-review,
.trial-vaccine-edit-row.is-file-missing {
  border-color: #d7c4ef;
  background: #fbf8ff;
}

.trial-vaccine-edit-row span.is-expired,
.trial-vaccine-edit-row span.is-missing,
.trial-vaccine-edit-row span.is-review,
.trial-vaccine-edit-row span.is-file-missing {
  color: #a32020;
}

.trial-vaccine-edit-row span.is-expiring {
  color: #a35a00;
}

.trial-vaccine-edit-row span.is-exempt,
.trial-vaccine-edit-row span.is-age-deferred {
  color: #137451;
}

.trial-vaccine-doc,
.trial-vaccine-empty,
.trial-vaccine-mini-list > div {
  display: grid;
  gap: 3px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.trial-vaccine-doc.needs-review {
  border-color: #f4c36d;
  box-shadow: inset 4px 0 0 #d97706;
}

.trial-vaccine-doc strong,
.trial-vaccine-mini-list strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trial-vaccine-doc span,
.trial-vaccine-doc small,
.trial-vaccine-empty,
.trial-vaccine-mini-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: none;
}

.trial-vaccine-doc a,
.calendar-tour-vaccine-files a {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.calendar-tour-vaccine-files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
  color: #5d5747;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}

.calendar-tour-vaccine-files span {
  border: 1px solid #d8d2c0;
  border-radius: 999px;
  background: #f7f3e8;
  padding: 3px 7px;
}

.calendar-tour-vaccine-files.has-files span {
  border-color: #bfe2d2;
  background: #f0fbf8;
  color: #137451;
}

.calendar-tour-vaccine-files.is-missing span {
  border-color: #f4c36d;
  background: #fffbeb;
  color: #8a4b00;
}

.trial-vaccine-mini-list > div.is-current {
  border-color: #bfe2d2;
}

.trial-vaccine-mini-list > div.is-critical,
.trial-vaccine-mini-list > div.is-expired {
  border-color: #fecaca;
  background: #fff7f7;
}

.trial-vaccine-mini-list > div.is-expiring {
  border-color: #f4c36d;
  background: #fffbeb;
}

.trial-vaccine-mini-list > div.is-missing,
.trial-vaccine-mini-list > div.is-review,
.trial-vaccine-mini-list > div.is-file-missing {
  border-color: #d7c4ef;
  background: #fbf8ff;
}

.trial-vaccine-mini-list span.is-expired,
.trial-vaccine-mini-list span.is-missing,
.trial-vaccine-mini-list span.is-review,
.trial-vaccine-mini-list span.is-file-missing {
  color: #a32020;
}

.trial-vaccine-mini-list span.is-expiring {
  color: #a35a00;
}

.trial-vaccine-mini-list span.is-exempt,
.trial-vaccine-mini-list span.is-age-deferred {
  color: #137451;
}

.trial-conversion-section h3 {
  margin: 0;
  color: var(--accent);
  font-size: 16px;
  font-weight: 950;
}

.trial-conversion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.trial-conversion-grid > * {
  min-width: 0;
  max-width: 100%;
}

.tour-editor-panel .trial-conversion-grid input[type="date"],
.tour-editor-panel .trial-conversion-grid input[type="time"] {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.trial-conversion-grid .is-wide {
  grid-column: 1 / -1;
}

.trial-conversion-section textarea {
  min-height: 92px;
  resize: vertical;
}

.trial-confirm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 900;
}

.trial-confirm-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.trial-confirm-row span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  text-transform: none;
}

.checkin-confirm-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.checkin-confirm-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.trial-inline-check {
  align-self: end;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.trial-location-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.trial-location-option {
  --trial-status-color: #9a6b00;
  display: grid;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 10px;
}

.trial-location-option.is-approved {
  --trial-status-color: #168a63;
  border-color: #168a63;
  background: #eaf8f0;
  box-shadow: inset 4px 0 0 #168a63;
}

.trial-location-option.is-failed {
  --trial-status-color: #dc2626;
  border-color: #dc2626;
  background: #fff1f2;
  color: #991b1b;
  box-shadow: inset 4px 0 0 #dc2626;
}

.trial-location-option strong,
.trial-location-option small {
  display: block;
}

.trial-location-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.trial-location-option.is-approved small {
  color: #137451;
  font-weight: 950;
}

.trial-location-option.is-failed small {
  color: #991b1b;
  font-weight: 950;
}

.trial-location-statuses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 2px;
}

.trial-location-statuses.is-cycle {
  display: flex;
  overflow: visible;
  border: 0;
  background: transparent;
  padding: 0;
}

.trial-location-cycle {
  min-width: 116px;
}

.trial-location-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 950;
  padding: 5px 8px;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.trial-location-status input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.trial-location-status span {
  position: relative;
  z-index: 1;
}

.trial-location-status.is-active {
  background: var(--trial-status-color);
  color: #fff;
}

.trial-location-status.is-failed:not(.is-active) {
  color: #991b1b;
}

.trial-location-status:hover,
.trial-location-status:focus-within {
  box-shadow: 0 0 0 3px rgba(18, 109, 95, 0.12);
}

.trial-care-block {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 10px;
}

.trial-care-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.trial-care-head strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.trial-care-rows {
  display: grid;
  gap: 8px;
}

.trial-care-block {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.trial-care-block .pet-card-head {
  margin-bottom: 0;
}

.trial-care-block .pet-card-head h3 {
  color: var(--ink);
}

.trial-care-table {
  overflow-x: auto;
}

.trial-care-table-row {
  display: contents;
}

.trial-care-table-row > span {
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px;
}

.trial-care-table input,
.trial-care-table select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 8px;
}

.trial-care-action-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.trial-care-empty {
  justify-content: flex-start;
}

.trial-care-row {
  display: grid;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.trial-care-row-feeding {
  grid-template-columns: repeat(3, minmax(92px, 1fr)) repeat(4, minmax(120px, 1fr)) 34px;
}

.trial-care-row-medication {
  grid-template-columns: repeat(3, minmax(92px, 1fr)) repeat(2, minmax(150px, 1fr)) 34px;
}

.trial-care-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.trial-care-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.trial-care-row input,
.trial-care-row select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 8px;
}

.trial-care-remove {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #fff4f1;
  color: #d84532;
  font-size: 20px;
  line-height: 1;
}

.trial-option-block {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 10px;
}

.trial-option-block > strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.trial-service-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.trial-service-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  padding: 8px 10px;
}

.trial-conversion-section .trial-service-option span {
  color: var(--ink);
  font-size: 13px;
  text-transform: none;
}

.trial-addon-picker {
  display: grid;
  gap: 8px;
}

.trial-addon-picker .trial-service-options {
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.trial-service-option.addon-choice-row {
  align-items: flex-start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.trial-addon-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.trial-service-option.addon-choice-row span,
.trial-addon-check span {
  display: grid;
  gap: 3px;
}

.trial-conversion-section .trial-addon-check > span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-transform: none;
}

.trial-conversion-section .trial-addon-check small,
.trial-conversion-section .addon-date-option span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
}

.trial-conversion-section .addon-date-option {
  display: inline-flex;
  gap: 5px;
}

.trial-addon-schedule {
  grid-template-columns: minmax(0, 1fr) 126px;
  margin-left: 0;
  min-width: 0;
  width: 100%;
}

.trial-service-option input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.trial-grooming-timing {
  display: grid;
  gap: 8px;
}

.message-body-box textarea,
.message-reply-box .message-body-box textarea {
  padding-right: 220px;
}

.message-menu-wrap {
  position: relative;
  display: inline-grid;
}

.message-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  display: grid;
  gap: 6px;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.16);
  padding: 8px;
}

.text-message-emoji-menu {
  grid-template-columns: repeat(4, 34px);
  min-width: 0;
}

.text-message-emoji-menu button,
.message-standard-menu button {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 0;
}

.text-message-emoji-menu button {
  width: 34px;
  height: 34px;
  font-size: 17px;
}

.message-standard-menu button {
  grid-template-columns: 28px minmax(0, 1fr);
  justify-items: start;
  width: 100%;
  gap: 8px;
  padding: 7px 8px;
  text-align: left;
}

.message-standard-menu strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 950;
}

.text-message-emoji-menu button:hover,
.text-message-emoji-menu button:focus-visible,
.message-standard-menu button:hover,
.message-standard-menu button:focus-visible,
.message-icon-button[data-message-assist]:hover,
.message-icon-button[data-message-assist]:focus-visible {
  border-color: #9dcfc5;
  background: #f1fbf8;
  color: var(--accent);
}

.message-icon-button[data-message-assist] {
  font-size: 12px;
  font-weight: 950;
}

.message-thread-back {
  display: none;
  justify-self: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 950;
}

.message-owner-avatar.is-empty,
.message-thread-avatar.is-empty {
  display: block;
  width: 54px;
  min-width: 54px;
  height: 54px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.message-thread-avatar.is-empty {
  width: 42px;
  min-width: 42px;
  height: 42px;
}

.message-template-settings {
  display: grid;
  gap: 12px;
}

.message-template-list {
  display: grid;
  gap: 8px;
}

.message-template-row {
  display: grid;
  grid-template-columns: 72px 180px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.message-template-row label {
  display: grid;
  gap: 4px;
}

.message-template-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.message-template-row input,
.message-template-row textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  padding: 9px 10px;
}

@media (max-width: 760px) {
  .message-board {
    min-height: 0;
  }

  .message-board.has-message-banner {
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  .message-board.has-composer {
    min-height: 0;
  }

  .message-board.has-composer.has-message-banner {
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
  }

  .message-shell {
    display: grid;
    grid-template-columns: 1fr;
  }

  .message-board:not(.is-thread-open) .message-thread-panel,
  .message-board.is-thread-open .message-thread-list {
    display: none;
  }

  .message-thread-back {
    display: inline-grid;
  }

  .message-thread-panel header {
    gap: 8px;
  }

  .message-body-tools {
    right: 7px;
    bottom: 7px;
    gap: 5px;
  }

  .message-icon-button,
  .message-send-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .message-body-box textarea,
  .message-reply-box .message-body-box textarea {
    padding-right: 184px;
    padding-bottom: 48px;
  }

  /* On phones the tools bar reserves ~48px of bottom padding; with the base
     72px min-height that left only a sliver of one line visible in the reply
     box ("six words at a time" on iPhone). Give the reply textarea a taller
     floor so several lines show, and let it grow to a fraction of the viewport. */
  .message-body-box.is-reply textarea,
  .message-reply-box .message-body-box.is-reply textarea {
    min-height: 140px;
    max-height: 45vh;
  }

  .message-media-pill {
    max-width: min(128px, calc(100vw - 206px));
  }

  .message-template-row {
    grid-template-columns: 58px minmax(0, 1fr) 38px;
  }

  .message-template-text {
    grid-column: 1 / -1;
  }
}

.pet-photo-panel {
  display: grid;
  gap: 8px;
  align-self: start;
  min-width: 0;
}

.pet-photo-open-button {
  display: grid;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  padding: 0;
  text-align: center;
}

.pet-photo-open-button:hover .pet-detail-photo,
.pet-photo-open-button:focus-visible .pet-detail-photo {
  box-shadow: 0 0 0 4px rgba(18, 109, 95, 0.16);
  outline: none;
}

.photo-upload-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 38px;
  cursor: pointer;
  padding: 0 12px;
}

.photo-upload-action input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.photo-camera-action {
  display: none;
}

@media (pointer: coarse) {
  .photo-camera-action {
    display: inline-flex;
  }
}

.trial-profile-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.trial-profile-list article {
  --trial-status-color: #9a6b00;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #f2d067;
  border-radius: 8px;
  background: #fff9dc;
  color: #6f4b00;
  padding: 10px;
}

.trial-profile-list article.is-approved {
  --trial-status-color: var(--accent);
  border-color: #9dcfc5;
  background: #f1fbf8;
  color: var(--accent);
}

.trial-profile-list article.is-failed {
  --trial-status-color: #dc2626;
  border-color: #fecaca;
  background: #fff1f2;
  color: #991b1b;
}

.trial-profile-list strong,
.trial-profile-list span,
.trial-profile-list small {
  display: block;
}

.trial-profile-list strong {
  color: var(--ink);
  font-weight: 950;
}

.trial-profile-list span,
.trial-profile-list small {
  font-size: 12px;
  font-weight: 800;
}

.trial-status-control {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
  gap: 6px;
  min-width: 0;
}

.trial-approval-toggle,
.trial-status-action {
  min-width: 72px;
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid currentColor;
  background: #fff;
  color: var(--trial-status-color);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  padding: 5px 9px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.trial-approval-toggle.is-approved,
.trial-approval-toggle.is-unapproved,
.trial-approval-toggle.is-failed,
.trial-status-action.is-active {
  border-color: var(--trial-status-color);
  background: var(--trial-status-color);
  color: #fff;
  box-shadow: none;
}

.trial-status-action.is-approved {
  --trial-status-color: var(--accent);
}

.trial-status-action.is-failed {
  --trial-status-color: #dc2626;
}

.trial-status-action.is-unapproved {
  --trial-status-color: #9a6b00;
}

.trial-approval-toggle:hover,
.trial-approval-toggle:focus-visible,
.trial-status-action:hover,
.trial-status-action:focus-visible {
  box-shadow: 0 0 0 3px rgba(18, 109, 95, 0.14);
  outline: none;
}

.trial-status-action:disabled {
  cursor: default;
  opacity: 0.72;
}

/* Tighter Tour & Trial body — the EXPANDED card uses the original
   text buttons (Approved / Fail / Untested) per location. The collapse
   head summary uses the icon row below, not these buttons.

   Article = title block | status buttons (2-col grid). On narrow
   widths (one column on iPhone, or the half-width pet-card-pair on
   iPad Pro 13" portrait) the buttons must wrap onto their own row so
   the title text isn't squeezed out of the card. */
.trial-profile-card.pet-card {
  gap: 6px;
  padding: 10px 14px;
  min-width: 0;
}
.trial-profile-list {
  gap: 6px;
  min-width: 0;
}
.trial-profile-list article {
  padding: 6px 10px;
  min-width: 0;
  /* `auto` lets the right column ask for its natural width; if that
     plus the title overflows the card, the row wraps via the media
     query below. */
  grid-template-columns: minmax(0, 1fr) auto;
}
.trial-profile-list article > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.trial-profile-list article strong,
.trial-profile-list article span,
.trial-profile-list article small {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Status-button row: keep the wrap behavior (already present on
   .trial-status-control) and stop pushing the row past the card edge
   with `justify-self: end`. Let it stretch to fill the cell on narrow
   widths so the buttons can wrap naturally. */
.trial-profile-list article .trial-status-control {
  min-width: 0;
  justify-self: stretch;
  justify-content: flex-end;
}

/* Below ~640 px (iPhone Pro AND the iPad-Pro-13"-portrait half-column
   case) drop to a single-column article so the buttons drop onto
   their own row below the title — never overflowing the card. */
@media (max-width: 640px) {
  .trial-profile-list article {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .trial-profile-list article .trial-status-control {
    justify-self: stretch;
    justify-content: flex-start;
  }
}
/* Even when the pet-detail grid is showing 2 columns at >860px, each
   card is only ~320px wide on iPad Pro portrait. If the .trial card
   ends up in such a narrow cell, force the article to stack so the
   long location names don't overflow. Triggered by container queries
   on supporting browsers; the media-query above already covers
   non-container-query fallbacks. */
@supports (container-type: inline-size) {
  .trial-profile-card.pet-card { container-type: inline-size; }
  @container (max-width: 380px) {
    .trial-profile-list article {
      grid-template-columns: 1fr;
      gap: 6px;
    }
    .trial-profile-list article .trial-status-control {
      justify-self: stretch;
      justify-content: flex-start;
    }
  }
}

/* Match the same compact treatment for the Details card so it doesn't
   leave a wide whitespace gutter below the Save Details row. */
.pet-edit-card.pet-card {
  gap: 6px;
  padding: 10px 14px;
}
.pet-edit-card .pet-form-actions {
  margin-top: 2px;
}

/* COLLAPSED-head summary: one chip per location with name + status icon
   inline. Color is driven by the current status. Uses `display: inline`
   (not inline-flex) so the parent `.pet-card-head-summary`'s
   text-overflow: ellipsis still works when the row is too narrow to
   fit every location — overflowing text gets clipped with "..." rather
   than spilling past the card edge.

   Three label variants are emitted per location — the CSS rules below
   pick whichever one fits the current card width. */
.pet-card-head-summary .trial-summary-loc {
  display: inline;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: 0;
}
/* By default show the full name; hide first-word and initials. */
.pet-card-head-summary .trial-summary-label.is-full { display: inline; }
.pet-card-head-summary .trial-summary-label.is-first { display: none; }
.pet-card-head-summary .trial-summary-label.is-init { display: none; }
/* Container-query-based swap: as the trial card gets narrower in the
   pet-detail grid (e.g. iPad Pro 13" portrait, half-grid cell), drop
   the full name in favor of the first word, then in favor of
   initials. */
@supports (container-type: inline-size) {
  /* Card narrower than ~520px (iPad Pro 13" portrait half-grid is
     ~345px, iPhone Pro is ~390px) drops to first-word labels. */
  @container (max-width: 520px) {
    .pet-card-head-summary .trial-summary-label.is-full { display: none; }
    .pet-card-head-summary .trial-summary-label.is-first { display: inline; }
  }
  /* Card narrower than ~400px (most half-grid cases on tablet) drops
     to initials only — "P / LP / WB". */
  @container (max-width: 400px) {
    .pet-card-head-summary .trial-summary-label.is-first { display: none; }
    .pet-card-head-summary .trial-summary-label.is-init { display: inline; }
  }
}
/* Media-query fallback for browsers without container queries. */
@media (max-width: 900px) {
  .pet-card-head-summary .trial-summary-label.is-full { display: none; }
  .pet-card-head-summary .trial-summary-label.is-first { display: inline; }
}
@media (max-width: 540px) {
  .pet-card-head-summary .trial-summary-label.is-first { display: none; }
  .pet-card-head-summary .trial-summary-label.is-init { display: inline; }
}
.pet-card-head-summary .trial-summary-loc.is-approved {
  color: #15803d;
}
.pet-card-head-summary .trial-summary-loc.is-unapproved {
  color: #a16207;
}
.pet-card-head-summary .trial-summary-loc.is-failed {
  color: #b91c1c;
}
.pet-card-head-summary .trial-summary-loc > b {
  font-weight: 900;
}
.pet-card-head-summary .trial-summary-sep {
  margin: 0 6px;
  color: var(--muted);
  font-weight: 700;
}

.trial-profile-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .trial-profile-list article {
    grid-template-columns: 1fr;
  }

  .trial-status-control {
    justify-self: stretch;
    min-width: 0;
  }
}

.weight-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.weight-history-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 42px;
  min-height: 26px;
  border: 1px solid #d8d5cc;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  padding: 3px 8px;
}

.weight-history-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.weight-label.is-weight-alert {
  border: 1px solid #f2d067;
  border-radius: 8px;
  background: #fff9dc;
  padding: 8px;
}

.weight-label.is-weight-alert input {
  border-color: #d7a647;
  background: #fffdf1;
}

.weight-alert-message {
  color: #7a4b00;
  font-size: 12px;
  font-weight: 900;
}

.weight-history-modal {
  width: min(560px, 96vw);
}

.weight-history-summary {
  display: grid;
  gap: 4px;
  border: 1px solid #d8d5cc;
  border-radius: 8px;
  background: #f8f7f2;
  padding: 12px;
}

.weight-history-summary.is-alert {
  border-color: #f2d067;
  background: #fff9dc;
  color: #6f4b00;
}

.weight-history-summary strong {
  color: var(--ink);
  font-size: 24px;
  font-weight: 950;
}

.weight-history-summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.photo-history-modal {
  width: min(900px, 96vw);
}

.photo-history-viewer {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
}

.photo-history-viewer button {
  width: 44px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  color: var(--ink);
  cursor: pointer;
  font-size: 36px;
}

.photo-history-viewer button:disabled {
  cursor: default;
  opacity: 0.35;
}

.photo-history-viewer figure {
  display: grid;
  place-items: center;
  min-height: 320px;
  max-height: 62dvh;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
}

.photo-history-viewer img {
  width: 100%;
  height: 100%;
  max-height: 62dvh;
  object-fit: contain;
}

.photo-history-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.photo-history-meta strong {
  color: var(--ink);
}

.photo-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.photo-history-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.photo-history-strip button {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #ebe8df;
  padding: 0;
}

.photo-history-strip button.is-active {
  border-color: var(--accent);
}

.photo-history-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 960px) {
  .checkout-cart-panel,
  .trial-conversion-panel {
    width: min(100%, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
  }

  .checkout-cart-top,
  .checkout-pickup-row,
  .checkout-time-row,
  .checkout-time-fields,
  .checkout-reservation-details-panel .checkout-time-fields,
  .checkout-detail-body,
  .checkout-service-form-grid,
  .checkout-tools-section,
  .checkout-payment-grid,
  .checkout-card-terminal-grid,
  .checkout-bottom-tools .checkout-split-panel,
  .checkout-split-grid,
  .checkout-store-credit-grid,
  .checkout-manual-card-charge,
  .checkout-quick-fields,
  .trial-conversion-grid,
  .trial-care-row-feeding,
  .trial-care-row-medication {
    grid-template-columns: 1fr;
  }

  .trial-vaccine-status {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .trial-vaccine-status span {
    grid-column: 2;
  }

  .trial-vaccine-head,
  .trial-vaccine-actions {
    align-items: stretch;
  }

  .trial-vaccine-actions {
    justify-content: flex-start;
  }

  .trial-vaccine-grid-head {
    display: none;
  }

  .trial-vaccine-edit-row {
    grid-template-columns: minmax(0, 1fr) 120px 46px 46px;
  }

  .checkout-detail-section,
  .checkout-time-row,
  .checkout-time-fields {
    min-width: 0;
    max-width: 100%;
  }

  .checkout-terminal-actions {
    grid-template-columns: 1fr;
  }

  .checkout-total-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .grooming-pricing-head,
  .grooming-pricing-row {
    grid-template-columns: 1fr;
  }

  .grooming-pricing-head {
    display: grid;
  }
}

@media (max-width: 640px) {
  .checkout-cart-panel,
  .trial-conversion-panel {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .checkout-cart-head,
  .checkin-head {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
  }

  .trial-conversion-panel .checkin-head {
    grid-template-columns: 124px minmax(0, 1fr);
  }

  .tour-editor-panel .checkin-head {
    grid-template-columns: minmax(0, 1fr);
    min-height: 64px;
    padding-right: 86px;
  }

  .tour-editor-panel .checkin-head h2 {
    font-size: clamp(30px, 9vw, 38px);
    line-height: 0.95;
  }

  .tour-editor-panel .checkin-head p:not(.eyebrow) {
    font-size: 13px;
    line-height: 1.12;
  }

  .tour-editor-panel .trial-no-show-button {
    top: 10px;
    right: 50px;
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .tour-editor-panel .checkin-close {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    font-size: 24px;
  }

  .tour-editor-panel .trial-conversion-grid input[type="date"],
  .tour-editor-panel .trial-conversion-grid input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
  }

  .trial-photo-stack {
    grid-template-columns: repeat(2, 56px);
  }

  .checkout-cart-head .checkout-deposit-status {
    grid-column: 2;
    justify-self: start;
    font-size: 16px;
    text-align: left;
  }

  .checkout-cart-head h2 {
    font-size: 26px;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .checkout-cart-top {
    min-width: 0;
  }

  .checkout-owner-avatar,
  .trial-avatar {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }

  .trial-vaccine-edit-row {
    grid-template-columns: 1fr;
  }

  .trial-vaccine-edit-row .review-check,
  .trial-vaccine-edit-row .exempt-placeholder {
    justify-self: start;
  }

  .checkout-cart-row,
  .checkout-cart-total-row {
    min-width: 0;
  }

  .checkout-cart-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .checkout-cart-row-head {
    display: none;
  }

  .checkout-cart-field,
  .checkout-cart-number {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .checkout-cart-field::before,
  .checkout-cart-number::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
  }

  .checkout-cart-total-row {
    grid-template-columns: 1fr auto;
  }

  .checkout-cart-total-row.is-total,
  .checkout-total-summary-row,
  .reservation-addon-selected-row,
  .reservation-addon-picker,
  .checkout-service-date-grid {
    grid-template-columns: 1fr;
  }

  .checkout-service-picker-head,
  .checkout-service-picker-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .checkout-pos-package-grid {
    grid-template-columns: 1fr;
  }

  .checkout-pos-account-grid {
    grid-template-columns: 1fr;
  }

  .checkout-total-summary-row strong,
  .checkout-total-due-amount {
    justify-self: start;
    justify-items: start;
  }

  .checkout-cart-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .checkout-cart-submit-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .checkout-dog-row {
    grid-template-columns: 1fr;
  }

  .checkout-dog-money {
    justify-items: start;
  }

  .checkout-duplicate-grid {
    grid-template-columns: 1fr;
  }

  .photo-history-viewer {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
  }

  .photo-history-viewer button {
    width: 36px;
    height: 52px;
    font-size: 30px;
  }

  .photo-history-viewer figure {
    min-height: 220px;
  }
}

/* Reservation totals calendar and final service color pass. */
.calendar-dog-chip.has-daycare-hourly .calendar-dog-time b,
.calendar-event.has-daycare-hourly .calendar-time {
  color: var(--daycare-hourly-text);
}

.calendar-dog-chip.has-daycare-half .calendar-dog-time b,
.calendar-event.has-daycare-half .calendar-time {
  color: var(--daycare-half-text);
}

.calendar-dog-chip.has-daycare-full .calendar-dog-time b,
.calendar-event.has-daycare-full .calendar-time {
  color: var(--daycare-full-text);
}

.calendar-dog-chip.has-dayplay:not(.has-daycare-hourly):not(.has-daycare-half):not(.has-daycare-full) .calendar-dog-time b,
.calendar-event.has-dayplay:not(.has-daycare-hourly):not(.has-daycare-half):not(.has-daycare-full) .calendar-time {
  color: var(--daycare-full-text);
}

.calendar-dog-chip.has-boarding .calendar-dog-time b,
.calendar-event.has-boarding .calendar-time {
  color: var(--overnight);
}

.calendar-dog-chip.has-grooming:not(.has-dayplay):not(.has-boarding) .calendar-dog-time b,
.calendar-event.has-grooming .calendar-time {
  color: var(--grooming);
}

.moego-lodging-reservation-bar.has-daycare-hourly,
.message-pet-chip.has-daycare-hourly {
  border-color: #d9f99d;
  border-left-color: var(--daycare-hourly);
  background: var(--daycare-hourly-bg);
}

.moego-lodging-reservation-bar.has-daycare-half,
.message-pet-chip.has-daycare-half {
  border-color: #bbf7d0;
  border-left-color: var(--daycare-half);
  background: var(--daycare-half-bg);
}

.moego-lodging-reservation-bar.has-daycare-full,
.moego-lodging-reservation-bar.is-dayplay,
.message-pet-chip.has-daycare-full,
.message-pet-chip.has-dayplay {
  border-color: #a7f3d0;
  border-left-color: var(--daycare-full);
  background: var(--daycare-full-bg);
}

.moego-lodging-reservation-bar.is-boarding {
  border-color: #cfe4ff;
  border-left-color: var(--overnight);
  background: var(--overnight-bg);
}

.message-pet-service-badges i.is-dayplay {
  background: var(--daycare-full);
}

.message-pet-service-badges i.is-boarding {
  background: var(--overnight);
}

.message-pet-service-badges i.is-grooming {
  background: var(--grooming);
}

.reservation-totals-calendar {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 18px;
}

.reservation-totals-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}

.reservation-totals-head > div {
  min-width: 0;
}

.reservation-totals-head strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
}

.reservation-totals-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.reservation-total-filter-bar {
  display: flex;
  flex: 0 1 420px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.reservation-total-filter {
  min-height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #fff;
  color: #475467;
  cursor: pointer;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  padding: 0 12px;
  white-space: nowrap;
}

.reservation-total-filter.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.reservation-totals-weekdays,
.reservation-totals-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.reservation-totals-weekdays {
  overflow: hidden;
  border: 1px solid #e3e6eb;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #fff;
}

.reservation-totals-weekdays span {
  min-height: 34px;
  border-left: 1px solid #e3e6eb;
  color: #667085;
  font-size: 11px;
  font-weight: 950;
  line-height: 34px;
  text-align: center;
  text-transform: uppercase;
}

.reservation-totals-weekdays span:first-child {
  border-left: 0;
}

.reservation-totals-grid {
  overflow: hidden;
  border: 1px solid #e3e6eb;
  border-radius: 0 0 8px 8px;
  background: #e3e6eb;
  gap: 1px;
}

.reservation-total-day {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 176px;
  border: 0;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  padding: 10px;
  text-align: left;
}

.reservation-total-day.is-muted {
  background: #f7f8fa;
}

.reservation-total-day.is-past {
  background: #f2f4f7;
  color: #667085;
}

.reservation-total-day.is-past header span {
  background: #e4e7ec;
  color: #667085;
}

.reservation-total-day.is-past header strong {
  color: #667085;
}

.reservation-total-day.is-past .reservation-total-type {
  --type-color: #98a2b3;
  --type-text: #667085;
  --type-bg: #e9edf3;
}

.reservation-total-day.is-past .reservation-total-breakdown span {
  background: #f8fafc;
  color: #667085;
}

.reservation-total-day.is-past .reservation-total-empty {
  background: #f8fafc;
  border-color: #d0d5dd;
  color: #98a2b3;
}

.reservation-total-day.is-today {
  box-shadow: inset 0 0 0 2px #ff8a3c;
}

.reservation-total-day.is-selected {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.reservation-total-day header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.reservation-total-day header span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.reservation-total-day header strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
  text-align: right;
}

.reservation-total-types {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.reservation-total-type {
  display: grid;
  gap: 5px;
  min-width: 0;
  border-left: 4px solid var(--type-color, #64748b);
  border-radius: 6px;
  background: var(--type-bg, #f1f5f9);
  padding: 7px 8px;
}

.reservation-total-type > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.reservation-total-type span,
.reservation-total-type strong,
.reservation-total-breakdown span,
.reservation-total-empty {
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
}

.reservation-total-type span {
  min-width: 0;
  overflow: hidden;
  color: var(--type-text, #475569);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reservation-total-type strong {
  color: var(--type-text, #475569);
}

.reservation-total-type.is-daycare {
  --type-color: var(--daycare-full);
  --type-text: var(--daycare-full-text);
  --type-bg: #f0fdf4;
}

.reservation-total-type.is-tour {
  --type-color: #b45309;
  --type-text: #92400e;
  --type-bg: #fffbeb;
}

.reservation-total-type.is-grooming {
  --type-color: var(--grooming);
  --type-text: var(--grooming);
  --type-bg: var(--grooming-bg);
}

.reservation-total-type.is-overnight {
  --type-color: var(--overnight);
  --type-text: var(--overnight);
  --type-bg: var(--overnight-bg);
}

.reservation-total-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.reservation-total-breakdown span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  padding: 4px 6px;
  white-space: nowrap;
}

.reservation-total-breakdown span b {
  color: inherit;
  font-size: 11px;
  font-weight: 950;
}

.reservation-total-breakdown .is-daycare-hourly {
  background: var(--daycare-hourly-bg);
  color: var(--daycare-hourly-text);
}

.reservation-total-breakdown .is-daycare-half {
  background: var(--daycare-half-bg);
  color: var(--daycare-half-text);
}

.reservation-total-breakdown .is-daycare-full {
  background: var(--daycare-full-bg);
  color: var(--daycare-full-text);
}

.reservation-total-breakdown [class^="is-grooming-"],
.reservation-total-breakdown [class*=" is-grooming-"] {
  background: #fff;
  color: var(--grooming);
}

.reservation-total-empty {
  display: block;
  align-self: start;
  border: 1px dashed #cfd6e1;
  border-radius: 6px;
  color: #98a2b3;
  padding: 9px;
  text-align: center;
}

@media (max-width: 760px) {
  .reservation-totals-calendar {
    min-width: 840px;
  }

  .reservation-total-day {
    min-height: 154px;
    padding: 8px;
  }

  .reservation-total-type {
    padding: 6px;
  }
}

/* Final tablet and phone scaling pass. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 1100px) {
  .app {
    padding: clamp(6px, 1.4vw, 10px);
  }

  .board-header {
    gap: 12px;
  }

  .header-metrics {
    flex-wrap: wrap;
    min-width: 0;
  }

  .header-actions {
    flex: 1 1 360px;
    flex-wrap: wrap;
    min-width: 0;
  }

  .calendar-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .calendar-date-side {
    justify-self: stretch;
  }

  .calendar-date-side .eyebrow {
    text-align: left;
  }

  .calendar-date-control {
    width: 100%;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .calendar-date-picker span {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .calendar-stats {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .calendar-tab-strip {
    grid-template-columns: 52px repeat(5, minmax(132px, 1fr));
    overflow-x: auto;
  }

  .calendar-dog-flow {
    grid-template-columns: 1fr;
  }

  .moego-calendar-shell {
    min-height: auto;
  }

  .moego-calendar-sidebar {
    align-items: start;
  }

  .moego-sidebar-actions,
  .moego-utility-actions,
  .moego-calendar-report {
    align-self: start;
  }

  .moego-toolbar,
  .moego-timeline,
  .moego-assignment-board,
  .staff-calendar-board,
  .moego-lodging-calendar,
  .reservation-totals-calendar {
    min-width: 0;
  }

  .moego-timeline-grid {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .message-thread-panel header {
    grid-template-columns: minmax(0, 1fr);
  }

  .message-mark-unread {
    justify-self: start;
  }

  .message-conversation-identity {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .message-conversation-identity > .message-conversation-pets {
    grid-column: 1 / -1;
    justify-self: stretch;
    max-width: 100%;
  }

  .message-conversation-pets .message-pet-chip {
    width: auto;
    max-width: min(100%, 220px);
    flex: 1 1 112px;
  }

  .reservation-totals-calendar {
    margin: clamp(10px, 1.6vw, 18px);
  }

  .reservation-total-filter-bar {
    flex-basis: 100%;
  }

  .reservation-total-day {
    min-height: clamp(132px, 18vw, 176px);
    padding: 8px;
  }

  .reservation-total-type {
    padding: 6px;
  }
}

@media (max-width: 760px) {
  .app {
    padding: 6px;
  }

  .board-panel,
  .calendar-suite-board {
    border-radius: 8px;
  }

  .board-header {
    position: relative;
    padding: 10px;
  }

  .brand-cluster {
    align-self: center;
  }

  .brand-home {
    justify-self: center;
    margin-inline: auto;
  }

  #staffSessionButton.staff-session-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .header-metrics {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .metric {
    min-height: 48px;
    padding: 7px 9px;
  }

  .metric span {
    font-size: 10px;
  }

  .metric strong,
  .location-select {
    font-size: 17px;
  }

  .status {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 40px;
    padding: 9px;
  }

  .room-board {
    padding: 8px;
  }

  .calendar-header {
    padding: 10px;
  }

  .calendar-search-box input {
    min-height: 44px;
    font-size: 16px;
    text-overflow: ellipsis;
  }

  .calendar-search-box input::placeholder {
    font-size: 15px;
  }

  .calendar-date-control {
    gap: 5px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
  }

  .calendar-date-picker {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 5px;
  }

  .calendar-date-picker span {
    min-width: 0;
    overflow: hidden;
    font-size: clamp(18px, 5vw, 21px);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .calendar-date-picker::after,
  .calendar-date-picker input {
    width: 34px;
    height: 36px;
  }

  .date-nav-button.is-icon {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .calendar-date-picker .calendar-date-label-full {
    display: none;
  }

  .calendar-date-picker .calendar-date-label-mobile {
    display: block;
  }

  .calendar-stat {
    padding: 9px;
  }

  .calendar-stat strong {
    font-size: 22px;
  }

  .calendar-stat span,
  .calendar-stat small {
    font-size: 11px;
  }

  .calendar-stat.is-final-total {
    grid-column: 1 / -1;
  }

  .calendar-tab-strip .calendar-stat.is-final-total {
    grid-column: auto;
  }

  .calendar-tab-strip .calendar-stat {
    min-height: 62px;
    padding: 8px;
  }

  .calendar-appointment-section,
  .calendar-dog-section {
    padding: 8px;
  }

  .calendar-list {
    grid-template-columns: 1fr;
  }

  .calendar-event {
    min-height: 60px;
  }

  .moego-calendar-sidebar {
    gap: 12px;
    padding: 12px;
  }

  .moego-toolbar {
    position: static;
    min-width: 0;
    padding: 10px;
  }

  .moego-toolbar-left,
  .moego-toolbar-date,
  .moego-toolbar-actions {
    flex: 1 1 100%;
    width: 100%;
  }

  .calendar-mode-tabs,
  .moego-view-switch {
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
    border-radius: 8px;
  }

  .calendar-mode-tab,
  .moego-view-switch button,
  .moego-view-switch > span {
    flex: 1 1 42%;
    padding: 0 10px;
    white-space: nowrap;
  }

  .moego-toolbar .calendar-date-control,
  .moego-toolbar .lodging-range-control.is-static {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .moego-toolbar .calendar-date-control:not(.is-static) {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
  }

  .reservation-totals-calendar {
    min-width: 0;
    margin: 10px;
  }

  .moego-timeline {
    margin: 10px;
  }

  .reservation-totals-head {
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .reservation-total-filter-bar {
    justify-content: flex-start;
    width: 100%;
  }

  .reservation-total-filter {
    flex: 1 1 calc(50% - 6px);
    padding: 0 8px;
    text-align: center;
  }

  .reservation-totals-weekdays {
    display: none;
  }

  .reservation-totals-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .reservation-total-day {
    min-height: 0;
    border: 1px solid #e3e6eb;
    border-radius: 8px;
    padding: 10px;
  }
}

@media (max-width: 420px) {
  .app {
    padding: 5px;
  }

  .board-header {
    padding: 9px;
  }

  #staffSessionButton.staff-session-button {
    top: 9px;
    right: 9px;
  }

  .brand-home {
    width: min(142px, 46vw);
    height: 48px;
  }

  .header-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .moego-timeline-grid {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .header-actions .message-button {
    height: 36px;
  }

  .calendar-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    grid-template-columns: 58px minmax(0, 1fr) 42px;
    gap: 2px 7px;
    padding: 8px 8px 8px 18px;
  }

  .calendar-dog-chip .calendar-dog-photo,
  .calendar-dog-chip .photo-frame,
  .calendar-lodging-line {
    width: 52px;
    max-width: 52px;
  }

  .calendar-dog-chip .calendar-dog-photo,
  .calendar-dog-chip .photo-frame {
    height: 52px;
  }

  .calendar-dog-name {
    font-size: 17px;
  }

  .calendar-dog-time b {
    font-size: 24px;
  }

  .round-action {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}

.calendar-dog-chip.is-grouped {
  min-height: 128px;
}

.calendar-dog-chip.is-grouped .calendar-dog-photo-stack-wrap {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 66px;
  align-self: start;
  display: grid;
  gap: 4px;
  justify-items: center;
}

.calendar-dog-chip.is-grouped .calendar-dog-photo-stack {
  position: relative;
  width: 66px;
  height: 66px;
}

.calendar-dog-chip.is-grouped .calendar-dog-photo-stack .calendar-dog-photo,
.calendar-dog-chip.is-grouped .calendar-dog-photo-stack .photo-frame {
  position: absolute;
  grid-column: auto;
  grid-row: auto;
  width: 44px;
  max-width: 44px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
}

.calendar-dog-chip.is-grouped .calendar-dog-photo-stack .calendar-dog-photo:nth-child(1),
.calendar-dog-chip.is-grouped .calendar-dog-photo-stack .photo-frame:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 2;
}

.calendar-dog-chip.is-grouped .calendar-dog-photo-stack .calendar-dog-photo:nth-child(2),
.calendar-dog-chip.is-grouped .calendar-dog-photo-stack .photo-frame:nth-child(2) {
  right: 0;
  bottom: 0;
  z-index: 3;
}

.calendar-dog-chip.is-grouped .calendar-dog-photo-stack-wrap:is(.is-count-3, .is-count-4) .calendar-dog-photo-stack .calendar-dog-photo,
.calendar-dog-chip.is-grouped .calendar-dog-photo-stack-wrap:is(.is-count-3, .is-count-4) .calendar-dog-photo-stack .photo-frame {
  width: 39px;
  max-width: 39px;
  height: 39px;
}

.calendar-dog-chip.is-grouped .calendar-dog-photo-stack-wrap:is(.is-count-3, .is-count-4) .calendar-dog-photo-stack .calendar-dog-photo:nth-child(1),
.calendar-dog-chip.is-grouped .calendar-dog-photo-stack-wrap:is(.is-count-3, .is-count-4) .calendar-dog-photo-stack .photo-frame:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 2;
}

.calendar-dog-chip.is-grouped .calendar-dog-photo-stack-wrap:is(.is-count-3, .is-count-4) .calendar-dog-photo-stack .calendar-dog-photo:nth-child(2),
.calendar-dog-chip.is-grouped .calendar-dog-photo-stack-wrap:is(.is-count-3, .is-count-4) .calendar-dog-photo-stack .photo-frame:nth-child(2) {
  top: 0;
  right: 0;
  bottom: auto;
  z-index: 3;
}

.calendar-dog-chip.is-grouped .calendar-dog-photo-stack-wrap:is(.is-count-3, .is-count-4) .calendar-dog-photo-stack .calendar-dog-photo:nth-child(3),
.calendar-dog-chip.is-grouped .calendar-dog-photo-stack-wrap:is(.is-count-3, .is-count-4) .calendar-dog-photo-stack .photo-frame:nth-child(3) {
  bottom: 0;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
}

.calendar-dog-chip.is-grouped .calendar-dog-photo-stack .calendar-dog-photo:nth-child(n+4),
.calendar-dog-chip.is-grouped .calendar-dog-photo-stack .photo-frame:nth-child(n+4) {
  display: none;
}

.calendar-dog-group-pill,
.calendar-dog-inline-count,
.checkin-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border: 1px solid #9dcfc5;
  border-radius: 999px;
  background: #f1fbf8;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  padding: 0 8px;
  white-space: nowrap;
}

.calendar-dog-chip.is-grouped .calendar-dog-name {
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  overflow: visible;
  line-height: 1.05;
  text-overflow: clip;
  white-space: normal;
}

.calendar-dog-chip.is-grouped .calendar-lodging-line {
  font-size: 10px;
}

.calendar-dog-chip.is-grouped .calendar-dog-name-line {
  align-items: flex-start;
  flex-wrap: wrap;
  overflow: visible;
}

.calendar-dog-chip.is-grouped .calendar-dog-group-pill {
  min-height: 18px;
  font-size: 9px;
  padding: 0 6px;
}

.calendar-dog-chip.is-grouped .calendar-dog-inline-count {
  min-height: 16px;
  font-size: 9px;
  padding: 0 5px;
}

.calendar-dog-chip.is-grouped .calendar-dog-meta-row.is-checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
}

.calendar-dog-chip.is-grouped .calendar-dog-meta-row.is-checkout strong {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip.is-grouped .calendar-dog-actions {
  gap: 3px;
  z-index: 40;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip.is-grouped .calendar-dog-name-line {
  width: calc(100% - 58px);
  max-width: calc(100% - 58px);
  min-width: 0;
  padding-right: 0;
  flex-wrap: wrap;
  overflow: visible;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip.is-grouped .calendar-dog-name {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 100%;
  overflow-wrap: break-word;
}

.calendar-dog-meta .calendar-addon-pill {
  padding: 2px 6px;
  font-size: 8px;
}

.calendar-dog-meta .calendar-addon-pill span {
  color: inherit;
  font: inherit;
  line-height: 1;
}

.calendar-dog-meta .calendar-addon-pill b {
  min-width: 10px;
  height: 10px;
  font-size: 7px;
}

@media (min-width: 900px) {
  @container (min-width: 620px) {
    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip {
      height: auto;
      min-height: 124px;
      padding: 8px 40px 10px 17px;
    }

    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-chip.has-addons:not(.is-grouped) {
      min-height: 138px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip.is-grouped {
      grid-template-columns: 62px minmax(0, 1fr);
      min-height: 138px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-details {
      overflow: visible;
      padding-bottom: 34px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip.is-grouped .calendar-dog-details {
      padding-bottom: 42px;
    }

    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-chip.has-addons:not(.is-grouped) .calendar-dog-details {
      padding-bottom: 42px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-meta,
    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-meta {
      max-height: none;
      max-width: calc(100% - 82px);
      overflow: visible;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip.is-grouped .calendar-dog-name {
      font-size: clamp(15px, 1.08vw, 17px);
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .service-label-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 3px;
      max-width: calc(100% - 56px);
      overflow: visible;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-name-line {
      align-items: center;
      flex-wrap: nowrap;
      gap: 3px;
      max-width: calc(100% - 56px);
      overflow: visible;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-name {
      width: auto;
      flex: 0 1 auto;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      overflow-wrap: normal;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .dog-name-vaccine-alert {
      width: 17px;
      height: 17px;
      min-width: 17px;
      flex: 0 0 17px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .dog-name-vaccine-alert svg {
      width: 11px;
      height: 11px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .dog-icon-strip {
      flex: 0 1 auto;
      width: auto;
      max-width: min(96px, 48%);
      min-width: 0;
      flex-wrap: nowrap;
      gap: 2px;
      overflow: hidden;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .dog-icon-token {
      width: 17px;
      height: 17px;
      min-width: 17px;
      flex: 0 0 17px;
      font-size: 10px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .service-label {
      font-size: 9px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip.is-grouped .calendar-dog-meta,
    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-chip.is-grouped .calendar-dog-meta {
      max-width: 100%;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip.is-grouped .calendar-lodging-line {
      max-width: 100%;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
    }

    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-chip.has-addons:not(.is-grouped) .calendar-lodging-line {
      max-width: 100%;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
    }

    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-chip.has-addons:not(.is-grouped) .calendar-dog-meta {
      max-width: calc(100% - 92px);
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-addon-pill {
      font-size: 8px;
      padding: 2px 6px;
      white-space: nowrap;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-addon-pill span {
      white-space: nowrap;
    }
  }
}

@media (max-width: 899px) {
  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout {
    min-height: 124px;
  }

  .calendar-dog-chip .calendar-dog-details {
    padding-bottom: 34px;
  }
}

.checkin-panel.is-group-checkin {
  width: min(860px, 100%);
}

.checkin-photo-stack {
  position: relative;
  width: 112px;
  height: 112px;
}

.checkin-stack-photo,
.checkin-stack-photo.photo-frame {
  position: absolute;
  width: 76px;
  height: 76px;
  border: 3px solid #fff;
  border-radius: 12px;
  background: #eef2f0;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
}

.checkin-stack-photo:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 2;
}

.checkin-stack-photo:nth-child(2) {
  right: 0;
  bottom: 0;
  z-index: 3;
}

.checkin-stack-photo:nth-child(n+3) {
  display: none;
}

.checkin-dog-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 8px;
  margin: 16px 0 12px;
}

.checkin-dog-tab {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 60px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 7px;
  text-align: left;
}

.checkin-dog-tab.is-active,
.checkin-dog-tab:hover {
  border-color: var(--accent);
  background: #f1fbf8;
}

.checkin-tab-photo,
.checkin-tab-photo.photo-frame {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #eef2f0;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 950;
}

.checkin-dog-tab strong,
.checkin-dog-tab small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkin-dog-tab strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.05;
}

.checkin-dog-tab small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.checkin-dog-pane[aria-hidden="true"] {
  display: none;
}

[data-addon-date-rule-menu][hidden] {
  display: none;
}

.checkin-pane-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #d9e8e4;
  border-radius: 8px;
  background: #f8fbfa;
  padding: 8px;
}

.checkin-pane-photo,
.checkin-pane-photo.photo-frame {
  width: 54px;
  height: 54px;
  border-radius: 9px;
  background: #eef2f0;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 950;
}

.checkin-pane-head strong,
.checkin-pane-head span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkin-pane-head strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.checkin-pane-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 760px) {
  .checkin-head {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .checkin-panel.is-group-checkin .checkin-head h2 {
    font-size: clamp(24px, 8vw, 34px);
  }

  .checkin-photo-stack {
    width: 82px;
    height: 82px;
  }

  .checkin-stack-photo,
  .checkin-stack-photo.photo-frame {
    width: 58px;
    height: 58px;
  }

  .checkin-dog-tabs {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  @container (min-width: 520px) and (max-width: 619px) {
    .calendar-dog-flow .calendar-dog-section.is-checkout .calendar-dog-chip:not(.is-grouped) .calendar-dog-name-line {
      width: calc(100% - 72px);
      max-width: calc(100% - 72px);
    }
  }
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-name-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 3px;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-name {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .dog-icon-strip {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.calendar-dog-chip .calendar-dog-photo-cell {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  width: 66px;
  max-width: 100%;
  align-self: start;
  justify-self: start;
  justify-items: center;
  gap: 4px;
  overflow: hidden;
}

.calendar-dog-chip .calendar-dog-photo-cell :is(.calendar-dog-photo, .photo-frame, .photo-upload-placeholder) {
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  justify-self: center;
  margin: 0;
}

.calendar-dog-chip .calendar-dog-icon-slot {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 13px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.calendar-package-credit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  border: 1px solid #9dcfc5;
  border-radius: 999px;
  background: #f0fbf8;
  color: var(--accent);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 950;
}

.calendar-package-credit-badge svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-dog-chip .calendar-dog-icon-slot .dog-icon-strip {
  --calendar-dog-icon-size: 18px;
  --calendar-dog-icon-font: 11px;
  --calendar-dog-icon-gap: 2px;
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 100%;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--calendar-dog-icon-gap);
  margin: 0;
  overflow: hidden;
}

.calendar-dog-chip .calendar-dog-icon-slot .dog-icon-strip.is-icon-count-3 {
  --calendar-dog-icon-size: 16px;
  --calendar-dog-icon-font: 10px;
}

.calendar-dog-chip .calendar-dog-icon-slot .dog-icon-strip.is-icon-count-4 {
  --calendar-dog-icon-size: 14px;
  --calendar-dog-icon-font: 9px;
  --calendar-dog-icon-gap: 1px;
}

.calendar-dog-chip .calendar-dog-icon-slot .dog-icon-strip.is-icon-count-5 {
  --calendar-dog-icon-size: 12px;
  --calendar-dog-icon-font: 8px;
  --calendar-dog-icon-gap: 1px;
}

.calendar-dog-chip .calendar-dog-icon-slot .dog-icon-strip:is(.is-icon-count-6, .is-icon-count-many) {
  --calendar-dog-icon-size: 10px;
  --calendar-dog-icon-font: 7px;
  --calendar-dog-icon-gap: 1px;
}

.calendar-dog-chip .calendar-dog-icon-slot .dog-icon-token {
  width: var(--calendar-dog-icon-size);
  height: var(--calendar-dog-icon-size);
  min-width: 0;
  flex: 0 0 var(--calendar-dog-icon-size);
  border-width: 1px;
  font-size: var(--calendar-dog-icon-font);
  line-height: 1;
}

.calendar-dog-chip .calendar-dog-icon-slot .fixed-age-icon {
  color: var(--fixed-age-color);
}

.calendar-dog-chip .calendar-dog-icon-slot .fixed-age-icon .unaltered-sex-icon {
  width: max(8px, calc(var(--calendar-dog-icon-size) - 3px));
  height: max(8px, calc(var(--calendar-dog-icon-size) - 3px));
}

@media (min-width: 900px) {
  @container (min-width: 520px) and (max-width: 619px) {
    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-photo-cell {
      width: 44px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-icon-slot .dog-icon-strip {
      --calendar-dog-icon-size: 14px;
      --calendar-dog-icon-font: 9px;
      --calendar-dog-icon-gap: 1px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-icon-slot .dog-icon-strip.is-icon-count-3 {
      --calendar-dog-icon-size: 12px;
      --calendar-dog-icon-font: 8px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-icon-slot .dog-icon-strip.is-icon-count-4 {
      --calendar-dog-icon-size: 10px;
      --calendar-dog-icon-font: 7px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-icon-slot .dog-icon-strip:is(.is-icon-count-5, .is-icon-count-6, .is-icon-count-many) {
      --calendar-dog-icon-size: 7.5px;
      --calendar-dog-icon-font: 6px;
    }
  }

  @container (min-width: 620px) {
    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-photo-cell {
      width: 52px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-icon-slot .dog-icon-strip.is-icon-count-4 {
      --calendar-dog-icon-size: 12px;
      --calendar-dog-icon-font: 8px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-icon-slot .dog-icon-strip.is-icon-count-5 {
      --calendar-dog-icon-size: 9.5px;
      --calendar-dog-icon-font: 7px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-icon-slot .dog-icon-strip:is(.is-icon-count-6, .is-icon-count-many) {
      --calendar-dog-icon-size: 7.5px;
      --calendar-dog-icon-font: 6px;
    }
  }
}

@media (max-width: 420px) {
  .calendar-dog-chip .calendar-dog-photo-cell {
    width: 52px;
  }

  .calendar-dog-chip .calendar-dog-icon-slot .dog-icon-strip.is-icon-count-5 {
    --calendar-dog-icon-size: 9.5px;
    --calendar-dog-icon-font: 7px;
  }

  .calendar-dog-chip .calendar-dog-icon-slot .dog-icon-strip:is(.is-icon-count-6, .is-icon-count-many) {
    --calendar-dog-icon-size: 7.5px;
    --calendar-dog-icon-font: 6px;
  }
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-icon-slot .dog-icon-strip,
.owner-reservation-card.calendar-dog-chip .calendar-dog-icon-slot .dog-icon-strip {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 100%;
  flex-wrap: nowrap;
  gap: var(--calendar-dog-icon-gap);
  justify-content: center;
  overflow: hidden;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-icon-slot .dog-icon-token,
.owner-reservation-card.calendar-dog-chip .calendar-dog-icon-slot .dog-icon-token {
  width: var(--calendar-dog-icon-size);
  height: var(--calendar-dog-icon-size);
  min-width: 0;
  flex: 0 0 var(--calendar-dog-icon-size);
  font-size: var(--calendar-dog-icon-font);
}

.calendar-dog-chip .calendar-dog-photo-cell:has(.dog-icon-token:hover),
.calendar-dog-chip .calendar-dog-photo-cell:has(.dog-icon-token:focus-visible),
.calendar-dog-chip .calendar-dog-icon-slot:has(.dog-icon-token:hover),
.calendar-dog-chip .calendar-dog-icon-slot:has(.dog-icon-token:focus-visible),
.calendar-dog-chip .calendar-dog-icon-slot .dog-icon-strip:has(.dog-icon-token:hover),
.calendar-dog-chip .calendar-dog-icon-slot .dog-icon-strip:has(.dog-icon-token:focus-visible) {
  overflow: visible;
}

.calendar-dog-chip .calendar-dog-photo-cell:has(.dog-icon-token:hover),
.calendar-dog-chip .calendar-dog-photo-cell:has(.dog-icon-token:focus-visible) {
  position: relative;
  z-index: 120;
}

.calendar-dog-chip.is-staying {
  padding-right: 98px;
}

.calendar-dog-chip.is-staying .calendar-dog-name-line {
  box-sizing: border-box;
  width: calc(100% + 60px);
  max-width: calc(100% + 60px);
  padding-right: 34px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.calendar-dog-chip.is-staying .calendar-dog-name {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(16px, 1.2vw, 18px);
}

.calendar-dog-chip.is-staying .dog-name-vaccine-alert {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
}

.calendar-dog-chip.is-staying .dog-name-vaccine-alert svg {
  width: 11px;
  height: 11px;
}

.calendar-dog-chip.is-staying .calendar-dog-actions {
  top: 7px;
  right: 6px;
  gap: 3px;
}

.calendar-dog-chip.is-staying.is-grouped .calendar-dog-name-line {
  box-sizing: border-box;
  width: calc(100% + 60px);
  max-width: calc(100% + 60px);
  padding-right: 34px;
  flex-wrap: wrap;
  overflow: visible;
}

.calendar-dog-chip.is-staying.is-grouped .calendar-dog-name {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

.calendar-dog-chip.is-staying.is-grouped .calendar-dog-actions {
  z-index: 40;
}

.calendar-dog-chip.is-staying .calendar-dog-actions .round-action {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  font-size: 14px;
}

.calendar-dog-chip.is-staying .calendar-dog-actions .round-action svg {
  width: 15px;
  height: 15px;
}

@media (min-width: 701px) {
  .calendar-dog-flow.is-checkout-wide .calendar-dog-section.is-checkin,
  .calendar-dog-flow.is-checkout-wide .calendar-dog-section.is-checkout {
    grid-column: 1 / -1;
  }

  .calendar-dog-flow.is-checkout-wide .calendar-dog-section.is-checkout .calendar-dog-stack {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
}

@media (min-width: 1180px) {
  .calendar-dog-flow.is-checkout-wide .calendar-dog-section.is-checkout .calendar-dog-stack {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 900px) {
  .app.is-shell-loading {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    touch-action: pan-y;
  }

  .app.is-shell-loading .board-panel {
    min-height: 100dvh;
    overflow: visible;
  }

  .app.is-shell-loading .room-board {
    overflow: visible;
  }
}

.calendar-dog-chip.is-birthday-banner {
  isolation: isolate;
  border-color: #ec4899;
  background:
    radial-gradient(circle at 12% 18%, rgba(236, 72, 153, 0.38) 0 5px, transparent 6px),
    radial-gradient(circle at 31% 76%, rgba(56, 189, 248, 0.42) 0 4px, transparent 5px),
    radial-gradient(circle at 58% 20%, rgba(139, 92, 246, 0.34) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 72%, rgba(34, 211, 238, 0.32) 0 5px, transparent 6px),
    linear-gradient(120deg, #fdf2ff 0%, #fbcfe8 34%, #dbeafe 68%, #cffafe 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.7),
    0 12px 26px rgba(124, 58, 237, 0.18);
}

.calendar-dog-chip.is-birthday-banner::before,
.calendar-dog-chip.is-birthday-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.calendar-dog-chip.is-birthday-banner::before {
  z-index: 0;
  opacity: 0.82;
  background:
    linear-gradient(22deg, transparent 0 22px, rgba(236, 72, 153, 0.7) 23px 27px, transparent 28px 78px),
    linear-gradient(128deg, transparent 0 34px, rgba(56, 189, 248, 0.72) 35px 39px, transparent 40px 92px),
    linear-gradient(72deg, transparent 0 44px, rgba(139, 92, 246, 0.62) 45px 49px, transparent 50px 104px),
    linear-gradient(156deg, transparent 0 56px, rgba(34, 211, 238, 0.68) 57px 61px, transparent 62px 116px);
  background-size: 96px 82px, 118px 92px, 110px 84px, 128px 96px;
}

.calendar-dog-chip.is-birthday-banner::after {
  inset: 6px;
  z-index: 0;
  border: 2px dashed rgba(255, 255, 255, 0.82);
}

.calendar-dog-chip.is-birthday-banner > :not(.calendar-dog-actions):not(.calendar-owner-line):not(.service-rail) {
  position: relative;
  z-index: 1;
}

.calendar-dog-chip.is-birthday-banner .calendar-dog-name {
  color: #172554;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.calendar-dog-chip.is-birthday-banner .calendar-owner-line > span,
.calendar-dog-chip.is-birthday-banner .calendar-dog-meta span,
.calendar-dog-chip.is-birthday-banner .calendar-lodging-line {
  color: #334155;
}

.calendar-dog-chip .calendar-dog-photo-cell :is(.calendar-dog-photo, .photo-frame, .photo-upload-placeholder),
.calendar-dog-chip.is-grouped .calendar-dog-photo-stack :is(.calendar-dog-photo, .photo-frame, .photo-upload-placeholder) {
  box-sizing: border-box;
  border: 3px solid #d8e4df;
  background-color: #eef4f1;
}

.calendar-dog-chip.is-staying:not(.is-grouped) .calendar-dog-name {
  flex: 0 1 auto;
  width: auto;
}

/* Cat profiles get paw prints and a faint face watermark across profile strips and dashboard cards. */
.dog-card.is-cat {
  border-color: #f3a6ca;
  background:
    radial-gradient(ellipse 5px 7px at 20px 15px, rgba(236, 72, 153, 0.2) 0 65%, transparent 70%),
    radial-gradient(ellipse 5px 7px at 31px 11px, rgba(236, 72, 153, 0.18) 0 65%, transparent 70%),
    radial-gradient(ellipse 5px 7px at 42px 15px, rgba(236, 72, 153, 0.2) 0 65%, transparent 70%),
    radial-gradient(ellipse 11px 8px at 31px 30px, rgba(236, 72, 153, 0.16) 0 66%, transparent 71%),
    linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(255, 255, 255, 0.94) 46%, rgba(252, 231, 243, 0.92) 100%);
  background-size: 74px 58px, 74px 58px, 74px 58px, 74px 58px, auto;
  box-shadow: inset 5px 0 0 #ec4899, 0 7px 16px rgba(190, 24, 93, 0.13);
}

.dog-card.is-cat::before,
.calendar-dog-chip:is(.is-cat, .has-cat):not(.is-birthday-banner)::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cg fill='none' stroke='%23be185d' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 38 14 12l30 15a54 54 0 0 1 32 0l30-15-10 26'/%3E%3Cpath d='M24 48c0 27 18 42 36 42s36-15 36-42c0-19-15-31-36-31S24 29 24 48Z'/%3E%3Cpath d='M47 50h.1M73 50h.1M56 64h8M38 62l-24 6M82 62l24 6M38 72l-22 15M82 72l22 15'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.13;
}

.dog-card.is-cat::before {
  right: 8px;
  bottom: 4px;
  width: 78px;
  height: 64px;
}

.dog-card.is-cat > * {
  position: relative;
  z-index: 1;
}

/* The "> *" stacking rule above (lifts content over the paw-print wallpaper)
   must not clobber the absolutely-positioned corner controls. Its 0,2,0
   specificity outranks the buttons' single-class rules, so on a cat tile the
   three-dot profile menu (and the run-card / vaccine / package chips) fell out
   of the top-right corner into the grid flow — staff: "the three dots are not
   in the correct location" on Elsa's cat tile. Re-assert absolute positioning
   (z-index:1 is inherited from the rule above, keeping them over the wallpaper). */
.dog-card.is-cat > .dog-profile-button,
.dog-card.is-cat > .dog-vaccine-button,
.dog-card.is-cat > .dog-run-card-button,
.dog-card.is-cat > .dog-package-credit-button {
  position: absolute;
}

.dog-card.is-cat.has-visit {
  border-color: #ec4899;
}

.dog-card.is-cat .dog-name,
.calendar-dog-chip.is-cat .calendar-dog-name,
.calendar-dog-chip.has-cat .calendar-dog-name {
  color: #9d174d;
}

.is-cat-photo {
  background: #fdf2f8;
  color: #9d174d;
}

.pet-photo-kind-icon {
  background: #fdf2f8;
  color: #be185d;
  box-shadow: 0 4px 12px rgba(190, 24, 93, 0.2);
}

.pet-type-badge.is-cat,
.calendar-pet-type-badge.is-cat,
.calendar-photo-pet-type-badge.is-cat {
  border-color: #f472b6;
  background: #fdf2f8;
  color: #be185d;
}

.calendar-pet-type-badge.is-cat {
  padding: 3px 7px;
  background: #ec4899;
  color: #fff;
  box-shadow: 0 4px 10px rgba(190, 24, 93, 0.2);
}

.calendar-dog-chip.is-cat,
.calendar-dog-chip.has-cat,
.calendar-search-card.is-cat {
  border-color: #f0a1c7;
  background:
    radial-gradient(ellipse 5px 7px at 22px 17px, rgba(236, 72, 153, 0.22) 0 65%, transparent 70%),
    radial-gradient(ellipse 5px 7px at 34px 12px, rgba(236, 72, 153, 0.18) 0 65%, transparent 70%),
    radial-gradient(ellipse 5px 7px at 46px 17px, rgba(236, 72, 153, 0.22) 0 65%, transparent 70%),
    radial-gradient(ellipse 12px 9px at 34px 33px, rgba(236, 72, 153, 0.17) 0 66%, transparent 71%),
    linear-gradient(135deg, rgba(236, 72, 153, 0.16) 0%, rgba(255, 255, 255, 0.97) 42%, rgba(252, 231, 243, 0.95) 100%);
  background-size: 86px 66px, 86px 66px, 86px 66px, 86px 66px, auto;
  box-shadow: inset 6px 0 0 #ec4899, 0 8px 18px rgba(190, 24, 93, 0.12);
}

.calendar-dog-chip:is(.is-cat, .has-cat):not(.is-birthday-banner)::before {
  right: 18px;
  top: 8px;
  width: 112px;
  height: 92px;
}

.calendar-dog-chip:is(.is-cat, .has-cat) > :not(.service-rail) {
  z-index: 1;
}

.calendar-dog-chip.is-cat .calendar-dog-photo-cell :is(.calendar-dog-photo, .photo-frame, .photo-upload-placeholder),
.calendar-dog-chip.has-cat .calendar-dog-photo-cell :is(.calendar-dog-photo, .photo-frame, .photo-upload-placeholder) {
  border-color: #f472b6;
  background-color: #fdf2f8;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-name-line {
  flex-wrap: wrap;
  row-gap: 2px;
  overflow: visible;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-name {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}

.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip:not(.is-grouped) .calendar-dog-name-line :is(.calendar-dog-completed-badge, .dog-name-vaccine-alert) {
  flex: 0 0 auto;
}

.owner-refund-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
}

.owner-refund-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid #b8d9d2;
  border-radius: 8px;
  background: #fffdfa;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  padding: 18px;
}

.owner-refund-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.owner-refund-head h2 {
  margin: 0;
  font-size: 1.8rem;
}

.owner-refund-head span {
  display: block;
  color: #52645f;
  font-weight: 700;
}

.owner-refund-grid {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 12px;
}

.owner-refund-grid label,
.owner-refund-methods label {
  display: grid;
  gap: 6px;
}

.owner-refund-grid label.is-wide {
  grid-column: span 2;
}

.owner-refund-methods {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.owner-refund-methods label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 12px;
  border: 1px solid #cfe7e1;
  border-radius: 8px;
  background: #f7fffc;
}

.owner-refund-methods label.is-selected {
  border-color: #0f766e;
  background: #ecfdf5;
}

.owner-refund-methods label.is-disabled {
  opacity: 0.62;
}

.owner-refund-methods small {
  display: block;
  color: #5f6f6b;
}

/* Header/status hard guard: these controls must never participate in .app layout. */
body > .header-utility-actions,
.app > .header-utility-actions {
  position: fixed !important;
  z-index: 60020;
  top: calc(var(--system-announcement-height, 0px) + max(12px, env(safe-area-inset-top)));
  right: auto;
  left: max(12px, env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto !important;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  pointer-events: none;
}

body > .header-utility-actions > *,
.app > .header-utility-actions > * {
  pointer-events: auto;
}

body > .header-utility-actions .suggestion-message-button,
.app > .header-utility-actions .suggestion-message-button {
  position: fixed !important;
  z-index: 60060;
  top: calc(var(--system-announcement-height, 0px) + max(12px, env(safe-area-inset-top)));
  right: auto;
  left: max(12px, env(safe-area-inset-left));
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 10px;
  transform: translateZ(0);
  will-change: transform;
}

#status.status {
  position: fixed !important;
  z-index: 80000;
  top: calc(var(--system-announcement-height, 0px) + max(12px, env(safe-area-inset-top)));
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: min(520px, calc(100vw - 28px));
  min-width: min(240px, calc(100vw - 28px));
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, #fff);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.22);
  color: var(--accent);
  padding: 12px 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
}

#status.status.is-visible,
#status.status.has-action {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /*
   * A toast must never create an invisible click shield over the application.
   * Staff can keep working while success/error feedback remains readable.
   */
  pointer-events: none;
}

#status.status.is-error {
  border-color: rgba(185, 28, 28, 0.35);
  color: #b91c1c;
}

/*
 * Keep staff overlays below the fixed system announcement instead of placing
 * their close controls underneath it. This applies on desktop and mobile.
 */
.checkin-overlay,
.reservation-overlay,
.quick-reservation-overlay,
.quick-client-overlay,
.suggestion-overlay,
.label-overlay,
.agreement-signing-overlay {
  top: calc(var(--system-announcement-height, 0px) + var(--app-visual-viewport-offset-top, 0px));
  right: 0;
  bottom: auto;
  left: 0;
  height: calc(var(--app-visual-viewport-height, 100dvh) - var(--system-announcement-height, 0px));
  min-height: 0;
}

.quick-reservation-modal,
.quick-client-modal,
.checkin-panel,
.suggestion-dialog,
.label-manager,
.pet-label-assignment-modal,
.agreement-signing-panel {
  max-height: calc(var(--app-visual-viewport-height, 100dvh) - var(--system-announcement-height, 0px) - 24px);
}

@media (max-width: 760px) {
  .daily-test-recipient-search > label,
  .daily-test-recipient-search-results {
    grid-template-columns: minmax(0, 1fr);
  }

  .run-card-preview-overlay {
    padding: 4px;
  }

  .run-card-preview-panel {
    width: calc(100vw - 8px);
    height: calc(var(--app-visual-viewport-height, 100dvh) - 8px);
  }

  .run-card-preview-panel > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .run-card-preview-panel > footer div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app:not(.is-staff-login) {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    touch-action: pan-y;
  }

  .app:not(.is-staff-login) .board-panel,
  .app:not(.is-staff-login) .room-board {
    min-height: 0;
    overflow: visible;
  }

  .app:not(.is-staff-login) .room-board {
    -webkit-overflow-scrolling: auto;
  }

  .app.is-messages .message-board,
  .app.is-messages .message-shell,
  .app.is-messages .message-thread-list {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: auto;
  }

  .app.is-messages .message-thread-list {
    contain: none;
    scrollbar-gutter: auto;
    padding-right: 0;
  }

  .app.is-messages .message-thread-panel {
    height: auto;
    min-height: 0;
  }

  .app.is-calendar {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  .app.is-calendar .board-panel,
  .app.is-calendar .room-board {
    min-height: 0;
    overflow: visible;
  }

  .app.is-calendar .room-board {
    -webkit-overflow-scrolling: auto;
  }

  body > .header-utility-actions,
  .app > .header-utility-actions {
    top: calc(var(--system-announcement-height, 0px) + max(10px, env(safe-area-inset-top)));
    right: auto;
    left: max(10px, env(safe-area-inset-left));
  }

  body > .header-utility-actions .suggestion-message-button,
  .app > .header-utility-actions .suggestion-message-button {
    top: calc(var(--system-announcement-height, 0px) + max(10px, env(safe-area-inset-top)));
    right: auto;
    left: max(10px, env(safe-area-inset-left));
    width: 42px;
    min-width: 42px;
    height: 42px;
  }

  #status.status {
    top: calc(var(--system-announcement-height, 0px) + max(10px, env(safe-area-inset-top)));
    right: max(10px, env(safe-area-inset-right));
    left: auto;
    max-width: calc(100vw - 20px);
    min-width: min(260px, calc(100vw - 20px));
    padding: 11px 13px;
    font-size: 14px;
  }

  .checkin-overlay[data-checkout-review-overlay] {
    place-items: stretch;
    padding: 8px;
    overflow: hidden;
  }

  .checkin-overlay[data-checkout-review-overlay] .checkout-cart-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    height: calc(var(--app-visual-viewport-height, 100dvh) - var(--system-announcement-height, 0px) - 16px);
    max-height: calc(var(--app-visual-viewport-height, 100dvh) - var(--system-announcement-height, 0px) - 16px);
    margin: 0;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-gutter: stable;
  }

  .checkout-cart-head.checkout-pos-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, 34px);
    grid-template-areas:
      "title title title title title"
      "status invoices print email close";
    align-items: center;
    gap: 6px;
    padding: 0;
  }

  .checkout-cart-head.checkout-pos-head > div:first-child {
    grid-area: title;
    min-width: 0;
    padding-right: 0;
  }

  .checkout-cart-head.checkout-pos-head .checkout-deposit-status {
    grid-area: status;
    justify-items: start;
    justify-self: stretch;
    min-width: 0;
    padding-right: 0;
    text-align: left;
  }

  .checkout-cart-head.checkout-pos-head .checkout-header-invoice-action,
  .checkout-cart-head.checkout-pos-head .checkin-close {
    position: static;
    inset: auto;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    align-self: start;
  }

  .checkout-cart-head.checkout-pos-head .checkout-header-open-invoices-action {
    grid-area: invoices;
  }

  .checkout-cart-head.checkout-pos-head [data-print-checkout-invoice] {
    grid-area: print;
  }

  .checkout-cart-head.checkout-pos-head [data-email-checkout-invoice] {
    grid-area: email;
  }

  .checkout-cart-head.checkout-pos-head .checkin-close {
    grid-area: close;
    justify-self: end;
  }

  .checkout-cart-head.checkout-pos-head .checkin-close {
    font-size: 23px;
    line-height: 1;
  }

  .checkout-cart-head.checkout-pos-head h2.checkout-pos-heading {
    margin: 0;
    font-size: 22px;
    line-height: 1;
  }

  .checkout-cart-head.checkout-pos-head .checkout-pos-customer-line {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .checkout-cart-head.checkout-pos-head .checkout-deposit-status strong {
    font-size: 12px;
    line-height: 1.1;
    white-space: normal;
  }

  .checkout-cart-head.checkout-pos-head [data-print-checkout-invoice],
  .checkout-cart-head.checkout-pos-head .checkout-header-open-invoices-action,
  .checkout-cart-head.checkout-pos-head [data-email-checkout-invoice] {
    justify-self: end;
  }

  .checkout-pos-account-panel {
    padding: 8px;
  }

  .checkout-pos-account-panel input {
    min-height: 38px;
  }

  .checkout-cart-title {
    min-height: 54px;
    padding: 8px 10px;
  }

  .checkout-cart-title h3 {
    font-size: 20px;
    line-height: 1.05;
  }

  .checkout-cart-toggle {
    min-height: 30px;
    padding: 0 9px;
    font-size: 12px;
  }

  .checkout-pos-sale-items {
    padding: 8px;
  }

  .checkout-pos-sale-items .checkout-quick-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .checkout-pos-sale-items .secondary-button {
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }

  .checkout-cart-table {
    overflow-x: hidden;
  }

  .checkout-cart-total-row.is-total {
    gap: 6px;
    padding: 7px 10px;
  }

  .checkout-total-summary-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    min-width: 0;
  }

  .checkout-total-summary-row span {
    overflow: visible;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.12;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .checkout-total-summary-row strong {
    align-self: start;
    justify-self: end;
    font-size: 13px;
    white-space: nowrap;
  }

  .calendar-tab-strip {
    display: grid !important;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(66px, auto);
    gap: 4px;
    max-width: 100%;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding: 3px;
    border-radius: 8px;
  }

  .calendar-tab-strip .calendar-stat + .calendar-stat {
    margin-left: 0;
  }

  .calendar-tab-strip .calendar-stat,
  .calendar-tab-strip [data-calendar-home-tab],
  .calendar-tab-strip .calendar-requested-stat,
  .calendar-tab-strip .calendar-stat.is-final-total {
    min-width: 0;
    min-height: 66px;
    max-width: 100%;
    border-radius: 6px;
    padding: 6px 7px;
    overflow: visible;
  }

  /* Phones: stack each card vertically (number → label → details) using the full
     card width. The old layout put the number and text in a cramped 2-column
     grid with a fixed 78px max-height + overflow:hidden, which clipped the Total
     card's "Overnight" row and broke "Appointments" mid-word ("APPOINTMEN TS").
     A full-width stack keeps every label on one line and nothing is cut off. */
  .calendar-tab-strip .calendar-stat:not([data-calendar-home-tab]) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1px;
    text-align: left;
  }

  .calendar-tab-strip .calendar-stat.is-final-total {
    grid-column: auto;
  }

  .calendar-tab-strip .calendar-stat strong {
    font-size: 21px;
    line-height: 1;
  }

  .calendar-tab-strip .calendar-stat:not([data-calendar-home-tab]) > strong {
    margin: 0;
    text-align: left;
  }

  .calendar-tab-strip .calendar-stat span {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.1;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }

  .calendar-tab-strip .calendar-stat:not([data-calendar-home-tab]) > span {
    width: 100%;
    margin-top: 1px;
    font-size: 10px;
  }

  .calendar-tab-strip .calendar-stat small {
    display: block;
    margin-top: 2px;
    font-size: 9.5px;
    line-height: 1.18;
  }

  .calendar-tab-strip .calendar-stat:not([data-calendar-home-tab]) > small {
    width: 100%;
    margin-top: 1px;
  }

  .calendar-tab-strip .calendar-split-stat small {
    display: grid;
    gap: 1px;
  }

  .calendar-tab-strip .calendar-split-stat small span {
    white-space: normal;
  }

  .calendar-tab-strip .calendar-stat small b {
    font-size: 9px;
  }

  .calendar-tab-home .calendar-tab-home-icon {
    width: 18px;
    height: 18px;
  }

  .checkout-cart-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: auto;
    padding-top: 0;
  }

  .checkout-print-invoice-button,
  .checkout-cart-submit-actions .checkout-print-invoice-button {
    display: none;
  }

  /* Phones: the today-board dog cards used the desktop layout where the
     check-in/out time (bottom-left), the owner name (bottom-right, capped at
     ~46% width) and the action buttons (top-right) are all absolutely
     positioned around the details column. On a ~330px card that squeezed long
     owner names ("Alexandra Montgomery-Fitzgerald") into a narrow column that
     wrapped and was clipped by the card's overflow:hidden, and the reserved
     bottom row forced ~174px of height with dead space. Reflow the card into a
     natural 3-area grid — photo + time stacked on the left, details (name /
     service / lodging) in the middle, actions top-right — with the owner name
     flowing full-width across the bottom so it wraps cleanly and nothing
     overlaps or is cut off. */
  .calendar-dog-chip,
  .calendar-dog-chip.is-checkout,
  .calendar-dog-chip.is-staying {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: start;
    min-height: 0;
    row-gap: 4px;
    column-gap: 10px;
    padding: 10px 12px 12px 20px;
  }

  .calendar-dog-chip .calendar-dog-photo-cell {
    grid-column: 1;
    grid-row: 1;
  }

  .calendar-dog-chip .calendar-dog-time {
    position: static;
    grid-column: 1;
    grid-row: 2;
    width: auto;
    min-width: 0;
    margin: 0;
    justify-self: start;
    text-align: left;
  }

  .calendar-dog-chip .calendar-dog-details {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .calendar-dog-chip .calendar-dog-actions,
  .calendar-dog-chip.is-staying .calendar-dog-actions {
    position: static;
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
  }

  .calendar-dog-chip .calendar-owner-line,
  .calendar-dog-chip.is-staying .calendar-owner-line {
    position: static;
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    justify-items: start;
    justify-self: stretch;
    gap: 2px 8px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin-top: 2px;
    text-align: left;
  }

  .calendar-dog-chip .calendar-owner-line > span,
  .calendar-dog-chip.is-staying .calendar-owner-line > span,
  .calendar-dog-chip .calendar-owner-line .parent-contact-actions,
  .calendar-dog-chip.is-staying .calendar-owner-line .parent-contact-actions {
    width: auto;
    justify-content: flex-start;
    text-align: left;
  }

  /* The absolute layout reserved right padding on these rows for the top-right
     actions; the actions now sit in their own column, so reclaim the width. */
  .calendar-dog-chip .calendar-dog-name-line,
  .calendar-dog-chip .service-label-row,
  .calendar-dog-chip.is-checkout .calendar-dog-name-line,
  .calendar-dog-chip.is-checkout .service-label-row {
    padding-right: 0;
  }

  /* The staying name row was widened by 60px to slide under the old
     absolutely-positioned action buttons; with the actions now in their own
     in-flow column that overhang just spills past the card edge, so reset it. */
  .calendar-dog-chip.is-staying .calendar-dog-name-line,
  .calendar-dog-chip.is-staying.is-grouped .calendar-dog-name-line {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }

  /* Slightly larger round tap targets on the reflowed cards. */
  .calendar-dog-chip .calendar-dog-actions .round-action,
  .calendar-dog-chip.is-staying .calendar-dog-actions .round-action {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 16px;
  }

  .calendar-dog-chip.is-staying .calendar-dog-actions .round-action svg {
    width: 17px;
    height: 17px;
  }
}

/* ============================================================
   Stripe Financial Report
   ============================================================ */

/* Status bar */
.stripe-fin-bar {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-secondary, #6b7280);
  padding: 4px 0 10px; border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: 14px;
}
.stripe-fin-bar.stripe-fin-bar-ok { color: #166534; }
.stripe-fin-bar.stripe-fin-bar-error { color: #991b1b; }

/* Header: Balance summary + Payout info side-by-side */
.stripe-fin-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.stripe-fin-balance-box,
.stripe-fin-payout-info {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--surface, #fff);
}
.stripe-fin-box-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-secondary, #6b7280);
  margin: 0 0 8px;
}

/* Balance bar track */
.stripe-fin-bar-track {
  display: flex; height: 6px; border-radius: 3px; overflow: hidden;
  background: #e5e7eb; margin-bottom: 10px;
}
.stripe-fin-bar-incoming { background: #94a3b8; height: 100%; }
.stripe-fin-bar-available { background: #6366f1; height: 100%; }

/* Balance table */
.stripe-fin-balance-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.stripe-fin-balance-tbl tr td { padding: 3px 0; }
.stripe-fin-balance-tbl tr:first-child td { border-bottom: 1px solid var(--border, #f3f4f6); padding-bottom: 5px; margin-bottom: 4px; }
.stripe-fin-balance-tbl tr:last-child td { padding-top: 5px; }
.stripe-fin-balance-amt { text-align: right; font-weight: 600; font-size: 14px; color: var(--text, #111); }
.stripe-fin-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle;
}
.stripe-fin-dot-inc { background: #94a3b8; }
.stripe-fin-dot-avail { background: #6366f1; }

/* Payout schedule info */
.stripe-fin-payout-schedule-line { font-size: 13px; font-weight: 500; color: var(--text, #111); margin: 0 0 3px; }
.stripe-fin-payout-bank-line { font-size: 12px; color: var(--text-secondary, #6b7280); margin: 0 0 4px; }
.stripe-fin-payout-next-line { font-size: 12px; color: var(--text-secondary, #6b7280); margin: 0; }
.stripe-fin-report-row {
  font-size: 12px; color: var(--text-secondary, #6b7280); margin: 0 0 3px;
  display: flex; align-items: center; gap: 6px;
}
.stripe-fin-report-icon { font-size: 11px; color: #9ca3af; }

/* Your overview grid */
.stripe-fin-overview { margin-bottom: 16px; }
.stripe-fin-overview-hdr {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
}
.stripe-fin-overview-title { font-size: 14px; font-weight: 600; color: var(--text, #111); }
.stripe-fin-overview-period { font-size: 12px; color: var(--text-secondary, #6b7280); }
.stripe-fin-ov-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.stripe-fin-ov-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 11px 13px;
  background: var(--surface, #fff);
}
.stripe-fin-ov-today { background: #f8faff; border-color: #c7d7fd; }
.stripe-fin-ov-lbl {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary, #6b7280); margin: 0 0 4px;
}
.stripe-fin-ov-val { font-size: 17px; font-weight: 700; color: var(--text, #111); margin: 0 0 2px; line-height: 1.2; }
.stripe-fin-ov-val.stripe-fin-ov-blue { color: #4338ca; }
.stripe-fin-ov-val.stripe-fin-ov-muted { color: #6b7280; font-size: 15px; }
.stripe-fin-ov-sub { font-size: 11px; color: var(--text-secondary, #9ca3af); margin: 0; }

/* Section blocks */
.stripe-fin-block { margin-bottom: 16px; }
.stripe-fin-block-title {
  font-size: 12px; font-weight: 600; color: var(--text, #374151);
  margin: 0 0 7px; display: flex; align-items: center; gap: 7px;
}
.stripe-fin-pill {
  font-size: 10px; font-weight: 600;
  background: var(--surface-2, #f3f4f6); border: 1px solid var(--border, #e5e7eb);
  border-radius: 20px; padding: 1px 6px; color: var(--text-secondary, #6b7280);
}

/* Payout status badges */
.stripe-fin-pstatus {
  display: inline-block; font-size: 11px; font-weight: 500;
  border-radius: 4px; padding: 1px 7px;
}
.stripe-fin-pstatus-upcoming { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.stripe-fin-pstatus-paid { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* Tables */
.stripe-fin-table th, .stripe-fin-table td {
  white-space: nowrap; font-size: 12px; padding: 5px 9px !important;
}
.stripe-fin-table td.stripe-fin-desc { white-space: normal; max-width: 180px; font-size: 11px; }
.stripe-fin-table td.stripe-fin-dest { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.stripe-fin-table td.stripe-fin-muted-cell { color: var(--text-secondary, #9ca3af); font-size: 11.5px; }
.stripe-fin-table td.stripe-fin-id {
  font-family: monospace; font-size: 10.5px; max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}
.stripe-fin-table td.stripe-fin-id a { color: var(--link, #4338ca); text-decoration: none; }
.stripe-fin-table td.stripe-fin-id a:hover { text-decoration: underline; }
.stripe-fin-row-refund td { background: #fff8f8; }
.stripe-fin-neg { color: #dc2626 !important; }
.stripe-fin-muted { color: var(--text-secondary, #9ca3af) !important; }

/* Transaction type badges */
.stripe-fin-type {
  display: inline-block; font-size: 10px; font-weight: 600;
  border-radius: 3px; padding: 1px 5px;
  background: var(--surface-2, #f3f4f6); color: var(--text-secondary, #6b7280);
}
.stripe-fin-type-payment, .stripe-fin-type-charge { background: #dcfce7; color: #15803d; }
.stripe-fin-type-payment_refund, .stripe-fin-type-refund { background: #fee2e2; color: #b91c1c; }
.stripe-fin-type-payout { background: #ede9fe; color: #5b21b6; }
.stripe-fin-type-stripe_fee { background: #fef3c7; color: #b45309; }

.stripe-fin-none {
  color: var(--text-secondary, #9ca3af); font-size: 12px; font-style: italic; padding: 6px 0;
}

@media (max-width: 960px) {
  .stripe-fin-header-grid { grid-template-columns: 1fr; }
  .stripe-fin-ov-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .stripe-fin-ov-grid { grid-template-columns: repeat(2, 1fr); }
}

.lead-email-inbox {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid #b9ddd2;
  border-radius: 12px;
  background: linear-gradient(180deg, #f3fbf8 0, #fff 140px);
  padding: 16px;
  box-shadow: 0 8px 24px rgba(27, 92, 73, 0.07);
}

.lead-email-inbox > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lead-email-inbox > header > div:first-child,
.lead-email-person,
.lead-email-context,
.lead-email-list {
  display: grid;
  min-width: 0;
}

.lead-email-inbox > header > div:first-child,
.lead-email-person { gap: 3px; }
.lead-email-list { gap: 8px; }
.lead-email-context { gap: 7px; }

.lead-email-inbox h3 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.lead-email-inbox > header span,
.lead-email-person span,
.lead-email-person small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
}

.lead-email-person span,
.lead-email-person small,
.lead-email-person strong { white-space: nowrap; }

.lead-email-person strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
}

.lead-email-inbox-actions,
.lead-email-actions,
.lead-email-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lead-email-inbox-actions,
.lead-email-actions { justify-content: flex-end; }

.lead-email-error {
  border: 1px solid #f2b7b0;
  border-radius: 8px;
  background: #fff2f0;
  color: #9f2f23;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 850;
}

.lead-email-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(260px, 1.8fr) minmax(150px, auto);
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  padding: 12px;
}

.lead-email-tags b {
  border: 1px solid #d8e8e3;
  border-radius: 999px;
  background: #f5faf8;
  color: #286754;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-email-context p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lead-email-actions .primary-button,
.lead-email-actions .date-nav-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.lead-stage.is-warning {
  border-color: #efd199;
  background: #fff7e7;
  color: #8b5810;
}

.lead-stage.is-responded {
  border-color: #9bd2bc;
  background: #eefaf5;
  color: #176a4d;
}

.lead-channel-sections,
.lead-journey-summary,
.lead-channel-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.lead-channel-sections { gap: 18px; }

.lead-channel-section,
.lead-journey-summary {
  border: 1px solid #d9e5e1;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(32, 75, 62, 0.05);
}

.lead-channel-section > header,
.lead-journey-summary > header,
.lead-section-toolbar,
.lead-section-toolbar > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lead-channel-section > header > div,
.lead-journey-summary > header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lead-channel-section h3,
.lead-journey-summary h3 {
  color: var(--ink);
  font-size: 21px;
  font-weight: 950;
}

.lead-channel-section > header span,
.lead-journey-summary > header span,
.lead-section-toolbar > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.lead-channel-section > header > b {
  border-radius: 999px;
  background: #eef8f4;
  color: #21664f;
  padding: 5px 9px;
  font-size: 11px;
  white-space: nowrap;
}

.lead-section-toolbar {
  align-items: center;
  border: 1px solid #cfe5dc;
  border-radius: 9px;
  background: #f4fbf8;
  padding: 9px 10px;
}

.lead-section-toolbar > div {
  align-items: center;
  flex-wrap: wrap;
}

.lead-journey-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 8px;
}

.lead-journey-metrics > strong {
  display: grid;
  gap: 3px;
  border-radius: 9px;
  background: #f3f8f6;
  padding: 10px;
}

.lead-journey-metrics b {
  color: #155b45;
  font-size: 20px;
  font-weight: 950;
}

.lead-journey-metrics span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.lead-journey-paths,
.lead-journey {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.lead-journey-paths span {
  border: 1px solid #d9e5e1;
  border-radius: 999px;
  color: #365d51;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.lead-journey-paths b { color: #155b45; }

.lead-journey { white-space: normal; }
.lead-journey i { color: #92a69f; font-style: normal; font-weight: 950; }

.lead-journey-chip {
  border: 1px solid #dce4e1;
  border-radius: 999px;
  background: #f6f8f7;
  color: #77827e;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 950;
  line-height: 1.15;
}

.lead-journey-chip.is-complete {
  border-color: #a8d7c4;
  background: #edf8f3;
  color: #176a4d;
}

.lead-journey-empty {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.report-row > span:has(.lead-journey) {
  overflow: visible;
  white-space: normal;
}

.chat-report-intro,
.chat-report-card,
.chat-report-transcript,
.chat-report-staff-history,
.chat-report-response-form,
.chat-report-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.chat-report-list {
  gap: 18px;
}

.chat-report-intro {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border: 1px solid #cfe5dc;
  border-radius: 10px;
  background: #f4fbf8;
  padding: 12px 14px;
}

.chat-report-intro strong {
  color: #155b45;
  font-size: 13px;
}

.chat-report-intro span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chat-report-card {
  border: 1px solid #d9e5e1;
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(32, 75, 62, .06);
}

.chat-report-card.needs-review {
  border-color: #e4ba65;
  box-shadow: inset 5px 0 0 #e4ba65, 0 8px 24px rgba(32, 75, 62, .06);
}

.chat-report-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.chat-report-card-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.chat-report-card-head h3 {
  color: var(--ink);
  font-size: 21px;
  font-weight: 950;
}

.chat-report-card-head span,
.chat-report-card-head small,
.chat-report-page {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.chat-report-page {
  border-left: 3px solid #cfe5dc;
  padding-left: 9px;
}

.chat-report-badges,
.chat-report-flags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-report-badges {
  justify-content: flex-end;
}

.chat-report-badge {
  border: 1px solid #d8e8e3;
  border-radius: 999px;
  background: #f5faf8;
  color: #286754;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.chat-report-badge.is-warning {
  border-color: #e7c680;
  background: #fff7e7;
  color: #8b5810;
}

.chat-report-badge.is-negative {
  border-color: #efb4ae;
  background: #fff1ef;
  color: #9f2f23;
}

.chat-report-badge.is-replied {
  border-color: #9bd2bc;
  background: #eefaf5;
  color: #176a4d;
}

.chat-report-transcript {
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #e5e7e2;
  border-radius: 12px;
  background: #f7f8f5;
  padding: 14px;
}

.chat-report-message {
  display: grid;
  gap: 6px;
  width: min(86%, 720px);
  border: 1px solid #d9e5e1;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
}

.chat-report-message.is-visitor {
  justify-self: end;
  border-color: #a8d7c4;
  background: #edf8f3;
}

.chat-report-message.needs-review {
  border-color: #dfaa3f;
  background: #fff8e9;
  box-shadow: inset 4px 0 0 #dfaa3f;
}

.chat-report-message header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.chat-report-message header strong {
  color: #155b45;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.chat-report-message time {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.chat-report-message p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.48;
  white-space: pre-wrap;
}

.chat-report-flags span {
  display: grid;
  gap: 2px;
  border-radius: 7px;
  background: #ffe8b8;
  color: #704608;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 950;
}

.chat-report-flags span.is-resolved {
  background: #e8f5ef;
  color: #176a4d;
}

.chat-report-flags small {
  font-weight: 800;
}

.chat-report-staff-history {
  border-radius: 10px;
  background: #f2f6f4;
  padding: 12px;
}

.chat-report-staff-history h4 {
  color: #155b45;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.chat-report-staff-history article {
  display: grid;
  gap: 4px;
  border-top: 1px solid #d9e5e1;
  padding-top: 9px;
}

.chat-report-staff-history p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  white-space: pre-wrap;
}

.chat-report-staff-history span,
.chat-report-staff-history small,
.chat-report-response-form > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.chat-report-response-form {
  border: 1px solid #cfe5dc;
  border-radius: 12px;
  background: #f7fcfa;
  padding: 14px;
}

.chat-report-response-form > label {
  display: grid;
  gap: 6px;
  color: #155b45;
  font-size: 12px;
  font-weight: 950;
}

.chat-report-response-form textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid #bcd8ce;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  padding: 10px 11px;
  font: inherit;
  font-size: 13px;
}

.chat-report-response-form textarea:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(26, 113, 84, .12);
}

.chat-report-response-form > div,
.chat-report-reply-option {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-report-response-form > div {
  justify-content: space-between;
}

.chat-report-reply-option {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.chat-report-reply-option input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

@media (max-width: 760px) {
  .lead-email-inbox > header,
  .lead-email-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .lead-email-inbox > header { flex-direction: column; }

  .lead-email-inbox-actions,
  .lead-email-actions { justify-content: stretch; }

  .lead-email-inbox-actions > *,
  .lead-email-actions > * { flex: 1 1 auto; }

  .lead-channel-section > header,
  .lead-journey-summary > header,
  .lead-section-toolbar { flex-direction: column; }

  .lead-journey-metrics { grid-template-columns: repeat(2, minmax(90px, 1fr)); }

  .chat-report-intro { grid-template-columns: 1fr; }
  .chat-report-card { padding: 14px; }
  .chat-report-card-head { flex-direction: column; }
  .chat-report-badges { justify-content: flex-start; }
  .chat-report-message { width: 94%; }
  .chat-report-response-form > div {
    align-items: stretch;
    flex-direction: column;
  }
  .chat-report-response-form .primary-button { width: 100%; }
}

.calendar-dog-chip.is-grouped .calendar-dog-name-group,
.calendar-dog-chip.is-staying.is-grouped .calendar-dog-name-group,
.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip.is-grouped .calendar-dog-name-group {
  display: inline-flex;
  align-items: baseline;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 1px 4px;
  min-width: 0;
  max-width: 100%;
}

.calendar-dog-chip.is-grouped .calendar-dog-name-group .calendar-dog-name,
.calendar-dog-chip.is-staying.is-grouped .calendar-dog-name-group .calendar-dog-name,
.calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-chip.is-grouped .calendar-dog-name-group .calendar-dog-name {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.calendar-dog-name.is-static {
  cursor: default;
}

.calendar-dog-name-separator {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.9em;
  font-weight: 950;
  line-height: 1;
}

/* Tour & Trial: approve-for-location checkmark in the report Location cell */
.report-tour-approve { display: inline-flex; align-items: center; gap: 6px; }
.report-approve-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid #16a34a; background: #f0fdf4; color: #16a34a;
  font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.report-approve-check:hover { background: #16a34a; color: #fff; }
.report-approve-check:disabled { opacity: .5; cursor: default; }

/* A checked-in CAT gets the same paw-print wallpaper on the board tile that it gets
   on the pet list card — the tile used to be styled only by the unit's configured
   pet types, so a cat in a dog-configured unit rendered plain. */
.cabin.is-cat-pet,
.play-group-dog.is-cat {
  position: relative;
  border-color: #f3a6ca;
  background:
    radial-gradient(ellipse 5px 7px at 20px 15px, rgba(236, 72, 153, 0.2) 0 65%, transparent 70%),
    radial-gradient(ellipse 5px 7px at 31px 11px, rgba(236, 72, 153, 0.18) 0 65%, transparent 70%),
    radial-gradient(ellipse 5px 7px at 42px 15px, rgba(236, 72, 153, 0.2) 0 65%, transparent 70%),
    radial-gradient(ellipse 11px 8px at 31px 30px, rgba(236, 72, 153, 0.16) 0 66%, transparent 71%),
    linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(255, 255, 255, 0.94) 46%, rgba(252, 231, 243, 0.92) 100%);
  background-size: 74px 58px, 74px 58px, 74px 58px, 74px 58px, auto;
  box-shadow: inset 5px 0 0 #ec4899, 0 7px 16px rgba(190, 24, 93, 0.13);
}

.cabin.is-cat-pet::before,
.play-group-dog.is-cat::before {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 78px;
  height: 64px;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cg fill='none' stroke='%23be185d' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 38 14 12l30 15a54 54 0 0 1 32 0l30-15-10 26'/%3E%3Cpath d='M24 48c0 27 18 42 36 42s36-15 36-42c0-19-15-31-36-31S24 29 24 48Z'/%3E%3Cpath d='M47 50h.1M73 50h.1M56 64h8M38 62l-24 6M82 62l24 6M38 72l-22 15M82 72l22 15'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.13;
}

.cabin.is-cat-pet > *,
.play-group-dog.is-cat > * {
  position: relative;
  z-index: 1;
}

.cabin.is-cat-pet .assigned-name,
.play-group-dog.is-cat strong {
  color: #9d174d;
}

@media (max-width: 900px) {
  .message-dashboard-hero,
  .message-email-head,
  .message-priority-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .message-dashboard-actions,
  .message-email-head > div:last-child {
    justify-content: flex-start;
    width: 100%;
  }

  .message-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .message-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .message-read-filters {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .message-email-shell {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }

  .message-email-list {
    max-height: 42vh;
    overflow-y: auto;
  }

  .message-email-panel {
    min-height: 55vh;
    overflow: visible;
  }

  .message-email-detail {
    min-height: 55vh;
  }
}

@media (max-width: 560px) {
  .message-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .message-priority-list > button {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .message-priority-meta {
    grid-column: 2;
    justify-items: start;
  }

  .message-email-reply {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Owner directive 2026-07-28: make each Tasks section visibly distinct — a
   colored left rail + tinted header per panel. */
.task-panel { border-left-width: 5px; }
.task-panel.is-primary { border-left-color: #0f766e; }
.task-panel.is-primary .task-panel-head h3 { color: #0f766e; }
.task-panel.is-portal-messages { border-left-color: #7c3aed; }
.task-panel.is-portal-messages .task-panel-head h3 { color: #6d28d9; }
.task-panel.is-abandoned { border-left-color: #dc2626; }
.task-panel.is-abandoned .task-panel-head h3 { color: #b91c1c; }
.task-panel.is-leads { border-left-color: #2563eb; }
.task-panel.is-leads .task-panel-head h3 { color: #1d4ed8; }
.task-panel.is-tours { border-left-color: #059669; }
.task-panel.is-tours .task-panel-head h3 { color: #047857; }
.chat-transcript-card { max-width: min(720px, calc(100vw - 32px)); }
.chat-transcript-body { display: grid; gap: 8px; max-height: min(60vh, 520px); overflow-y: auto; padding: 4px 0; }
.chat-transcript-line { display: grid; gap: 2px; border-radius: 10px; padding: 8px 10px; background: #f5f7f6; }
.chat-transcript-line.is-assistant { background: #eef7f4; }
.chat-transcript-line strong { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.chat-transcript-line time { font-size: 11px; color: var(--muted); }
.chat-transcript-note { margin-top: 10px; border-radius: 10px; background: #fff7ed; color: #9a3412; padding: 10px; font-size: 12px; }

.task-panel.is-emails { border-left-color: #0891b2; }
.task-panel.is-emails .task-panel-head h3 { color: #0e7490; }
.task-email-table .task-table-row { grid-template-columns: minmax(0,1fr) minmax(0,1.6fr) minmax(0,0.9fr) minmax(0,0.7fr) auto; }
.task-email-row .date-nav-button { text-decoration: none; }

@media (max-width: 900px) {
  .task-email-table .task-table-row,
  .task-no-approval-table .task-table-row { grid-template-columns: minmax(0, 1fr); }
}

.task-panel.is-no-approval { border-left-color: #9333ea; }
.task-panel.is-no-approval .task-panel-head h3 { color: #7e22ce; }
.task-no-approval-table .task-table-row { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr); }
.task-panel.is-reviews { border-left-color: #db2777; }
.task-panel.is-reviews .task-panel-head h3 { color: #be185d; }
.task-panel.is-phone-calls { border-left-color: #d97706; }
.task-panel.is-phone-calls .task-panel-head h3 { color: #b45309; }
.task-panel.is-calls { border-left-color: #64748b; }
.task-panel.is-calls .task-panel-head h3 { color: #475569; }

.task-booking-lane.is-archived h4 { color: var(--muted); }

.task-booking-archived-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 13px;
}

.task-booking-archived-row .lead-stage { text-transform: capitalize; }

.quick-staff-login-button {
  display: inline-flex;
  width: auto;
  min-width: 38px;
  gap: 7px;
  padding: 0 11px;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  color: var(--accent);
  font: inherit;
}

.quick-staff-login-button:hover,
.quick-staff-login-button:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, #fff);
}

.quick-staff-login-button .quick-staff-login-label {
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

#quickStaffLoginButton[data-tooltip]:hover::before,
#quickStaffLoginButton[data-tooltip]:focus-visible::before {
  right: 0;
  left: auto;
  transform: none;
}

body.has-quick-pin-dialog { overflow: hidden; }
.quick-pin-overlay { z-index: 60030; }
.quick-pin-panel { width: min(720px, calc(100vw - 40px)); padding: 22px; }

.quick-pin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.quick-pin-head h2,
.quick-pin-card h3,
.quick-pin-head p,
.quick-pin-card p { margin: 0; }

.quick-pin-head h2 { margin-top: 2px; color: var(--ink); font-size: 26px; line-height: 1.1; }
.quick-pin-head > div > p:last-child { max-width: 560px; margin-top: 7px; color: var(--muted); font-size: 13px; font-weight: 750; line-height: 1.4; }
.quick-pin-eyebrow { color: var(--accent); font-size: 11px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }

.quick-pin-close {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.quick-pin-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.quick-pin-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fdfdfb;
  padding: 16px;
}

.quick-pin-login-form { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, #fff); }
.quick-pin-card h3 { color: var(--ink); font-size: 17px; line-height: 1.2; }
.quick-pin-card > div > p { margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.35; }

.quick-pin-field {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.quick-pin-field input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 950 22px/1 system-ui, sans-serif;
  letter-spacing: .28em;
  outline: 0;
  padding: 8px 11px;
}

.quick-pin-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.quick-pin-new-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-pin-hint { color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.4; }
.quick-pin-status { border-radius: 7px; background: #eef2f0; color: var(--ink); font-size: 12px; font-weight: 850; line-height: 1.35; padding: 9px 10px; }
.quick-pin-status[data-type="error"] { background: #fff0f0; color: #a52828; }
.quick-pin-status[data-type="success"] { background: #e8f7f0; color: #146e5b; }
.quick-pin-submit { width: 100%; min-height: 42px; margin-top: auto; }

@media (max-width: 760px) {
  #quickStaffLoginButton.quick-staff-login-button { position: absolute; top: 10px; right: 62px; z-index: 6; display: grid; width: 44px; min-width: 44px; height: 44px; padding: 0; }
  .quick-staff-login-button .quick-staff-login-label { display: none; }
  .quick-pin-layout { grid-template-columns: 1fr; }
  .quick-pin-overlay { align-items: start; padding: 10px; }
  .quick-pin-panel { width: 100%; max-height: calc(100dvh - 20px); padding: 16px; }
}

@media (max-width: 420px) {
  #quickStaffLoginButton.quick-staff-login-button { top: 9px; right: 61px; }
  .quick-pin-new-fields { grid-template-columns: 1fr; }
}

/* August 13 board presentation: make half-day daycare unmistakable without
   changing the compact card geometry used by the movement board. */
.calendar-dog-chip.has-daycare-half .service-label.is-daycare-half {
  border-width: 2px;
  background: var(--daycare-half-bg);
  color: var(--daycare-half-text);
  font-size: 10px;
}

.calendar-dog-chip.has-daycare-half .service-label.is-daycare-half::after {
  content: "HALF DAY";
  margin-left: 5px;
  border-left: 1px solid currentColor;
  padding-left: 5px;
  font-weight: 1000;
}

.calendar-dog-chip.has-daycare-half:not(.is-cat):not(.has-cat) {
  border-color: #f59e0b;
  background: #fffaf0;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.22);
}

/* The composer itself still suppresses this control to prevent a duplicate
   composer. Other active dialogs keep it fixed above their overlay. */
body:not(:has(.suggestion-overlay)):has(.checkin-overlay:not([data-checkout-review-overlay]), .checkin-overlay[data-checkout-review-overlay], .reservation-overlay, .quick-reservation-overlay, .quick-client-overlay)
  > .header-utility-actions .suggestion-message-button,
body:not(:has(.suggestion-overlay)):has(.checkin-overlay:not([data-checkout-review-overlay]), .checkin-overlay[data-checkout-review-overlay], .reservation-overlay, .quick-reservation-overlay, .quick-client-overlay)
  > .app > .header-utility-actions .suggestion-message-button {
  z-index: 60120;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}