: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: #22c55e;
  --daycare-half-text: #15803d;
  --daycare-half-bg: #dcfce7;
  --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);
}

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

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

* {
  box-sizing: border-box;
}

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

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: 100vh;
  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 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;
}

.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;
}

#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;
}

.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-vaccine-button.is-alert {
  border-color: #f2b9ae;
  color: #d84532;
  background: #fff4f1;
}

.dog-profile-button svg,
.dog-run-card-button svg,
.dog-vaccine-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-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;
}

.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-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: #15803d;
  --fixed-age-bg: #f0fdf4;
  --fixed-age-border: #bbf7d0;
  border-color: var(--fixed-age-border);
  background: var(--fixed-age-bg);
  color: var(--fixed-age-color);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.fixed-age-icon.is-green {
  --fixed-age-color: #15803d;
  --fixed-age-bg: #f0fdf4;
  --fixed-age-border: #bbf7d0;
}

.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;
}

.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 {
  min-width: 170px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

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

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

.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);
  }
}

.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-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 {
  min-height: 36px;
  border: 1px solid #e0e4ea;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
}

.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 {
  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 {
  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 > button {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  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-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-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-tour {
  border-color: #d7cfef;
}

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

.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;
}

.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-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-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: auto;
  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 span b {
  color: var(--muted);
  font-weight: 850;
}

.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-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-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[draggable="true"] {
  cursor: grab;
}

.calendar-dog-chip[data-movement-visits] {
  touch-action: pan-y;
  user-select: 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;
}

.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;
}

.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;
}

.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-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 200;
  display: none;
  min-width: 128px;
  padding: 5px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

.calendar-dog-action-menu:hover .calendar-dog-action-menu-panel,
.calendar-dog-action-menu:focus-within .calendar-dog-action-menu-panel {
  display: grid;
  gap: 2px;
}

.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 {
  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;
}

.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: 20000;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 22, 0.34);
  padding: 20px;
  overflow: auto;
}

.reservation-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 22, 0.34);
  padding: clamp(18px, 4vw, 64px);
}

.quick-reservation-overlay {
  position: fixed;
  inset: 0;
  z-index: 20010;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 22, 0.36);
  padding: clamp(12px, 3vw, 34px);
}

.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;
}

.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;
}

.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;
}

.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-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-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-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-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-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-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;
}

.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: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  min-width: min(340px, 92vw);
  width: max(100%, 300px);
  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-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;
}

.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-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 14px;
  }

  .quick-reservation-head,
  .quick-reservation-actions {
    margin-right: -14px;
    margin-left: -14px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .quick-reservation-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .quick-reservation-submit-actions {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }

  .quick-reservation-type-grid,
  .quick-reservation-grid,
  .quick-recurrence-grid,
  .quick-check-grid,
  .quick-radio-grid,
  .quick-package-grid,
  .quick-payment-grid {
    grid-template-columns: 1fr;
  }

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

  .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-checkin-time-grid {
    grid-template-columns: 1fr;
  }

  .half-day-grooming-row {
    grid-template-columns: 1fr;
  }
}

.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;
  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;
}

.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;
  overflow: hidden;
}

.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-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) 36px;
  align-items: stretch;
}

.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-grid-head,
.vaccine-edit-row {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(140px, 150px) minmax(92px, 104px) minmax(82px, 96px);
  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-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-edit-row.is-expired input[type="date"] {
  border-color: #fca5a5;
  color: #991b1b;
  background: #fff7f7;
}

.vaccine-edit-row.is-missing input[type="date"] {
  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 input[type="date"] {
  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;
}

@media (max-width: 1180px) {
  .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);
    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: 40px;
    overflow: hidden;
  }

  .vaccine-grid-head,
  .vaccine-edit-row {
    grid-template-columns: minmax(112px, 1fr) minmax(118px, 136px) minmax(64px, 76px) minmax(64px, 76px);
    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(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-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;
  display: grid;
  grid-template-columns: var(--reservation-photo-size) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.reservation-client-card > div {
  min-width: 0;
}

.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-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-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-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: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.reservation-care-grid .pet-card {
  border: 1px solid var(--line);
  box-shadow: none;
}

.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 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-actions {
  position: sticky;
  bottom: -16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 8px;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 12px 0 0;
}

.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;
  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 .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-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-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;
}

.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;
}

.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-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-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-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;
}

.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;
}

.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: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(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;
  }

  .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;
}

.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-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-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-toolbar .message-sync-note {
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.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 {
  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-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;
}

.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 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;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.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-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-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;
}

.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, max-content) minmax(0, 1fr);
  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 {
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  max-width: 100%;
  overflow-x: auto;
  gap: 8px;
}

.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-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: 138px;
  min-height: 30px;
  overflow: visible;
  padding: 3px 7px 3px 3px;
  border-color: #9bd4c8;
  background: #eefaf7;
  white-space: normal;
}

.message-conversation-pets .message-pet-chip {
  display: inline-flex;
  width: max-content;
  max-width: none;
  min-height: 58px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: flex-start;
  border-color: #9bd4c8;
  border-radius: 8px;
  background: #eefaf7;
  padding: 5px 10px 5px 5px;
  font-size: 16px;
}

.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: 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  font-size: 15px;
}

.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-thread-pets .message-pet-copy {
  max-width: 96px;
}

.message-conversation-pets .message-pet-copy {
  min-width: 42px;
  padding-top: 2px;
}

.message-conversation-pets .message-pet-chip b {
  color: var(--accent);
  font-size: 16px;
  font-weight: 1000;
  line-height: 1.05;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.message-thread-pets .message-pet-chip b {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  color: var(--accent);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.05;
}

.message-bubbles {
  max-height: none;
  min-height: 0;
}

.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-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-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-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;
}

.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-card-headline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.settings-card-headline h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

.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: 212px 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: #fff;
  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: 4px;
}

.settings-nav-group h3 {
  margin: 4px 10px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.settings-sidebar button {
  display: flex;
  align-items: center;
  min-height: 40px;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  text-align: left;
  padding: 8px 10px;
}

.settings-sidebar button span {
  min-width: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.settings-sidebar button:hover,
.settings-sidebar button.is-active {
  border-left-color: var(--accent);
  background: #fff7ec;
  color: var(--ink);
}

.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-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: end;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
}

.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 span,
.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-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;
}

.stripe-terminal-settings-card {
  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-list {
  display: grid;
  gap: 8px;
}

.stripe-terminal-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.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;
}

.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,
.camera-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) minmax(110px, .6fr) 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,
.camera-settings-section {
  display: grid;
  gap: 14px;
}

.camera-settings-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(150px, .8fr) minmax(170px, 1fr) minmax(240px, 1.25fr) minmax(118px, .55fr) 40px;
  gap: 10px;
  align-items: end;
  min-width: 1020px;
  border: 1px solid #e5dfd1;
  border-radius: 8px;
  background: #fffcf6;
  padding: 10px;
}

.camera-settings-row.is-room {
  background: #fff;
}

.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-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  border-top: 1px solid #eee7d8;
  padding-top: 10px;
}

.camera-option-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  min-width: 0;
  border: 1px solid #eee7d8;
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  padding: 10px;
}

.camera-option-group h4 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.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-row-lock,
.camera-settings-remove {
  width: 38px;
  height: 38px;
}

.camera-room-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.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;
}

.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-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-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-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) 38px;
  gap: 8px;
  align-items: end;
  min-width: 1120px;
  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(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.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;
}

.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-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-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;
}

.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-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));
  }
}

.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: 10px;
  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;
}

.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 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: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
}

.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: 20020;
  display: grid;
  place-items: center;
  background: rgba(23, 23, 23, .58);
  padding: 14px;
}

.agreement-signing-panel {
  display: grid;
  gap: 14px;
  width: min(880px, 100%);
  max-height: min(820px, 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: 260px;
  max-height: min(48dvh, 440px);
  overflow: auto;
  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-signature-field {
  display: grid;
  gap: 6px;
}

.agreement-signature-grid {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(320px, 1fr);
  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-signature-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
  gap: 14px;
  align-items: stretch;
}

.agreement-drawn-signature {
  display: grid;
  gap: 8px;
}

.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-pad {
  width: 100%;
  min-height: 160px;
  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 auto;
  gap: 10px;
  align-items: center;
}

.agreement-signing-actions span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.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(5, minmax(0, 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-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;
}

.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-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.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-table-heading {
  min-height: 38px;
  background: #f8f7f2;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.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-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-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;
}

.daily-test-panel {
  width: min(980px, calc(100vw - 24px));
  display: grid;
  gap: 14px;
}

.daily-test-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.daily-test-head h2 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 950;
  line-height: 1;
}

.daily-test-head span {
  color: var(--muted);
  font-size: 14px;
  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-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-body-box textarea {
  min-height: 104px;
}

.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;
}

.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: nowrap;
}

.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;
  gap: 14px;
  max-height: min(50vh, 520px);
  overflow: auto;
  padding-right: 3px;
}

.daily-test-playgroup-section {
  display: grid;
  gap: 8px;
}

.daily-test-playgroup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.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-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: 178px;
  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: not-allowed;
  opacity: .56;
  filter: grayscale(.75);
}

.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: 24px 64px minmax(0, 1fr) minmax(150px, auto);
  gap: 12px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.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;
}

.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: 64px;
  height: 64px;
  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;
  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;
}

.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;
}

@media (max-width: 980px) {
  .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: 24px 64px minmax(0, 1fr);
  }

  .daily-test-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .daily-test-card {
    min-height: 168px;
  }

  .daily-test-card-photo,
  .daily-test-card-photo.photo-frame {
    width: 76px;
    height: 76px;
  }

  .daily-test-photo,
  .daily-test-photo.photo-frame {
    width: 56px;
    height: 56px;
  }

  .daily-test-row-status {
    grid-column: 3 / -1;
    justify-self: start;
  }

  .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));
  }
}

.calendar-setup-page form {
  display: grid;
  gap: 16px;
}

.calendar-setup-card {
  gap: 14px;
}

.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-block-row {
  grid-template-columns: 92px repeat(7, minmax(110px, 1fr)) 38px;
  align-items: end;
}

.calendar-email-row {
  grid-template-columns: 92px repeat(4, minmax(120px, 1fr)) 38px;
  align-items: end;
}

.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 nav {
    display: flex;
    gap: 10px;
    overflow-x: auto;
  }

  .settings-nav-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .settings-nav-group h3,
  .settings-sidebar-summary {
    display: none;
  }

  .settings-sidebar button {
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 4px solid transparent;
    white-space: nowrap;
  }

  .settings-sidebar button:hover,
  .settings-sidebar button.is-active {
    border-left-color: transparent;
    border-bottom-color: 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;
  }

  .settings-filter-row,
  .automation-overview-grid,
  .automation-workflow-grid,
  .settings-summary-grid,
  .settings-summary-grid.compact,
  .settings-inline-grid,
  .checkout-tip-preset-grid,
  .integration-settings-grid,
  .integration-secret-form,
  .pricing-rule-grid,
  .service-form-grid,
  .tour-rule-row,
  .retail-settings-row,
  .package-settings-row,
  .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-advanced-settings,
  .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 {
    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,
  .grooming-pricing-row {
    min-width: 0;
  }

  .settings-table-toolbar {
    grid-template-columns: 1fr;
  }

  .settings-table-controls {
    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-actions {
	    grid-template-columns: 1fr;
	  }

	  .agreement-signature-grid {
	    grid-template-columns: 1fr;
	  }

	  .agreement-signing-actions .secondary-button,
	  .agreement-signing-actions .primary-button {
	    width: 100%;
	  }
	}

.pet-detail-board {
  display: grid;
  gap: 14px;
}

.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;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px 238px 16px 16px;
}

.pet-profile-corner-action {
  position: absolute;
  top: 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;
  margin-bottom: 2px;
  font-size: clamp(32px, 4vw, 52px);
}

.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-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 span + span::before {
  content: "|";
  margin-right: 8px;
  color: #b6d5cb;
}

.owner-header-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 10px;
  max-width: 100%;
  overflow-x: auto;
  color: var(--muted);
  font-size: 16px;
  font-weight: 850;
}

.owner-detail-hero {
  grid-template-columns: 118px minmax(0, 1fr);
  padding: 14px 16px;
}

.owner-detail-hero .pet-detail-title {
  min-width: 0;
}

.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 0 auto;
}

.owner-header-phone::after {
  content: "|";
  margin-left: 10px;
  color: var(--line);
  font-weight: 900;
}

.owner-header-pets {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 6px 8px;
  min-width: 0;
}

.owner-header-pet-link {
  color: var(--ink);
  white-space: nowrap;
}

.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%);
}

.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-actions {
  justify-content: flex-end;
}

.pet-quick-actions {
  position: absolute;
  top: 58px;
  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;
  align-items: start;
}

.pet-card {
  display: grid;
  gap: 12px;
  --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;
}

.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: #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-icon-card {
  grid-column: 1 / -1;
}

.vaccine-summary-card {
  grid-column: 1 / -1;
}

.pet-owners-card,
.pet-reservations-card,
.pet-incident-card,
.pet-audit-card {
  grid-column: 1 / -1;
}

.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(130px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  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;
}

.vaccine-status span {
  font-size: 13px;
  font-weight: 850;
}

.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 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: #d84532;
}

.vaccine-mini-list span.is-missing {
  color: #9a6a00;
}

.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;
}

.pet-card-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.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;
}

.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;
}

.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;
}

.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: 90vh;
  overflow: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  padding: 18px;
}

.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: 60;
  display: grid;
  place-items: center;
  background: rgba(20, 24, 22, 0.38);
  padding: 18px;
}

.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-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;
}

.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;
}

.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;
}

@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;
  }

  .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,
.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;
}

.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),
.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,
.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-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-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-moveable-grooming {
  background: #fffaf0;
  cursor: grab;
}

.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-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-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;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.trend-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.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;
}

.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 {
  display: grid;
  gap: 3px;
}

.trend-header > div > span {
  max-width: 780px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.report-library-nav {
  gap: 10px;
  max-height: calc(100vh - 185px);
  overflow: auto;
  padding-right: 2px;
}

.report-nav-group {
  display: grid;
  gap: 3px;
}

.report-nav-group h3 {
  margin: 8px 10px 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.report-sidebar 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-sidebar button span {
  min-width: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.report-sidebar 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-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-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-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-head {
  border-color: transparent;
  background: transparent;
  padding: 0 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.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;
}

.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;
  gap: 6px;
  justify-content: flex-end;
  overflow: visible !important;
}

.report-actions .date-nav-button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .report-dashboard-kpis,
  .report-dashboard-section-grid {
    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: flex;
    flex: 0 0 auto;
    gap: 8px;
    min-width: max-content;
  }

  .report-nav-group h3 {
    display: none;
  }

  .report-sidebar button {
    flex: 0 0 auto;
    width: auto;
    min-width: 170px;
    max-width: min(210px, 70vw);
    min-height: 42px;
  }

  .report-sidebar 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) {
  .report-dashboard-metrics,
  .report-summary {
    grid-template-columns: 1fr;
  }

  .report-dashboard-card > header {
    align-items: stretch;
    flex-direction: column;
  }
}

.lead-sync-button {
  border-color: var(--accent);
  color: var(--accent);
}

.lead-summary {
  grid-template-columns: repeat(4, 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(92px, 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;
}

.lead-row-actions .date-nav-button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.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-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: 660px;
}

.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;
}

.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-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 {
  font-size: 10px;
}

.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-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;
  }

  .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: 82px minmax(0, 1fr);
    padding: 16px;
  }

  .pet-detail-photo {
    width: 82px;
    height: 82px;
    font-size: 26px;
  }

  .owner-detail-avatar {
    width: 82px;
    height: 82px;
    font-size: 26px;
  }

  .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-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);
  }

  .reservation-drawer {
    width: 100%;
    max-height: calc(100dvh - 28px);
    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-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-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-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) {
  .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-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;
  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-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: 6px;
      right: 5px;
      flex-direction: row;
      gap: 1px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-actions .round-action {
      width: 21px;
      height: 21px;
      flex-basis: 21px;
      font-size: 11px;
    }

    .calendar-dog-flow .calendar-dog-section:is(.is-checkin, .is-checkout) .calendar-dog-actions .round-action svg {
      width: 12px;
      height: 12px;
    }

    .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, .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-section.is-staying .calendar-dog-time b {
  font-size: clamp(20px, 1.65vw, 24px);
}

.calendar-event.has-event-action {
  padding-right: 78px;
}

.calendar-event.is-tour.has-event-action {
  padding-right: 66px;
}

.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 {
  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-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;
}

/* 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: start;
  min-height: 94px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.owner-metric.is-alert {
  border-color: #d7a647;
  background: #fff8e7;
  box-shadow: inset 4px 0 0 #b47a12;
}

.owner-metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .05em;
  line-height: 1.15;
  text-transform: uppercase;
}

.owner-metric strong {
  color: var(--accent);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 1000;
  line-height: .95;
}

.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;
}

.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;
}

.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;
}

.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-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-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-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-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-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 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-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 {
  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;
}

.message-board {
  display: flex;
  flex-direction: column;
  height: 100%;
  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 {
  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-gallery a {
  display: block;
  color: inherit;
}

.message-media-gallery img {
  display: block;
  width: min(100%, 320px);
  max-height: 240px;
  border-radius: 12px;
  object-fit: cover;
}

.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;
  }

  .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,
  .vaccine-document-list {
    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%);
}

.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 - 32px));
  max-height: min(900px, calc(100dvh - 32px));
  padding: 16px;
}

.checkout-cart-head {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: start;
  padding-right: 64px;
}

.checkout-owner-avatar {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  background: #e8efec;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 22px;
  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-header-dogs {
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
}

.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 {
  justify-self: end;
  align-self: start;
  color: #13825f;
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 950;
  line-height: 1.08;
  padding-top: 2px;
  text-align: right;
  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;
}

.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-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: 8px;
}

.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(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.checkout-addon-choice .checkout-service-option {
  width: 100%;
}

.checkout-addon-days {
  min-width: 300px;
  width: 100%;
}

.checkout-bottom-tools {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f7f2;
  padding: 12px;
}

.checkout-bottom-tools .checkout-payment-panel {
  margin-top: 0;
}

.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-account-panel {
  display: grid;
  gap: 10px;
}

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

.pos-owner-search,
.pos-payer-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.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: 54px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  padding: 9px 10px;
}

.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-owner-search label,
.pos-gift-card-form label {
  display: grid;
  gap: 5px;
}

.pos-owner-search label > span,
.pos-gift-card-form label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.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-owner-results {
  display: grid;
  gap: 6px;
  max-height: 150px;
  overflow: auto;
}

.pos-owner-results button {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcf8;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 8px 10px;
  text-align: left;
}

.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-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-tip-tools {
  display: grid;
  gap: 8px;
}

.checkout-tip-tools > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkout-tip-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.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: 10px;
  margin-top: 12px;
  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: 12px 14px;
}

.checkout-cart-title h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 21px;
  font-weight: 950;
}

.checkout-cart-title svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checkout-cart-title span {
  font-size: 13px;
  font-weight: 900;
}

.checkout-cart-table {
  display: grid;
  overflow-x: auto;
}

.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: 10px;
  padding: 12px 14px 14px;
}

.checkout-pickup-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.36fr) minmax(0, 1fr);
  gap: 12px;
  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: 42px;
  height: 42px;
  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: 8px;
}

.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-cart-row {
  display: grid;
  grid-template-columns: 132px minmax(220px, 1fr) 170px 176px 140px 160px;
  gap: 10px;
  align-items: center;
  min-width: 1080px;
  border-bottom: 1px solid var(--line);
  padding: 9px 14px;
}

.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-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: 7px 14px;
}

.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: -16px;
  margin: 14px -16px -16px;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 12px 16px 0;
}

.checkout-cart-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.checkout-payment-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid #b8d9d0;
  border-radius: 8px;
  background: #f7fcfa;
  padding: 12px;
}

.checkout-card-file-panel {
  border-color: #ded6c7;
  background: #fffdfa;
}

.checkout-terminal-panel {
  border-color: #c7d8ee;
  background: #f8fbff;
}

.checkout-split-panel {
  border-color: #d7cfbb;
  background: #fffdf7;
}

.checkout-package-panel {
  border-color: #bedecd;
  background: #f4fbf4;
}

.checkout-package-panel:not(.is-active) {
  border-color: #ded6c7;
  background: #fffdfa;
}

.checkout-package-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-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 div {
  display: grid;
  gap: 2px;
}

.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: 22px;
  font-weight: 950;
}

.checkout-split-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.checkout-split-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 10px;
  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: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0;
  padding: 8px 10px;
}

.checkout-split-summary {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(117, 93, 40, 0.14);
  border-radius: 8px;
  background: #fff;
  padding: 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: 14px;
  font-weight: 950;
}

.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-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-saved-card > button {
  grid-column: 1 / -1;
}

.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-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-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;
}

.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-no-show-button:hover::after,
.trial-no-show-button: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-no-show-button:hover::before,
.trial-no-show-button: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;
  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-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;
}

.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;
  }

  .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;
}

.pet-photo-open-button {
  display: grid;
  gap: 6px;
  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;
}

.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: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .checkout-cart-top,
  .checkout-pickup-row,
  .checkout-service-form-grid,
  .checkout-split-grid,
  .checkout-quick-fields,
  .trial-conversion-grid,
  .trial-care-row-feeding,
  .trial-care-row-medication {
    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 {
    padding: 12px;
  }

  .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);
  }

  .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-owner-avatar,
  .trial-avatar {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }

  .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-account-grid {
    grid-template-columns: 1fr;
  }

  .checkout-total-summary-row strong,
  .checkout-total-due-amount {
    justify-self: start;
    justify-items: start;
  }

  .checkout-cart-actions {
    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;
  }

  .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: 6px;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .calendar-date-picker {
    gap: 6px;
  }

  .calendar-date-picker span {
    font-size: clamp(19px, 5.4vw, 24px);
    line-height: 1.05;
    white-space: nowrap;
  }

  .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 {
    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;
  }

  .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;
  }

  .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,
.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-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 {
  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-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 {
  font-size: max(6px, calc(var(--calendar-dog-icon-font) - 1px));
}

@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.is-staying {
  padding-right: 98px;
}

.calendar-dog-chip.is-staying .calendar-dog-name-line {
  flex-wrap: nowrap;
  overflow: hidden;
}

.calendar-dog-chip.is-staying .calendar-dog-name {
  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 auto;
}

.calendar-dog-chip.is-staying .calendar-dog-actions {
  top: 7px;
  right: 6px;
  gap: 3px;
}

.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;
}