/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; }

:root {
  --green:      #2D7A44;
  --green-dark: #1f5730;
  --green-pale: #e8f5ec;
  --red:        #c0392b;
  --amber:      #e67e22;
  --grey-100:   #f5f5f5;
  --grey-200:   #e0e0e0;
  --grey-500:   #9e9e9e;
  --grey-800:   #333;
  --white:      #ffffff;
  /* iOS WKWebView occasionally reports env(safe-area-inset-*) as 0 (first
   * paint, post-rotation, after keyboard dismiss). The BarkBus plugin reads
   * the real values from UIKit's view.safeAreaInsets and writes them into
   * --safe-top-fallback / --safe-bot-fallback at boot + on geometry change;
   * the max() picks whichever is larger so we never end up under the notch. */
  --safe-top:   env(safe-area-inset-top, 0px);
  --safe-top-fallback: 0px;
  --safe-top-actual: max(var(--safe-top), var(--safe-top-fallback));
  --safe-bot-fallback: 0px;
  --safe-bot:   max(env(safe-area-inset-bottom, 0px), var(--safe-bot-fallback));
  --header-h:   56px;
  --tab-h:      44px;
  --prog-h:     32px;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--grey-100);
  color: var(--grey-800);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ── Screens ──────────────────────────────────────────────────────────────── */
.screen { position: fixed; inset: 0; overflow: hidden; }
.screen.hidden { display: none; }
.screen.active { display: flex; flex-direction: column; }

/* ── Boot splash ─────────────────────────────────────────────────────────── */
#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: url('/images/splash.jpg') center center / cover no-repeat;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#boot-splash.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── LOGIN ────────────────────────────────────────────────────────────────── */
/* Allow login-style screens to scroll so the focused input can be brought
 * into view when the iOS keyboard pushes the visual viewport up. Without
 * this the .screen `overflow: hidden` traps content behind the keyboard. */
#screen-login.screen,
#screen-invite-code.screen,
#screen-change-password.screen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.login-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: calc(var(--safe-top-actual) + 32px) 24px
           max(calc(var(--safe-bot) + 32px), calc(var(--kb-height, 0px) + 24px));
  background: var(--green);
  transition: padding-bottom 0.18s ease;
}

.logo {
  text-align: center;
  color: var(--white);
  margin-bottom: 40px;
  width: min(92vw, 420px);
}
.logo-image {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
.logo p  { font-size: 14px; opacity: 0.85; margin-top: 12px; letter-spacing: 0.08em; }

.login-wrap form { width: 100%; max-width: 320px; }

.field { margin-bottom: 12px; }
.field input {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  background: rgba(255,255,255,0.95);
}
.field input:focus { outline: 3px solid rgba(255,255,255,0.6); }

.btn-primary {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: var(--white);
  color: var(--green-dark);
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary:active { opacity: 0.85; }

.error-msg { color: #ffe0de; font-size: 14px; margin: 4px 0 8px; text-align: center; }
.hidden { display: none !important; }

/* ── Connection error screen ────────────────────────────────────────────── */
#screen-connection-error {
  background: var(--green);
  z-index: 10000;
}
#screen-connection-error.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.conn-error-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--safe-top-actual) + 32px) 24px calc(var(--safe-bot) + 32px);
  width: min(92vw, 360px);
  color: var(--white);
}
.conn-error-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.9;
}
.conn-error-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
}
.conn-error-message {
  font-size: 15px;
  line-height: 1.45;
  opacity: 0.9;
  margin: 0 0 24px;
}
.conn-error-wrap .btn-primary { width: 100%; max-width: 280px; }
.conn-error-logout { margin-top: 12px; width: 100%; max-width: 280px; }

/* ── In-app error banner ────────────────────────────────────────────────── */
/* Slides in from the top for 403/404/409/unhandled-rejection cases that
   don't warrant the full connection-error screen. The Reload action gives
   users a recovery path when a throw left the UI in a frozen state. */
.error-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11000;
  background: #c0392b;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  padding-top: var(--safe-top-actual, env(safe-area-inset-top, 0px));
  transform: translateY(-100%);
  transition: transform 0.25s ease;
}
.error-banner.visible { transform: translateY(0); }
.error-banner.hidden { display: none; }
.error-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.4;
}
.error-banner-message { flex: 1; }
.error-banner-action {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.error-banner-action:active { background: rgba(255, 255, 255, 0.35); }
.error-banner-action.hidden { display: none; }
.error-banner-close {
  background: transparent;
  color: #ffffff;
  border: none;
  font-size: 22px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  opacity: 0.85;
}
.error-banner-close:active { opacity: 1; }

/* ── Profile Picker ─────────────────────────────────────────────────────── */
#profile-picker { width: 100%; max-width: 320px; }
.picker-heading {
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
  opacity: 0.9;
}
.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform 0.1s;
}
.profile-card:active { transform: scale(0.98); }
.profile-card-loading { opacity: 0.5; pointer-events: none; }
.profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.profile-card-info { flex: 1; min-width: 0; }
.profile-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-800, #222);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-card-company {
  font-size: 12px;
  color: var(--grey-500, #888);
  margin-top: 2px;
}
.profile-card-remove {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--grey-400, #aaa);
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-card-remove:hover { background: rgba(0,0,0,0.06); color: var(--grey-700, #555); }
.btn-secondary {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary:active { background: rgba(255,255,255,0.1); }
.back-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
}
.back-link:hover { color: var(--white); }
#login-form-wrap { width: 100%; max-width: 320px; }
#profile-username-display {
  text-align: center;
  margin-bottom: 12px;
}
#profile-username-display .profile-avatar {
  width: 56px;
  height: 56px;
  font-size: 20px;
  margin: 0 auto 8px;
}
#profile-username-display .profile-display-name {
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
}
#profile-username-display .profile-display-company {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  margin-top: 2px;
}

/* ── App header ───────────────────────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-top-actual) + 8px) 12px 8px;
  background: var(--green);
  color: var(--white);
  min-height: calc(var(--header-h) + var(--safe-top-actual));
  flex-shrink: 0;
}
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-logo {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.12);
}
.header-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.header-user-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.header-title-sub {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.header-right { display: flex; align-items: center; gap: 4px; }
/* Legacy company-badge kept for back-compat in case other screens reuse it. */
.company-badge {
  display: inline-flex;
  align-items: center;
  max-width: 170px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header h2 {
  font-size: 18px;
  font-weight: 700;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--white);
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.header-icon {
  width: 22px;
  height: 22px;
  display: block;
}
.btn-icon:active { background: rgba(255,255,255,0.15); }
.btn-icon { position: relative; }
.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}
.notification-badge.hidden { display: none; }

/* ── Notifications inbox ────────────────────────────────────────────────── */
.notifications-list {
  padding: 0;
}
.notifications-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5e5;
  background: #fafafa;
}
.notifications-toolbar h3 { margin: 0; font-size: 15px; }
.notifications-toolbar button {
  background: none;
  border: none;
  color: var(--green-dark, #2e7d32);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.notification-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  background: #fff;
}
.notification-item.unread { background: #eef7ee; border-left: 4px solid var(--green-dark, #2e7d32); padding-left: 12px; }
.notification-item-icon {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  background: #f0f0f0;
}
.notification-item-content { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.notification-item-title { font-weight: 600; font-size: 15px; color: #1a1a1a; }
/* pre-wrap so multi-line bodies (e.g. DOG_MISSED with the driver's note on
   its own line) render with the line breaks the backend authored. */
.notification-item-body { font-size: 14px; color: #555; white-space: pre-wrap; }
.notification-item-time { font-size: 12px; color: #888; }
.notifications-empty { padding: 32px 16px; text-align: center; color: #888; }
/* Per-type icon tints — subtle category cues, not load-bearing colors. */
.notif-type-phase    .notification-item-icon { background: #e8f5e9; }
.notif-type-schedule .notification-item-icon { background: #e3f2fd; }
.notif-type-task     .notification-item-icon { background: #f3e5f5; }
.notif-type-homestay .notification-item-icon { background: #fff3e0; }
.notif-type-missed   .notification-item-icon { background: #ffebee; }
.notif-type-default  .notification-item-icon { background: #f0f0f0; }

/* Brief highlight applied to a run-task element when arrived at via a
   notification deep link, so the driver's eye lands on the right stop. */
@keyframes run-task-flash {
  0%   { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.55); background-color: rgba(46, 125, 50, 0.12); }
  60%  { box-shadow: 0 0 0 8px rgba(46, 125, 50, 0); background-color: rgba(46, 125, 50, 0.06); }
  100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); background-color: transparent; }
}
.run-task-flash { animation: run-task-flash 2.1s ease-out; }

/* ── In-progress run banner (admin schedule edit) ──────────────────────── */
.run-in-progress-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 12px 16px;
  border-radius: 10px;
  background: #fff3cd;
  border: 1px solid #ffe08a;
  color: #5a4400;
  font-size: 14px;
  line-height: 1.4;
}
.run-in-progress-banner strong { color: #3d2c00; }
.run-in-progress-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  background: #e74c3c;
  box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6);
  animation: in-progress-pulse 1.6s ease-out infinite;
}
@keyframes in-progress-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* ── Van tabs (visually flush with header) ──────────────────────────────── */
.van-tabs {
  display: flex;
  gap: 6px;
  background: var(--green);
  padding: 0 10px 6px;
  flex-shrink: 0;
}

/* In-view date chip. Sits in a small strip at the top of the run-list
   area so it doesn't compete with the van tabs for horizontal space.
   On a normal (today) view it's a subtle grey chip aligned left; on a
   read-only view it gets folded into the yellow banner instead — same
   button, different container. The chip is a wrapper with a visible
   styled span and a transparent <input type="date"> overlaid on top
   of it — iOS Safari only opens the native picker when the actual
   date input is tapped, so anything else (showPicker() on an offscreen
   input, click forwarding via label) silently no-ops there. */
.run-date-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--grey-100, #f1f1f1);
  border: 1px solid var(--grey-200, #e3e3e3);
  color: var(--grey-700, #4a4a4a);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  overflow: hidden;
  /* Inside .run-readonly-banner (when viewing a non-today date) the chip
     sits in a row with the exceptions toggle, banner text and "Back to
     today" button. Without flex-shrink:0 the chip's label gets squeezed
     to zero on narrow screens, leaving the rounded vertical sliver that
     looked like a cylinder. min-width keeps the input-overlay area
     tappable even after a label compresses. */
  flex-shrink: 0;
  min-width: 0;
  white-space: nowrap;
}
.run-date-chip-label { min-width: 0; }
.run-date-chip:hover {
  background: var(--grey-200, #e3e3e3);
  color: var(--grey-900, #1a1a1a);
}
.run-date-chip-icon { font-size: 14px; line-height: 1; }
.run-date-chip-label { font-size: 12px; letter-spacing: 0.02em; }
/* Transparent date input that physically sits on top of the chip.
   iOS routes the tap to the input itself, which is what triggers
   the native date picker. */
.run-date-chip-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: transparent;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* Strip the chip lives in when viewing today — just a thin row above
   the focus card with the chip left-aligned, exceptions toggle to its
   right. Gap keeps the two chips visually paired but distinct. */
.run-date-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 0;
}

/* Exceptions toggle chip — sits to the right of 📅 on the run-date strip
   and inside the read-only banner. Same pill shape as .run-date-chip so
   the two read as a paired control. Badge shows total exceptions count
   when > 0. Open state adds an amber accent. */
.run-exc-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--grey-100, #f1f1f1);
  border: 1px solid var(--grey-200, #e3e3e3);
  color: var(--grey-700, #4a4a4a);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  /* Pair with .run-date-chip — both chips need flex-shrink:0 so the
     read-only banner can't squeeze them into vertical slivers. */
  flex-shrink: 0;
  white-space: nowrap;
}
.run-exc-toggle:hover {
  background: var(--grey-200, #e3e3e3);
  color: var(--grey-900, #1a1a1a);
}
.run-exc-toggle-icon { font-size: 14px; line-height: 1; }
.run-exc-toggle-label { font-size: 12px; letter-spacing: 0.02em; }
.run-exc-toggle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
}
.run-exc-toggle-open {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}
.run-exc-toggle-open:hover {
  background: #fde68a;
  color: #78350f;
}
.run-readonly-banner .run-exc-toggle {
  background: rgba(255,255,255,0.65);
  border-color: #ecd07a;
  color: #6b4d00;
}
.run-readonly-banner .run-exc-toggle-open {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}

/* Banner shown above the run when viewing a non-today date. The same
   📅 chip lives inside it on the left, so the calendar button stays
   in the same screen position whether or not the user has switched
   away from today. */
.run-readonly-banner {
  /* Two rows: a controls row (chips + back link) and the "Viewing {date}"
     label below it. Stacking these vertically means the date label can
     occupy the full banner width on narrow screens instead of being
     truncated against the right edge. */
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 14px;
  margin: 8px 12px 0;
  background: #fff4d6;
  border: 1px solid #ecd07a;
  border-radius: 8px;
  font-size: 13px;
  color: #6b4d00;
}
.run-readonly-banner-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.run-readonly-banner .run-date-chip {
  background: rgba(255,255,255,0.65);
  border-color: #ecd07a;
  color: #6b4d00;
}
.run-readonly-banner .run-date-chip:hover {
  background: rgba(255,255,255,0.9);
  color: #4a3300;
}
.run-readonly-banner-back {
  /* Sits on its own row below the chip row — align flush left so it
     reads as a back-link, not a buried action. align-self overrides
     any block-level stretch the column flex applies. */
  align-self: flex-start;
  background: transparent;
  border: none;
  color: #6b4d00;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 6px;
}

/* Non-today mode for the runs page. Hides only the per-dog status
   action buttons and the Start button — the dogs' statuses are a
   historical or planned snapshot and shouldn't be tap-toggled. Drag
   handles, Reorder, and "+ Task" stay visible so planning still works
   on past/future days. */
.run-readonly .focus-actions,
.run-readonly .focus-action,
.run-readonly #btn-start-run {
  display: none !important;
}
.run-readonly .run-focus-card { opacity: 0.9; }

/* "+ Task" button in the run header. Slim outline pill, sits next to
   the Reorder button. */
.btn-add-task {
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.btn-add-task:hover { background: rgba(0,128,64,0.08); }

/* Modal for creating a one-off task on the current run. Reuses the
   reorder-modal pattern — full-screen on mobile, centered card on
   wider screens. */
.add-task-modal {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 1300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.add-task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* iOS notch / status-bar safe area: without this the Cancel and Save
     buttons sit under the speaker banner and can't be tapped on
     iPhones. Matches the reorder-modal pattern. */
  padding: calc(var(--safe-top-actual, env(safe-area-inset-top, 0px)) + 12px) 16px 12px;
  background: var(--green);
  color: var(--white);
  flex-shrink: 0;
}
.add-task-title { font-size: 16px; font-weight: 700; }
.add-task-cancel,
.add-task-save {
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
.add-task-save[disabled] { opacity: 0.5; cursor: not-allowed; }
.add-task-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.add-task-field { display: flex; flex-direction: column; gap: 4px; }
.add-task-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--grey-700);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.add-task-field input,
.add-task-field textarea,
.add-task-field select {
  padding: 10px 12px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}
.add-task-field textarea { min-height: 70px; resize: vertical; }
.add-task-row { display: flex; gap: 10px; }
.add-task-row > .add-task-field { flex: 1; }
.van-tabs .tab {
  flex: 1;
  padding: 7px 10px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, color 0.15s;
}
.van-tabs .tab.active {
  background: rgba(255,255,255,0.20);
  color: var(--white);
}
.tab-pack {
  display: inline-block;
  background: rgba(255,255,255,0.22);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.03em;
}
.tab-count {
  display: inline-block;
  background: rgba(0,0,0,0.22);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ── Progress bar (slim under-header line, label hidden) ────────────────── */
.progress-wrap {
  position: relative;
  height: 3px;
  background: rgba(0,0,0,0.10);
  flex-shrink: 0;
}
.progress-bar {
  height: 100%;
  background: var(--white);
  transition: width 0.35s ease;
  width: 0%;
}
.progress-label { display: none; }

/* ── Views ────────────────────────────────────────────────────────────────── */
.view {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--safe-bot) + 16px);
}
.view.hidden { display: none; }
.view.active { display: flex; flex-direction: column; }

/* ── Run list ─────────────────────────────────────────────────────────────── */
.run-list { display: flex; flex-direction: column; }

.run-entry {
  display: flex;
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  padding: 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.run-entry:active { background: var(--grey-100); }

.entry-num {
  width: 36px;
  text-align: center;
  font-size: 13px;
  color: var(--grey-500);
  flex-shrink: 0;
}

.entry-body {
  flex: 1;
  padding: 12px 8px;
  min-width: 0;
}
.entry-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-address {
  font-size: 13px;
  color: var(--grey-500);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-gate {
  display: inline-block;
  margin-top: 4px;
  background: var(--amber);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

.entry-tick {
  width: 48px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tick-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid var(--grey-200);
  background: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: background 0.15s, border-color 0.15s;
}

/* Status variants */
.run-entry.picked-up { background: var(--green-pale); }
.run-entry.picked-up .entry-name { color: var(--grey-500); text-decoration: line-through; }
.run-entry.picked-up .tick-btn { background: var(--green); border-color: var(--green); color: white; }

.run-entry.absent .entry-name { color: var(--grey-500); text-decoration: line-through; }
.run-entry.absent .tick-btn { background: var(--red); border-color: var(--red); color: white; }

.run-entry.no-show .entry-name { color: var(--amber); }
.run-entry.no-show .tick-btn { border-color: var(--amber); color: var(--amber); }

#view-run {
  background: linear-gradient(180deg, #eef5ed 0%, #f7f8f5 160px, var(--grey-100) 100%);
}

.run-list {
  gap: 12px;
  padding: 12px;
}

.run-tasks-section {
  padding: 8px 16px;
  background: #fef9e7;
  border-bottom: 1px solid #f0e6c0;
}
.run-task-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px;
}
.run-task-check { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }

.run-focus-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
  background: linear-gradient(180deg, rgba(238,245,237,0.98) 0%, rgba(247,248,245,0.96) 80%, rgba(247,248,245,0) 100%);
  backdrop-filter: blur(8px);
}

.run-focus-card,
.next-dog-card,
.run-section {
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(30, 68, 40, 0.08);
}

.run-focus-card {
  padding: 12px 14px;
  border: 1px solid rgba(45,122,68,0.12);
}

.run-focus-card-complete {
  text-align: center;
  background: linear-gradient(180deg, #2f7e46 0%, #256338 100%);
  color: var(--white);
}

.focus-topline,
.next-dog-label,
.run-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.focus-topline { color: var(--green); }
.run-focus-card-complete .focus-topline { color: rgba(255,255,255,0.78); }

.focus-stop-inline {
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-500);
  letter-spacing: 0;
  text-transform: none;
}

.focus-name {
  margin-top: 6px;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #143020;
}
.run-focus-card-complete .focus-name { color: var(--white); }

.focus-address {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.35;
  color: #456254;
}
.run-focus-card-complete .focus-address { color: rgba(255,255,255,0.9); }

/* One-off address override: draws the eye so the driver doesn't
   auto-pilot to the usual address. Tappable to edit/clear. */
.focus-override-banner {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff3cd;
  color: #8a5a00;
  border: 1px solid #f5c97a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.focus-override-default {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: #8a6a2d;
  margin-top: 2px;
}
.run-focus-card.addr-overridden .focus-address,
.run-entry.addr-overridden .entry-address {
  font-weight: 700;
  color: #8a5a00;
}

.focus-gate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 8px;
  background: #f08a24;
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
}

.focus-eta {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}

.focus-meta {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-500);
}

.focus-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.focus-action {
  min-height: 56px;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
}
.focus-action:active { transform: translateY(1px); }
.focus-action:disabled,
.focus-action[disabled] {
  background: var(--grey-200, #e5e7eb);
  color: var(--grey-500, #9ca3af);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.85;
}
.focus-action:disabled:active,
.focus-action[disabled]:active {
  transform: none;
}

.rollcall-progress {
  margin-top: 6px;
  text-align: center;
  font-size: 13px;
  color: var(--grey-600, #6b7280);
}
.rollcall-progress-count {
  font-weight: 700;
  color: var(--grey-800, #1f2937);
}

.focus-picked {
  background: var(--green);
  color: var(--white);
}

.focus-missing {
  background: #fff4e7;
  color: #a14e00;
}

.run-start-card {
  text-align: center;
  background: linear-gradient(180deg, #f8faf9 0%, #eef5f0 100%);
  border: 2px solid var(--green);
}
.run-start-card .focus-topline { color: var(--green); font-weight: 700; font-size: 16px; }
.run-start-card .focus-name { color: var(--grey-500); font-size: 15px; font-weight: 400; }

.focus-start {
  background: var(--green);
  color: var(--white);
  width: 100%;
  font-size: 18px;
  padding: 18px;
}

.run-section {
  padding: 12px;
}

/* Handler name bar above current dog */
.run-handler-bar {
  font-size: 12px;
  font-weight: 700;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 2px 6px;
}

/* Section head controls */
.run-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.run-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.run-head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.btn-run-ctrl {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1.5px solid;
  cursor: pointer;
  background: none;
  white-space: nowrap;
}
.btn-reorder    { color: var(--green);      border-color: var(--green); }
.btn-start-over { color: var(--red);        border-color: var(--red); }
.btn-run-ctrl:active { opacity: 0.7; }

.run-section-count {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
}

.run-done-list,
.run-queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.run-entry {
  gap: 10px;
  border-radius: 14px;
  border-bottom: none;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.run-entry:active { transform: scale(0.995); background: var(--white); }

.run-entry-done {
  min-height: 58px;
  padding: 10px 12px;
  background: #f7faf7;
  border: 1px solid #e4ece5;
}

.done-status {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--green-dark);
  font-weight: 800;
  flex-shrink: 0;
}

.run-entry-done.no-show .done-status {
  background: #fff1de;
  color: #b86413;
}

.run-entry-done.absent .done-status {
  background: #fdebea;
  color: var(--red);
}

.done-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.run-entry-done .entry-body,
.run-entry-queue .entry-body {
  padding: 0;
}

.run-entry-done .entry-name {
  font-size: 15px;
  color: #617064;
}

.run-entry-done .entry-address {
  font-size: 12px;
  color: #92a095;
}

.compact-gate {
  font-size: 10px;
  padding: 2px 6px;
}

.run-entry-queue {
  min-height: 58px;
  padding: 8px 12px 8px 4px;
  border: 1px solid transparent;
}

.queue-position {
  min-width: 62px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.queue-entry-icon {
  width: 40px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
}

.run-entry-away {
  opacity: 0.55;
}

.run-entry-away .queue-entry-icon {
  color: #c0392b;
}

.queue-up-next {
  background: #ecf6ee;
  border-color: rgba(45,122,68,0.18);
  box-shadow: 0 8px 20px rgba(45,122,68,0.08);
}

.queue-up-next .entry-name {
  font-size: 17px;
}

.queue-on-deck {
  background: #f7faf8;
  border-color: rgba(45,122,68,0.08);
}

.queue-on-deck .entry-name {
  font-size: 15px;
}

.entry-body {
  flex: 1;
  min-width: 0;
}

.entry-name {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1f2f25;
}

.entry-address {
  font-size: 13px;
  color: var(--grey-500);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-gate {
  display: inline-block;
  margin-top: 6px;
  background: var(--amber);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

/* Status action sheet */
.action-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 100;
  display: flex;
  align-items: flex-end;
}
.action-sheet {
  background: var(--white);
  width: 100%;
  border-radius: 16px 16px 0 0;
  padding: 8px 0 calc(var(--safe-bot) + 8px);
}
.action-sheet-title {
  text-align: center;
  padding: 12px 16px 8px;
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid var(--grey-200);
}
.action-sheet-subtitle {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--grey-500);
}
.action-sheet-btn-primary { color: var(--green-dark); font-weight: 600; }
.action-sheet-btn {
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--grey-200);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
}
.action-sheet-btn:last-child { border-bottom: none; }
.action-sheet-btn:active { background: var(--grey-100); }
.action-sheet-btn.destructive { color: var(--red); }
.action-sheet-btn.cancel { color: var(--grey-500); justify-content: center; }
.action-sheet-btn-active { background: var(--green-pale); color: var(--green-dark); font-weight: 700; }
.action-sheet-cancel { color: var(--grey-500); justify-content: center; font-weight: 600; }

/* ── Side menu drawer (settings) ──────────────────────────────────────────── */
.side-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  animation: sideMenuFade 0.18s ease-out;
}
.side-menu-drawer {
  width: 82%;
  max-width: 320px;
  height: 100%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-top-actual) + 12px) 0 calc(var(--safe-bot) + 8px);
  box-shadow: -4px 0 16px rgba(0,0,0,0.25);
  animation: sideMenuSlide 0.22s ease-out;
}
.side-menu-header {
  padding: 8px 20px 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-500);
  border-bottom: 1px solid var(--grey-200);
}
.side-menu-item {
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--grey-200);
  font-size: 16px;
  font-weight: 500;
  color: var(--grey-800);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}
.side-menu-item:active { background: var(--grey-100); }
.side-menu-item:last-child { border-bottom: none; }

@keyframes sideMenuFade {
  from { background: rgba(0,0,0,0); }
  to   { background: rgba(0,0,0,0.5); }
}
@keyframes sideMenuSlide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ── Profile page (side-menu destination) ─────────────────────────────────── */
.profile-page {
  padding: 16px;
}
.profile-page-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.profile-page-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-page-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}
.profile-page-identity { min-width: 0; }
.profile-page-name {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.profile-page-username {
  font-size: 14px;
  color: var(--grey-500);
  margin-top: 2px;
}
.profile-page-meta {
  margin: 0;
  display: grid;
  gap: 12px;
}
.profile-page-meta > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--grey-200);
  padding-bottom: 10px;
}
.profile-page-meta dt {
  font-size: 13px;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.profile-page-meta dd {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.profile-page-signout {
  align-self: stretch;
}

/* ── Drag to reorder ──────────────────────────────────────────────────────── */
.drag-handle {
  width: 40px;
  height: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
}
.drag-handle:active { cursor: grabbing; }

/* 6-dot grid drag icon */
.drag-dots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 14px;
}
.drag-dots::before,
.drag-dots::after,
.drag-handle .drag-dots {
  content: '';
}
.drag-dots {
  background-image:
    radial-gradient(circle, #2979ff 2px, transparent 2px),
    radial-gradient(circle, #2979ff 2px, transparent 2px),
    radial-gradient(circle, #2979ff 2px, transparent 2px),
    radial-gradient(circle, #2979ff 2px, transparent 2px),
    radial-gradient(circle, #2979ff 2px, transparent 2px),
    radial-gradient(circle, #2979ff 2px, transparent 2px);
  background-size: 6px 6px;
  background-position:
    0 0, 8px 0,
    0 8px, 8px 8px,
    0 16px, 8px 16px;
  background-repeat: no-repeat;
  width: 14px;
  height: 22px;
}

/* SortableJS drag-and-drop styles.
   - .sortable-ghost  → placeholder where the dragged item will land. Shown
     as a faded green outline so the drop position is unambiguous.
   - .sortable-chosen → the source row, left in place while dragging. Faded
     so it's clear which row is "in flight".
   - .sortable-drag   → the floating clone that follows the finger/cursor
     (forceFallback mode). Lifted shadow signals it's grabbed. */
.sortable-ghost {
  opacity: 0.4;
  background: #ecfdf5 !important;
  border: 2px dashed var(--green) !important;
}
.sortable-chosen {
  opacity: 0.35;
}
.sortable-drag {
  opacity: 0.95;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  border-radius: 14px;
}

/* ── Reorder modal ────────────────────────────────────────────────────────── */
.reorder-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--bg, #f0f4f1);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.reorder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-top-actual) + 14px) 16px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.reorder-title {
  font-size: 16px;
  font-weight: 700;
  color: #1d3527;
}

.reorder-cancel {
  background: none;
  border: none;
  font-size: 15px;
  color: var(--grey-500);
  cursor: pointer;
  padding: 4px 8px;
  touch-action: manipulation;
}

.reorder-save {
  background: var(--green);
  color: var(--white);
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  padding: 7px 18px;
  cursor: pointer;
  touch-action: manipulation;
}
.reorder-save:active { opacity: 0.8; }

.reorder-hint {
  text-align: center;
  font-size: 12px;
  color: var(--grey-500);
  padding: 8px 0 2px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: var(--bg, #f0f4f1);
}

/* Phase toggle inside the Reorder modal — lets the driver flip between
   the pickup queue and the drop-off queue from the same surface. Visual
   matches the existing .sched-phase-toggle so the gesture/affordance is
   already familiar. */
.reorder-phase-toggle {
  display: flex;
  gap: 6px;
  padding: 8px 12px 0;
  background: var(--bg, #f0f4f1);
  flex-shrink: 0;
}
.reorder-phase-btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--grey-200, #e5e7eb);
  color: var(--grey-700, #4a4a4a);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.reorder-phase-btn:hover { background: var(--grey-100, #f3f4f6); }
.reorder-phase-btn.active {
  background: var(--green-pale, #e8f5e9);
  border-color: var(--green-dark, #2d7a44);
  color: var(--green-dark, #2d7a44);
}
.reorder-phase-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--grey-200, #e5e7eb);
  color: var(--grey-700, #4a4a4a);
}
.reorder-phase-btn.active .reorder-phase-count {
  background: var(--green-dark, #2d7a44);
  color: #fff;
}

.reorder-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px calc(var(--safe-bot) + 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overscroll-behavior: contain;
}

.reorder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: 14px;
  padding: 12px 12px 12px 4px;
  border: 1px solid var(--grey-200);
  min-height: 60px;
}

.reorder-row-current {
  background: #ecf6ee;
  border-color: rgba(45,122,68,0.2);
}

.reorder-row-body { flex: 1; min-width: 0; }

.reorder-row-name {
  font-size: 16px;
  font-weight: 700;
  color: #1f2f25;
  display: flex;
  align-items: center;
  gap: 6px;
}

.reorder-current-tag {
  font-size: 10px;
  font-weight: 800;
  background: var(--green);
  color: var(--white);
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reorder-row-addr {
  font-size: 13px;
  color: var(--grey-500);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* done entry is tappable — show cursor */
.run-entry-done { cursor: pointer; }

/* Loading/empty states */
.loading, .hint, .empty {
  text-align: center;
  color: var(--grey-500);
  font-size: 15px;
  padding: 40px 24px;
}

/* ── Search ───────────────────────────────────────────────────────────────── */
.search-bar { padding: 10px 12px; background: var(--white); border-bottom: 1px solid var(--grey-200); }
.search-bar input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  font-size: 16px;
  background: var(--grey-100);
}
.search-bar input:focus { outline: 2px solid var(--green); border-color: var(--green); }

.search-results { display: flex; flex-direction: column; }

.search-card {
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  padding: 12px 16px;
  cursor: pointer;
}
.search-card:active { background: var(--grey-100); }
.search-card-name { font-size: 16px; font-weight: 600; }
.search-card-sub  { font-size: 13px; color: var(--grey-500); margin-top: 2px; }

/* ── Dog detail ───────────────────────────────────────────────────────────── */
.dog-detail {
  padding: 0;
}
/* ── Dog detail hero ──────────────────────────────────────────────────────── */
.detail-hero {
  background: linear-gradient(180deg, var(--green) 0%, #246827 100%);
  color: var(--white);
  padding: 28px 16px 28px;
  text-align: center;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 12px;
  position: relative;
}
.detail-hero::after {
  /* Subtle curve shadow beneath the hero to separate it from the first section. */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px;
}
.detail-hero-name  { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.detail-hero-breed { opacity: 0.85; font-size: 14px; margin-top: 4px; min-height: 18px; }

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}
.profile-badge {
  background: rgba(255,255,255,0.2);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.profile-badge.badge-green { background: rgba(46,204,113,0.35); }
.profile-badge.badge-red   { background: rgba(192,57,43,0.4); }
.profile-badge.badge-amber { background: rgba(230,126,34,0.4); }
.profile-badge.van-badge-sm { background: rgba(255,255,255,0.25); }

/* Edit button in the dog-detail hero. Floats top-right on desktop; centered
   below badges on narrow screens. */
.dog-edit-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}
.dog-edit-hero-btn:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.7);
}

/* Placeholder for empty dog-profile fields — keeps all sections visible so
   the admin can see what's fillable at a glance. */
.profile-note-empty {
  color: var(--grey-400, #bbb);
  font-style: italic;
  font-size: 13px;
}

/* ── Dog photo ──────────────────────────────────────────────────────────── */
.dog-photo-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 14px;
}
.dog-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: rgba(255,255,255,0.15);
  border: 3px solid rgba(255,255,255,0.7);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.dog-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  line-height: 1;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.1);
}
.dog-photo-upload {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  color: var(--green, #2e7d32);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  border: 2px solid var(--green, #2e7d32);
  transition: transform 0.12s ease;
}
.dog-photo-upload:hover { transform: scale(1.08); }
.dog-photo-upload input { display: none; }
.dog-photo-delete {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  color: #c62828;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  border: 2px solid #c62828;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.12s ease;
}
.dog-photo-delete:hover { transform: scale(1.08); }

/* Owner-portal photo styling — smaller, inline with the dog name, uses
   green-on-white colour scheme since it's not on a green hero. */
.owner-dog-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.owner-dog-photo-wrap {
  width: 56px;
  height: 56px;
  margin: 0;
}
.owner-dog-photo-wrap .dog-photo {
  width: 56px;
  height: 56px;
  border: 2px solid var(--grey-200, #e5e5e5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.owner-dog-photo-wrap .dog-photo-placeholder {
  font-size: 26px;
  color: var(--grey-400, #bbb);
  background: var(--grey-100, #f0f0f0);
}
.owner-dog-photo-wrap .dog-photo-upload {
  width: 22px;
  height: 22px;
  font-size: 11px;
  bottom: -2px;
  right: -2px;
}
.owner-dog-photo-wrap .dog-photo-delete {
  width: 20px;
  height: 20px;
  font-size: 10px;
  top: -2px;
  right: -2px;
}

/* Small circular avatar reusable in lists (run entries, FB triage, etc.) */
.dog-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--grey-100, #f0f0f0);
  border: 1px solid var(--grey-200, #e5e5e5);
  flex-shrink: 0;
}
.dog-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grey-100, #f0f0f0);
  border: 1px solid var(--grey-200, #e5e5e5);
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Detail sections ──────────────────────────────────────────────────────── */
.detail-section {
  background: var(--white);
  margin: 12px 12px 0;
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.detail-section + .detail-section { margin-top: 12px; }
.detail-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-700, #555);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--grey-100, #f0f0f0);
}

/* First section after the hero gets a little extra separation. */
.detail-hero + .detail-section { margin-top: 16px; }

/* ── Owner cards ──────────────────────────────────────────────────────────── */
.owner-card {
  background: white;
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.owner-card:last-child { margin-bottom: 0; }

.owner-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--grey-100);
}
.owner-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.owner-card-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--grey-900, #222);
  letter-spacing: -0.01em;
}
.owner-card-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--green, #2e7d32);
  color: white;
}
.owner-edit-btn {
  background: white;
  border: 1px solid var(--grey-300, #ccc);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green, #2e7d32);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.owner-edit-btn:hover {
  background: var(--grey-50, #fafafa);
  border-color: var(--green, #2e7d32);
}

.owner-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.owner-primary-star {
  color: #f5a623;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.owner-make-primary-btn {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--grey-400, #bbb);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s ease;
}
.owner-make-primary-btn:hover {
  color: #f5a623;
}
.owner-remove-btn {
  background: white;
  border: 1px solid var(--grey-300, #ccc);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-600, #666);
  cursor: pointer;
  transition: all 0.12s ease;
}
.owner-remove-btn:hover {
  background: #fdecea;
  border-color: #c62828;
  color: #c62828;
}
.owner-remove-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Two-column layout for Contact + Address on desktop; collapses on mobile. */
.owner-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.owner-field-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-500, #888);
  margin-bottom: 8px;
}

.owner-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--grey-800, #333);
  margin-bottom: 6px;
}
.owner-field:last-child { margin-bottom: 0; }
.owner-field-icon {
  flex: 0 0 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
}
.owner-field a {
  color: var(--green, #2e7d32);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.12s ease;
}
.owner-field a:hover {
  border-bottom-color: var(--green, #2e7d32);
}
.owner-field-value {
  color: var(--grey-800, #333);
}
.owner-field-empty {
  color: var(--grey-400, #bbb);
  font-style: italic;
  font-size: 13px;
}

.owner-field-secondary {
  padding-top: 10px;
  border-top: 1px solid var(--grey-100);
}

.owner-add-row {
  margin-top: 14px;
  text-align: center;
}
.owner-add-row .btn-secondary {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
}

/* Owner editor: list of other dogs in the household, each navigable. */
.owner-dogs-list { display: flex; flex-direction: column; gap: 6px; }
.owner-dog-row { background: var(--grey-50); border-radius: 8px; }
.owner-dog-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  color: inherit; text-decoration: none;
  font-size: 14px;
}
.owner-dog-link:hover { background: var(--grey-100); }
.owner-dog-name { font-weight: 600; }
.owner-dog-breed { color: var(--grey-500); font-size: 13px; }
.owner-dog-inactive {
  font-size: 11px; text-transform: uppercase;
  color: var(--grey-500); letter-spacing: 0.04em;
}
.owner-dog-row-editable { padding: 0; }
.owner-dog-row-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 0;
}
.owner-dog-row-head .owner-dog-link { flex: 1; }
.owner-dog-edit-toggle { padding: 6px 10px; font-size: 12px; flex-shrink: 0; }
.owner-dog-edit-panel { padding: 8px 12px 12px; border-top: 1px solid var(--grey-200); }
.owner-dog-edit-panel.hidden { display: none; }
.owner-dog-edit-panel .setup-section { margin-bottom: 12px; }
.owner-dog-edit-panel .setup-section:last-child { margin-bottom: 0; }

/* Owner search picker results. */
.owner-search-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.owner-search-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.owner-search-row:hover { background: var(--grey-100); }
.owner-search-name { font-weight: 600; font-size: 14px; }
.owner-search-meta { font-size: 12px; color: var(--grey-500); }

/* ── Profile notes (behaviour / vet) ─────────────────────────────────────── */
.profile-note-row {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--grey-100);
  align-items: flex-start;
}
.profile-note-row:last-child { border-bottom: none; }
.profile-note-icon  { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; margin-top: 1px; }
.profile-note-label { font-size: 12px; font-weight: 700; color: var(--grey-500); margin-bottom: 2px; }
.profile-note-text  { font-size: 14px; line-height: 1.5; color: var(--grey-800); }
.profile-note-text a { color: var(--green); text-decoration: none; font-weight: 600; }

/* Legacy compat */
.gate-code-display {
  display: inline-block;
  background: var(--amber);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 10px;
  margin-top: 2px;
  letter-spacing: 0.1em;
}

/* ── Admin panel (tab row flush with header) ────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 6px;
  background: var(--green);
  padding: 0 10px 6px;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-tab {
  flex: 1;
  min-width: 72px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.admin-tab.active { color: var(--white); background: rgba(255,255,255,0.20); }

.admin-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--safe-bot) + 16px);
}
.btn-secondary {
  border: 1.5px solid var(--grey-300);
  border-radius: 10px;
  background: var(--white);
  color: var(--grey-700);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  cursor: pointer;
}
.btn-secondary:hover {
  background: var(--grey-100);
}

.admin-section {
  background: var(--white);
  margin-top: 10px;
  padding: 14px 16px;
}
.admin-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-500);
  margin-bottom: 10px;
}

/* Day pills */
.day-pills {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  overflow-x: auto;
}
.day-pill {
  padding: 6px 16px;
  border: 2px solid var(--grey-200);
  border-radius: 20px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--grey-800);
  white-space: nowrap;
}
.day-pill.active { border-color: var(--green); color: var(--green); background: var(--green-pale); }

/* Admin van header */
.admin-van-header {
  background: var(--grey-100);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-500);
  border-bottom: 1px solid var(--grey-200);
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-van-header.van-blue  { background: #e3f0ff; color: #1565c0; border-left: 4px solid #1565c0; }
.admin-van-header.van-white { background: #f5f5f5; color: #555; border-left: 4px solid #bdbdbd; }
.count-badge {
  background: var(--green);
  color: var(--white);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
}

/* Schedule list */
.sched-list { display: flex; flex-direction: column; }
.sched-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--grey-100);
  gap: 10px;
}
.sched-pos { width: 24px; text-align: center; font-size: 13px; color: var(--grey-500); flex-shrink: 0; }
.sched-name { flex: 1; font-size: 15px; }
.sched-name small { color: var(--grey-500); }
.sched-rm {
  background: none; border: none; color: var(--red);
  font-size: 16px; cursor: pointer; padding: 4px 8px;
  flex-shrink: 0;
}

/* Schedule (new) */
.sched-driver {
  padding: 4px 16px 8px;
  font-size: 13px;
  color: var(--grey-500);
}
.sched-dog-list { display: flex; flex-direction: column; }
.sched-dog-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 16px;
  border-top: 1px solid var(--grey-100);
  gap: 6px 8px;
}
.sched-chevron { font-size: 14px; color: var(--grey-500); margin-left: 8px; flex-shrink: 0; }
.sched-dog-name { flex: 1 1 auto; min-width: 0; font-size: 15px; }
.sched-dog-breed { font-size: 13px; color: var(--grey-500); }

/* Collapsible schedule dog row: compact by default, click to reveal the
   full badge + action set. Keeps the schedule list scannable when several
   dogs have homestay/owner/address-override annotations on the same day. */
.sched-dog-row-collapsible {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
  cursor: pointer;
}
.sched-dog-row-collapsible .sched-dog-row-head {
  display: flex;
  align-items: center;
  gap: 6px 8px;
  padding: 10px 16px;
}
.sched-dog-row-collapsible.sched-dog-row-open .sched-dog-row-head {
  background: var(--grey-50);
}
.sched-dog-chevron {
  margin-left: auto;
  transition: transform 0.12s ease;
}
.sched-mini-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 4px;
  flex-shrink: 0;
}
.sched-mini-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.sched-mini-away { background: #fde8e8; color: #c0392b; }
.sched-mini-homestay { background: #fef3e2; color: #e67e22; }
.sched-mini-owner { background: #eef2ff; color: #4338ca; }
.sched-mini-addr { background: #fff3cd; color: #8a5a00; font-size: 11px; }
.sched-dog-expanded {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px 12px 40px;
  background: #fafafa;
  border-top: 1px dashed var(--grey-200);
}
.sched-dog-expanded-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sched-dog-expanded-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Calendar */
.sched-calendar { padding: 0 8px; }
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px; font-weight: 700; font-size: 16px;
}
.cal-nav {
  background: none; border: 1px solid var(--grey-200); border-radius: 8px;
  padding: 6px 14px; font-size: 16px; cursor: pointer; color: var(--grey-800);
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.cal-head {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--grey-500); padding: 4px 0; text-transform: uppercase;
}
.cal-cell {
  text-align: center; padding: 10px 0; border-radius: 10px;
  font-size: 14px; cursor: pointer; transition: background 0.12s;
}
.cal-cell:hover { background: var(--grey-50); }
.cal-empty { cursor: default; }
/* Weekends are pickable too — admin can pin one-off tasks on Sat/Sun. */
.cal-weekend { color: var(--grey-400); }
.cal-today { font-weight: 800; color: var(--green); }
.cal-selected {
  background: var(--green); color: var(--white); font-weight: 700;
}
.cal-selected:hover { background: var(--green); }
.cal-selected.cal-today { color: var(--white); }

/* Week strip (compact calendar) */
.cal-week-row {
  display: flex; gap: 2px; justify-content: space-between; padding: 0 4px;
}
.cal-week-row .cal-cell {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 6px 0; min-width: 0;
}
.cal-week-day {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--grey-500); margin-bottom: 2px;
}
.cal-week-num { font-size: 15px; font-weight: 700; }
.cal-month-grid { overflow: hidden; transition: max-height 0.25s ease; }
.cal-month-grid.hidden { max-height: 0 !important; padding: 0; }

/* Collapsed calendar header — shown when calOpen is false. Click the label
   or chevron to expand; the < > arrows step the day in place. */
.cal-collapsed-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px;
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  background: var(--white);
}
.cal-collapsed-label {
  flex: 1; text-align: center; font-weight: 700; font-size: 15px;
  cursor: pointer; user-select: none;
}
.cal-collapsed-chevron {
  font-size: 14px; color: var(--grey-500); cursor: pointer;
  padding: 4px 8px;
}
.cal-step { padding: 6px 12px; }
.cal-collapse-btn { font-size: 14px; padding: 6px 10px; }

/* Run dashboard */
.sched-run-dashboard {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 4px 12px;
}
.sched-dash-van {
  border-radius: 12px; padding: 10px 12px;
}
.sched-dash-van-blue {
  background: #e3f0ff; border-left: 4px solid #1565c0;
}
.sched-dash-van-white {
  background: #f5f5f5; border-left: 4px solid #9e9e9e;
}
.sched-dash-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.sched-dash-info { flex: 1; min-width: 0; }
.sched-dash-name { font-size: 14px; font-weight: 700; }
.sched-dash-sub { font-size: 11px; color: var(--grey-500); }
.sched-dash-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 10px; text-transform: uppercase; white-space: nowrap;
}
.sched-dash-badge-planned { background: var(--grey-100); color: var(--grey-500); }
.sched-dash-badge-live { background: #e8f7ec; color: #1e7a34; }
.sched-dash-badge-rollcall { background: #fff3e6; color: #e67e22; }
.sched-dash-badge-complete { background: #e8f5e9; color: #2e7d32; }
.sched-dash-progress {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; color: var(--grey-600);
  margin-bottom: 4px;
}
.sched-dash-bar {
  height: 6px; border-radius: 3px; background: rgba(0,0,0,0.08); overflow: hidden;
}
.sched-dash-fill {
  height: 100%; border-radius: 3px; transition: width 0.3s ease;
  background: linear-gradient(90deg, #43a047, #66bb6a);
}
.sched-dash-actions {
  display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap;
}
.sched-dash-actions button {
  font-size: 11px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--grey-200); background: var(--white);
  cursor: pointer; font-weight: 600;
}
.sched-dash-actions .btn-delete {
  color: var(--red, #c0392b); border-color: var(--red, #c0392b);
}
/* Dashboard collapsed pill row */
.sched-dash-collapsed {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 4px 0;
}
.sched-dash-pills-row {
  display: flex; gap: 6px; flex: 1; flex-wrap: wrap;
}
.sched-dash-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 600;
}
.sched-dash-pill-van {
  font-weight: 800; font-size: 11px; text-transform: uppercase;
}
.sched-dash-pill-phase { opacity: 0.85; }
.sched-dash-pill-progress { font-weight: 700; }
.sched-dash-expand-hint {
  font-size: 14px; color: var(--grey-400); flex-shrink: 0; padding: 0 4px;
}
.sched-dash-detail {
  display: flex; flex-direction: column; gap: 8px; margin-top: 6px;
}
.sched-dash-btn-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* Exceptions summary */
.sched-exceptions {
  padding: 0 4px 8px;
}
.sched-exceptions-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: var(--grey-500); margin-bottom: 6px; letter-spacing: 0.03em;
}
.sched-exception-list {
  display: flex; flex-direction: column; gap: 3px;
}
.sched-exception-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 8px;
  font-size: 13px; background: var(--grey-50);
}
.sched-exception-item .sched-badge { flex-shrink: 0; }
.sched-exception-van {
  font-size: 10px; color: var(--grey-500); margin-left: auto;
}
.sched-ex-actions { display: flex; gap: 4px; margin-left: 4px; }
.sched-ex-actions button {
  border: none; background: transparent; cursor: pointer;
  padding: 2px 6px; border-radius: 4px; font-size: 13px;
  color: var(--grey-500);
}
.sched-ex-actions button:hover { background: var(--grey-100); color: var(--grey-700); }
.sched-ex-actions .sched-ex-delete:hover { background: #fee2e2; color: #c0392b; }

.sched-day-detail { padding: 12px 8px; }
.sched-day-title { font-size: 18px; font-weight: 700; margin: 0 4px 12px; }
.sched-day-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 4px 12px;
}
.sched-day-header .sched-day-title { margin: 0; flex: 1; min-width: 0; }
.sched-add-task-cta {
  background: var(--green, #2e7d32);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.sched-add-task-cta:hover { background: #256528; }
.sched-add-task-cta:active { transform: translateY(1px); }

.rt-van-picker { display: flex; gap: 8px; margin-top: 4px; }
.rt-van-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 2px solid var(--grey-200, #e0e0e0);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.rt-van-btn.active {
  border-color: var(--green, #2e7d32);
  background: rgba(46,125,50,0.08);
}
.rt-van-btn .rt-van-name { font-weight: 700; font-size: 14px; }
.rt-van-btn .rt-van-driver { font-size: 12px; color: var(--grey-500, #666); }

/* Run-state pills on the calendar day detail. Replace the old always-on
   "Generate Run" button when a run already exists for the day. */
.sched-run-state { margin-top: 4px; }
.sched-run-pills {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px;
}
.sched-run-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 14px;
  font-size: 12px; font-weight: 700;
  border: 1px solid transparent;
}
.sched-run-pill-icon { font-size: 11px; line-height: 1; }
.sched-run-pill-planned {
  background: #eef4ff; color: #1f4fa8; border-color: #cfdcf5;
}
.sched-run-pill-live {
  background: #e8f7ec; color: #1e7a34; border-color: #bfe5c8;
}
.sched-run-pill-live .sched-run-pill-icon {
  color: #1e9b3d;
  animation: schedRunPulse 1.6s ease-in-out infinite;
}
@keyframes schedRunPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.sched-run-pill-done {
  background: var(--grey-100, #f1f1f2); color: var(--grey-600, #555);
  border-color: var(--grey-200, #e2e2e4);
}
.sched-run-note {
  font-size: 11px; color: var(--grey-600, #666);
  padding: 0 2px; line-height: 1.35;
}
.sched-run-note-done { color: var(--grey-500, #888); }

/* Schedule badges */
.sched-badge {
  font-size: 10px; font-weight: 800; padding: 2px 7px;
  border-radius: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  flex-shrink: 0;
}
.sched-badge-away { background: #fde8e8; color: #c0392b; }
.sched-away-remove { border: none; cursor: pointer; font-family: inherit; }
.sched-away-remove:hover { background: #fbd0d0; }
.sched-badge-homestay { background: #fef3e2; color: #e67e22; }
.sched-badge-induction { background: #fdf2f8; color: #be185d; }
.sched-badge-temp-addr { background: #f5f3ff; color: #6d28d9; }
.live-entry-induction-note {
    background: #fdf2f8;
    border-left: 3px solid #f472b6;
    color: #831843;
    padding: 10px 12px;
    border-radius: 6px;
    margin: 6px 0;
    line-height: 1.4;
}
.live-entry-induction-note ul { margin: 4px 0; padding-left: 20px; }
.live-entry-induction-note code {
    background: rgba(190,24,93,0.08);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.92em;
}
.focus-induction-note ul { margin: 4px 0; padding-left: 20px; }
.focus-induction-note code {
    background: rgba(190,24,93,0.08);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.92em;
}
.sched-badge-owner { background: #eef2ff; color: #4338ca; border: none; cursor: pointer; font-family: inherit; }
.sched-badge-owner:hover { background: #e0e7ff; }
.run-entry-owner { border-left: 3px solid #4338ca; background: rgba(67,56,202,0.04); }
.run-entry-owner .queue-position { color: #4338ca; font-weight: 700; }

/* Drag handle on the focus card — sits in the top-right corner, small enough
   to stay out of the driver's way but always reachable for reorder. */
.run-focus-card { position: relative; }
.focus-drag-handle {
  position: absolute;
  top: 8px; right: 10px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.04);
  border: none;
  border-radius: 10px;
  font-size: 20px;
  color: var(--grey-500);
  cursor: grab;
  touch-action: none;
  z-index: 2;
}
.focus-drag-handle:active { cursor: grabbing; background: rgba(0,0,0,0.08); }

/* Inline drag handle on each pending queue row so any dog (not just the
   focus card) can be reordered without opening the modal. Sits on the
   left edge of the row at the same height as the queue icon. */
.queue-drag-handle {
  width: 32px;
  align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--grey-400);
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
  margin-right: -4px;
}
.queue-drag-handle:active { cursor: grabbing; color: var(--grey-600); }

/* Shared dog chip: wraps a dog's name everywhere so a tap opens the summary
   sheet. Visually a near-invisible button — inherit text styling, subtle
   underline on hover, bold keeps the name's emphasis where it was before. */
.dog-chip {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
  touch-action: manipulation;
  border-bottom: 1px dotted transparent;
}
.dog-chip:hover, .dog-chip:focus { border-bottom-color: currentColor; outline: none; }
.dog-chip:active { opacity: 0.7; }
.dog-chip-focus { font: inherit; color: inherit; }

/* Subtle breed label that rides alongside the dog name on the daily run
   focus card, queue rows, and reorder modal. Lighter weight + grey so the
   name stays the visual anchor. */
.dog-breed {
  font-weight: 400;
  color: var(--grey-500);
  font-size: 0.9em;
  margin-left: 4px;
}

/* Dog summary bottom sheet — reuses .action-sheet-overlay but gives the
   inner sheet a header with photo + quick facts, and a pencil icon to
   jump to the full dog detail view for edits. */
.dog-sheet {
  padding: 0 0 calc(var(--safe-bot) + 8px);
  max-height: 80vh;
  overflow-y: auto;
}
.dog-sheet-loading {
  padding: 32px 16px;
  text-align: center;
  color: var(--grey-500);
}
.dog-sheet-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--grey-200);
}
.dog-sheet-photo {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--grey-100);
  flex-shrink: 0;
}
.dog-sheet-photo-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--grey-500);
  background: var(--grey-100);
}
.dog-sheet-heading {
  flex: 1; min-width: 0;
}
.dog-sheet-name {
  font-size: 18px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dog-sheet-name-editable {
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: text; max-width: 100%;
  border-radius: 4px;
}
.dog-sheet-name-editable:hover {
  background: var(--grey-100);
  box-shadow: 0 0 0 4px var(--grey-100);
}
.dog-sheet-name-editor {
  display: flex; flex-direction: column; gap: 6px;
}
.dog-sheet-name-input {
  font-size: 18px; font-weight: 700;
  padding: 6px 8px;
  border: 1px solid var(--grey-300, #ccc);
  border-radius: 6px;
  outline: none;
  width: 100%; box-sizing: border-box;
}
.dog-sheet-name-input:focus {
  border-color: var(--green-dark, #2c8a4a);
  box-shadow: 0 0 0 3px var(--green-pale, rgba(44,138,74,0.18));
}
.dog-sheet-name-actions {
  display: flex; gap: 8px;
}
.dog-sheet-name-actions button {
  font-size: 13px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px; border: 1px solid var(--grey-200);
  background: #fff; cursor: pointer;
}
.dog-sheet-name-save {
  background: var(--green-pale, #e6f4ec);
  color: var(--green-dark, #2c8a4a);
  border-color: var(--green-pale, #e6f4ec) !important;
}
.dog-sheet-name-save:disabled, .dog-sheet-name-cancel:disabled {
  opacity: 0.6; cursor: default;
}
.dog-sheet-name-error {
  font-size: 12px; color: #b91c1c;
}
.dog-sheet-chips {
  font-size: 13px; color: var(--grey-500);
  margin-top: 2px;
}
.dog-sheet-edit, .dog-sheet-close {
  border: none; background: none;
  font-size: 18px; color: var(--grey-500);
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer;
}
.dog-sheet-edit:hover, .dog-sheet-close:hover { background: var(--grey-100); color: var(--text-dark, #222); }
.dog-sheet-body { padding: 8px 16px 16px; }
.dog-sheet-row {
  display: flex; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--grey-100);
  font-size: 14px;
}
.dog-sheet-row:last-child { border-bottom: none; }
.dog-sheet-row-label {
  flex: 0 0 96px;
  color: var(--grey-500);
  font-weight: 500;
}
.dog-sheet-row-val { flex: 1; min-width: 0; word-wrap: break-word; }
.dog-sheet-row-notes .dog-sheet-row-val { white-space: pre-wrap; }
.dog-sheet-empty {
  text-align: center; color: var(--grey-500);
  padding: 16px; font-size: 14px;
}
.sched-badge-guest { background: #e8f5e9; color: #2d7a44; }
.sched-badge-pickup { background: #e3f2fd; color: #1565c0; }
.sched-badge-dropoff { background: #fff3e0; color: #e65100; }
/* "NEW" — settling-in badge for dogs in their first two weeks. Bright enough
   to catch the driver/admin's eye without screaming over the dog's name. */
.sched-badge-new {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffd566;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.sched-dog-dimmed { opacity: 0.5; text-decoration: line-through; }
/* Keep action buttons fully tappable on dimmed (away / homestay) rows so
   admins can cancel the state or flip to a different one without expanding. */
.sched-dog-dimmed .sched-dog-row-actions { opacity: 1; }
.sched-dog-dimmed .sched-action-btn { text-decoration: none; }
.sched-dog-homestay { background: rgba(230,126,34,0.06); }
.sched-homestay-remove { border: none; cursor: pointer; font-family: inherit; }
.sched-homestay-remove:hover { background: #f9deb8; }
.sched-dog-guest { background: rgba(76,175,80,0.06); cursor: pointer; }

/* Per-dog action buttons (Away / Homestay / Owner) on Schedule rows.
   All share the same pill shape + size so they read as a uniform action
   group. Each is tinted with the same colour as the badge it will create,
   giving the handler an immediate preview of what the row will look like
   after the tap without shouting at them with a filled colour. */
.sched-action-btn {
  background: none; border: 1px solid var(--grey-200); border-radius: 999px;
  padding: 3px 10px; font-size: 11px; font-weight: 600;
  line-height: 1.3;
  cursor: pointer; color: var(--grey-500);
  flex-shrink: 0;
  min-width: 64px;
  text-align: center;
}
.sched-action-btn:hover { background: var(--grey-50); }
.sched-action-btn.sched-mark-away {
  border-color: #f3b1b1;
  color: #b83232;
}
.sched-action-btn.sched-mark-away:hover { background: #fde8e8; }
.sched-action-btn.sched-mark-homestay,
.sched-action-btn.sched-flip-to-homestay {
  border-color: #f3c789;
  color: #a35400;
}
.sched-action-btn.sched-mark-homestay:hover,
.sched-action-btn.sched-flip-to-homestay:hover {
  background: #fef3e2;
}
.sched-action-btn.sched-mark-owner {
  border-color: #c7d0f8;
  color: #4338ca;
}
.sched-action-btn.sched-mark-owner:hover { background: #eef2ff; }
/* Pickup/Dropoff address override button — tinted so it doesn't read
 * as disabled next to the colour-coded Owner / Away / Homestay pills. */
.sched-action-btn.sched-change-addr {
  border-color: #f3b1b1;
  color: #b83232;
}
.sched-action-btn.sched-change-addr:hover { background: #fde8e8; }
.sched-action-btn.sched-action-cancel {
  border-color: #f3b1b1;
  color: #b83232;
}
.sched-action-btn.sched-action-cancel:hover { background: #fde8e8; }

/* Tasks */
.sched-task-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid var(--grey-100);
}
.sched-task-text { flex: 1; font-size: 14px; }
.sched-task-done { text-decoration: line-through; opacity: 0.5; }
.sched-task-assignee {
  font-size: 11px; font-weight: 700; color: var(--grey-500);
  background: var(--grey-50); padding: 2px 6px; border-radius: 6px;
}
.sched-task-check { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }

/* Homestay */
.sched-homestay-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 4px; border-bottom: 1px solid var(--grey-100);
}
.sched-homestay-dates { font-size: 12px; color: var(--grey-500); }
.sched-homestay-notes {
  width: 100%; font-size: 12px; color: var(--grey-500);
  font-style: italic; margin-top: 2px;
}

/* Schedule save bar */
.sched-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--white);
  border-top: 2px solid var(--green);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
}

/* Roster */
.roster-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  gap: 12px;
}
.roster-row.inactive { opacity: 0.5; }
.roster-info { flex: 1; }
.roster-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.roster-name small { font-weight: 400; color: var(--grey-500); }
.roster-sub { font-size: 12px; color: var(--grey-500); margin-top: 2px; }

/* Setup-needed roster card — surfaces newly-created dogs awaiting owner details. */
.roster-row.roster-setup {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-bottom: 1px solid var(--grey-200);
}
.roster-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #92400e;
  background: #fde68a;
  padding: 2px 8px;
  border-radius: 999px;
}
.roster-setup-btn { flex-shrink: 0; }

/* Dog setup modal — new-dog onboarding + owner invite link. */
.dog-setup-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 1000;
}
@media (min-width: 640px) {
  .dog-setup-modal { align-items: center; }
}
.dog-setup-panel {
  background: var(--white);
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  padding: 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  display: flex; flex-direction: column;
}
@media (min-width: 640px) {
  .dog-setup-panel { border-radius: 16px; }
}
/* Owner-ledger override — the bills table has 7 columns and the default
   520px panel forces a horizontal scrollbar on desktop. Widen and centre
   so the table breathes; keeps the bottom-sheet feel on phones. */
#owner-ledger-modal { justify-content: center; align-items: center; }
#owner-ledger-modal .dog-setup-panel {
  max-width: min(1100px, 96vw);
  max-height: 94vh;
}
.setup-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--grey-200);
}
.setup-title { font-size: 18px; font-weight: 700; }
.setup-subtitle { font-size: 13px; color: var(--grey-500); margin-top: 2px; }
.setup-close {
  background: none; border: none;
  font-size: 28px; line-height: 1;
  color: var(--grey-500); cursor: pointer;
  padding: 4px 8px;
}
.setup-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 20px; }
.setup-section { display: flex; flex-direction: column; gap: 10px; }
.setup-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey-500);
}
.setup-hint { font-size: 13px; color: var(--grey-500); margin: 0; line-height: 1.4; }
.setup-form-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.setup-form-grid label {
  display: flex; flex-direction: column;
  font-size: 12px; color: var(--grey-500); gap: 4px;
}
.setup-form-grid input {
  padding: 10px 12px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font-size: 14px;
  color: var(--grey-900, #111);
}
.setup-error { color: #b91c1c; font-size: 13px; margin: 0; }
.setup-owner-card {
  background: var(--grey-50);
  border-radius: 8px;
  padding: 12px;
}
.setup-owner-name { font-size: 15px; font-weight: 600; }
.setup-owner-meta { font-size: 13px; color: var(--grey-500); margin-top: 2px; }
.setup-invite-output {
  background: var(--grey-50);
  border-radius: 8px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.setup-invite-username { font-size: 13px; color: var(--grey-500); }
.invite-code-block {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 8px;
}
.invite-code-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey-500);
}
.invite-code-value {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 24px; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--green);
}

/* Mobile invite landing — opened when an owner taps the invite link on a
   mobile browser before installing the app. Shows the claim code so they
   can enter it in the app after install. */
.invite-landing {
  max-width: 460px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 16px;
  min-height: 100vh;
  box-sizing: border-box;
}
.invite-landing-logo img { width: 96px; height: 96px; }
.invite-landing-title { font-size: 24px; font-weight: 700; margin: 0; }
.invite-landing-subtitle {
  font-size: 15px; color: var(--grey-500);
  line-height: 1.5; margin: 0;
}
.invite-landing-code-box {
  background: var(--grey-50);
  border: 2px solid var(--green);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.invite-landing-code-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grey-500);
}
.invite-landing-code {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 32px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green);
}
.invite-landing-store { width: 100%; text-align: center; text-decoration: none; }
.invite-landing-browser { width: 100%; }
.invite-landing-hint {
  font-size: 12px; color: var(--grey-500);
  margin: 0;
}

/* Divider between the sign-in form and the "I have an invite code" path. */
.login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 12px;
  color: var(--grey-500);
  font-size: 12px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--grey-200);
}
#invite-code-input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}
#btn-invite-code-back { margin-top: 8px; }
.setup-invite-url-row { display: flex; gap: 8px; }
.setup-invite-url-row .invite-url {
  flex: 1; min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font-size: 12px;
  font-family: monospace;
  background: var(--white);
}

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--grey-200);
  border-radius: 26px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

/* Van Assignment cards */
.van-assign-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
}
.van-assign-card {
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.van-assign-blue  { background: #e3f0ff; border: 2px solid #1565c0; }
.van-assign-white { background: #f5f5f5; border: 2px solid #bdbdbd; }
.van-assign-header-row { display: flex; align-items: center; gap: 10px; }
/* Make the pack header read as a button: hover/active feedback, focus ring,
   and a rotating chevron so it's obvious that tapping toggles expansion. */
.van-assign-header-row.sched-toggle {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 6px 8px;
  margin: -6px -8px 2px;
  transition: background 0.15s ease;
}
.van-assign-header-row.sched-toggle:hover { background: rgba(0,0,0,0.04); }
.van-assign-header-row.sched-toggle:active { background: rgba(0,0,0,0.08); }
.van-assign-header-row.sched-toggle:focus-visible {
  outline: 2px solid var(--green, #2e7d32);
  outline-offset: 2px;
}
.sched-toggle-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
  white-space: nowrap;
}
.van-assign-card .van-assign-card-body { display: none; }
.van-assign-card.is-expanded .van-assign-card-body { display: block; }
.van-assign-card-actions {
  padding: 8px 16px 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.van-assign-icon  { font-size: 28px; }
.van-assign-name  { font-size: 18px; font-weight: 700; flex: 1; }
.van-assign-blue  .van-assign-name { color: #1565c0; }
.van-assign-white .van-assign-name { color: #555; }
.van-assign-count {
  font-size: 12px; font-weight: 700;
  background: var(--green); color: #fff;
  padding: 2px 8px; border-radius: 10px;
}
.van-assign-date  { font-size: 12px; color: var(--grey-500); margin-bottom: 4px; }
.sched-add-task-quick {
  margin-left: 8px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid var(--green, #2e7d32);
  background: #fff;
  color: var(--green, #2e7d32);
  font-size: 13px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; flex-shrink: 0;
  padding: 0 10px 0 8px;
}
.sched-add-task-quick-plus { font-size: 16px; font-weight: 700; line-height: 1; }
.sched-add-task-quick-label { letter-spacing: 0.2px; }
.sched-add-task-quick:hover { background: var(--green, #2e7d32); color: #fff; border-color: var(--green, #2e7d32); }

/* Dog list inside van card */
.pack-dog-list {
  background: rgba(255,255,255,0.55);
  border-radius: 10px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 2px;
}
.pack-dog-row {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  gap: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.12s;
}
.pack-dog-row:last-child { border-bottom: none; }
.pack-dog-row:hover { background: rgba(255,255,255,0.7); }
.pack-dog-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pack-dog-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-500);
  min-width: 18px;
  text-align: right;
}
.pack-dog-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-800);
}
.pack-dog-breed {
  font-size: 11px;
  color: var(--grey-500);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pack-dog-move {
  background: none;
  border: 1.5px solid var(--grey-200);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--grey-500);
  transition: all 0.12s;
  flex-shrink: 0;
}
.van-assign-blue  .pack-dog-move:hover { border-color: #1565c0; color: #1565c0; background: #fff; }
.van-assign-white .pack-dog-move:hover { border-color: var(--green); color: var(--green); background: #fff; }
.pack-dog-move:disabled { opacity: 0.4; }
.pack-dog-remove {
  background: none;
  border: 1.5px solid #ef9a9a;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #c62828;
  cursor: pointer;
}
.pack-dog-remove:hover { background: #fff1f1; }
.pack-dog-remove:disabled { opacity: 0.4; }
.pack-dog-row.pending-add { background: rgba(76,175,80,0.08); }
.pack-dog-row.pending-remove { background: rgba(198,40,40,0.06); opacity: 0.7; }
.pack-dog-row.pending-remove .pack-dog-name,
.pack-dog-row.pending-remove .pack-dog-breed,
.pack-dog-row.pending-remove .pack-dog-num {
  text-decoration: line-through;
  color: #c62828;
}
.pack-dog-row.pending-move {
  background: rgba(255,152,0,0.10);
  border-left: 3px solid #f57c00;
  padding-left: 9px;
}
.pack-dog-row.pending-move .pack-dog-name {
  color: #e65100;
  font-weight: 700;
}
.pending-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f57c00;
  color: #fff;
  border-radius: 4px;
  vertical-align: middle;
}
.pack-undo-move {
  background: none;
  border: 1.5px solid #f57c00;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #e65100;
  cursor: pointer;
}
.pack-undo-move:hover { background: #fff3e0; }
.pack-undo-remove {
  background: none;
  border: 1.5px solid #ef9a9a;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #c62828;
  cursor: pointer;
}
.pack-undo-remove:hover { background: #fff1f1; }
.pack-undo-add {
  background: none;
  border: 1.5px solid var(--grey-300);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-600);
  cursor: pointer;
}
.pack-undo-add:hover { background: var(--white); }
.pack-pending-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 4px;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 4px;
}
.pack-pending-summary {
  font-size: 12px;
  font-weight: 700;
  color: #e65100;
  padding: 4px 2px;
  line-height: 1.3;
}
.pack-pending-buttons {
  display: flex;
  gap: 8px;
}
.van-assign-card.has-pending {
  box-shadow: 0 0 0 2px #f57c00, 0 2px 8px rgba(245,124,0,0.25);
  position: relative;
}
.van-assign-card.has-pending::before {
  content: 'UNSAVED';
  position: absolute;
  top: -8px;
  right: 12px;
  background: #f57c00;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 1;
}
.pack-title.pending-name {
  color: #e65100;
  font-style: italic;
}
/* Any pack editor field with a staged but unsaved change. Originally
 * scoped to the name input only — broadened so the driver dropdown gets
 * the same orange-tinted "needs save" treatment. */
.pack-field-input.pending-input {
  border-color: #f57c00;
  box-shadow: 0 0 0 2px rgba(245,124,0,0.15);
  background: #fff8e1;
}
.pack-save-pending {
  flex: 1;
  background: var(--green);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.van-assign-card.has-pending .pack-save-pending {
  background: #f57c00;
  animation: pack-save-pulse 1.6s ease-in-out infinite;
}
@keyframes pack-save-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,124,0,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(245,124,0,0); }
}
.pack-save-pending:hover { filter: brightness(0.92); }
.pack-save-pending:disabled { opacity: 0.6; cursor: default; }
.pack-discard-pending {
  background: none;
  border: 1.5px solid var(--grey-300);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--grey-600);
  cursor: pointer;
}
.pack-discard-pending:hover { background: var(--grey-100); }
.pack-empty { font-size: 13px; color: var(--grey-500); padding: 12px; text-align: center; }
.pack-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.pack-color-dot.blue {
  background: radial-gradient(circle at 35% 35%, #6fb7ff, #1f6bd8 70%);
}
.pack-color-dot.white {
  background: linear-gradient(180deg, #ffffff, #e5eef5);
  border: 1.5px solid #c4d1dc;
}
.pack-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pack-tone-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.pack-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pack-search-results {
  background: rgba(255,255,255,0.6);
  border-radius: 10px;
  overflow: hidden;
  max-height: 180px;
  overflow-y: auto;
}
.pack-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pack-search-row:last-child { border-bottom: none; }
.pack-search-main {
  flex: 1;
  min-width: 0;
}
.pack-search-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-800);
}
.pack-search-meta {
  font-size: 11px;
  color: var(--grey-500);
  margin-top: 2px;
}
.pack-search-action {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1.5px solid;
  background: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.pack-search-action.add {
  border-color: var(--green);
  color: var(--green);
}
.pack-search-action.add:hover { background: var(--green-pale); }
.pack-search-action.move {
  border-color: #1565c0;
  color: #1565c0;
}
.pack-search-action.move:hover { background: #eef5ff; }
.pack-search-action.in-pack {
  border-color: var(--grey-200);
  color: var(--grey-500);
}
.pack-search-action:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Day pills with number */
.day-pill-name { display: block; font-size: 13px; font-weight: 700; }
.day-pill-num  { display: block; font-size: 11px; opacity: 0.7; }

/* Driver pills */
.driver-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.driver-pill {
  padding: 8px 20px;
  border: 2px solid var(--grey-200);
  border-radius: 20px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--grey-800);
}
.driver-pill.active { border-color: var(--green); color: var(--green); background: var(--green-pale); }

/* Assign section labels */
.assign-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-500);
  margin: 12px 0 6px;
}

/* Pack dropdown */
.pack-select {
  width: 100%;
  padding: 9px 12px;
  border: 2px solid var(--grey-200);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-800);
  background: var(--white);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.pack-select:focus { border-color: #3949ab; }
.van-assign-blue .pack-select { border-color: #90caf9; background-color: rgba(255,255,255,0.8); }
.van-assign-white .pack-select { border-color: #e0e0e0; background-color: rgba(255,255,255,0.8); }

/* Pack name display (read-only label in Van Assign tab) */
.pack-name-display {
  padding: 9px 12px;
  border: 2px dashed var(--grey-200);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-800);
  background: rgba(255,255,255,0.55);
}

/* Driver pill in pending (un-saved) state */
.driver-pill.driver-pill-pending {
  border-color: #f57c00;
  color: #e65100;
  background: #fff8e1;
  box-shadow: 0 0 0 2px rgba(245,124,0,0.15);
}

/* Van Assign save bar — shows summary of staged changes before commit */
.van-assign-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin: 12px 16px 16px;
  padding: 14px 16px;
  background: #fff8e1;
  border: 2px solid #f57c00;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(245,124,0,0.18);
}
.van-assign-save-bar .save-bar-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.van-assign-save-bar .save-bar-header strong {
  font-size: 14px;
  color: #e65100;
}
.van-assign-save-bar .save-bar-day {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey-500);
}
.van-assign-save-bar .save-bar-list {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 13px;
  color: var(--grey-800);
  line-height: 1.5;
}
.van-assign-save-bar .save-bar-list li { margin: 2px 0; }
.van-assign-save-bar .save-bar-actions {
  display: flex;
  gap: 8px;
}
.van-assign-save-bar .save-bar-actions button { flex: 1; }
.van-assign-save-bar #van-assign-save {
  background: #f57c00;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.van-assign-save-bar #van-assign-save:hover { filter: brightness(0.92); }
.van-assign-save-bar #van-assign-save:disabled { opacity: 0.6; cursor: default; }
.van-assign-save-bar #van-assign-discard {
  background: none;
  border: 1.5px solid var(--grey-300);
  color: var(--grey-600);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.van-assign-save-bar #van-assign-discard:hover { background: var(--white); }

/* ── Pack Setup tab ─────────────────────────────────────────────────────── */
.packs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 8px;
}
.packs-title { font-size: 16px; font-weight: 700; }
.btn-new-pack {
  background: var(--green); color: #fff; border: none;
  border-radius: 10px; padding: 8px 16px; font-size: 13px;
  font-weight: 700; cursor: pointer;
}
.btn-new-pack:hover { background: var(--green-dark); }
.packs-list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }

.pack-card { background: #fff; border-radius: 12px; border: 1.5px solid var(--grey-200); overflow: hidden; }
.pack-card-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
}
.pack-card-info { flex: 1; min-width: 0; }
.pack-card-name { font-size: 14px; font-weight: 700; display: block; }
.pack-card-desc { font-size: 12px; color: var(--grey-500); display: block; margin-top: 1px; }
.pack-card-count {
  font-size: 11px; font-weight: 700;
  background: var(--green); color: #fff;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0;
}
.pack-card-edit {
  padding: 5px 12px; border: 1.5px solid var(--grey-200); border-radius: 8px;
  background: none; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.pack-card-edit:hover { border-color: var(--green); color: var(--green); }
.pack-card-delete {
  padding: 5px 10px; border: 1.5px solid transparent; border-radius: 8px;
  background: none; font-size: 13px; color: var(--grey-500); cursor: pointer; flex-shrink: 0;
}
.pack-card-delete:hover { color: var(--red); border-color: var(--red); }

.pack-dog-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 14px 12px; border-top: 1px solid var(--grey-100);
  padding-top: 8px;
}
.pack-chip {
  background: var(--grey-100); border-radius: 20px;
  padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--grey-800);
}
.pack-chip em { font-weight: 400; color: var(--grey-500); }

/* Pack editor */
.pack-editor { display: flex; flex-direction: column; gap: 0; }
.pack-editor-header {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--grey-200);
}
.pack-editor-header h3 { font-size: 15px; font-weight: 700; }
.pack-editor-back {
  background: none; border: none; color: var(--green); font-size: 13px;
  font-weight: 700; cursor: pointer; padding: 4px 0;
}
.pack-editor-fields { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.pack-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-500); }
.pack-field-input {
  padding: 9px 12px; border: 2px solid var(--grey-200); border-radius: 10px;
  font-size: 14px; color: var(--grey-800); outline: none; transition: border-color .15s;
}
.pack-field-input:focus { border-color: var(--green); }
.pack-editor-save {
  align-self: flex-start; margin-top: 4px;
  background: var(--green); color: #fff; border: none; border-radius: 10px;
  padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.pack-editor-save:hover { background: var(--green-dark); }

.pack-editor-dogs { border-top: 1px solid var(--grey-200); }
.pack-editor-search-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 6px; gap: 10px;
}
.pack-dog-search {
  flex: 1; padding: 7px 12px; border: 1.5px solid var(--grey-200);
  border-radius: 20px; font-size: 13px; outline: none;
}
.pack-dog-search:focus { border-color: var(--green); }
.pack-dog-pool {
  max-height: 340px; overflow-y: auto;
}
.pack-pool-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-bottom: 1px solid var(--grey-100);
  transition: background .1s;
}
.pack-pool-row.in-pack { background: #f0faf3; }
.pack-pool-row:hover { background: var(--grey-100); }
.pack-pool-row.in-pack:hover { background: #e4f5e9; }
.pack-pool-name { font-size: 13px; font-weight: 600; flex-shrink: 0; }
.pack-pool-breed { font-size: 12px; color: var(--grey-500); flex: 1; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-pool-toggle {
  flex-shrink: 0; padding: 4px 12px; border-radius: 8px; font-size: 12px;
  font-weight: 700; cursor: pointer; border: 1.5px solid;
}
.pack-pool-toggle.add    { border-color: var(--green); color: var(--green); background: none; }
.pack-pool-toggle.add:hover    { background: var(--green-pale); }
.pack-pool-toggle.remove { border-color: var(--red); color: var(--red); background: none; }
.pack-pool-toggle.remove:hover { background: #fdecea; }
.pack-pool-toggle:disabled { opacity: .5; }

/* ── Generate progress display ──────────────────────────────────────────── */
.gen-progress-wrap {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.gen-progress-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--grey-800);
}
.gen-progress-date {
  font-size: 13px;
  color: var(--grey-500);
  margin-bottom: 8px;
}
.gen-progress-bar-bg {
  width: 100%;
  max-width: 280px;
  height: 6px;
  background: var(--grey-200);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 16px;
}
.gen-progress-bar-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.gen-progress-steps {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gen-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--grey-500);
  transition: color 0.3s;
}
.gen-step.done   { color: var(--green); }
.gen-step.active { color: var(--grey-800); font-weight: 600; }
.gen-step-icon   { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.gen-step.done .gen-step-icon { color: var(--green); font-size: 16px; }
.gen-status {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--green);
}

/* Generate button */
.btn-generate {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--green);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.btn-generate:active { opacity: 0.85; }

/* Live tracking */
.live-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.live-board-intro {
  margin-top: 0;
}
.live-board-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.live-board-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--grey-800);
}
.live-board-meta {
  font-size: 12px;
  color: var(--grey-500);
  font-weight: 600;
}
.live-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 12px 12px;
}
.live-card {
  background: var(--white);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.live-card-blue {
  border-top: 5px solid #1565c0;
}
.live-card-white {
  border-top: 5px solid #9e9e9e;
}
.live-card-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}
.live-card-toggle-main {
  min-width: 0;
  flex: 1;
}
.live-card-chevron {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grey-100);
  color: var(--grey-500);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
.live-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.live-card-title {
  font-size: 20px;
  font-weight: 700;
}
.fb-bot-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}
.fb-bot-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fb-llm-warning {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff7e6; border: 1px solid #f0c36d; border-radius: 10px;
  padding: 12px 14px;
}
.fb-llm-warning-icon {
  font-size: 22px; line-height: 1; color: #b8860b; flex: 0 0 auto;
}
.fb-llm-warning-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fb-llm-warning-title { font-weight: 700; color: #5a3e00; }
.fb-llm-warning-text { font-size: 13px; color: #5a3e00; line-height: 1.4; }
.fb-llm-warning-text code {
  background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px;
  font-size: 12px;
}

/* Webhook freshness pill — sits under the Messenger Cards meta line.
 * Colour states keyed by age of the last *inbound* (customer-sent)
 * message: green (<6h), amber (6–24h), red (>=24h or never). A fourth
 * grey "off" state shows when the webhook isn't configured at all. */
.fb-webhook-pill {
  display: inline-flex; align-items: center;
  margin-top: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: help;
}
.fb-webhook-ok    { background: #e6f4ea; color: #1b5e20; border-color: #c1e5cb; }
.fb-webhook-warn  { background: #fff3cd; color: #7a5800; border-color: #f0d27a; }
.fb-webhook-stale { background: #fde2e2; color: #8a1f1f; border-color: #f0a0a0; }
.fb-webhook-off   { background: #eef0f3; color: #5a6373; border-color: #d4d8df; }

/* Address-override editor on ADDRESS_CHANGE cards. The block spans the full
 * card-grid width so the address inputs aren't squeezed into a 2-column slot
 * like the homestay date pickers. */
.fb-address-override { grid-column: 1 / -1; }
.fb-field-section-title {
  font-weight: 700; font-size: 12px; color: #1f2c3d;
  margin: 8px 0 4px; letter-spacing: 0.3px;
}
.fb-weekday-title { margin-top: 14px; }
.fb-weekday-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fb-weekday-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: #eef2f7; color: #2c3e50; border: 1px solid #d4d8df;
  cursor: pointer;
}
.fb-weekday-chip input { margin: 0; }
.fb-field-inline { display: inline-flex; align-items: center; gap: 6px; }
.link-button {
  background: none; border: none; padding: 0; margin-top: 6px;
  color: #1565c0; font-size: 12px; cursor: pointer;
  text-decoration: underline;
}

/* Re-analyse-all progress modal */
.fb-reanalyse-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.fb-reanalyse-card {
  background: #fff; border-radius: 14px; padding: 22px 24px;
  width: min(440px, 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; gap: 12px;
}
.fb-reanalyse-title { font-size: 18px; font-weight: 700; color: #222; }
.fb-reanalyse-sub {
  font-size: 14px; color: #555; min-height: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-reanalyse-bar {
  height: 10px; background: #eef0f2; border-radius: 999px; overflow: hidden;
}
.fb-reanalyse-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #2D7A44, #4FB37C);
  transition: width 0.35s ease;
  border-radius: 999px;
}
.fb-reanalyse-meta {
  display: flex; justify-content: space-between;
  font-size: 12px; color: #666; font-variant-numeric: tabular-nums;
}
.fb-reanalyse-stats {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 10px 12px; background: #f7f8fa; border-radius: 8px;
  font-size: 13px; color: #444;
}
.fb-reanalyse-stat span { font-weight: 700; color: #222; }
.fb-reanalyse-actions { display: flex; justify-content: flex-end; }

/* ── FB bot tray + card styling ────────────────────────────────────────────
   Cards are stacked in a tray (fb-cards-tray). Each card gets its own white
   panel with a colour-coded left accent that signals lifecycle state at a
   glance:
     ready    → green   (everything filled, click Confirm)
     needs    → amber   (one or more required fields missing — what's missing
                         is shown in the banner below the summary)
     drafting → blue-grey (Claude pulled an arrangement but not enough to
                          act on yet — usually waiting on more chat)
     recent   → muted   (already confirmed/dismissed; visible for audit only)
*/
.fb-cards-tray {
  display: flex; flex-direction: column; gap: 0;
}
.fb-tray-head {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 2px 10px;
  font-size: 13px; font-weight: 600; color: var(--grey-700, #444);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.fb-tray-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  background: var(--grey-200, #e5e7eb); color: #333;
  border-radius: 999px; font-size: 12px; font-weight: 700;
}
.fb-tray-ready    .fb-tray-count { background: #d4edda; color: #155724; }
.fb-tray-needs    .fb-tray-count { background: #fff3cd; color: #7a5800; }
.fb-tray-drafting .fb-tray-count { background: #e2e8f0; color: #2c5282; }
.fb-tray-recent   .fb-tray-count { background: #ececec; color: #555; }

.fb-cards-list {
  display: flex; flex-direction: column; gap: 12px;
}

/* Each FB card is its own panel — clear separation, distinct from neighbours,
   subtle shadow so they read as physical cards rather than a wall of text. */
.fb-card {
  background: #fff;
  border: 1px solid var(--grey-200, #e5e7eb);
  border-left: 4px solid var(--grey-300, #d1d5db);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, transform 0.05s ease;
}
.fb-card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); }

/* State-coded left accent + faint background tint. */
.fb-card-ready    { border-left-color: #2D7A44; background: linear-gradient(90deg, #f1f9f3 0%, #fff 22%); }
.fb-card-needs    { border-left-color: #d4a017; background: linear-gradient(90deg, #fff8e1 0%, #fff 22%); }
.fb-card-drafting { border-left-color: #6b7c93; background: linear-gradient(90deg, #f4f6fa 0%, #fff 22%); }
.fb-card-recent   { border-left-color: #b0b6bd; opacity: 0.78; }

.fb-card-expanded {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  border-color: var(--grey-300, #d1d5db);
}

/* Summary row — type pill + dog + date on the left, owner+confidence right. */
.fb-card-summary {
  display: flex; align-items: flex-start; gap: 12px;
  justify-content: space-between; flex-wrap: wrap;
}
.fb-card-summary-main {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px;
}
.fb-card-summary-side {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--grey-600, #555);
}
.fb-card-type {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  background: #eef2f6; color: #2c3e50;
}
.fb-type-homestay  { background: #ede5ff; color: #5b3aa3; }
.fb-type-away      { background: #ffe4e1; color: #a94038; }
.fb-type-guest_dog { background: #e1f0ff; color: #1f4f87; }
.fb-type-pack_change { background: #ffeacf; color: #8a4a00; }
.fb-type-other     { background: #ececec; color: #555; }

.fb-card-dog  { font-weight: 700; color: #1f2937; }
.fb-card-date { color: #475569; font-size: 13px; }

/* Lifecycle + staleness badges. Tucked into the summary row next to the
   type pill so Lu can scan a list of cards and instantly see which are
   already in the system, which are ready to confirm, and which need a
   re-analyse because new chat messages arrived. */
.fb-card-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.fb-badge-confirmed  { background: #d4edda; color: #155724; border-color: #b6dcc1; }
.fb-badge-dismissed  { background: #f0f0f0; color: #666;    border-color: #d8d8d8; }
.fb-badge-superseded { background: #f3e8ff; color: #5b21b6; border-color: #d6c2f2; }
.fb-badge-ready      { background: #e6f4ea; color: #1b5e20; border-color: #c1e5cb; }
.fb-badge-needs      { background: #fff3cd; color: #7a5800; border-color: #f0d27a; }
.fb-badge-drafting   { background: #e2e8f0; color: #2c5282; border-color: #c7d3e3; }
.fb-badge-stale {
  background: #fff5e6; color: #8a4a00; border-color: #f0b870;
  cursor: help;
}
.fb-card-owner { white-space: nowrap; }

/* Run-reorder confirmation toast — fades in at the bottom of the screen
   after a successful drag-to-reorder save, so the user sees that the new
   order has been mirrored to the weekly template (and therefore persists
   to future weeks, not just today). */
.run-reorder-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: #2D7A44; color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10001;
  pointer-events: none;
}
.run-reorder-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.fb-card-owner em { font-style: normal; color: var(--grey-500, #888); margin-left: 4px; font-size: 12px; }

/* Missing-fields banner — the most important glanceable signal on a needs
   card. Stays amber even if the card itself has hover state. */
.fb-card-missing {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px;
  background: #fff8e1; border: 1px solid #f0d27a;
  border-radius: 8px;
  font-size: 13px; color: #5a3e00;
  font-weight: 600;
}
.fb-card-missing::before {
  content: 'Missing'; flex: 0 0 auto;
  text-transform: uppercase; letter-spacing: 0.4px;
  font-size: 11px; font-weight: 700; color: #7a5800;
  padding: 2px 7px; background: #f0d27a; border-radius: 4px;
}
.fb-card-chip {
  display: inline-block; padding: 3px 9px;
  background: #fff; border: 1px solid #d4a017;
  color: #5a3e00; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}

.fb-card-evidence {
  font-size: 12px; color: var(--grey-600, #555);
  font-style: italic; line-height: 1.4;
  padding: 6px 10px; background: #fafbfc;
  border-radius: 6px;
}
.fb-card-snippet {
  font-size: 12px; color: var(--grey-500, #888);
  border-left: 2px solid var(--grey-200, #e5e7eb);
  padding: 2px 0 2px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Action row — right-aligned, bordered separator. Confirm is filled green,
   Dismiss is outlined red, Open & edit is neutral. */
.fb-card-actions {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--grey-100, #f1f3f5);
}
.fb-card-actions-bottom { margin-top: 4px; }
.fb-card-confirm {
  background: #2D7A44; border-color: #2D7A44; color: #fff;
}
.fb-card-confirm:hover { background: #246538; }
.fb-card-dismiss {
  background: #fff; border: 1px solid #d9534f; color: #b3413e;
}
.fb-card-dismiss:hover { background: #fff5f5; }

.fb-bot-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.fb-thread-list,
.fb-thread-detail {
  min-width: 0;
}
.fb-thread-list {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--grey-100);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  overflow: hidden;
}
.fb-thread-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--grey-100);
  font-size: 12px;
  font-weight: 700;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fb-thread-row {
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--grey-100);
  background: transparent;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.fb-thread-row:hover,
.fb-thread-row.active {
  background: #f5faf6;
}
.fb-thread-row:last-child {
  border-bottom: 0;
}
.fb-thread-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.fb-thread-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--grey-800);
}
.fb-thread-owner,
.fb-thread-time,
.fb-thread-meta,
.fb-impact-hint {
  font-size: 12px;
  color: var(--grey-500);
}

.fb-bot-banner-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.fb-suggested-reply {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--grey-300, #d0d0d0);
  border-radius: 8px;
  background: var(--grey-50, #fafafa);
}
.fb-suggested-reply-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-500, #888);
  margin-bottom: 4px;
}
.fb-suggested-reply-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--grey-800, #333);
  font-style: italic;
}

.fb-reply-textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid var(--grey-300, #d0d0d0);
  border-radius: 6px;
  resize: vertical;
  background: white;
  color: var(--grey-900, #222);
}
.fb-reply-textarea:focus {
  outline: none;
  border-color: #2e7d32;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
}
.fb-reply-actions {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fb-reply-hint {
  font-size: 11px;
  color: var(--grey-500, #888);
}

/* ────────── Owner-match cards (suggestions + search results) ────────── */
.fb-link-explainer {
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  margin: 6px 0 10px;
  background: #e8f5e9;
  border-left: 3px solid #2e7d32;
  border-radius: 6px;
  color: var(--grey-800, #333);
}
.fb-link-explainer strong {
  display: block;
  margin-bottom: 3px;
  color: #1b5e20;
}

.fb-owner-match-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.fb-owner-match-card {
  padding: 10px 12px;
  border: 1px solid var(--grey-200, #e5e5e5);
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.fb-owner-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.fb-owner-match-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--grey-900, #222);
}
.fb-owner-match-edit {
  background: transparent;
  border: 1px solid var(--grey-300, #ccc);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--grey-700, #555);
  cursor: pointer;
}
.fb-owner-match-edit:hover {
  background: var(--grey-50, #fafafa);
  border-color: var(--grey-400, #aaa);
}
.fb-owner-match-body {
  font-size: 12px;
  color: var(--grey-700, #555);
}
.fb-owner-match-contact a {
  color: var(--grey-800, #333);
  text-decoration: none;
  border-bottom: 1px dotted var(--grey-400, #bbb);
}
.fb-owner-match-contact a:hover {
  border-bottom-style: solid;
}
.fb-owner-missing {
  color: var(--grey-500, #999);
  font-style: italic;
}
.fb-owner-match-suburb {
  margin-top: 2px;
  color: var(--grey-600, #777);
}
.fb-owner-match-dogs {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fb-owner-nodogs {
  font-size: 11px;
  color: var(--grey-500, #999);
  font-style: italic;
}

.fb-owner-match-edit-form {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fb-owner-edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fb-owner-edit-row label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--grey-600, #666);
  gap: 3px;
}
.fb-owner-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.fb-owner-edit-cancel {
  background: transparent;
  border: 1px solid var(--grey-300, #ccc);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}

.fb-owner-match-link-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--grey-200, #e5e5e5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fb-owner-match-link {
  width: 100%;
  padding: 8px 12px;
  background: #2e7d32 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}
.fb-owner-match-link:hover {
  background: #1b5e20 !important;
}
.fb-owner-match-link strong {
  font-weight: 700;
}
.fb-owner-relinks-warning {
  font-size: 11px;
  color: #b71c1c;
  padding: 4px 0 0 2px;
}

/* ────────── Triage board ────────── */
.fb-triage-board {
  padding: 14px 18px;
  margin-bottom: 14px;
}
.fb-triage-empty {
  padding: 18px;
  text-align: center;
}
.fb-triage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grey-200, #eee);
}
.fb-triage-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--grey-900, #222);
  letter-spacing: 0.02em;
}
.fb-triage-count {
  font-size: 12px;
  color: var(--grey-600, #666);
}
.fb-triage-empty-msg {
  font-size: 13px;
  color: var(--grey-500, #888);
  padding: 10px 0 4px;
}
.fb-triage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.fb-triage-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: white;
  border: 1px solid var(--grey-200, #e5e5e5);
  border-left-width: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.fb-triage-ready { border-left-color: #2e7d32; background: #f6fbf7; }
.fb-triage-waiting { border-left-color: #ef6c00; background: #fffaf2; }
.fb-triage-link { border-left-color: #1976d2; background: #f5f9fd; }
.fb-triage-other { border-left-color: #9e9e9e; }

.fb-triage-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.fb-triage-who {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.fb-triage-customer {
  font-weight: 600;
  font-size: 13px;
  color: var(--grey-900, #222);
}
.fb-triage-dog {
  font-size: 12px;
  color: var(--grey-600, #666);
}
.fb-triage-conf {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: 0.03em;
  font-weight: 600;
  text-transform: uppercase;
}
.fb-triage-conf.high { background: #c8e6c9; color: #1b5e20; }
.fb-triage-conf.med  { background: #fff3e0; color: #e65100; }
.fb-triage-conf.low  { background: #ffebee; color: #b71c1c; }

.fb-triage-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fb-triage-ready-badge   { background: #2e7d32; color: white; }
.fb-triage-waiting-badge { background: #ef6c00; color: white; }
.fb-triage-link-badge    { background: #1976d2; color: white; }
.fb-triage-other-badge   { background: #bdbdbd; color: white; }

.fb-triage-type {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.fb-triage-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--grey-100, #f0f0f0);
  color: var(--grey-800, #333);
}
.fb-type-homestay    { background: #e1bee7; color: #4a148c; }
.fb-type-away        { background: #ffe0b2; color: #e65100; }
.fb-type-pack_change { background: #bbdefb; color: #0d47a1; }
.fb-type-other       { background: #e0e0e0; color: #424242; }
.fb-triage-date, .fb-triage-van {
  color: var(--grey-700, #555);
}

.fb-triage-evidence,
.fb-triage-reply {
  font-size: 12px;
  line-height: 1.4;
  color: var(--grey-800, #333);
  padding: 6px 8px;
  background: rgba(0,0,0,0.025);
  border-radius: 6px;
}
.fb-triage-reply {
  font-style: italic;
  border-left: 3px solid #7e57c2;
  background: rgba(126, 87, 194, 0.06);
}
.fb-triage-clarify {
  font-size: 12px;
  color: #c65d00;
  background: rgba(239, 108, 0, 0.08);
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 500;
}

.fb-triage-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.fb-triage-actions button {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--grey-300, #ccc);
  background: white;
  color: var(--grey-800, #333);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.12s ease;
}
.fb-triage-actions button:hover:not(:disabled) {
  background: var(--grey-50, #fafafa);
  border-color: var(--grey-400, #aaa);
}
.fb-triage-actions button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.fb-triage-approve {
  background: #2e7d32 !important;
  color: white !important;
  border-color: #2e7d32 !important;
}
.fb-triage-approve:hover:not(:disabled) {
  background: #1b5e20 !important;
}
.fb-triage-send {
  background: #7e57c2 !important;
  color: white !important;
  border-color: #7e57c2 !important;
}
.fb-triage-send:hover:not(:disabled) {
  background: #5e35b1 !important;
}
.fb-triage-dismiss {
  color: var(--grey-600, #666) !important;
}

.fb-llm-panel {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid #7e57c2;
  background: rgba(126, 87, 194, 0.05);
  border-radius: 4px;
  font-size: 12px;
  color: var(--grey-700, #555);
}
.fb-llm-pending { border-left-color: #ffa726; background: rgba(255, 167, 38, 0.07); }
.fb-llm-error { border-left-color: #e53935; background: rgba(229, 57, 53, 0.06); }
.fb-llm-label {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7e57c2;
  margin-bottom: 4px;
}
.fb-llm-error .fb-llm-label { color: #c62828; }
.fb-llm-pending .fb-llm-label { color: #ef6c00; }
.fb-llm-evidence {
  line-height: 1.4;
  color: var(--grey-800, #333);
  margin-bottom: 4px;
}
.fb-llm-question {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
}
.fb-llm-question-label {
  font-weight: 600;
  color: var(--grey-700, #555);
  margin-right: 4px;
}
.fb-llm-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--grey-500, #888);
}
.fb-llm-reanalyse-link {
  background: none;
  border: none;
  color: #7e57c2;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 11px;
}

.fb-message-outbound {
  background: rgba(46, 125, 50, 0.06);
  border-left: 3px solid rgba(46, 125, 50, 0.5);
  padding-left: 10px;
}
.fb-message-outbound .fb-message-meta {
  color: rgba(46, 125, 50, 0.85);
  font-weight: 600;
}

.company-admin-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
}

.company-brand-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  align-items: center;
}

.company-brand-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #eff8f1 0%, #d8eee0 100%);
}

.company-brand-image {
  width: 100%;
  max-width: 180px;
  max-height: 180px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(32, 74, 46, 0.12);
}

.company-logo-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.company-logo-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.company-logo-status {
  font-size: 13px;
  color: var(--grey-500);
}

.company-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.company-employee-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.company-employee-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(45, 122, 68, 0.12);
  border-radius: 16px;
  background: #fbfdfb;
  overflow: hidden;
}

.company-employee-head {
  all: unset;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.1s ease;
}
.company-employee-head:hover { background: rgba(45, 122, 68, 0.05); }
.company-employee-row.is-expanded .company-employee-head { background: rgba(45, 122, 68, 0.08); }
.company-employee-chev {
  font-size: 18px;
  color: var(--grey-500);
  width: 20px;
  text-align: center;
}

.company-user-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(45, 122, 68, 0.12);
}
.company-user-tab {
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.company-user-tab.is-active {
  color: #2d7a44;
  border-bottom-color: #2d7a44;
}

.company-employee-detail {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(45, 122, 68, 0.12);
  background: #ffffff;
}
.company-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 16px;
  margin: 0 0 12px;
}
.company-detail-grid > div { min-width: 0; }
.company-detail-grid dt {
  font-size: 11px;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.company-detail-grid dd {
  margin: 0;
  font-size: 14px;
  color: var(--grey-800);
  word-break: break-word;
}
.company-detail-hint {
  font-size: 12px;
  color: var(--grey-500);
  font-style: italic;
  margin-bottom: 10px;
}
.company-detail-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.company-detail-status {
  font-size: 12px;
  color: var(--grey-600);
}

.company-notif-section {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--grey-200, #e5e7eb);
  border-radius: 8px;
  background: var(--grey-50, #fafafa);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.company-notif-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey-500);
  font-weight: 600;
}
.company-notif-toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--grey-800);
  cursor: pointer;
}
.company-notif-toggle input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.company-notif-toggle small {
  color: var(--grey-500);
  font-size: 12px;
}
.company-notif-status {
  font-size: 12px;
  color: var(--grey-600);
  min-height: 14px;
}

.company-employee-main {
  min-width: 0;
}

.company-employee-name {
  font-size: 16px;
  font-weight: 700;
}

.company-employee-meta {
  margin-top: 4px;
  color: var(--grey-500);
  font-size: 13px;
}

.company-employee-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.company-employee-active {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.company-employee-active.is-active {
  background: #e8f5ec;
  color: #1f5730;
}

.company-employee-active.is-inactive {
  background: #f5e7e5;
  color: #8f3b31;
}
.fb-thread-snippet {
  font-size: 13px;
  color: var(--grey-700);
  line-height: 1.45;
}
.fb-status-badge {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fb-status-badge.review {
  background: #fff6d9;
  color: #9a6b00;
}
.fb-status-badge.link-needed {
  background: #eef3ff;
  color: #2753b8;
}
.fb-status-badge.approved {
  background: #e8f7ec;
  color: #1b7d3b;
}
.fb-status-badge.rejected,
.fb-status-badge.error {
  background: #fdeceb;
  color: #bb3023;
}
.fb-thread-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fb-thread-hero,
.fb-owner-panel,
.fb-message-panel,
.fb-request-panel {
  border-radius: 16px;
}
.fb-thread-hero,
.fb-request-card,
.fb-owner-panel,
.fb-message-panel {
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
.fb-thread-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.fb-thread-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--grey-800);
}
.fb-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 12px;
}
.fb-linked-owner-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--grey-800);
}
.fb-linked-owner-meta {
  font-size: 13px;
  color: var(--grey-500);
  margin-top: 4px;
}
.fb-owner-dogs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.fb-owner-actions,
.fb-owner-search-results {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fb-owner-search {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.fb-owner-search .pack-field-input {
  flex: 1;
}
.fb-link-owner-btn {
  border: 1.5px solid var(--green);
  background: #eef8f0;
  color: var(--green-dark);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.fb-link-owner-btn.secondary {
  background: var(--white);
}
.fb-message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
}
.fb-message-row {
  background: #f8faf8;
  border: 1px solid var(--grey-100);
  border-radius: 12px;
  padding: 12px;
}
.fb-message-meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fb-message-text {
  margin-top: 6px;
  font-size: 14px;
  color: var(--grey-800);
  line-height: 1.5;
  white-space: pre-wrap;
}
.fb-request-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fb-request-card {
  border: 1px solid var(--grey-100);
  border-radius: 14px;
  padding: 16px;
  background: #fcfcfc;
}
.fb-request-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.fb-request-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--grey-800);
}
.fb-request-original {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #f6f8f6;
  color: var(--grey-700);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.fb-request-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.fb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fb-field span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-500);
}
.fb-request-note {
  resize: vertical;
  min-height: 92px;
}
.live-card-sub {
  font-size: 13px;
  color: var(--grey-500);
  margin-top: 4px;
}
.live-status-badge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.live-status-badge.planned,
.live-status-badge.no-run {
  background: var(--grey-100);
  color: var(--grey-500);
}
.live-status-badge.in-progress {
  background: #fff3e6;
  color: var(--amber);
}
.live-status-badge.complete {
  background: var(--green-pale);
  color: var(--green-dark);
}
.live-progress-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}
.live-progress-copy {
  color: var(--grey-800);
}
.live-progress-bar {
  height: 10px;
  background: var(--grey-200);
  border-radius: 999px;
  overflow: hidden;
}
.live-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), #43a85f);
  border-radius: 999px;
}
.live-summary-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.live-summary-pill {
  background: var(--grey-100);
  border-radius: 999px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.live-summary-pill-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-500);
}
.live-summary-pill strong {
  font-size: 13px;
  color: var(--grey-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-card-body {
  margin-top: 14px;
}
.live-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.live-stat {
  background: var(--grey-100);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.live-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-500);
}
.live-stat strong {
  font-size: 15px;
  color: var(--grey-800);
}
.live-section {
  margin-top: 16px;
}
.live-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-500);
  margin-bottom: 8px;
}
.live-entry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.live-entry-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--grey-100);
}
.live-entry-row.pending {
  background: var(--white);
}
.live-entry-row.picked {
  background: var(--white);
  border-left: 3px solid #2e7d32;
}
.live-entry-row.dropped {
  background: var(--grey-100);
  opacity: 0.65;
}
.live-entry-row.dropped .live-entry-name {
  text-decoration: line-through;
}
.live-entry-row.absent,
.live-entry-row.noshow {
  background: #ffeaea;
}
.live-entry-row.absent .live-entry-name,
.live-entry-row.noshow .live-entry-name {
  text-decoration: line-through;
  color: var(--grey-600);
}
.live-entry-row.remaining {
  background: #eef5ff;
}
.live-entry-row.other {
  background: #fff3e6;
}
.live-packs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.live-pack {
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
}
.live-pack-pickup {
  background: #eef5ff;
}
.live-pack-dropoff {
  background: #f1f8ee;
}
.live-pack-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.live-pack-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-600, #555);
}
.live-pack-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-700);
  background: var(--white);
  border-radius: 999px;
  padding: 2px 10px;
}
.live-rollcall-banner {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
}
.live-entry-row.homestay {
  background: #fef3e2;
  border-left: 3px solid #e67e22;
  opacity: 0.9;
}
.live-entry-row.homestay .live-entry-name {
  color: #a35400;
}
.live-homestay-section .live-section-title {
  color: #a35400;
}
.live-entry-main {
  min-width: 0;
  flex: 1;
}
.live-entry-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--grey-800);
}
.live-entry-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--grey-500);
}
.live-entry-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--grey-700);
  background: rgba(255, 255, 255, 0.6);
  border-left: 3px solid var(--amber, #e67e22);
  border-radius: 6px;
  padding: 6px 8px;
  line-height: 1.35;
}
.live-entry-gate {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  background: rgba(230, 126, 34, 0.12);
  border-radius: 999px;
  padding: 5px 8px;
}

/* History */
.history-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  position: sticky;
  top: 0;
  z-index: 5;
}
.history-controls .history-nav {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--grey-100);
  border: 1px solid var(--grey-200);
  font-size: 14px;
  color: var(--grey-800);
  cursor: pointer;
  flex-shrink: 0;
}
.history-controls .history-nav:active { background: var(--grey-200); }
.history-date-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-800);
  background: var(--white);
  text-align: center;
}
.history-list { display: flex; flex-direction: column; }
.history-date {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-500);
  background: var(--grey-100);
  border-bottom: 1px solid var(--grey-200);
}
.history-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  gap: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.history-row:active { background: var(--grey-100); }
.history-row.expanded { background: var(--green-pale); }
.history-van { font-size: 13px; font-weight: 700; min-width: 80px; flex-shrink: 0; }
.history-driver { font-size: 13px; color: var(--grey-500); width: 40px; flex-shrink: 0; }
.history-bar-wrap { flex: 1; height: 8px; background: var(--grey-200); border-radius: 4px; overflow: hidden; }
.history-bar { height: 100%; background: var(--green); border-radius: 4px; }
.history-count { font-size: 13px; color: var(--grey-500); width: 40px; text-align: right; flex-shrink: 0; }
.history-chevron {
  font-size: 12px;
  color: var(--grey-500);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

/* History detail (expanded van row) */
.history-detail {
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  padding: 10px 16px 14px;
}
.history-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.history-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--grey-200);
  background: var(--grey-100);
  color: var(--grey-800);
}
.history-chip-picked {
  background: var(--green-pale);
  color: var(--green-dark);
  border-color: var(--green-pale);
}
.history-chip-noshow {
  background: #fff4e0;
  color: #9a5a00;
  border-color: #ffe4b5;
}
.history-chip-absent {
  background: #fde4e0;
  color: var(--red);
  border-color: #f5c4bd;
}
.history-chip-pending {
  background: var(--grey-100);
  color: var(--grey-500);
}
.history-entries {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--grey-100);
  font-size: 14px;
}
.history-entry-pos {
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-500);
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}
.history-entry-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  background: var(--grey-200);
  color: var(--grey-500);
  flex-shrink: 0;
}
.history-entry-name {
  flex: 1;
  font-weight: 600;
  color: var(--grey-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-entry-meta {
  font-size: 12px;
  color: var(--grey-500);
  flex-shrink: 0;
}
.history-entry-picked-up .history-entry-icon {
  background: var(--green);
  color: var(--white);
}
.history-entry-no-show .history-entry-icon {
  background: #e67e22;
  color: var(--white);
}
.history-entry-absent .history-entry-icon {
  background: var(--red);
  color: var(--white);
}
.history-entry-absent .history-entry-name { text-decoration: line-through; opacity: 0.7; }

@media (max-width: 640px) {
  .live-card {
    padding: 14px;
    border-radius: 16px;
  }

  .live-board-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .live-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .live-card-toggle {
    gap: 10px;
  }

  .live-card-title {
    font-size: 18px;
  }

  .live-progress-top {
    margin-top: 12px;
  }

  .live-summary-pills {
    grid-template-columns: 1fr;
  }

  .live-stats-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .live-packs-grid {
    grid-template-columns: 1fr;
  }

  .live-entry-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .live-entry-gate {
    align-self: flex-start;
  }

  .fb-bot-banner,
  .fb-thread-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .fb-bot-layout,
  .fb-detail-grid,
  .fb-request-grid {
    grid-template-columns: 1fr;
  }

  .fb-owner-search {
    flex-direction: column;
  }

  .company-brand-layout {
    grid-template-columns: 1fr;
  }

  .company-brand-preview {
    min-height: 150px;
  }

  .company-employee-row,
  .company-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .company-employee-side {
    justify-content: flex-start;
  }
}

/* ── Run-sequence Tasks ──────────────────────────────────────────────────── */

/* Schedule-tab run-task rows (inside van cards) */
.sched-run-task-row {
  border-left: 4px solid var(--amber);
  background: #fff9f1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
}
.sched-run-task-row .sched-pos-task {
  color: var(--amber);
  font-weight: 700;
  flex-shrink: 0;
}
.sched-run-task-body {
  flex: 1;
  min-width: 0;
}
.sched-run-task-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--grey-800);
}
.sched-run-task-desc {
  font-size: 12px;
  color: var(--grey-500);
  margin-top: 2px;
}
.sched-run-task-meta {
  font-size: 12px;
  color: var(--grey-500);
  margin-top: 2px;
}
.sched-run-task-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.sched-run-task-actions .sched-action-btn {
  padding: 4px 8px;
  font-size: 12px;
}
.sched-run-task-actions .sched-action-btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

/* Run-task form modal fields */
.run-task-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
  padding: 0 16px;
}
.run-task-form-label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--grey-500);
  text-align: left;
  gap: 4px;
}
.run-task-form-label input,
.run-task-form-label textarea {
  padding: 8px 10px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font-size: 14px;
  color: var(--grey-800);
  font-family: inherit;
  resize: vertical;
}
.run-task-form-label input:focus,
.run-task-form-label textarea:focus {
  outline: none;
  border-color: var(--amber);
}

/* Driver view — task focus card (current item) */
.run-focus-card-task {
  border-left: 6px solid var(--amber);
  background: linear-gradient(180deg, #fff9f1 0%, #fff 100%);
}
.focus-topline-task {
  color: var(--amber);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.focus-name-task {
  color: var(--grey-800);
}
.focus-task-desc {
  font-size: 14px;
  color: var(--grey-500);
  margin: 6px 0 8px;
  line-height: 1.4;
}
.focus-task-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.focus-task-link {
  display: inline-block;
  font-size: 14px;
  color: var(--amber);
  text-decoration: none;
  padding: 6px 0;
}
.focus-task-link:active {
  opacity: 0.7;
}
.focus-task-done {
  background: var(--green);
  color: var(--white);
}
.focus-task-failed {
  background: var(--red);
  color: var(--white);
}

/* Driver view — task queue/done rows */
.run-entry-task {
  border-left: 4px solid var(--amber);
  background: #fff9f1;
}
.run-entry-task .entry-name {
  color: var(--grey-800);
}
.run-entry-done.run-entry-task.task-completed .done-status {
  color: var(--green);
}
.run-entry-done.run-entry-task.task-failed .done-status {
  color: var(--red);
}
.sched-badge.sched-badge-task {
  background: var(--amber);
  color: var(--white);
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 4px;
  margin-left: 6px;
}

/* Reorder modal — task row variant */
.reorder-row-task {
  border-left: 4px solid var(--amber);
  background: #fff9f1;
}


/* ── Permission editor modal (Company → Edit Access) ───────────────────── */
.perm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: sideMenuFade 0.15s ease-out;
}
.perm-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 560px;
  width: 92%;
  max-height: 88vh;
  overflow-y: auto;
  margin: auto;
  animation: perm-modal-in 0.15s ease-out;
}
@keyframes perm-modal-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.perm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--grey-200);
}
.perm-modal-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.perm-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--grey-400, #999);
  line-height: 1;
  padding: 0 4px;
}
.perm-modal-body {
  padding: 16px 20px 20px;
}
.perm-grid {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.perm-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #f7f8fa;
  border-radius: 8px;
}
.perm-row-label {
  flex: 1;
  min-width: 0;
}
.perm-row-title {
  font-weight: 600;
  font-size: 14px;
}
.perm-row-desc {
  font-size: 12px;
  color: var(--grey-500, #666);
  margin-top: 2px;
}
.perm-row-choices {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.perm-choice {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.perm-choice.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.perm-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--grey-200);
}
.perm-spacer {
  flex: 1;
}
.btn-edit-access {
  font-size: 12px;
  padding: 6px 10px;
}

/* ── Run phases ─────────────────────────────────────────────────────────── */

/* Roll call card */
.run-focus-card-rollcall {
  background: var(--blue-50, #eff6ff);
  border: 2px solid var(--blue-400, #60a5fa);
}
/* The sticky run-focus-wrap used to stretch to the full height of the roll
 * call list, making the body scroll feel like dragging a giant overlay. Cap
 * the list height so only ~6 rows are visible at once and it scrolls
 * internally (momentum scroll on iOS) while the card stays a sensible size. */
.rollcall-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  padding: 8px 4px 8px 0;
  max-height: 42vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.rollcall-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  padding: 8px 6px;
  min-height: 40px;
  border-radius: 10px;
  cursor: pointer;
}
.rollcall-item:active {
  background: rgba(59, 130, 246, 0.12);
}
.rollcall-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* ── Focus action pressed / loading state ─────────────────────────────────
 * Clicking "Picked Up" / "Dropped Off" / "Missing" calls the server. The
 * response usually lands fast but can take a second or two on a flaky
 * connection — without feedback the driver taps again. Dim + shrink the
 * button the instant it's tapped so the "I heard you" signal is obvious. */
.focus-action-pressing {
  opacity: 0.55;
  transform: scale(0.97);
  transition: opacity 0.12s ease, transform 0.12s ease;
  cursor: progress;
}

/* Single-button row variant — used by "Start Roll Call" on the pickup
 * complete card, which shouldn't split the row into two columns. */
.focus-actions-single {
  grid-template-columns: 1fr;
}
.rollcall-check {
  accent-color: var(--blue-500, #3b82f6);
}
.rollcall-dog-name {
  font-weight: 500;
  flex: 1;
}

/* Dropoff focus card accent */
.run-focus-card-dropoff {
  border-left: 4px solid var(--amber-400, #fbbf24);
}

/* Schedule phase toggle (Pickup Order / Dropoff Order) */
.sched-phase-toggle {
  display: flex;
  gap: 0;
  padding: 4px 16px 8px;
}
.sched-phase-btn {
  flex: 1;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--grey-200);
  background: var(--grey-50, #f9fafb);
  color: var(--grey-500, #6b7280);
  cursor: pointer;
  transition: all 0.15s;
}
.sched-phase-btn:first-child {
  border-radius: 8px 0 0 8px;
}
.sched-phase-btn:last-child {
  border-radius: 0 8px 8px 0;
  border-left: none;
}
.sched-phase-btn.active {
  background: var(--blue-500, #3b82f6);
  color: #fff;
  border-color: var(--blue-500, #3b82f6);
}

/* Homestay row in schedule (inline with dogs/guests/tasks) */
.sched-dog-homestay {
  background: var(--amber-50, #fffbeb);
  border-left: 3px solid var(--amber-400, #fbbf24);
}
.sched-badge-phase {
  background: var(--grey-100, #f3f4f6);
  color: var(--grey-600, #4b5563);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
}
.sched-homestay-notes {
  cursor: help;
  font-size: 14px;
}

/* Homestay row in reorder modal */
.reorder-row-homestay {
  background: var(--amber-50, #fffbeb);
  border-left: 3px solid var(--amber-400, #fbbf24);
}

/* Live view phase labels */
.live-status-badge.picking-up { background: var(--blue-100, #dbeafe); color: var(--blue-700, #1d4ed8); }
.live-status-badge.roll-call { background: var(--amber-100, #fef3c7); color: var(--amber-700, #b45309); }
.live-status-badge.dropping-off { background: var(--purple-100, #f3e8ff); color: var(--purple-700, #7e22ce); }

/* ── Calendar Section Groups ─────────────────────────────────────────────── */
.cal-section {
  margin-bottom: 16px;
}
.cal-section-header {
  padding: 8px 4px 6px;
}
.cal-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--grey-800);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cal-section-desc {
  font-size: 12px;
  color: var(--grey-500);
  margin-top: 1px;
}

/* ── Homestay Tab ────────────────────────────────────────────────────────── */
/* ── Homestay tab (compact, mobile-first) ──────────────────────────────── */
.hs-tab-root {
  padding: 4px 0 24px;
}
.hs-section {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--grey-100);
}
.hs-section:last-child { border-bottom: none; }
.hs-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--grey-800);
  margin-bottom: 2px;
}
.hs-section-sub {
  font-size: 12px;
  color: var(--grey-500);
  margin-bottom: 10px;
  line-height: 1.35;
}

/* Today-at-a-glance stat card — 4 columns at >=560px, 2 columns on phones. */
.hs-today-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--white);
  border-radius: 12px;
  padding: 12px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 10px;
}
@media (max-width: 560px) {
  .hs-today-card {
    grid-template-columns: 1fr 1fr;
    row-gap: 14px;
  }
}
.hs-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 2px;
}
/* The leading "Staying today" card is the headline number — slightly
 * heavier + tinted so the eye lands there first before breaking down
 * into the sub-buckets. */
.hs-stat-total .hs-stat-num {
  color: var(--green-dark, #1f6b3a);
}
.hs-stat-total .hs-stat-label {
  color: var(--green-dark, #1f6b3a);
}
.hs-stat-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--grey-800);
  line-height: 1.1;
}
.hs-stat-num.hs-stat-in { color: var(--green-dark); }
.hs-stat-num.hs-stat-out { color: #b45309; }
.hs-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.hs-stat-names {
  font-size: 11px;
  color: var(--grey-800);
  margin-top: 4px;
  line-height: 1.3;
  word-break: break-word;
}

/* Next-event banner */
.hs-next-event {
  background: var(--green-pale, #e8f5ec);
  border-radius: 10px;
  padding: 10px 12px;
}
.hs-next-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hs-next-main {
  font-size: 14px;
  color: var(--grey-800);
  margin-top: 2px;
}
.hs-next-main em { font-style: normal; color: var(--grey-500); }
.hs-next-meta {
  font-size: 12px;
  color: var(--grey-800);
  margin-top: 2px;
}
.hs-next-empty {
  font-size: 12px;
  color: var(--grey-500);
  font-style: italic;
}
.hs-next-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.hs-next-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
}
.hs-next-row + .hs-next-row { border-top: 1px solid rgba(0, 0, 0, 0.05); }
.hs-next-row .hs-next-body { flex: 1; min-width: 0; }
.hs-next-action {
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.hs-next-action:disabled { opacity: 0.6; cursor: default; }
.hs-next-action-arrival { background: var(--green-dark, #2e7d32); }
.hs-next-action-arrival:active { background: #1b5e20; }
.hs-next-action-departure { background: #1976d2; }
.hs-next-action-departure:active { background: #0d47a1; }

/* Edit button paired with the quick-action button on each Next-up row.
   Outline style so the primary action (Gone / Picks up) keeps visual
   priority — Edit is a less common path, but useful when admin notices
   a wrong time/method/van without scrolling to the booking list. */
.hs-next-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.hs-next-edit {
  border: 1px solid var(--border, #c8d3cb);
  background: #fff;
  color: var(--ink, #1f2f25);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.hs-next-edit:hover { background: var(--grey-100, #f3f5f4); }
.hs-next-edit:active { background: var(--grey-200, #e6eae7); }

/* Non-clickable tag shown for DRIVER arrivals: the morning run will mark
   the pickup automatically so admin doesn't need a button here. Sized to
   align with the adjacent action buttons so the row doesn't jump. */
.hs-next-driver-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 20px;
  line-height: 1;
  border-radius: 8px;
  background: rgba(0,0,0,0.05);
  cursor: default;
  user-select: none;
}

/* Day picker row */
.hs-day-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.hs-date-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-800);
  background: var(--white);
  min-height: 42px;
}
.hs-day-arrow {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
  padding: 6px 12px;
  min-height: 42px;
  min-width: 42px;
  cursor: pointer;
  color: var(--grey-800);
}
.hs-day-arrow:active { background: var(--grey-100); }

.hs-day-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-800);
  margin-bottom: 2px;
}
.hs-day-sub {
  font-size: 12px;
  color: var(--grey-500);
  margin-bottom: 8px;
}

/* Pill list */
.hs-pill-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hs-pill {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border: 1px solid var(--grey-100);
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.hs-pill:active { background: var(--grey-100); }
.hs-pill-open {
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-color: var(--grey-200);
}
.hs-pill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
}
.hs-pill-name { min-width: 0; }
.hs-pill-name strong { font-size: 15px; color: var(--grey-800); }
.hs-pill-breed {
  font-size: 12px;
  color: var(--grey-500);
  margin-left: 6px;
}
.hs-pill-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.hs-pill-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-800);
  background: var(--grey-100);
  padding: 2px 8px;
  border-radius: 10px;
}
.hs-pill-chevron {
  font-size: 16px;
  font-weight: 700;
  color: var(--grey-500);
  min-width: 16px;
  text-align: center;
}
.hs-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* State palette — used by chips, pill row tints, and group headers.
 *   here     — dog is currently on-site            → green
 *   leaving  — on-site but going home today        → amber
 *   arriving — due today, not yet checked in       → blue
 *   left     — already gone home                   → yellow (user-requested)
 *   staying  — non-today mid-stay                  → neutral grey
 *   single   — non-today one-day booking           → blue */
.hs-chip-here     { background: #dcfce7; color: #166534; }
.hs-chip-leaving  { background: #fef3c7; color: #b45309; }
.hs-chip-arriving { background: #dbeafe; color: #1d4ed8; }
.hs-chip-left     { background: #fef9c3; color: #854d0e; }
.hs-chip-staying  { background: var(--grey-100); color: var(--grey-800); }
.hs-chip-single   { background: #dbeafe; color: #1d4ed8; }
/* Legacy aliases still referenced by other code paths. */
.hs-chip-in  { background: #dbeafe; color: #1d4ed8; }
.hs-chip-out { background: #fef3c7; color: #b45309; }
.hs-chip-stay { background: var(--grey-100); color: var(--grey-800); }

/* Row tint + left-edge accent so the dog's colour matches its group. */
.hs-pill-here     { background: #f0fdf4; border-color: #bbf7d0; border-left: 4px solid #16a34a; }
.hs-pill-leaving  { background: #fffbeb; border-color: #fde68a; border-left: 4px solid #d97706; }
.hs-pill-arriving { background: #eff6ff; border-color: #bfdbfe; border-left: 4px solid #2563eb; }
.hs-pill-left     { background: #fefce8; border-color: #fef08a; border-left: 4px solid #ca8a04; opacity: 0.9; }

/* Today grouping — one coloured header per state, count badge on the right. */
.hs-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.hs-group:last-child { margin-bottom: 0; }
.hs-group-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-radius: 8px; margin-bottom: 2px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.hs-group-count {
  background: rgba(255,255,255,0.7); padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 700;
}
.hs-group-here     .hs-group-head { background: #dcfce7; color: #166534; }
.hs-group-leaving  .hs-group-head { background: #fef3c7; color: #b45309; }
.hs-group-arriving .hs-group-head { background: #dbeafe; color: #1d4ed8; }
.hs-group-left     .hs-group-head { background: #fef9c3; color: #854d0e; }

/* Expanded pill body */
.hs-pill-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--grey-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
}
.hs-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
}
.hs-detail-label {
  color: var(--grey-500);
  font-weight: 600;
  flex-shrink: 0;
}
.hs-detail-value {
  color: var(--grey-800);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.hs-detail-time {
  font-weight: 700;
  color: var(--grey-800);
}
.hs-detail-muted {
  color: var(--grey-500);
  font-size: 12px;
  font-style: italic;
}
.hs-detail-done {
  font-weight: 700;
  color: var(--green-dark);
}
.hs-detail-notes {
  background: var(--grey-100);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--grey-800);
}
.hs-detail-notes-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.hs-owner-row { display: flex; flex-direction: column; gap: 4px; }
.hs-pill-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.hs-add-wrap { margin-top: 10px; }

/* Draft/save bar — appears at the top of the homestay tab when any of the
 * arrival/departure toggles have unsaved changes. */
.hs-save-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #fff4dd;
  border-bottom: 1px solid #eac77d;
  font-size: 14px;
}
.hs-save-bar.hidden { display: none; }
.hs-save-bar-copy { font-weight: 600; color: #6a4b00; flex: 1; }
.hs-save-bar-actions { display: flex; gap: 8px; }
.hs-save-bar-status { font-size: 12px; color: #6a4b00; width: 100%; }
.hs-owner-event.hs-owner-pending {
  color: #6a4b00;
  background: #fff4dd;
  border-radius: 6px;
  padding: 6px 10px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.hs-owner-undo {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  color: inherit;
}
.hs-owner-undo:hover { background: rgba(0,0,0,0.05); }

/* Daily notification settings card (admin-only) */
.hs-notify-section { background: var(--grey-100); }
.hs-notify-section[open] { padding-bottom: 14px; }
.hs-notify-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
  gap: 12px;
}
.hs-notify-summary::-webkit-details-marker { display: none; }
.hs-notify-summary-sub {
  font-size: 12px;
  color: var(--grey-600);
  font-weight: 500;
}
.hs-notify-body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.hs-notify-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hs-notify-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--grey-800);
  flex: 1;
}
.hs-notify-label { font-size: 14px; color: var(--grey-800); }
.hs-notify-tz { font-size: 12px; color: var(--grey-500); }
.hs-notify-status { font-size: 12px; color: var(--grey-600); min-height: 14px; }
.hs-notify-error { color: var(--red-600, #c0392b); font-size: 13px; }
.hs-notify-recipients-wrap { margin-top: 4px; }
.hs-notify-recipients-label {
  font-size: 12px;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.hs-notify-recipients {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hs-notify-recipients li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--grey-800);
  padding: 4px 8px;
  background: var(--white);
  border-radius: 6px;
}
.hs-notify-role { font-size: 11px; color: var(--grey-500); text-transform: uppercase; }
.hs-notify-empty { font-size: 13px; color: var(--grey-500); font-style: italic; }

/* Booking cards */
.hs-booking-card {
  background: var(--white);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.hs-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.hs-card-header strong { font-size: 15px; }
.hs-breed { font-size: 13px; color: var(--grey-500); }
.hs-card-dates { font-size: 13px; color: var(--grey-500); margin-bottom: 6px; }
.hs-card-methods { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.hs-card-notes {
  font-size: 13px;
  color: var(--grey-800);
  padding: 6px 8px;
  background: var(--grey-100);
  border-radius: 6px;
  margin-bottom: 6px;
}
.hs-card-actions { display: flex; gap: 8px; margin-top: 6px; }
.hs-edit-btn, .hs-delete-btn {
  background: none;
  border: 1px solid var(--grey-200);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
}
.hs-edit-btn:hover { background: var(--grey-100); }
.hs-delete-btn { color: var(--red); border-color: var(--red); }
.hs-delete-btn:hover { background: #fdecea; }

/* Status badges */
.hs-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.hs-status-start { background: #e8f5ec; color: var(--green-dark); }
.hs-status-end { background: #fdecea; color: var(--red); }
.hs-status-middle { background: #fef3c7; color: #b45309; }
.hs-status-single { background: #dbeafe; color: #1d4ed8; }

/* Method badges */
.hs-method-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 8px;
}
.hs-method-driver { background: #e8f5ec; color: #2e7d32; }
.hs-method-owner { background: #e3f2fd; color: #1565c0; }

/* Owner event tracking */
.hs-owner-event {
  font-size: 13px;
  padding: 4px 0;
}
.hs-owner-done { color: var(--green-dark); font-weight: 500; }
.hs-owner-waiting { color: var(--amber); font-style: italic; }
.hs-owner-btn {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.hs-owner-btn:active { opacity: 0.8; }

/* Add button */
.hs-add-btn {
  width: 100%;
  margin-top: 12px;
}

/* ── Homestay Form Overlay ─────────────────────────────────────────────── */
.hs-form-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hs-form {
  background: var(--white);
  border-radius: 16px 16px 0 0;
  padding: 20px 16px calc(var(--safe-bot) + 16px);
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
}
.hs-form-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 12px;
}
.hs-form-dog-name {
  font-size: 15px;
  font-weight: 600;
  padding: 8px 0;
  margin-bottom: 8px;
  color: var(--green-dark);
}
.hs-form-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 6px;
}
.hs-form-results {
  max-height: 160px;
  overflow-y: auto;
}
.hs-form-results .hs-dog-result {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--grey-100);
  font-size: 14px;
}
.hs-form-results .hs-dog-result:hover { background: var(--grey-100); }
.hs-form-row { display: flex; gap: 8px; }
.hs-form-label { font-size: 13px; flex: 1; }
.hs-form-label.hs-time-label { display: block; margin-top: 4px; }
.hs-form-label.hs-form-label-block { display: block; margin: 4px 0 8px; }

/* Grouped card for start-day / end-day sections */
.hs-form-card {
  background: var(--grey-100);
  border-radius: 12px;
  padding: 12px 12px 8px;
  margin: 12px 0;
}
.hs-form-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--grey-800);
}
.hs-form-card-sub {
  font-size: 12px;
  color: var(--grey-500);
  margin-bottom: 8px;
}

/* Sub-line under arrival/departure rows showing van + phase */
.hs-detail-sub {
  font-size: 11px;
  color: var(--grey-500);
  font-style: italic;
  margin-top: 2px;
}

/* ── Custom time picker ─────────────────────────────────────────────────── */
.hs-time-btn {
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-800);
  cursor: pointer;
  margin-bottom: 4px;
}
.hs-time-btn:active { background: var(--grey-100); }

.hs-time-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hs-time-picker {
  background: var(--white);
  border-radius: 16px 16px 0 0;
  padding: 20px 16px calc(var(--safe-bot) + 16px);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}
.hs-time-picker-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--grey-800);
}
.hs-time-picker-sub {
  font-size: 12px;
  color: var(--grey-500);
  margin-bottom: 8px;
}
.hs-time-display {
  font-size: 32px;
  font-weight: 700;
  color: var(--green-dark);
  text-align: center;
  padding: 12px 0;
  letter-spacing: 0.02em;
}
.hs-time-picker-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 8px 0 6px;
}
.hs-time-grid {
  display: grid;
  gap: 6px;
}
.hs-time-grid-hours { grid-template-columns: repeat(6, 1fr); }
.hs-time-grid-minutes { grid-template-columns: repeat(6, 1fr); }
.hs-time-grid-ampm { grid-template-columns: 1fr 1fr; }
.hs-time-chip {
  background: var(--grey-100);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-800);
  cursor: pointer;
  min-height: 40px;
}
.hs-time-chip:active { background: var(--grey-200); }
.hs-time-chip.active {
  background: var(--green);
  color: white;
  border-color: var(--green-dark);
}
.hs-time-picker-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.hs-time-picker-actions > * { flex: 1; padding: 12px 14px; font-size: 14px; }
.hs-time-picker-actions #hs-tp-ok { flex: 2; }
.hs-form-section-label {
  font-size: 13px;
  font-weight: 500;
  margin: 8px 0 4px;
  color: var(--grey-800);
}
.hs-toggle { margin: 0 0 4px !important; }
.hs-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.hs-form-actions .btn-generate,
.hs-form-actions .btn-secondary {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
}

/* ── Owner Portal ──────────────────────────────────────────────────────── */
.owner-profile {
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.owner-section {
  background: white;
  border: 1px solid var(--grey-200, #e5e7eb);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.owner-section h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}
.owner-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.owner-section-head h3 { margin: 0; }
.owner-row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--grey-100, #f3f4f6);
  font-size: 14px;
}
.owner-row:last-child { border-bottom: none; }
.owner-row-label {
  flex: 0 0 130px;
  color: var(--grey-600, #6b7280);
}
.owner-dogs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.owner-dog-card {
  border: 1px solid var(--grey-200, #e5e7eb);
  border-radius: 10px;
  padding: 12px;
}
.owner-dog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.owner-dog-title strong { font-size: 15px; }
.owner-dog-sub {
  display: block;
  color: var(--grey-600, #6b7280);
  font-size: 13px;
}
.owner-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.owner-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--grey-700, #374151);
}
.owner-field input,
.owner-field textarea,
.owner-field select {
  padding: 8px 10px;
  border: 1px solid var(--grey-300, #d1d5db);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.owner-field textarea { resize: vertical; }
.owner-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.owner-form-actions > * { flex: 1; }

/* ── Admin → Owners tab ──────────────────────────────────────────────────── */
.owners-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.owners-admin-head h3 { margin: 0; }
#owners-admin-filter {
  flex: 1;
  min-width: 180px;
  padding: 8px 10px;
  border: 1px solid var(--grey-300, #d1d5db);
  border-radius: 8px;
  font-size: 14px;
}
.owners-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.owners-admin-table th,
.owners-admin-table td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--grey-100, #f3f4f6);
  vertical-align: top;
}
.owners-admin-table th {
  font-weight: 600;
  color: var(--grey-600, #6b7280);
}

/* Week-attendance "is this week billed?" status pill. Sits next to the
   date label in the page title so the answer is visible at a glance
   without having to scan the dog list for charge state. Paired with a
   relabel + disable on the "Bill this week" button. */
.week-bill-status {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  vertical-align: middle;
  white-space: nowrap;
}
.week-bill-status-billed   { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.week-bill-status-unbilled { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }
.week-bill-status-partial  { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.week-bill-status-empty    { background: var(--grey-100, #f3f4f6); color: var(--grey-500, #6b7280); border: 1px solid var(--grey-200, #e1e5ec); }

#billing-attend-bill-week:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Outstanding balances list — at desktop widths the default table is
   "Owner ............................. View ledger" with no visible
   grid lines, making it hard to know which button belongs to which
   owner. Stronger row separators, zebra striping, hover highlight,
   right-aligned numbers, and a tucked-in action column tie each row
   together. */
#billing-list .owners-admin-table { font-size: 14px; }
#billing-list .owners-admin-table th,
#billing-list .owners-admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--grey-200, #e1e5ec);
  vertical-align: middle;
}
#billing-list .owners-admin-table tbody tr:nth-child(even) td { background: #fafbfc; }
#billing-list .owners-admin-table tbody tr:hover td { background: #f1f5f9; }
#billing-list .owners-admin-table th:nth-child(2),
#billing-list .owners-admin-table th:nth-child(3),
#billing-list .owners-admin-table th:nth-child(4),
#billing-list .owners-admin-table td:nth-child(2),
#billing-list .owners-admin-table td:nth-child(3),
#billing-list .owners-admin-table td:nth-child(4) { text-align: right; }
/* Action column: narrow + right-aligned so the button hugs the row
   end instead of floating in a sea of whitespace. */
#billing-list .owners-admin-table th:last-child,
#billing-list .owners-admin-table td:last-child {
  width: 1%; white-space: nowrap; text-align: right;
}
.owner-login-username {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  display: block;
}
.owner-login-status {
  font-size: 11px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 2px;
}
.owner-login-status.active   { background: #dcfce7; color: #166534; }
.owner-login-status.inactive { background: #fef3c7; color: #92400e; }
.owner-login-status.none     { background: #f3f4f6; color: #6b7280; }
.owners-admin-actions {
  white-space: nowrap;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.owners-admin-actions button {
  font-size: 13px;
  padding: 6px 10px;
}

.temp-pw-modal {
  background: white;
  max-width: 420px;
  margin: 10vh auto;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.temp-pw-modal h3 { margin: 0 0 8px; }
.temp-pw-creds {
  background: #f9fafb;
  border: 1px solid var(--grey-200, #e5e7eb);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
}
.temp-pw-creds > div { margin-bottom: 8px; }
.temp-pw-creds > div:last-child { margin-bottom: 0; }
.temp-pw-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--grey-600, #6b7280);
  margin-bottom: 2px;
}
.temp-pw-creds code {
  font-size: 16px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  user-select: all;
}
.temp-pw-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.temp-pw-actions > * { flex: 1; }

/* ── Owner → Dog detail view ────────────────────────────────────────────── */
.owner-next-day { margin: 0 0 12px; font-size: 15px; }
.owner-section-sub { font-size: 12px; color: var(--grey-600, #6b7280); margin-left: 6px; font-weight: 400; }
.owner-section-actions { display: flex; gap: 8px; margin-top: 12px; }
.owner-section-actions > * { flex: 1; }

.owner-schedule-list, .owner-attendance-list, .owner-note-list,
.owner-absence-list, .owner-homestay-list {
  display: flex; flex-direction: column; gap: 6px;
}
.owner-schedule-row, .owner-attendance-row, .owner-absence-row, .owner-homestay-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--grey-100, #f3f4f6);
  border-radius: 8px;
  font-size: 14px;
}
.owner-schedule-row.is-absent   { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.owner-schedule-row.is-homestay { background: #e0f2fe; border-color: #bae6fd; color: #075985; }
.owner-schedule-van { margin-left: auto; color: var(--grey-600, #6b7280); font-size: 13px; }
.owner-schedule-tag { font-size: 11px; text-transform: uppercase; font-weight: 600; }

.owner-attendance-status {
  margin-left: auto; font-size: 11px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
}
.owner-attendance-status.status-picked_up, .owner-attendance-status.status-dropped_off {
  background: #dcfce7; color: #166534;
}
.owner-attendance-status.status-no_show, .owner-attendance-status.status-absent {
  background: #fef3c7; color: #92400e;
}
.owner-attendance-status.status-pending { background: #f3f4f6; color: #6b7280; }
.owner-attendance-note {
  width: 100%;
  font-size: 13px; color: var(--grey-700, #374151);
  margin-top: 2px;
}

.owner-note-row {
  border: 1px solid var(--grey-100, #f3f4f6);
  border-radius: 8px;
  padding: 8px 10px;
}
.owner-note-meta { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.owner-note-author {
  font-size: 11px; text-transform: uppercase; color: var(--grey-600, #6b7280);
  background: var(--grey-100, #f3f4f6);
  padding: 2px 6px; border-radius: 4px;
}
.owner-note-delete {
  margin-left: auto; background: transparent; border: none;
  font-size: 18px; line-height: 1; color: var(--grey-600, #6b7280);
  cursor: pointer; padding: 0 4px;
}
.owner-note-text { margin-top: 4px; font-size: 14px; white-space: pre-wrap; }

.owner-absence-row button, .owner-homestay-row button {
  margin-left: auto; font-size: 13px; padding: 6px 10px;
}
.owner-homestay-methods {
  width: 100%; font-size: 13px; color: var(--grey-600, #6b7280);
}
.owner-homestay-row.is-pending { background: #fef3c7; border-color: #fde68a; }
.owner-homestay-pending {
  font-size: 11px; text-transform: uppercase; font-weight: 600;
  background: #f59e0b; color: white;
  padding: 2px 8px; border-radius: 4px;
}

/* ── Admin Homestay → Pending approvals banner ─────────────────────────── */
.hs-pending-section { border-left: 4px solid #f59e0b; }
.hs-pending-section.hidden { display: none; }
.hs-pending-count {
  display: inline-block; background: #f59e0b; color: white;
  padding: 2px 8px; border-radius: 10px; font-size: 12px; margin-left: 6px;
}
.hs-pending-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.hs-pending-row {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 10px 12px;
}
.hs-pending-head { font-size: 15px; }
.hs-pending-sub  { color: var(--grey-600, #6b7280); margin-left: 6px; font-size: 13px; }
.hs-pending-dates { font-size: 14px; margin-top: 2px; }
.hs-pending-methods, .hs-pending-notes {
  font-size: 13px; color: var(--grey-700, #374151); margin-top: 2px;
}
.hs-pending-actions { display: flex; gap: 8px; margin-top: 8px; }
.hs-pending-actions > * { flex: 1; font-size: 13px; padding: 8px 12px; }

/* ── Admin Company → Owner portal settings ─────────────────────────────── */
.company-settings-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.company-setting-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--grey-200, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
}
.company-setting-row input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0;
}
.company-setting-input {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.company-setting-input input[type="number"] {
  width: 64px; padding: 6px 8px;
  border: 1px solid var(--grey-300, #d1d5db);
  border-radius: 6px; font-size: 14px; text-align: center;
}
.company-setting-unit { font-size: 13px; color: var(--grey-600, #6b7280); }
.company-setting-title { font-weight: 600; font-size: 14px; }
.company-setting-sub {
  font-size: 13px; color: var(--grey-600, #6b7280); margin-top: 2px;
}
.company-settings-actions {
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
}

/* Profile → Notifications diagnostics panel */
.profile-toggle-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.profile-toggle-copy { flex: 1; }
.profile-toggle-label { font-weight: 600; font-size: 14px; }
.profile-toggle-sub { font-size: 12px; color: var(--grey-500); margin-top: 2px; }
.profile-toggle-status { font-size: 12px; color: var(--grey-600); min-height: 14px; }
.profile-push-diagnostics {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--grey-100);
  border-radius: 8px;
  font-size: 12px;
}
.profile-push-diag-line {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  color: var(--grey-700, #374151);
}
.profile-push-diag-line span:first-child { color: var(--grey-500); }
.profile-push-diag-line .pd-ok { color: #1f5730; }
.profile-push-diag-line .pd-err { color: #c0392b; }
.pd-ok { color: #1f5730; }
.pd-err { color: #c0392b; }

/* Unread indicator on the Homestay admin tab when a daily-summary push
 * hasn't been viewed yet. Shows a red dot by default; when JS renders a
 * count pill the dot is hidden so we don't stack them. Cleared when
 * setAdminTab('homestay') fires (which also zeros the iOS app icon badge
 * and removes delivered notifications). */
.admin-tab { position: relative; }
.admin-tab.has-unread::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e74c3c;
  box-shadow: 0 0 0 2px #fff;
}
.admin-tab:has(.admin-tab-count)::after { display: none; }
.admin-tab-count {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

/* One-shot pulse on the Today card when the homestay tab is opened from a
 * notification tap — draws the eye without being obnoxious. */
@keyframes hs-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.75); transform: scale(1);     background-color: rgba(231, 76, 60, 0.22); }
  50%  { box-shadow: 0 0 0 22px rgba(231, 76, 60, 0); transform: scale(1.035); background-color: rgba(231, 76, 60, 0.10); }
  100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);    transform: scale(1);     background-color: transparent; }
}
.hs-today-card.hs-highlight-pulse {
  animation: hs-pulse 1.4s ease-out 3;
  border-radius: 12px;
}

/* ── Homestay monthly calendar heatmap ─────────────────────────────────── */
.hs-cal-section { padding: 12px 14px; }
.hs-cal-root { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* ── Google Calendar–style booking-bar calendar ─────────────────────── */
.hs-bcal { font-size: 12px; }
.hs-bcal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.hs-bcal-nav { display: flex; align-items: center; gap: 4px; }
.hs-bcal-navbtn {
  background: none; border: 1px solid var(--grey-200); border-radius: 8px;
  padding: 4px 12px; font-size: 18px; line-height: 1; cursor: pointer;
  color: var(--grey-800);
}
.hs-bcal-navbtn:hover { background: var(--grey-50); }
.hs-bcal-today {
  background: none; border: 1px solid var(--grey-200); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--grey-800);
}
.hs-bcal-today:hover { background: var(--grey-50); }
.hs-bcal-title {
  flex: 1 1 auto; min-width: 120px;
  text-align: center;
  font-weight: 700; font-size: 15px; color: var(--grey-800);
}
.hs-bcal-views {
  display: inline-flex; border: 1px solid var(--grey-200); border-radius: 8px;
  overflow: hidden; background: var(--grey-50);
}
.hs-bcal-viewbtn {
  background: transparent; border: none;
  padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--grey-600); font-family: inherit;
}
.hs-bcal-viewbtn + .hs-bcal-viewbtn { border-left: 1px solid var(--grey-200); }
.hs-bcal-viewbtn.active { background: var(--grey-800); color: #fff; }

.hs-bcal-daynames {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 10px; font-weight: 700; color: var(--grey-500);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 0 2px;
}
.hs-bcal-daynames > div { text-align: center; }

.hs-bcal-weeks {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--grey-200);
}
.hs-bcal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 24px repeat(var(--lanes, 1), 18px) 4px;
  gap: 1px 0;
  min-height: 72px;
  border-bottom: 1px solid var(--grey-200);
  padding: 2px 0 4px;
}
.hs-bcal-weeks-week {
  border-top: none;
}
.hs-bcal-weeks-week .hs-bcal-week {
  grid-template-rows: 32px repeat(var(--lanes, 1), 22px) 4px;
  min-height: 240px;
  border-bottom: none;
  padding: 4px 0;
}
.hs-bcal-daycell {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 3px 4px 0 4px;
  display: flex; align-items: flex-start; justify-content: flex-end;
  cursor: pointer;
  font-family: inherit;
  color: var(--grey-800);
  transition: background 0.08s;
  min-width: 0;
  overflow: hidden;
}
.hs-bcal-daycell:hover { background: var(--grey-50); }
.hs-bcal-daynum {
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 999px;
}
.hs-bcal-today .hs-bcal-daynum {
  background: var(--green, #2ecc71); color: #fff;
}
.hs-bcal-selected {
  background: var(--grey-100);
}

/* Month quick-jump bar shown under the month view */
.hs-bcal-months {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 10px;
}
.hs-bcal-monthbtn {
  background: var(--grey-50);
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  padding: 6px 4px;
  font: 600 11px/1 inherit;
  color: var(--grey-800);
  cursor: pointer;
}
.hs-bcal-monthbtn:hover { background: var(--grey-100); }
.hs-bcal-monthbtn.active {
  background: var(--grey-800); color: #fff; border-color: var(--grey-800);
}
.hs-bcal-out { opacity: 0.45; }
.hs-bcal-out .hs-bcal-daynum { color: var(--grey-500); }

.hs-bcal-bar {
  min-width: 0;
  align-self: stretch;
  margin: 0 1px;
  padding: 2px 6px;
  border-radius: 4px;
  border: none;
  font: 600 11px/1.2 inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
  display: flex; align-items: center;
}
.hs-bcal-bar-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block; min-width: 0;
}
.hs-bcal-bar-contl {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left: none;
  padding-left: 4px;
}
.hs-bcal-bar-contr {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.hs-bcal-bar:hover { filter: brightness(0.96); }
.hs-bcal-weeks-week .hs-bcal-bar { font-size: 12px; padding: 3px 8px; }

.hs-bcal-more {
  background: transparent; border: none;
  font: 600 10px/1 inherit; color: var(--grey-600);
  cursor: pointer; padding: 2px 4px;
  text-align: left;
  align-self: center;
  min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.hs-bcal-more:hover { color: var(--grey-800); text-decoration: underline; }

/* Day view: vertical stack of bookings */
.hs-bcal-dayview {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 6px;
}
.hs-bcal-daybar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: none; border-radius: 8px;
  font: 600 14px/1.2 inherit;
  text-align: left;
  cursor: pointer;
}
.hs-bcal-daybar-name { font-weight: 700; }
.hs-bcal-daybar-range { font-size: 12px; opacity: 0.75; }
.hs-bcal-daybar:hover { filter: brightness(0.96); }
.hs-bcal-empty {
  text-align: center; color: var(--grey-500); padding: 24px 8px;
  background: var(--grey-50); border-radius: 8px;
  font-size: 13px;
}

/* ── Billing (Phase 1) ─────────────────────────────────────────────────── */
.billing-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.billing-actions input[type="search"] { flex: 1; min-width: 140px; }
.billing-sub { font-size: 12px; color: var(--grey-500); }
.billing-bal-due { color: #b23a3a; font-weight: 700; }
.billing-bal-credit { color: #2a7a3a; font-weight: 700; }
.billing-adj { font-size: 12px; margin: 2px 0; }
.billing-adj-delta { font-weight: 700; margin-right: 6px; }
.billing-owing-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--grey-700, #444); cursor: pointer; user-select: none;
}
.billing-owing-toggle input { margin: 0; }

/* Outstanding-balances segmented filter — All / Owing / In credit. Replaces
   the prior single "Only owing" checkbox so the admin can flip to credit
   balances without losing context. */
.billing-balance-filter {
  display: inline-flex;
  background: var(--grey-100, #f3f4f6);
  border: 1px solid var(--grey-200, #e1e5ec);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.billing-balance-tab {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-600, #6b7280);
  cursor: pointer;
}
.billing-balance-tab:hover { color: var(--grey-800, #1c1c1c); }
.billing-balance-tab.active {
  background: var(--white, #fff);
  color: var(--grey-900, #111);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.billing-summary { margin: 8px 0 14px; }
.billing-summary-card {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; padding: 12px 14px;
  background: var(--grey-50, #f7f7f7); border: 1px solid var(--grey-200, #e3e3e3);
  border-radius: 10px;
}
.billing-summary-stat { display: flex; flex-direction: column; gap: 2px; }
.billing-summary-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--grey-500, #888); }
.billing-summary-value { font-size: 20px; font-weight: 700; }
.billing-summary-sub { font-size: 12px; color: var(--grey-500, #888); }

/* ── Homestay payment status + UNPAID banner ───────────────────────────── */
.hs-chip-paid      { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.hs-chip-unpaid    { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.hs-chip-noprice   { background:#e9ecef; color:#495057; border:1px solid #dee2e6; font-style:italic; }
.hs-pay-toggle {
  margin-left: 8px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--grey-200);
  background:#fff; cursor:pointer; font-size:12px; font-weight:600;
}
.hs-pay-action { background:#198754; color:#fff; border-color:#198754; }
.hs-pay-action:hover { filter: brightness(0.95); }

.live-entry-unpaid {
  margin-top: 6px; padding: 6px 10px; border-radius: 6px;
  background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
  font-weight: 700; font-size: 12px; letter-spacing: 0.3px;
}

/* ── Owner portal — My account ─────────────────────────────────────────── */
.owner-bal-due    { color:#b23a3a; }
.owner-bal-credit { color:#2a7a3a; }
.owner-ledger { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.owner-ledger-row {
  border: 1px solid var(--grey-200); border-radius:8px; padding:10px 12px;
  background:#fff;
}
.owner-ledger-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.owner-ledger-title { font-weight:700; }
.owner-ledger-sub { font-size:12px; color:var(--grey-500); margin-top:2px; }
.owner-ledger-amount { font-weight:700; }
.owner-ledger-adjs {
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--grey-200);
  font-size:13px; display:flex; flex-direction:column; gap:4px;
}
.owner-ledger-adj { display:flex; justify-content:space-between; gap:12px; color:var(--grey-700); }

/* Owner-portal section divider used between Bills and Payments. */
.owner-section-sub {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.4px; color:var(--grey-600); margin:4px 0 8px;
}

/* Per-charge status pill on the owner portal — green = paid, amber =
 * partial, red = still owing. Sits under the dollar amount on the
 * ledger row so the owner can read each week at a glance. */
.owner-ledger-pill-row { margin-top:4px; }
.owner-ledger-pill {
  display:inline-block; padding:2px 8px; border-radius:10px;
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.3px; white-space:nowrap;
}
.owner-ledger-pill-paid    { background:#d4edda; color:#155724; }
.owner-ledger-pill-partial { background:#ffe6c2; color:#7a3f00; }
.owner-ledger-pill-open    { background:#fde2e2; color:#8a2228; }

/* ── Reconciliation tab ─────────────────────────────────────────────────── */
.recon-status-card { border-left: 4px solid var(--accent, #0b7dda); }
.recon-status-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.recon-status-title { margin:6px 0 0; }
.recon-tenant { color: var(--accent, #0b7dda); }
.recon-actions { display:flex; gap:8px; flex-wrap:wrap; }
.recon-status-meta {
  margin-top:10px; display:flex; gap:8px; flex-wrap:wrap;
  font-size:13px; color: var(--grey-600);
}
.recon-filters select {
  padding: 6px 10px; border:1px solid var(--grey-200); border-radius:6px;
  background:#fff;
}
.recon-table { width:100%; border-collapse: collapse; font-size:14px; }
.recon-table th, .recon-table td { padding:10px 12px; border-bottom:1px solid var(--grey-100); text-align:left; }
.recon-table th { font-size:12px; text-transform:uppercase; color:var(--grey-500); letter-spacing:0.5px; }
.recon-amount { text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }
.recon-amt-in  { color:#1e7a3a; font-weight:600; }
.recon-amt-out { color:#777; }
.recon-badge {
  display:inline-block; padding:2px 8px; border-radius: 10px; font-size:11px;
  font-weight:600; text-transform:uppercase; letter-spacing:0.3px;
}
.recon-badge-unmatched        { background:#f8d7da; color:#721c24; }
.recon-badge-reconciled       { background:#d4edda; color:#155724; }
.recon-badge-claude_suggested { background:#fff3cd; color:#856404; }
.recon-badge-ignored          { background:#e2e3e5; color:#495057; }

/* ── Recon progress bar ─────────────────────────────────────────────────── */
.recon-progress { width: 360px; max-width: 100%; }
.recon-progress-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; font-size: 13px; color: var(--grey-800);
}
.recon-progress-stat {
  font-variant-numeric: tabular-nums; color: var(--grey-600); font-size: 12px;
}
.recon-progress-bar {
  height: 10px; border-radius: 6px; background: var(--grey-100);
  overflow: hidden; border: 1px solid var(--grey-200);
}
.recon-progress-fill {
  height: 100%; background: linear-gradient(90deg, #1e7a3a 0%, #2ea857 100%);
  transition: width 0.4s ease-out;
}
.recon-progress-fill-failed { background: #b23a3a !important; }
.recon-progress-msg {
  margin-top: 6px; font-size: 12px; color: var(--grey-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recon-progress-counts {
  margin-top: 4px; font-size: 12px; color: var(--grey-700);
  font-variant-numeric: tabular-nums;
}

/* ── Recon: per-row reasoning + drawer ──────────────────────────────────── */
.recon-row { cursor: pointer; }
.recon-row:hover { background: var(--grey-50, #f7f7f7); }
.recon-reasoning {
  margin-top: 4px; font-size: 12px; color: var(--grey-600);
  font-style: italic; line-height: 1.35;
}
.recon-matched-owner {
  margin-top: 4px; font-size: 12px; color: var(--grey-800);
  line-height: 1.35;
}
.recon-matched-owner strong { color: var(--grey-900); }
.recon-matched-dogs { color: var(--grey-600); margin-left: 6px; }

/* ── Recon row v2 — bank facts vs AI suggestion ────────────────────────── */
/* The "Bank line / AI match" column splits into two visually distinct
   blocks so Jen can tell at a glance which info came from the deposit
   (top, plain background, labelled fields) and which came from Claude
   (bottom, tinted background, AI pill). Same column to keep the table
   layout narrow on smaller laptops. */
.recon-table-v2 td.recon-row-info { padding: 8px 12px; }
.recon-table-v2 td.recon-row-date { vertical-align: top; padding-top: 12px; white-space: nowrap; }
.recon-facts {
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13px; line-height: 1.4;
}
.recon-fact-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline;
  column-gap: 8px;
}
.recon-fact-key {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--grey-500); font-weight: 600;
}
.recon-fact-val { color: var(--grey-900); }
.recon-fact-val.recon-fact-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--grey-800); word-break: break-word; }
.recon-fact-val.recon-fact-desc { color: var(--grey-700); font-size: 12.5px; }
.recon-fact-empty { color: var(--grey-500); font-style: italic; }

.recon-ai {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px; line-height: 1.4;
}
/* Pending = Claude suggested, awaiting admin review. Warm-yellow tint to
   match the .recon-badge-claude_suggested status pill. */
.recon-ai-pending {
  background: #fff8e1;
  border: 1px solid #ffe28a;
}
/* Done = already reconciled. Soft-green so the row reads as "done" but
   we still flag that the owner attribution is an AI inference. */
.recon-ai-done {
  background: #ecf7ef;
  border: 1px solid #cfe7d5;
}
.recon-ai-owner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  color: var(--grey-900);
}
.recon-ai-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px;
  background: #ffb300;
  color: #4a2a00;
  border-radius: 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}
.recon-ai-tag::before { content: "🤖"; font-size: 11px; }
.recon-ai-tag-done {
  background: #2ea857; color: #fff;
}
.recon-ai-tag-done::before { content: "✓"; font-size: 11px; }
.recon-ai-owner strong { color: var(--grey-900); font-weight: 600; }
.recon-ai-dogs { color: var(--grey-700); font-size: 12px; }
.recon-ai-reason {
  margin-top: 4px;
  font-size: 12px; color: var(--grey-700); line-height: 1.4;
  font-style: italic;
}
.recon-ai-reason-label {
  font-style: normal; font-weight: 600; color: var(--grey-500);
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px;
  margin-right: 4px;
}
.recon-ai-alts {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.recon-ai-alts-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--grey-500); font-weight: 600;
}
.recon-row-alt {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: #fff;
  border: 1px dashed #d9a300;
  border-radius: 12px;
  color: var(--grey-800);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.recon-row-alt:hover:not(:disabled) {
  background: #fffbeb;
  border-style: solid;
  border-color: #b8860b;
}
.recon-row-alt:disabled { opacity: 0.55; cursor: wait; }
.recon-row-alt-dog { color: var(--grey-600); font-size: 11px; }

.btn-link {
  background: none; border: none; color: var(--accent, #0b7dda);
  cursor: pointer; font-size: 13px; padding: 4px 8px;
}
.btn-link:hover { text-decoration: underline; }

.recon-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000;
  display: flex; align-items: stretch; justify-content: flex-end;
}
.recon-drawer {
  width: min(560px, 100vw); background: #fff; height: 100vh;
  display: flex; flex-direction: column; box-shadow: -4px 0 16px rgba(0,0,0,0.1);
}
.recon-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--grey-200);
}
.recon-drawer-close {
  background: none; border: none; font-size: 24px; cursor: pointer;
  color: var(--grey-600); line-height: 1;
}
.recon-drawer-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.recon-drawer-section { margin-bottom: 16px; }
.recon-drawer-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--grey-500); margin-bottom: 6px; font-weight: 600;
}
.recon-drawer-deposit {
  background: var(--grey-50, #f7f7f7); padding: 14px; border-radius: 8px;
  border: 1px solid var(--grey-200);
}
.recon-drawer-amount { font-size: 28px; font-weight: 700; color: #1e7a3a; }
.recon-drawer-meta { font-size: 13px; color: var(--grey-700); margin-top: 4px; }
.recon-suggested-name { font-weight: 600; }
.recon-suggested-meta { font-size: 12px; color: var(--grey-600); }
.recon-reasoning-full {
  background: #fff8e1; padding: 10px 12px; border-radius: 6px;
  border-left: 3px solid #ffb300; font-size: 13px; line-height: 1.5;
}
.recon-alloc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.recon-alloc-table th, .recon-alloc-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--grey-100); text-align: left;
}
.recon-alloc-input {
  width: 90px; padding: 4px 8px; border: 1px solid var(--grey-200);
  border-radius: 4px; text-align: right; font-variant-numeric: tabular-nums;
}
.recon-alloc-existing {
  font-size: 12px; color: var(--grey-700); margin-bottom: 4px;
}
.recon-drawer-actions {
  display: flex; gap: 8px; padding-top: 12px;
  border-top: 1px solid var(--grey-100); position: sticky; bottom: 0;
  background: #fff; padding-bottom: 4px;
}

/* ── Recon: filters + pager ─────────────────────────────────────────────── */
.recon-filters {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.recon-filters input[type="date"], .recon-filters select {
  padding: 6px 10px; border: 1px solid var(--grey-200); border-radius: 6px;
  background: #fff; font-size: 13px;
}
.recon-filters .btn-secondary { padding: 6px 10px; font-size: 12px; }
.recon-range-sep { color: var(--grey-500); }
.recon-summary {
  font-size: 13px; color: var(--grey-600);
  margin-bottom: 8px;
}
.recon-pager {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  padding: 12px 0;
}
.recon-pager.hidden { display: none; }
.recon-pager-info { font-size: 13px; color: var(--grey-600); }

/* ── Recon: KPI overview cards ──────────────────────────────────────────── */
.recon-summary-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 12px; margin-bottom: 12px;
}
.recon-summary-head h3 { margin: 0; }
.recon-summary-meta { font-size: 13px; color: var(--grey-600); display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.recon-summary-meta strong { color: var(--grey-900, #222); font-variant-numeric: tabular-nums; }
.recon-pct { color: var(--accent, #0b7dda); font-weight: 600; margin-left: 4px; }
.recon-summary-totals { white-space: nowrap; }
.recon-summary-breakdown {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
  font-size: 12px;
}
.recon-status-money { display: inline-flex; align-items: baseline; gap: 4px; }
.recon-status-money strong { font-size: 13px; }
.recon-status-money-unmatched         strong { color: #b45309; }
.recon-status-money-claude_suggested  strong { color: #6366f1; }
.recon-status-money-reconciled        strong { color: #15803d; }
.recon-status-money-ignored           strong { color: var(--grey-500, #6b7280); }
.recon-status-money-sep { color: var(--grey-400, #9ca3af); }

.recon-kpi-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.recon-kpi-loading { grid-column: 1/-1; padding: 12px; color: var(--grey-500); }

.recon-kpi {
  background: #fff; border: 1px solid var(--grey-200); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; text-align: left;
  transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.recon-kpi:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.recon-kpi-icon { font-size: 18px; line-height: 1; opacity: 0.85; }
.recon-kpi-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--grey-600); font-weight: 600;
}
.recon-kpi-count {
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--grey-900, #222); margin-top: 4px;
}
.recon-kpi-amount { font-size: 13px; color: var(--grey-700); font-variant-numeric: tabular-nums; }
.recon-kpi-sub { font-size: 11px; color: var(--grey-500); margin-top: 4px; }

/* Per-status accent stripes — subtle so hovering still feels uniform but
   the eye picks the active state out instantly. */
.recon-kpi-unmatched         { border-left: 4px solid #b23a3a; }
.recon-kpi-claude_suggested  { border-left: 4px solid #d49000; }
.recon-kpi-reconciled        { border-left: 4px solid #1e7a3a; }
.recon-kpi-ignored           { border-left: 4px solid #8a8a8a; }

.recon-kpi-active {
  background: var(--grey-50, #f7f7f7);
  border-color: var(--accent, #0b7dda);
  box-shadow: 0 0 0 2px rgba(11,125,218,0.18);
}

.recon-kpi-action {
  margin-top: 10px; align-self: stretch;
  background: #b23a3a; color: #fff; border: 0; border-radius: 6px;
  padding: 7px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s ease-out;
}
.recon-kpi-action:hover { background: #8f2d2d; }
.recon-kpi-action:disabled { opacity: 0.6; cursor: default; }

/* ── Recon: connection-card step flow ───────────────────────────────────── */
.recon-config-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey-700); }
.recon-config-label input[type="date"] {
  padding: 5px 8px; border: 1px solid var(--grey-200); border-radius: 6px;
}

/* Two-card step flow: 1) import  →  2) match. The arrow + cards make the
   sequence visually obvious so admins don't hunt for "what do I click next". */
.recon-steps {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--grey-200);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px; align-items: stretch;
}
.recon-step {
  background: #fafbfc; border: 1px solid var(--grey-100); border-radius: 8px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.recon-step-head {
  font-size: 13px; font-weight: 600; color: var(--grey-700);
  display: flex; align-items: center; gap: 8px;
}
.recon-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent, #0b7dda); color: #fff;
  font-size: 12px; font-weight: 700;
}
.recon-step-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: space-between;
}
.recon-step-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--grey-400); user-select: none;
}
.recon-step .hint { font-size: 12px; color: var(--grey-500); margin: 0; }
.recon-actions-am { display: flex; gap: 8px; flex-wrap: wrap; }

/* Stack the two steps on narrow screens — the arrow flips vertical. */
@media (max-width: 640px) {
  .recon-steps { grid-template-columns: 1fr; }
  .recon-step-arrow { transform: rotate(90deg); }
}

/* Quiet footer for the connection-level destructive actions. They live
   below the step flow so they don't compete visually with the primary
   import → match buttons, but stay one click away when needed. */
.recon-footer-actions {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--grey-100);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
}
.recon-footer-sep { color: var(--grey-300); }
.btn-link-quiet, .btn-link-danger {
  background: none; border: 0; padding: 4px 6px; font-size: 12px;
  cursor: pointer; border-radius: 4px;
}
.btn-link-quiet { color: var(--grey-600); }
.btn-link-quiet:hover { background: var(--grey-100); color: var(--grey-800); }
.btn-link-danger { color: #b23a3a; }
.btn-link-danger:hover { background: #fbecec; }

/* ── Recon wizards (setup + AI explainer) ───────────────────────────────── */
.recon-wizard-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 30, 45, 0.55);
  z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.recon-wizard {
  background: #fff; border-radius: 12px;
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.recon-wizard-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--grey-100);
}
.recon-wizard-title { font-size: 15px; font-weight: 600; color: var(--grey-800); }
.recon-wizard-close {
  background: none; border: 0; font-size: 24px; line-height: 1;
  color: var(--grey-500); cursor: pointer; padding: 0 4px;
}
.recon-wizard-close:hover { color: var(--grey-800); }
.recon-wizard-progress {
  display: flex; gap: 6px;
  padding: 14px 18px 0;
}
.recon-wizard-dot {
  height: 6px; flex: 1; border-radius: 3px;
  background: var(--grey-100);
  transition: background .15s;
}
.recon-wizard-dot.is-active { background: var(--accent, #0b7dda); }
.recon-wizard-dot.is-done { background: #9bcdec; }
.recon-wizard-body {
  padding: 16px 22px 20px; overflow-y: auto;
  color: var(--grey-700); font-size: 14px; line-height: 1.5;
}
.recon-wizard-h {
  margin: 0 0 10px; font-size: 16px; color: var(--grey-900);
}
.recon-wizard-body p { margin: 0 0 10px; }
.recon-wizard-list, .recon-wizard-ol {
  margin: 8px 0 10px; padding-left: 20px;
}
.recon-wizard-list li, .recon-wizard-ol li { margin-bottom: 6px; }
.recon-wizard-note {
  font-size: 12px; color: var(--grey-500);
  background: #f7f9fa; border-radius: 6px;
  padding: 8px 10px; margin-top: 12px;
}
.recon-wizard-body code {
  background: #f1f3f5; padding: 1px 5px;
  border-radius: 3px; font-size: 12px;
}
.recon-wizard-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--grey-100);
  background: #fafbfc;
}
.recon-wizard-step-label {
  flex: 1; text-align: center;
  font-size: 12px; color: var(--grey-500);
}
.recon-wizard-back { min-width: 90px; }
.recon-wizard-next { min-width: 130px; }

@media (max-width: 480px) {
  .recon-wizard { border-radius: 8px; }
  .recon-wizard-step-label { display: none; }
}

/* ── Reset Payments modal ────────────────────────────────────────────────── */
.recon-reset-modal { width: min(620px, 100%); }
.recon-reset-body { gap: 14px; display: flex; flex-direction: column; }
.recon-reset-intro { margin: 0; color: var(--grey-600); font-size: 13px; }

.recon-reset-scope {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.recon-reset-scope-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--grey-200); border-radius: 8px;
  background: #fff; cursor: pointer;
  font-size: 13px; transition: background .12s, border-color .12s;
}
.recon-reset-scope-opt:hover { background: #f7f9fa; }
.recon-reset-scope-opt.is-selected {
  border-color: var(--accent, #0b7dda);
  background: #eaf3fa;
}
.recon-reset-scope-opt input[type="radio"] { margin: 0; }
.recon-reset-scope-all.is-selected {
  border-color: #b23a3a; background: #fbecec;
}

.recon-reset-blurb { margin: -6px 0 4px; font-size: 12px; color: var(--grey-500); }

.recon-reset-range {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 8px 0;
}
.recon-reset-range label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--grey-700);
}
.recon-reset-range input[type="date"] {
  padding: 5px 8px; border: 1px solid var(--grey-200); border-radius: 6px;
}

.recon-reset-cal { margin: 4px 0; }

.recon-reset-summary {
  background: #fafbfc; border: 1px solid var(--grey-100);
  border-radius: 8px; padding: 10px 14px;
}
.recon-reset-summary-line {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 14px;
}
.recon-reset-summary-label { color: var(--grey-600); }
.recon-reset-summary-value { font-weight: 600; color: var(--grey-900); }
.recon-reset-summary-range {
  margin-top: 4px; font-size: 12px; color: var(--grey-500);
}

.recon-reset-confirm label {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--grey-700);
}
.recon-reset-confirm input[type="text"] {
  flex: 1; padding: 7px 10px;
  border: 1px solid var(--grey-200); border-radius: 6px;
  font-family: inherit; font-size: 13px;
}

.recon-reset-foot { justify-content: flex-end; gap: 10px; }
.recon-reset-foot .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* Generic danger-button + danger-section. Used by the admin delete-dog
   and delete-owner flows. The section gets a subtle red wash so the
   permanent-action area visibly separates from regular fields. */
.btn-danger {
  background: #b23a3a; color: #fff; border: 0; border-radius: 8px;
  padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s ease-out;
}
.btn-danger:hover { background: #8f2d2d; }
.btn-danger:disabled { opacity: 0.6; cursor: default; }
.detail-danger-section, .setup-danger-section {
  border: 1px solid #f0d4d4; background: #fdf6f6; border-radius: 8px;
}

/* ── Dog editor: real-schedule + owner controls ──────────────────────── */
.dog-edit-sched { display: flex; flex-direction: column; gap: 6px; }
.dog-edit-sched-summary { font-size: 14px; color: var(--grey-800, #333); }
.dog-edit-sched-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.dog-edit-sched-row {
  display: grid;
  grid-template-columns: 56px 110px 1fr;
  align-items: center; gap: 10px;
  padding: 6px 10px; border: 1px solid var(--grey-200);
  border-radius: 6px; background: #fff; font-size: 13px;
}
.dog-edit-sched-day { font-weight: 600; color: var(--grey-700, #555); }
.dog-edit-sched-pack { color: var(--grey-700, #555); }

.dog-edit-owner-list { display: flex; flex-direction: column; gap: 6px; }
.dog-edit-owner-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 10px; border: 1px solid var(--grey-200);
  border-radius: 8px; background: #fff;
}
.dog-edit-owner-main {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.dog-edit-owner-name {
  background: none; border: 0; padding: 0; font: inherit;
  font-weight: 600; color: var(--accent, #0b7dda); cursor: pointer;
  text-align: left;
}
.dog-edit-owner-name:hover { text-decoration: underline; }
.dog-edit-owner-meta { color: var(--grey-600, #666); font-size: 12px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dog-edit-owner-actions {
  display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;
}

/* ── Outstanding charges overdue chips ──────────────────────────────────── */
.recon-overdue-ok   { color: #d49000; font-weight: 600; }
.recon-overdue-warn { color: #b35900; font-weight: 700; }
.recon-overdue-bad  { color: #b23a3a; font-weight: 700; }

/* ── Recon: next-step banner ────────────────────────────────────────────── */
.recon-nextstep {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, #eef6ff 0%, #f7faff 100%);
  border-left: 4px solid var(--accent, #0b7dda);
}
.recon-nextstep-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.recon-nextstep-body { flex: 1; min-width: 0; }
.recon-nextstep-title { font-weight: 700; font-size: 15px; color: var(--grey-900, #222); }
.recon-nextstep-sub   { font-size: 13px; color: var(--grey-700); margin-top: 2px; }
.recon-nextstep-action { flex-shrink: 0; }

/* ── Recon: outstanding by-owner / by-charge view toggle ────────────────── */
.recon-view-toggle {
  display: inline-flex; border: 1px solid var(--grey-200); border-radius: 6px;
  overflow: hidden; margin-left: auto;
}
.recon-view-tab {
  background: #fff; border: none; padding: 6px 12px; font-size: 12px;
  cursor: pointer; color: var(--grey-700); font-weight: 600;
}
.recon-view-tab + .recon-view-tab { border-left: 1px solid var(--grey-200); }
.recon-view-tab.active {
  background: var(--accent, #0b7dda); color: #fff;
}

/* ── Billing: view tabs + status badges ─────────────────────────────────── */
.billing-view-tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.billing-view-tabs {
  display: inline-flex; border: 1px solid var(--grey-200); border-radius: 6px;
  overflow: hidden;
}
.billing-view-tab {
  background: #fff; border: none; padding: 8px 16px; font-size: 13px;
  cursor: pointer; color: var(--grey-700); font-weight: 600;
}
.billing-view-tab + .billing-view-tab { border-left: 1px solid var(--grey-200); }
.billing-view-tab.active {
  background: var(--accent, #0b7dda); color: #fff;
}
.billing-status-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.billing-status-paid        { background: #d4edda; color: #155724; }
.billing-status-partial     { background: #fff3cd; color: #856404; }
.billing-status-outstanding { background: #f8d7da; color: #721c24; }
.billing-status-skipped     { background: #e2e3e5; color: #495057; }
/* Inline tag for the 50% spot-hold rate so a glance at the table tells
 * the admin which rows are full-rate vs reduced. */
.billing-spot-hold {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
  background: #fff3cd; color: #856404; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
}
/* Week range label next to the "This week's work" heading. */
.billing-week-label {
  font-size: 13px; font-weight: 500; color: var(--grey-600); margin-left: 8px;
}

/* Mini month calendar at the top of the Week attendance view — collapsed
 * by default. Toggle bar always shows the current week label. When open,
 * the row containing the selected Monday is highlighted as a band; click
 * any day to jump to that week. */
.week-mini-cal { margin: 0 0 12px; }
.week-mini-cal-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: #f4f7fb; border: 1px solid var(--grey-200, #e1e5ec);
  border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--grey-800, #1c1c1c);
  transition: background 0.12s ease;
}
.week-mini-cal-toggle:hover { background: #e9eef6; }
.week-mini-cal-toggle:focus-visible {
  outline: 2px solid var(--accent, #0b7dda); outline-offset: 2px;
}
.week-mini-cal-icon { font-size: 14px; }
.week-mini-cal-label { flex: 1; font-weight: 600; text-align: left; }
.week-mini-cal-caret { color: var(--grey-500, #8a8f99); font-size: 12px; }
.week-mini-cal-body {
  margin-top: 6px; padding: 10px 12px 12px;
  background: #fff; border: 1px solid var(--grey-200, #e1e5ec);
  border-radius: 8px;
}
.week-mini-cal-month {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 8px;
}
.week-mini-cal-month-label {
  font-size: 13px; font-weight: 700; color: var(--grey-800, #1c1c1c);
}
.week-mini-cal-nav {
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  width: 28px; height: 28px; cursor: pointer; font-size: 16px;
  color: var(--grey-700, #4a4a4a); line-height: 1;
}
.week-mini-cal-nav:hover { background: var(--grey-100, #f4f7fb); border-color: var(--grey-200, #e1e5ec); }
.week-mini-cal-dows {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin: 0 0 4px;
}
.week-mini-cal-dow {
  text-align: center; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--grey-500, #8a8f99); padding: 4px 0;
}
.week-mini-cal-grid { display: flex; flex-direction: column; gap: 2px; }
.week-mini-cal-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; padding: 1px; border-radius: 6px;
  border: 1px solid transparent;
}
.week-mini-cal-week.is-selected {
  background: #e8f1fb; border-color: #b6d6f1;
}
.week-mini-cal-day {
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 6px 0;
  font-size: 12px; font-family: inherit; color: var(--grey-800, #1c1c1c);
  cursor: pointer; font-variant-numeric: tabular-nums; text-align: center;
}
.week-mini-cal-day:hover {
  background: var(--grey-100, #f4f7fb); border-color: var(--grey-200, #e1e5ec);
}
.week-mini-cal-day.is-out { color: var(--grey-400, #b0b6c0); }
.week-mini-cal-day.is-today {
  font-weight: 700; color: var(--accent, #0b7dda);
}

/* Weekly homestay summary lives at the bottom of the attendance list,
 * separated from the per-day cards so it reads as a week-level rollup
 * rather than another day card. */
.attend-week-homestay-section {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed var(--grey-200, #e1e5ec);
}

/* Anomalies summary card is interactive when there are issues to review —
 * caret + hover state cue that the card opens the per-issue panel below. */
.billing-summary-stat-clickable {
  cursor: pointer; transition: background 0.12s ease;
}
.billing-summary-stat-clickable:hover { background: #fff7ec; }
.billing-summary-stat-clickable:focus-visible {
  outline: 2px solid var(--accent, #0b7dda); outline-offset: 2px;
}
.billing-summary-caret {
  font-size: 11px; color: var(--grey-500); margin-left: 2px;
}

/* Collapsible panel listing every flagged anomaly for the week, grouped
 * by day → run. Lives between the summary stats and the toolbar so the
 * Anomalies count card sits directly above the per-issue list it opens. */
.billing-anomalies-panel {
  margin: 8px 0 12px;
  border: 1px solid #f3c789; border-radius: 8px;
  background: #fffaf0;
  overflow: hidden;
}
.billing-anomalies-panel[hidden] { display: none; }
.billing-anomalies-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: #fff3da;
  border-bottom: 1px solid #f3c789;
}
.billing-anomalies-panel-title {
  font-size: 13px; font-weight: 700; color: #6b4f00;
  letter-spacing: 0.2px;
}
.billing-anomalies-close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 14px; color: var(--grey-600); padding: 4px 8px; line-height: 1;
}
.billing-anomalies-close:hover { color: var(--grey-800, #1c1c1c); }
.billing-anomalies-panel-body { padding: 4px 0; }
.billing-anomalies-empty {
  margin: 12px 14px; font-size: 13px; color: var(--grey-600);
}
.billing-anomaly-group { padding: 6px 0; }
.billing-anomaly-group + .billing-anomaly-group {
  border-top: 1px dashed #f3c789;
}
.billing-anomaly-group-head {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 14px 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--grey-700, #4a4a4a); font-weight: 700;
}
.billing-anomaly-group-run { color: var(--grey-600); font-weight: 600; }
.billing-anomaly-row {
  display: flex; gap: 12px; align-items: center;
  padding: 8px 14px;
  border-top: 1px solid rgba(243, 199, 137, 0.4);
}
.billing-anomaly-row-run { background: rgba(255, 235, 192, 0.55); }
.billing-anomaly-row-body { flex: 1; min-width: 0; }
.billing-anomaly-row-title {
  font-size: 13px; font-weight: 600; color: #6b4f00;
}
.billing-anomaly-row-who {
  font-size: 12px; color: var(--grey-700, #4a4a4a); margin-top: 2px;
}
.billing-anomaly-row-explain {
  font-size: 12px; color: var(--grey-700, #4a4a4a);
  margin-top: 4px; line-height: 1.4;
}
.billing-anomaly-row-actions {
  display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}
.billing-anomaly-noaction { font-size: 11px; font-style: italic; }
@media (max-width: 600px) {
  .billing-anomaly-row { flex-direction: column; align-items: flex-start; }
  .billing-anomaly-row-actions { width: 100%; }
}

/* Owner ledger modal — three-up summary at the top, then collapsible
 * Bills + Payments sections. Built so admin (and the owner-portal
 * /account view) can audit charges, payments, and the per-charge
 * allocation in one place. */
.ledger-summary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 0 0 16px;
}
.ledger-summary-card {
  background: var(--grey-50, #f7f9fc);
  border: 1px solid var(--grey-200, #e1e5ec); border-radius: 8px;
  padding: 10px 12px;
}
.ledger-summary-card.ledger-bal-due    { background: #fde2e2; border-color: #f3a3a3; }
.ledger-summary-card.ledger-bal-credit { background: #d6efe2; border-color: #95cfb0; }
.ledger-summary-card.ledger-bal-clear  { background: #e8f1fb; border-color: #b6d6f1; }
.ledger-summary-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--grey-600, #5a6273);
}
.ledger-summary-value {
  font-size: 22px; font-weight: 700; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.ledger-summary-sub {
  font-size: 11px; color: var(--grey-600, #5a6273); margin-top: 2px;
}

/* Owner-ledger header dog chips + inline dog tags on HOMESTAY rows so
   the modal makes clear which dog each homestay covers. */
.ledger-header-inner { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ledger-dogs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 2px;
}
.ledger-dog-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--grey-100, #f3f4f6);
  border: 1px solid var(--grey-200, #e1e5ec);
  border-radius: 999px;
  padding: 2px 10px 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-800, #1c1c1c);
  white-space: nowrap;
}
.ledger-dog-icon { font-size: 13px; line-height: 1; }
.ledger-dog-inline {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  white-space: nowrap;
}

.ledger-section { margin: 12px 0; }
.ledger-section-summary {
  font-size: 13px; font-weight: 700; padding: 6px 0; cursor: pointer;
  color: var(--grey-800, #1c1c1c);
  border-bottom: 1px solid var(--grey-200, #e1e5ec);
  margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ledger-section-summary > span { flex: 1 1 auto; }
.ledger-reallocate {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px;
  white-space: nowrap;
}
.ledger-pending-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.ledger-pending-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  white-space: nowrap;
  width: auto;       /* override .btn-primary's 100% width default */
  margin-top: 0;
}
.ledger-pending-block {
  margin: 0 0 16px; padding: 10px 12px;
  background: #fff7e0; border: 1px solid #f0c14b; border-radius: 8px;
}
.ledger-pending-summary {
  font-size: 13px; font-weight: 700; color: #6b4f00; cursor: pointer;
}

.ledger-pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; white-space: nowrap;
}
.ledger-pill-paid    { background: #d4edda; color: #155724; }
.ledger-pill-partial { background: #ffe6c2; color: #7a3f00; }
.ledger-pill-open    { background: #fde2e2; color: #8a2228; }
.ledger-pill-claude  { background: #e7e4ff; color: #2e2475; }
.ledger-pill-manual  { background: #e2e3e5; color: #495057; }

.ledger-alloc-line {
  display: flex; gap: 10px; align-items: center;
  font-size: 12px; padding: 2px 0;
}
.ledger-alloc-line + .ledger-alloc-line {
  border-top: 1px dashed var(--grey-200, #e1e5ec);
}

/* Caret + expand affordance on the owner cell of the week-preview table.
 * Per-dog attendance lives below the owner row when expanded. */
.billing-week-caret {
  display: inline-block; width: 12px; color: var(--grey-500); font-size: 12px;
}
.billing-week-owner-row.is-open { background: var(--grey-50, #fafafa); }
.billing-week-dog-row > td.billing-week-dog-cell {
  background: var(--grey-50, #fafafa);
  padding: 0 16px 10px 32px;
  border-top: none;
}
.billing-week-dog-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; color: var(--grey-700);
}
.billing-week-dog-table th,
.billing-week-dog-table td {
  padding: 4px 8px; border-bottom: 1px dashed var(--grey-200);
  text-align: left;
}
.billing-week-dog-table th {
  font-weight: 600; color: var(--grey-600);
  text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px;
}
.billing-week-dog-dates { color: var(--grey-600); font-size: 11px; }

/* Banner on the All-charges view that surfaces past weeks of completed
 * runs that haven't been turned into pack-school charges yet. Yellow-
 * tinted because it's an info / nudge, not an error. */
.billing-unbilled-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; margin-bottom: 12px;
  background: #fff7e0; border: 1px solid #f3c789; border-radius: 8px;
}
.billing-unbilled-banner-body { flex: 1; }
.billing-unbilled-banner-title {
  font-size: 14px; font-weight: 700; color: #6b4f00;
}
.billing-unbilled-banner-sub {
  margin-top: 4px; font-size: 12px; color: var(--grey-700); line-height: 1.4;
}
/* Coloured summary labels reuse the same palette so the eye links the
 * card up top with the status badge in the table. */
.billing-summary-label.billing-status-paid        { color: #1e7a3a; }
.billing-summary-label.billing-status-outstanding { color: #b23a3a; }
.billing-overdue-ok   { color: var(--grey-600); font-size: 11px; margin-left: 6px; }
.billing-overdue-warn { color: #b8860b; font-size: 11px; margin-left: 6px; font-weight: 600; }
.billing-overdue-bad  { color: #b23a3a; font-size: 11px; margin-left: 6px; font-weight: 700; }

/* ── Recon: outstanding grouped-by-owner list ───────────────────────────── */
.recon-owner-list { display: flex; flex-direction: column; gap: 6px; }
.recon-owner-group {
  border: 1px solid var(--grey-200); border-radius: 8px;
  background: #fff; overflow: hidden;
}
.recon-owner-group.is-open { border-color: var(--accent, #0b7dda); box-shadow: 0 1px 4px rgba(11,125,218,0.08); }
.recon-owner-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  gap: 12px;
}
.recon-owner-head:hover { background: var(--grey-50, #f7f7f7); }
.recon-owner-name { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.recon-owner-meta { display: flex; gap: 12px; align-items: center; flex-shrink: 0; font-size: 13px; }
.recon-owner-count { color: var(--grey-600); }
.recon-owner-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.recon-owner-chevron { color: var(--grey-500); font-size: 12px; }
.recon-owner-body { padding: 0 16px 12px; border-top: 1px dashed var(--grey-200); }
.recon-owner-charge {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--grey-100);
}
.recon-owner-charge:last-child { border-bottom: none; }

/* ── Recon: confidence chip + bulk-apply control ────────────────────────── */
.recon-conf {
  display: inline-block; margin-left: 6px;
  padding: 2px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.recon-conf-high { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.recon-conf-mid  { background: #fff3cd; color: #856404; border: 1px solid #ffeaa0; }
.recon-conf-low  { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.recon-bulk-sep {
  display: inline-block; width: 1px; height: 20px; background: var(--grey-200);
  margin: 0 6px;
}
.recon-bulk-label {
  font-size: 13px; color: var(--grey-700);
  display: inline-flex; align-items: center; gap: 4px;
}
.recon-bulk-label input[type="number"] {
  width: 60px; padding: 4px 6px;
  border: 1px solid var(--grey-200); border-radius: 6px;
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ── Recon: filters as separate row, segmented quick-range, grouped bulk ──
 * Layout fix: filters were squeezed into the H3's row and wrapping
 * vertically. Now they sit on their own line and group related controls
 * into single visual units. */
.admin-section .recon-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center;
  margin-top: 8px;
}

/* Segmented control for the quick-range buttons. Looks like one toggle
 * group instead of four loose buttons. */
.recon-segmented {
  display: inline-flex; border: 1px solid var(--grey-200); border-radius: 8px;
  overflow: hidden; background: #fff;
}
.recon-segmented-btn {
  background: none; border: none; padding: 7px 12px; font-size: 13px;
  cursor: pointer; color: var(--grey-700); font-weight: 600;
  white-space: nowrap;
}
.recon-segmented-btn + .recon-segmented-btn { border-left: 1px solid var(--grey-200); }
.recon-segmented-btn:hover { background: var(--grey-50, #f7f7f7); }
.recon-segmented-btn.active {
  background: var(--accent, #0b7dda); color: #fff;
}

/* Date range as a single bordered pill. */
.recon-daterange {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--grey-200); border-radius: 8px;
  padding: 4px 10px; background: #fff;
}
.recon-daterange input[type="date"] {
  border: none; background: none; padding: 4px 0;
  font-size: 13px; outline: none;
}
.recon-daterange .recon-range-sep { color: var(--grey-500); }

/* Bulk apply group — one pill containing the prefix, number input,
 * suffix, and Apply button. Reads as a single sentence + action. */
.recon-bulk-group {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--grey-200); border-radius: 8px;
  background: #fff; overflow: hidden;
  margin-left: auto; /* push to the right edge */
}
.recon-bulk-group > * {
  display: inline-flex; align-items: center;
}
.recon-bulk-prefix, .recon-bulk-suffix {
  padding: 0 8px; font-size: 13px; color: var(--grey-700);
}
.recon-bulk-prefix { padding-left: 12px; }
.recon-bulk-group input[type="number"] {
  width: 50px; border: none; padding: 6px 4px;
  font-size: 13px; font-variant-numeric: tabular-nums;
  text-align: right; outline: none; background: none;
}
.recon-bulk-btn {
  border: none; border-left: 1px solid var(--grey-200);
  background: var(--accent, #0b7dda); color: #fff;
  padding: 0 16px; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.recon-bulk-btn:hover { filter: brightness(1.05); }
.recon-bulk-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Threshold cutoff divider injected into the suggestions table at the
 * row where confidence drops below the auto-approve %. Reads as a
 * "draw-the-line" separator so the admin sees at a glance which
 * suggestions Bulk Apply will sweep up. */
.recon-table tr.recon-threshold-divider > td {
  padding: 6px 8px;
  background: linear-gradient(90deg, #fff7c2 0%, #fff3a0 50%, #fff7c2 100%);
  border-top: 2px dashed #c9a227;
  border-bottom: 2px dashed #c9a227;
  text-align: center;
}
.recon-threshold-divider-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: #6b4f00; text-transform: uppercase;
}

/* Inline owner picker that drops in beneath a payment row when the
 * admin clicks "Set owner". Lives inside the table so the work stays
 * in context. */
.recon-table tr.recon-setowner-row > td {
  background: #f6fafe;
  border-top: 1px solid var(--accent, #0b7dda);
  padding: 12px 16px;
}
.recon-setowner-panel {
  display: flex; flex-direction: column; gap: 8px; max-width: 560px;
}
.recon-setowner-input {
  width: 100%; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--grey-300); border-radius: 6px;
  outline: none; background: #fff;
}
.recon-setowner-input:focus {
  border-color: var(--accent, #0b7dda);
  box-shadow: 0 0 0 2px rgba(11, 125, 218, 0.18);
}
.recon-setowner-results {
  display: flex; flex-direction: column;
  border: 1px solid var(--grey-200); border-radius: 6px;
  background: #fff; max-height: 280px; overflow-y: auto;
}
.recon-setowner-hint {
  padding: 10px 12px; font-size: 12px; color: var(--grey-600);
}
.recon-setowner-result {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; padding: 8px 12px;
  border: none; border-bottom: 1px solid var(--grey-100);
  background: #fff; cursor: pointer; font: inherit;
}
.recon-setowner-result:last-child { border-bottom: none; }
.recon-setowner-result:hover { background: #eef6ff; }
.recon-setowner-result:disabled { opacity: 0.5; cursor: not-allowed; }
.recon-setowner-result-name {
  font-size: 13px; font-weight: 600; color: var(--grey-900);
}
.recon-setowner-result-meta {
  font-size: 11px; color: var(--grey-600); margin-top: 2px;
}
.recon-setowner-result-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px;
}
.recon-setowner-result-balance {
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--grey-600);
}
.recon-setowner-result-balance.owes { color: #b8860b; }
.recon-setowner-result-balance.credit { color: #1e7a3a; }
.recon-setowner-result-dogs {
  font-size: 11px; color: var(--grey-700);
}
.recon-set-owner.is-open { font-weight: 700; }

/* Drawer alternative-candidate cards — quick-pick owners ranked by
 * the local scorer when Claude's top match is wrong. */
.recon-alts {
  display: flex; flex-direction: column; gap: 6px;
}
.recon-alt {
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left; padding: 10px 12px;
  border: 1px solid var(--grey-200); border-radius: 6px;
  background: #fff; cursor: pointer; font: inherit;
  transition: border-color 0.12s, background 0.12s;
}
.recon-alt:hover { background: #eef6ff; border-color: var(--accent, #0b7dda); }
.recon-alt:disabled { opacity: 0.5; cursor: not-allowed; }
.recon-alt-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.recon-alt-name { font-size: 13px; font-weight: 600; color: var(--grey-900); }
.recon-alt-balance {
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--grey-600);
}
.recon-alt-balance.owes { color: #b8860b; }
.recon-alt-balance.credit { color: #1e7a3a; }
.recon-alt-meta { font-size: 11px; color: var(--grey-700); margin-top: 4px; }
.recon-alt-cta {
  font-size: 11px; color: var(--accent, #0b7dda); margin-top: 6px;
  font-weight: 600;
}

/* Live progress takes over the bulk pill while a run is in flight. */
.recon-bulk-progress {
  min-width: 360px; padding: 8px 12px;
  border: 1px solid var(--grey-200); border-radius: 8px;
  background: #fff; margin-left: auto;
}
.recon-bulk-progress-row {
  display: flex; align-items: center; gap: 10px;
}
.recon-bulk-progress-stat {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--grey-700); min-width: 52px;
}
.recon-bulk-progress-bar {
  flex: 1; height: 8px; border-radius: 4px;
  background: var(--grey-100); overflow: hidden;
}
.recon-bulk-progress-fill {
  height: 100%; background: linear-gradient(90deg, #1e7a3a 0%, #2ea857 100%);
  transition: width 0.4s ease-out;
}
.recon-bulk-progress-pct {
  font-size: 12px; font-weight: 600; color: var(--accent, #0b7dda);
  min-width: 40px; text-align: right; font-variant-numeric: tabular-nums;
}
.recon-bulk-progress-msg {
  margin-top: 4px; font-size: 12px; color: var(--grey-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Recon: smooth "pending" animation ──────────────────────────────────── */
/* When the backend hasn't reported real progress yet (e.g. mid-Claude
 * call before the batch returns), the fill animates 5% → 90% over ~25s
 * with an ease-out curve so it feels alive instead of frozen. As soon
 * as the backend ticks an actual percent the JS removes is-pending and
 * sets the inline width directly, so real progress overrides the
 * animation seamlessly. */
@keyframes recon-progress-pending {
  0%   { width: 5%; }
  20%  { width: 32%; }
  45%  { width: 58%; }
  70%  { width: 75%; }
  100% { width: 90%; }
}
.recon-progress-fill.is-pending,
.recon-bulk-progress-fill.is-pending {
  animation: recon-progress-pending 25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Subtle moving stripe so the bar feels active even after the keyframe
 * holds at 90%. Pure CSS — costs nothing. */
@keyframes recon-progress-stripe {
  0%   { background-position:   0   0; }
  100% { background-position: 32px 0; }
}
.recon-progress-fill.is-pending,
.recon-bulk-progress-fill.is-pending {
  background-image: linear-gradient(
    90deg, #1e7a3a 0%, #2ea857 100%),
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.08) 0 6px,
      transparent 6px 12px
    );
  background-size: 100% 100%, 32px 32px;
  background-blend-mode: overlay;
  animation:
    recon-progress-pending 25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
    recon-progress-stripe 0.8s linear infinite;
}

/* ── Recon: inline row action buttons ──────────────────────────────────── */
.recon-row-actions {
  white-space: nowrap;
  display: flex; gap: 6px; justify-content: flex-end; align-items: center;
}
.btn-row-accept, .btn-row-ignore {
  border: 1px solid var(--grey-200); border-radius: 6px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: #fff;
}
.btn-row-accept {
  border-color: #1e7a3a; color: #1e7a3a;
}
.btn-row-accept:hover { background: #e8f5ec; }
.btn-row-ignore {
  border-color: var(--grey-200); color: var(--grey-600);
}
.btn-row-ignore:hover { background: var(--grey-50, #f7f7f7); }
.btn-row-accept:disabled, .btn-row-ignore:disabled { opacity: 0.6; cursor: wait; }

/* ── Vans settings page ─────────────────────────────────────────────────── */
.vans-create-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0;
  margin-top: 8px;
}
.vans-create-form input[type="text"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  font-size: 14px;
}
.vans-create-form button { flex: 0 0 auto; }
.vans-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.vans-row:last-child { border-bottom: none; }
.vans-row-main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.vans-row-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.vans-row-name {
  font-weight: 600;
  font-size: 15px;
  color: #222;
}
.vans-row-num {
  font-size: 12px;
  color: #888;
  background: #f3f3f3;
  padding: 2px 8px;
  border-radius: 999px;
}
.vans-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.vans-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
  display: inline-block;
}
.pack-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
  display: inline-block;
}

/* ── App update card ────────────────────────────────────────────────────── */
.update-card {
  border-left: 5px solid #cccccc;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.update-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.update-card-head .profile-section-title {
  margin: 0;
}
.update-card-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #ececec;
  color: #555;
  white-space: nowrap;
}
.update-card-version-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 8px;
}
.update-card-version-label {
  font-size: 12px;
  color: #777;
  font-weight: 500;
}
.update-card-version {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  font-feature-settings: 'tnum';
}
.update-card-latest {
  font-size: 12px;
  color: #777;
  margin-bottom: 10px;
  min-height: 16px;
}
.update-card-actions {
  display: flex;
  justify-content: flex-end;
}

/* State colours — border, background tint, and pill match. */
.update-card.is-checking { border-left-color: #b3b3b3; background: #fafafa; }
.update-card.is-checking .update-card-pill { background: #ececec; color: #555; }

.update-card.is-uptodate { border-left-color: #2ea857; background: #f1faf3; }
.update-card.is-uptodate .update-card-pill { background: #d6f0dd; color: #1e7a3a; }

.update-card.is-outdated { border-left-color: #e0a423; background: #fff8e8; }
.update-card.is-outdated .update-card-pill { background: #fce4a6; color: #7a5a00; }

.update-card.is-updating { border-left-color: #2f7fd6; background: #eef5fc; }
.update-card.is-updating .update-card-pill { background: #d6e6f7; color: #1d5aa3; }

.update-card.is-error { border-left-color: #c0392b; background: #fdecea; }
.update-card.is-error .update-card-pill { background: #f6cdc7; color: #8a2218; }

/* ── Week-attendance admin view ─────────────────────────────────────────
 * Lists every RunEntry across the week as a two-level collapsible:
 *   day card  →  van card  →  entry table
 * Days open by default with rolled-up totals; vans closed by default with
 * a one-line summary; vans flagged as anomalies open themselves so the
 * admin can't miss them. Tone variants (4) cycle through van numbers so
 * vans are visually distinguishable at a glance. */
.billing-attend-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 6px 0 12px; padding: 8px 10px;
  background: var(--grey-50, #f7f8fa); border: 1px solid var(--grey-200, #e3e5e8);
  border-radius: 6px;
}
.billing-attend-toolbar input[type="search"] { min-width: 220px; padding: 6px 10px; }
.billing-attend-bulk {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  padding: 4px 8px; background: #fff3cd; border: 1px solid #f0d77a;
  border-radius: 6px; font-size: 13px;
}
.billing-attend-bulk button { padding: 3px 10px; font-size: 12px; }

/* Day card — wraps every van that ran on a given date. */
.attend-day {
  margin-bottom: 14px;
  border: 1px solid var(--grey-200, #e3e5e8);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.attend-day.has-anomaly { border-color: #f0c14b; }
.attend-day-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #fafbfc 0%, #f3f5f7 100%);
  border-bottom: 1px solid var(--grey-200, #e3e5e8);
  cursor: pointer; user-select: none;
  transition: background-color 120ms ease;
}
.attend-day-head:hover { background: #eef1f5; }
.attend-day-head:focus-visible { outline: 2px solid var(--accent, #0b7dda); outline-offset: -2px; }
.attend-day-title {
  font-size: 15px; font-weight: 700; color: var(--grey-800, #1f262d);
  letter-spacing: 0.2px;
}
.attend-day-summary {
  display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; align-items: center;
}
.attend-day-body { padding: 10px 14px; }
.attend-day:not(.is-open) .attend-day-body { display: none; }
.attend-day:not(.is-open) .attend-day-head { border-bottom: none; }

/* Caret rotates implicitly via the ▾/▸ glyph swap, but we add a subtle
 * color cue so the click target is visually obvious. */
.attend-caret {
  display: inline-block; width: 14px; text-align: center;
  color: var(--grey-500, #8a939c); font-size: 11px;
}
.attend-day.is-open .attend-caret,
.attend-van.is-open .attend-caret { color: var(--accent, #0b7dda); }
.attend-homestay-card.is-open .attend-caret { color: #6c3fb5; }

/* Pills used in both day-summary rollups and van-card headers. Color
 * coding lets the eye lock onto picked-up totals across the week without
 * reading any text. */
.attend-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: #eef1f5; color: var(--grey-700, #2c3338);
  border: 1px solid transparent;
  white-space: nowrap;
}
.attend-chip-vans     { background: #e7eef7; color: #1d4f8a; }
.attend-chip-picked   { background: #dff5e1; color: #176c2c; }
.attend-chip-dropped  { background: #e3edff; color: #1d3f7a; }
.attend-chip-absent   { background: #fde2e2; color: #8a2228; }
.attend-chip-pending  { background: #fff3cd; color: #7a5800; }
.attend-chip-span     { background: #eef1f5; color: var(--grey-700, #2c3338); }
.attend-chip-warn     { background: #fff3cd; color: #6b4f00; border-color: #f0c14b; }
.attend-chip-homestay { background: #e8e0f5; color: #4d2c8a; }
.attend-chip-price    { background: #d6efe2; color: #114d2c; }

.attend-day-chip { font-weight: 700; padding: 2px 10px; }

/* Day-header ⚠ chip is a button when there are anomalies — clicking
 * runs the bulk-dismiss flow. Reset native button chrome and add a
 * subtle hover so it reads as "press me". */
button.attend-day-chip-dismiss {
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  appearance: none;
  -webkit-appearance: none;
}
button.attend-day-chip-dismiss:hover { filter: brightness(0.96); }
button.attend-day-chip-dismiss:focus-visible {
  outline: 2px solid #b8860b;
  outline-offset: 1px;
}

/* Van card — the unit of drill-down. Tone variants give each van a
 * distinct accent stripe down the left edge so two vans on the same day
 * are instantly distinguishable. */
.attend-van {
  margin: 8px 0;
  border: 1px solid var(--grey-200, #e3e5e8);
  border-left: 4px solid var(--grey-300, #cfd4d9);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 120ms ease;
}
.attend-van:hover { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); }
.attend-van-tone-0 { border-left-color: #2f7fd6; }  /* van 1 — blue */
.attend-van-tone-1 { border-left-color: #8e44ad; }  /* van 2 — purple */
.attend-van-tone-2 { border-left-color: #16a085; }  /* van 3 — teal */
.attend-van-tone-3 { border-left-color: #d35400; }  /* van 4 — orange */
.attend-van-anomaly {
  border-color: #f0c14b;
  border-left-color: #d29400 !important;
  box-shadow: 0 0 0 1px #fdebcb inset;
}

.attend-van-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; cursor: pointer; user-select: none;
  background: #fff;
  transition: background-color 120ms ease;
}
.attend-van-head:hover { background: #f7f9fb; }
.attend-van-head:focus-visible { outline: 2px solid var(--accent, #0b7dda); outline-offset: -2px; }
.attend-van.is-open .attend-van-head { border-bottom: 1px solid var(--grey-200, #e3e5e8); }

.attend-van-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--grey-800, #1f262d);
  letter-spacing: 0.2px;
}
.attend-van-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--grey-600, #6a737c);
}
.attend-van-meta-text { color: var(--grey-600, #6a737c); }
.attend-van-stats {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto;
}

/* Status / phase mini-pills in the van header. Smaller and squarer than
 * the rounded count chips so the eye reads them as labels, not numbers. */
.attend-status-pill {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  background: #eef1f5; color: var(--grey-700, #2c3338);
}
.attend-run-status-complete    { background: #d4edda; color: #155724; }
.attend-run-status-in_progress { background: #cfe2ff; color: #052c65; }
.attend-run-status-planned     { background: #e2e3e5; color: #495057; }

.attend-van-body { padding: 0 12px 12px; }
.attend-van-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 0; border-bottom: 1px solid var(--grey-100, #eef0f2);
}
.attend-van-actions button { padding: 4px 12px; font-size: 12px; }

.attend-run-warning {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 10px 12px; margin: 10px 0;
  background: #fff3cd; color: #6b4f00;
  border: 1px solid #f0d77a; border-radius: 6px;
  font-size: 13px;
}
.attend-run-warning button { margin-left: auto; }

/* Homestay card — visually distinct from van cards (purple accent +
 * house glyph) so the admin reads them as a different revenue stream
 * even though they share the day card. */
.attend-homestay-card {
  margin: 8px 0;
  border: 1px solid #d6c8ed;
  border-left: 4px solid #6c3fb5;
  border-radius: 6px;
  background: linear-gradient(180deg, #faf7ff 0%, #f3edfb 100%);
  overflow: hidden;
}
.attend-homestay-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  cursor: pointer; user-select: none;
  transition: background-color 120ms ease;
}
.attend-homestay-head:hover { background: #efe7fb; }
.attend-homestay-head:focus-visible { outline: 2px solid var(--accent, #0b7dda); outline-offset: -2px; }
.attend-homestay-card.is-open .attend-homestay-head { border-bottom: 1px solid #e3d8f3; }
.attend-homestay-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: #4d2c8a;
  letter-spacing: 0.2px;
}
.attend-homestay-stats {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto;
}
.attend-homestay-body { padding: 0 12px 12px; }
.attend-homestay-table { background: #fff; }
.attend-homestay-notes-cell { color: var(--grey-600, #6a737c); max-width: 240px; }
.attend-homestay-notes { font-size: 12px; }

/* Day-of-stay badges: small marker on the start/end days so the admin
 * can see "this is when the dog arrives" vs "middle day". */
.attend-stay-badge {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  background: #e8e0f5; color: #4d2c8a;
}
.attend-stay-start { background: #d6efe2; color: #114d2c; }
.attend-stay-end   { background: #e3edff; color: #1d3f7a; }

/* Payment / approval pills inside the homestay row. */
.attend-pay-paid    { background: #d4edda; color: #155724; }
.attend-pay-unpaid  { background: #f8d7da; color: #721c24; }
.attend-pay-pending { background: #fff3cd; color: #856404; }

/* Top-of-page money summary card — answers "for the work I've done,
 * who owes me?". Headline number is prominent; the three lifecycle
 * stages sit below as scannable mini-stats. */
.billing-attend-money { margin: 0 0 14px; }
.billing-money-card {
  display: grid; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--grey-200, #e3e5e8);
  border-radius: 8px;
  background: linear-gradient(180deg, #fafbfc 0%, #f3f5f7 100%);
}
.billing-money-headline {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px solid var(--grey-200, #e3e5e8);
}
.billing-money-headline-label {
  font-size: 13px; color: var(--grey-700, #2c3338); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.billing-money-headline-value {
  font-size: 28px; font-weight: 700; color: var(--grey-800, #1f262d);
  font-variant-numeric: tabular-nums;
}
.billing-money-headline-sub { color: var(--grey-600, #6a737c); font-size: 13px; margin-left: auto; }
.billing-money-stages {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
}
.billing-money-stage {
  padding: 10px 12px; border-radius: 6px; background: #fff;
  border: 1px solid var(--grey-200, #e3e5e8);
  border-left: 4px solid var(--grey-300, #cfd4d9);
}
.billing-money-stage.stage-not-billed  { border-left-color: #d29400; }
.billing-money-stage.stage-outstanding { border-left-color: #c0392b; }
.billing-money-stage.stage-reconciled  { border-left-color: #2e7d32; }
.billing-money-stage-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--grey-600, #6a737c);
}
.billing-money-stage-value {
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--grey-800, #1f262d); margin: 2px 0;
}
.billing-money-stage-sub { font-size: 12px; color: var(--grey-600, #6a737c); }
.billing-money-homestay {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding-top: 4px;
}
.billing-money-pending {
  font-size: 12px; color: #6b4f00; font-style: italic;
}

/* Per-row billing chip (price + lifecycle) — shown next to owner name
 * on every dog-day row, and as the lifecycle chip on every homestay row. */
.billing-chip {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
  background: #eef1f5; color: var(--grey-700, #2c3338);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.billing-chip.tone-not-billed  { background: #fff3cd; color: #6b4f00; }
.billing-chip.tone-outstanding { background: #fde2e2; color: #8a2228; }
.billing-chip.tone-partial     { background: #ffe6c2; color: #7a3f00; }
.billing-chip.tone-reconciled  { background: #d6efe2; color: #114d2c; }
/* Clickable variant — used when the chip is actually a "Set rate" button
 * that opens the owner editor. Inherits the tone-not-billed background but
 * gains an outline + hover so it reads as actionable, not informational. */
button.billing-chip-set-rate {
  border: 1px solid #e0c47a; cursor: pointer;
  font-family: inherit; line-height: 1.4;
}
button.billing-chip-set-rate:hover {
  background: #ffe28f; border-color: #c79a2e;
}
button.billing-chip-set-rate:focus-visible {
  outline: 2px solid var(--accent, #0b7dda); outline-offset: 1px;
}

/* Clickable owner / dog names on the billing page. Names look like
 * regular text until you hover, at which point they pick up an accent
 * colour and a dashed underline to read as actionable. Click opens
 * the matching edit widget (owner editor or dog editor) — wired via a
 * single document-level delegation in main.js. */
.billing-name-link {
  cursor: pointer;
  color: inherit;
  border-bottom: 1px dashed transparent;
  transition: color .12s ease, border-color .12s ease;
}
.billing-name-link:hover,
.billing-name-link:focus-visible {
  color: var(--accent, #0b7dda);
  border-bottom-color: currentColor;
}
.billing-name-link:focus-visible {
  outline: 2px solid var(--accent, #0b7dda);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Brief glow when a value updates in place — used for billing chips and
 * the Outstanding rate cell after the rate widget saves. The ring fades
 * out so it doesn't fight whatever tone-* background the chip has. */
@keyframes rate-flash-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(46, 204, 113, 0.55); background-color: rgba(46, 204, 113, 0.18); }
  60%  { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0.00); }
  100% { box-shadow: 0 0 0 0   rgba(46, 204, 113, 0.00); background-color: transparent; }
}
.rate-flash {
  animation: rate-flash-pulse 1000ms ease-out;
  border-radius: 4px;
}

/* Inline homestay price input — sized to fit dollar values and visually
 * connected to the chip below it. Dirty marker shows it's been edited
 * but not yet saved. */
.attend-homestay-price-input {
  width: 90px; padding: 4px 8px; font-size: 13px;
  font-variant-numeric: tabular-nums; text-align: right;
  border: 1px solid var(--grey-200, #e3e5e8); border-radius: 4px;
  background: #fff;
}
.attend-homestay-price-input:focus {
  outline: 2px solid var(--accent, #0b7dda); outline-offset: -1px;
  border-color: var(--accent, #0b7dda);
}
.attend-homestay-price-dirty {
  background: #fff8e1; border-color: #f0c14b;
}

/* Dirty markers for the staged-save flow: tinted row + bold left
 * indicator stripe so unsaved rows are unmistakable even when scrolled
 * past, plus a small "● unsaved" badge next to the changed control. */
.attend-row-dirty {
  background: #fff8e1 !important;
  box-shadow: inset 4px 0 0 #d29400;
}
.attend-row-dirty:hover { background: #fff2d0 !important; }
.attend-row-dirty td:first-child { padding-left: 12px; }
.attend-pending-badge {
  display: inline-block; margin-left: 6px;
  padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  background: #ffe2a8; color: #6b4f00;
}
.attend-att-dirty { box-shadow: 0 0 0 2px #f0c14b; }

/* Flash animation when the save bar's count is clicked — pulses the
 * focused row twice so the eye catches it after the smooth-scroll
 * lands. */
@keyframes attend-row-flash-anim {
  0%   { background: #ffd470 !important; box-shadow: inset 4px 0 0 #d29400, 0 0 0 3px #ffb700; }
  50%  { background: #fff8e1 !important; box-shadow: inset 4px 0 0 #d29400, 0 0 0 3px transparent; }
  100% { background: #ffd470 !important; box-shadow: inset 4px 0 0 #d29400, 0 0 0 3px #ffb700; }
}
.attend-row-flash { animation: attend-row-flash-anim 1.6s ease-in-out 1; }

/* Bottom padding so the fixed savebar never covers the last day card
 * or the weekly homestay summary. Matches the savebar height + offset. */
#billing-view-weekAttendance { padding-bottom: 96px; }

/* Floating save bar — pinned to the bottom of the viewport while the
 * Week Attendance view is open. Fixed-position so it stays visible
 * regardless of scroll context (sticky failed on short pages). Only
 * shows when there are pending changes; flashes briefly when a new
 * change is staged from the anomalies panel so the admin notices
 * even when the bar lives under their cursor. */
.billing-attend-savebar {
  position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 50;
  background: #fff8e1; border: 2px solid #f0c14b;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.billing-attend-savebar-inner {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 16px;
}
.billing-attend-savebar-count {
  font-weight: 700; color: #6b4f00; font-size: 15px;
  background: #fff2c2; border: 1px solid #d29400;
  padding: 6px 14px; border-radius: 16px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.billing-attend-savebar-count:hover {
  background: #ffe89a; transform: translateY(-1px);
}
.billing-attend-savebar-count::after {
  content: ' →'; opacity: 0.6; font-weight: 600;
}
.billing-attend-savebar-detail { color: #7a5800; font-size: 13px; }
.billing-attend-savebar .btn-secondary { margin-left: auto; }
.billing-attend-savebar .btn-primary {
  padding: 8px 18px; font-weight: 700; font-size: 14px;
}

/* Pulse animation that fires when a change is staged from the panel.
 * Border + box-shadow lift, then settle. Long enough to register but
 * brief so it doesn't loop in the corner of the eye. */
@keyframes billing-savebar-flash {
  0%   { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(240, 193, 75, 0.7); border-color: #f0c14b; }
  30%  { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 0 0 14px rgba(240, 193, 75, 0); border-color: #d29400; }
  100% { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(240, 193, 75, 0); border-color: #f0c14b; }
}
.billing-attend-savebar-flash {
  animation: billing-savebar-flash 1.2s ease-out 1;
}

/* "✓ Staged" pill that replaces the panel button after a stage click,
 * and the small Undo next to it. Green so it reads as success without
 * being mistaken for a destructive action. */
.billing-anomaly-staged {
  display: inline-flex; align-items: center;
  background: #d6efe2; color: #114d2c;
  font-size: 12px; font-weight: 700;
  padding: 6px 10px; border-radius: 6px; line-height: 1;
}
.billing-anomaly-undo {
  font-size: 11px; padding: 5px 10px;
}

.attend-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.attend-table th, .attend-table td {
  text-align: left; padding: 6px 10px;
  border-bottom: 1px solid var(--grey-100, #eef0f2);
  vertical-align: middle;
}
.attend-table th {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--grey-600, #6a737c); background: var(--grey-50, #f7f8fa);
}
.attend-table tbody tr:last-child td { border-bottom: none; }
.attend-table tbody tr:hover { background: var(--grey-50, #f7f8fa); }
.attend-row-anomaly { background: #fffaf0; }
.attend-row-anomaly:hover { background: #fff4e0; }

.attend-status { padding: 3px 6px; font-size: 12px; }
/* Breed shown inline next to dog name on the week-attendance row.
   Subtle so the dog name still reads first. */
.dog-breed {
    color: var(--grey-600, #6a737c);
    font-size: 11px;
    font-weight: 400;
    margin-left: 6px;
    white-space: nowrap;
}
.attend-flag {
    color: #b97500;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    padding: 0 4px;
    border-radius: 4px;
    font: inherit;
    line-height: 1;
}
.attend-flag:hover,
.attend-flag:focus { background: #fff1d6; border-color: #e6b25e; outline: none; }

/* Rich anomaly popover — anchored under the ⚠ chip on the dog row.
   Positioned in JS (left/top); we just style the surface here. */
.anomaly-pop {
    position: fixed;
    z-index: 1000;
    width: 340px;
    max-width: calc(100vw - 16px);
    background: #fff;
    border: 1px solid var(--grey-300, #dcdde1);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    color: var(--grey-900, #1f2227);
}
.anomaly-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--grey-200, #eaecef);
    background: #fffaf0;
    border-radius: 8px 8px 0 0;
}
.anomaly-pop-head-title { font-weight: 600; color: #b97500; }
.anomaly-pop-close {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--grey-600, #6a737c);
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
}
.anomaly-pop-close:hover { background: var(--grey-100, #f0f1f3); color: #1f2227; }
.anomaly-pop-body { padding: 8px 12px 12px; max-height: 60vh; overflow-y: auto; }
.anomaly-pop-item + .anomaly-pop-item {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--grey-200, #eaecef);
}
.anomaly-pop-item-title { font-weight: 600; margin-bottom: 4px; }
.anomaly-pop-item-body { color: var(--grey-700, #4f555b); line-height: 1.4; margin-bottom: 8px; }
.anomaly-pop-action { font-size: 12px; padding: 5px 10px; }
.attend-notes { color: var(--grey-600, #6a737c); max-width: 240px; display: inline-block; }
.attend-times {
  display: inline-flex; gap: 4px; align-items: center;
  font-variant-numeric: tabular-nums; font-size: 12px;
  color: var(--grey-700, #2c3338);
}
/* Attendance dropdown — color-coded so the row's billing state is the
 * loudest thing on the line. */
.attend-attendance { font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.attend-att-attended { background: #dff5e1; color: #176c2c; border-color: #b6dfbe; }
.attend-att-absent   { background: #fde2e2; color: #8a2228; border-color: #f0bdbd; }
.attend-att-no_show  { background: #f3e3f0; color: #6a1b5d; border-color: #e2c1d9; }
.attend-att-pending  { background: #fff3cd; color: #7a5800; border-color: #f0d77a; }

.attend-phase {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.attend-phase-pickup  { background: #e3f2fd; color: #1565c0; }
.attend-phase-dropoff { background: #f3e5f5; color: #6a1b9a; }

.attend-delete {
  padding: 2px 8px; font-size: 13px; line-height: 1;
  color: #b03a3a; border-color: #f0c8c8;
}
.attend-delete:hover { background: #fdecea; }

/* ── Set-rate widget ────────────────────────────────────────────────────
   Compact modal for the billing list "Set / Edit rate" affordance.
   One row per dog with frequency badge + price input, live weekly
   total at the bottom. */
.rate-widget-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 1100;
}
@media (min-width: 640px) {
  .rate-widget-modal { align-items: center; }
}
.rate-widget-panel {
  background: var(--white);
  width: 100%;
  max-width: 440px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
}
@media (min-width: 640px) {
  .rate-widget-panel { border-radius: 16px; }
}
.rate-widget-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--grey-200);
}
.rate-widget-title { font-size: 16px; font-weight: 700; }
.rate-widget-subtitle { font-size: 13px; color: var(--grey-500); margin-top: 2px; }
.rate-widget-summary {
  font-size: 12px;
  color: var(--grey-700, #374151);
  margin-top: 4px;
  padding: 3px 8px;
  background: var(--grey-100, #f3f4f6);
  border-radius: 999px;
  display: inline-block;
}
.rate-widget-close {
  background: none; border: none; font-size: 24px; line-height: 1;
  color: var(--grey-500); cursor: pointer; padding: 4px 8px;
}
.rate-widget-body { padding: 14px 18px 18px; }
.rate-widget-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--grey-200);
}
.rate-widget-row:last-of-type { border-bottom: none; }
.rate-widget-dog {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.rate-widget-dog-name { font-weight: 600; font-size: 14px; }
.rate-widget-freq {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  color: var(--grey-700, #555);
  background: var(--grey-100);
  padding: 2px 8px; border-radius: 999px;
  width: fit-content;
}
.rate-widget-freq-muted { color: var(--grey-500); background: transparent; padding-left: 0; }
.rate-widget-breed { font-size: 11px; color: var(--grey-500); }
.rate-widget-price-wrap {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  padding: 4px 8px;
  background: var(--white);
}
.rate-widget-price-wrap:focus-within { border-color: var(--green-500, #4caf50); }
.rate-widget-currency { color: var(--grey-500); font-size: 13px; }
.rate-widget-price {
  width: 70px; border: none; outline: none;
  font-size: 14px; font-weight: 600;
  text-align: right; background: transparent;
}
.rate-widget-per { color: var(--grey-500); font-size: 12px; }
.rate-widget-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--grey-200);
  font-size: 15px;
}
.rate-widget-total-label { color: var(--grey-700, #555); }
.rate-widget-total-value { font-weight: 700; font-size: 17px; }
.rate-widget-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 14px;
}

/* Billing list rate-edit affordance: existing rate becomes a subtle
   tappable button so admins can adjust per-dog prices later. */
.billing-set-rate-edit {
  background: transparent; border: none;
  color: inherit; font: inherit;
  padding: 2px 6px; border-radius: 4px;
  cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--grey-300, #cdd);
}
.billing-set-rate-edit:hover { background: var(--grey-100); }

/* ── Pre-run exceptions panel ─────────────────────────────────────────── */
.run-section-exceptions {
  margin: 4px 16px 12px;
  padding: 12px 14px;
  background: var(--amber-pale, #fff4e0);
  border: 1px solid var(--amber, #f0b34a);
  border-radius: 14px;
}
.run-section-exceptions .run-section-title {
  color: var(--amber-dark, #8a5a0a);
}
.run-section-exceptions .run-section-count {
  background: var(--amber, #f0b34a);
  color: #fff;
}
/* Empty-state variant — fired by the chip toggle on a clean day so the
   panel actually paints something instead of disappearing. Toned-down
   colour so it doesn't read as a "you have exceptions" alert. */
.run-section-exceptions-empty,
.run-section-exceptions-loading {
  background: var(--grey-50, #f9fafb);
  border-color: var(--grey-200, #e5e7eb);
}
.run-section-exceptions-empty .run-section-title,
.run-section-exceptions-loading .run-section-title {
  color: var(--grey-700, #4a4a4a);
}
.run-exc-empty {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--grey-600, #6b7280);
  line-height: 1.4;
}
.run-exc-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 6px 0 10px;
}
.run-exc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 700;
  background: #fff;
  border-radius: 999px;
  border: 1px solid var(--grey-200, #e5e7eb);
  color: var(--grey-800, #1f2937);
}
.run-exc-chip-away         { color: #b03a2e; border-color: #f1c0bb; }
.run-exc-chip-guest        { color: #1f7a2b; border-color: #b6e1b8; }
.run-exc-chip-homestay     { color: #2554a8; border-color: #b9c9ec; }
.run-exc-chip-temp_address { color: #8a5a0a; border-color: #f3d39a; }
.run-exc-chip-note         { color: #5b3782; border-color: #d9c8ec; }
.run-exc-chip-new_dog      { color: #06734f; border-color: #b4ebd2; }
.run-exc-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.run-exc-item {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 13px;
  padding: 4px 0;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.run-exc-item:first-child { border-top: none; }
.run-exc-label { display: inline-flex; align-items: center; gap: 6px; }
.run-exc-icon { font-size: 14px; line-height: 1; }
.run-exc-name { font-weight: 700; }
.run-exc-detail { color: var(--grey-600, #6b7280); font-size: 12px; }

/* ── Notifications settings page ──────────────────────────────────────── */
.notif-page { padding: 12px 0; }
.notif-help {
  font-size: 13px; color: var(--grey-700, #374151);
  margin: 0 0 12px;
  line-height: 1.4;
}
.notif-day-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.notif-day-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--grey-200, #e5e7eb);
  border-radius: 10px;
  background: #fff;
}
.notif-day-label { font-weight: 600; }
.notif-day-time {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--grey-200, #e5e7eb);
  border-radius: 6px;
}
.notif-day-time:disabled { opacity: 0.5; }
.notif-day-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.notif-other-details summary {
  cursor: pointer; font-size: 13px; color: var(--grey-600, #6b7280);
  padding: 6px 0;
}
.notif-status {
  margin-top: 10px;
  font-size: 12px; font-weight: 700;
  min-height: 16px;
}
.notif-status-ok  { color: var(--green-dark, #166534); }
.notif-status-err { color: var(--red, #b91c1c); }

/* Per-event toggle list (Pickup complete / Dropoff complete / Missed dog /
   Daily homestay summary). Reuses .profile-toggle-row for the layout. */
.notif-pref-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.notif-pref-row {
  border: 1px solid var(--grey-200, #e5e7eb);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* Modified rows get a yellow accent so the user can scan the page and see
   exactly which controls are about to be saved. */
.notif-pref-row.is-dirty,
.notif-day-row.is-dirty {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: inset 3px 0 0 #f59e0b;
}

/* Sticky save bar — keeps Save/Discard reachable as the user scrolls and
   makes the staging-vs-saved state impossible to miss. Switches to a warm
   amber tone the moment there's anything pending. */
.notif-save-bar {
  position: sticky;
  bottom: 0;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--grey-200, #e5e7eb);
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 5;
}
.notif-save-bar[data-state="dirty"] {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 -4px 12px rgba(245, 158, 11, 0.15);
}
.notif-save-bar-text {
  font-size: 13px; font-weight: 700;
  color: var(--grey-700, #374151);
}
.notif-save-bar[data-state="dirty"] .notif-save-bar-text {
  color: #92400e;
}
.notif-save-bar-actions {
  display: flex; gap: 8px;
}
.notif-save-bar-actions button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Week-tone accents on the Billing > Week attendance page ──────────── */
/* One stable 7-colour palette keyed off the Monday's ISO date. The same
   --week-accent variable is read by the date input border, the "Week of"
   header chip, and the calendar wrapper — eye sees one continuous colour
   across all three so flipping weeks feels less like reading numbers. */
/* Outstanding-balances week-jump chip. Same tone palette as Week
   attendance so the eye anchors on the same colour across billing tabs.
   Click the label to jump to Week attendance for the selected week;
   arrows step the local cursor without leaving the tab. */
.billing-week-jump-chip {
  display: none;
}
.billing-week-jump-chip[class*="week-tone-"] {
  display: flex; align-items: stretch; gap: 4px;
  margin: 12px 0;
  padding: 4px;
  background: var(--week-accent-soft, #eef2ff);
  border: 1px solid var(--week-accent, #2563eb);
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
}
.billing-week-jump-label,
.billing-week-jump-arrow,
.billing-week-jump-today {
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--week-accent, #2563eb);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
}
.billing-week-jump-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px;
}
.billing-week-jump-go { font-size: 12px; opacity: 0.7; }
.billing-week-jump-arrow {
  padding: 4px 10px;
  font-size: 18px;
  line-height: 1;
}
.billing-week-jump-label:hover,
.billing-week-jump-arrow:hover,
.billing-week-jump-today:hover {
  background: var(--white, #fff);
}
.billing-week-jump-today {
  font-size: 12px;
  padding: 6px 12px;
  opacity: 0.85;
}

.week-tone-0 { --week-accent: #2563eb; --week-accent-soft: #e0ecff; }
.week-tone-1 { --week-accent: #16a34a; --week-accent-soft: #dcfce7; }
.week-tone-2 { --week-accent: #db2777; --week-accent-soft: #fce7f3; }
.week-tone-3 { --week-accent: #ea580c; --week-accent-soft: #ffedd5; }
.week-tone-4 { --week-accent: #7c3aed; --week-accent-soft: #ede9fe; }
.week-tone-5 { --week-accent: #0891b2; --week-accent-soft: #cffafe; }
.week-tone-6 { --week-accent: #b45309; --week-accent-soft: #fef3c7; }

#billing-attend-monday[class*="week-tone-"] {
  border: 2px solid var(--week-accent, #2563eb);
  background: var(--week-accent-soft, #eef2ff);
  border-radius: 8px;
  padding: 4px 8px;
}
#billing-attend-label[class*="week-tone-"] {
  color: var(--week-accent, #2563eb);
  font-weight: 700;
}
#billing-attend-calendar[class*="week-tone-"] .week-mini-cal-toggle {
  background: var(--week-accent-soft, #eef2ff);
  border-color: var(--week-accent, #2563eb);
}
#billing-attend-calendar[class*="week-tone-"] .week-mini-cal-label {
  color: var(--week-accent, #2563eb);
}
#billing-attend-calendar[class*="week-tone-"] .week-mini-cal-week.is-selected {
  background: var(--week-accent-soft, #e8f1fb);
  border-color: var(--week-accent, #b6d6f1);
}
#billing-attend-calendar[class*="week-tone-"] .week-mini-cal-week.is-selected .week-mini-cal-day.is-today {
  color: var(--week-accent, #0b7dda);
}

/* Per-row week tone — each row reads like a horizontal bar in a stacked
   bar graph. Thick coloured stripe down the left, full-row tint at the
   week-accent colour, plus a lift on the selected week so the eye snaps
   to the active row. Same treatment runs on the Reconciliation calendar
   (same class), so the colour cue carries between the two pages. */
.week-mini-cal-week[class*="week-tone-"] {
  position: relative;
  border-left: 8px solid var(--week-accent, transparent);
  background: color-mix(in srgb, var(--week-accent-soft, transparent) 75%, white);
  border-radius: 6px;
  margin: 2px 0;
  padding-left: 4px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--week-accent, transparent) 25%, transparent);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.week-mini-cal-week[class*="week-tone-"]:hover {
  background: var(--week-accent-soft, #eef2ff);
  transform: translateX(1px);
}
/* Selected row lights up fully — solid accent stripe at left + a tinted
   chip-style fill so it reads as the "current bar" in the chart. */
.week-mini-cal-week[class*="week-tone-"].is-selected {
  border-left-width: 12px;
  background: var(--week-accent-soft, #e8f1fb);
  box-shadow: inset 0 0 0 2px var(--week-accent, #b6d6f1),
              0 1px 3px rgba(15, 23, 42, 0.08);
}

/* ── Mobile: Billing → Week attendance ────────────────────────────────
   On phones the day → van → table layout chokes: the toolbar wraps into
   a tall stack, tables slide off the right edge, and the floating
   savebar covers the bottom row. Stack the toolbar, let inputs go
   full-width, allow the inner tables to scroll horizontally so rows
   don't get clipped, and shrink padding so dog-day rows fit. */
@media (max-width: 600px) {
  .billing-view-tabs-row {
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  .billing-view-tabs { flex-wrap: wrap; }
  .billing-view-tab { flex: 1 1 auto; min-width: 0; }

  .billing-attend-toolbar {
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  .billing-attend-toolbar input[type="search"],
  .billing-attend-toolbar select {
    min-width: 0; width: 100%;
  }
  .billing-attend-toolbar .btn-secondary { width: 100%; }
  .billing-attend-bulk {
    margin-left: 0; flex-wrap: wrap; width: 100%;
  }

  /* Each day card is the unit of horizontal scrolling — wrap the
     attendance table in a swipeable region so the rest of the layout
     (headers, summaries, chips) keeps its tidy vertical flow. */
  .attend-day-body,
  .attend-van-body,
  .attend-homestay-body {
    padding: 8px 6px; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .attend-table {
    min-width: 560px; font-size: 12px;
  }
  .attend-table th, .attend-table td {
    padding: 5px 6px; white-space: nowrap;
  }
  .attend-day-head, .attend-van-head, .attend-homestay-head {
    padding: 8px 10px; gap: 6px;
  }
  .attend-day-summary, .attend-van-stats, .attend-homestay-stats {
    margin-left: 0; width: 100%;
  }
  .attend-chip { font-size: 11px; padding: 1px 7px; }

  /* Money summary collapses to one column; headline number stays huge
     so the answer to "what's owed?" still reads at a glance. */
  .billing-money-card { padding: 12px; }
  .billing-money-stages { grid-template-columns: 1fr; }
  .billing-money-headline-value { font-size: 22px; }
  .billing-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .billing-summary-stat { padding: 8px; background: #fff; border: 1px solid var(--grey-200, #e3e5e8); border-radius: 6px; }

  /* Floating savebar — wrap onto two rows and shrink so it doesn't
     cover the last day card. Buttons go full-width to be tap-friendly. */
  .billing-attend-savebar { left: 6px; right: 6px; bottom: 6px; }
  .billing-attend-savebar-inner { padding: 10px 12px; gap: 8px; }
  .billing-attend-savebar .btn-secondary,
  .billing-attend-savebar .btn-primary {
    flex: 1 1 auto; margin-left: 0;
  }

  /* Inline homestay price input — bigger touch target on phones. */
  .attend-homestay-price-input {
    width: 80px; padding: 6px 8px; font-size: 14px;
  }

  /* Mini calendar shrinks gracefully — week rows still read as bars
     but the day buttons get more vertical breathing room so they're
     finger-tappable without overlap. */
  .week-mini-cal-day { padding: 8px 0; font-size: 13px; }
  .week-mini-cal-week[class*="week-tone-"] {
    border-left-width: 6px; padding-left: 2px;
  }
  .week-mini-cal-week[class*="week-tone-"].is-selected {
    border-left-width: 10px;
  }

  /* Set-rate modal — on iOS Safari the small ✕ in the corner is hard
     to land on. Inflate the touch target so admins can dismiss the
     modal (especially after a 403) without zooming in. */
  .rate-widget-close {
    font-size: 28px; padding: 8px 14px;
    min-width: 44px; min-height: 44px;
  }
  .rate-widget-header { padding: 10px 12px; }
  .rate-widget-body { padding: 12px; }
}

/* ── Dismissed anomalies + Ignore button ─────────────────────────────── */
.billing-anomalies-dismissed {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--grey-300, #d1d5db);
}
.billing-anomalies-dismissed > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-600, #6b7280);
  padding: 4px 0;
}
.billing-anomalies-dismissed-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.billing-anomaly-row-dismissed {
  opacity: 0.78;
}
.btn-quiet {
  background: transparent;
  border: 1px solid var(--grey-300, #d1d5db);
  color: var(--grey-700, #374151);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.btn-quiet:hover { background: var(--grey-100, #f3f4f6); }

/* Force-complete pill — picks up the IN_PROGRESS palette but reads as a
   button (caret cursor + hover lift) so admins know it's clickable. */
.attend-status-pill-actionable {
  cursor: pointer;
  border: 1px dashed currentColor;
  font: inherit;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: transparent;
}
.attend-status-pill-actionable:hover { filter: brightness(0.92); }

/* ── Owner chip + Owner Profile sheet ─────────────────────────────────── */
.owner-chip {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
  touch-action: manipulation;
  border-bottom: 1px dotted transparent;
}
.owner-chip:hover, .owner-chip:focus { border-bottom-color: currentColor; outline: none; }
.owner-chip:active { opacity: 0.7; }

.owner-profile-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.owner-profile-sheet {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.owner-profile-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none; background: var(--grey-100, #f0f0f0);
  font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--grey-700, #444);
}
.owner-profile-close:hover { background: var(--grey-200, #e2e2e2); }
.owner-profile-loading,
.owner-profile-error,
.owner-profile-empty {
  padding: 48px 16px; text-align: center; color: var(--grey-500, #777);
}
.owner-profile-error { color: var(--red-600, #b23a3a); }

.owner-profile-head {
  padding: 22px 24px 12px;
  display: flex; flex-wrap: wrap;
  gap: 16px; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--grey-100, #ececec);
}
.owner-profile-name {
  margin: 0 0 4px; font-size: 22px;
}
.owner-profile-contact {
  font-size: 13px; color: var(--grey-700, #555);
}
.owner-profile-contact a { color: inherit; }
.owner-profile-balance {
  text-align: right;
  padding: 10px 14px;
  border-radius: 12px;
  min-width: 160px;
}
.owner-profile-balance-num { font-size: 18px; font-weight: 600; }
.owner-profile-balance-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.owner-profile-balance-owing  { background: #fdecec; color: #8c1f1f; }
.owner-profile-balance-credit { background: #e8f3fb; color: #1a4a7a; }
.owner-profile-balance-clear  { background: #e7f5ec; color: #155724; }

.owner-profile-actions {
  padding: 8px 24px 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.owner-profile-tabs {
  display: flex; gap: 2px;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--grey-100, #ececec);
  overflow-x: auto;
}
.owner-profile-tab {
  background: none; border: none;
  padding: 10px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--grey-600, #666);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.owner-profile-tab:hover { color: var(--grey-900, #222); }
.owner-profile-tab.is-active {
  color: var(--green-700, #1e7a3a);
  border-bottom-color: var(--green-700, #1e7a3a);
}
.owner-profile-body { padding: 16px 20px 24px; }

.owner-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.owner-profile-grid-recent {
  margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.owner-profile-card {
  background: var(--grey-50, #fafafa);
  border: 1px solid var(--grey-100, #ececec);
  border-radius: 10px;
  padding: 12px 14px;
}
.owner-profile-card-title {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--grey-600, #666);
  margin-bottom: 8px;
}
.owner-profile-dl {
  margin: 0; display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px; font-size: 13px;
}
.owner-profile-dl dt { color: var(--grey-600, #666); }
.owner-profile-dl dd { margin: 0; color: var(--grey-900, #222); word-break: break-word; }
.owner-profile-list { margin: 0; padding-left: 18px; font-size: 13px; }
.owner-profile-list li { margin-bottom: 4px; }
.owner-profile-dogs { font-size: 14px; line-height: 1.6; }

.owner-profile-rows {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.owner-profile-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--grey-100, #ececec);
  border-radius: 8px;
  background: #fff;
}
.owner-profile-row-main { flex: 1; min-width: 0; }
.owner-profile-row-title { font-weight: 600; font-size: 14px; }
.owner-profile-row-sub { font-size: 12px; color: var(--grey-600, #666); margin-top: 2px; }
.owner-profile-row-amt { text-align: right; font-variant-numeric: tabular-nums; }
.owner-profile-row-amt > div:first-child { font-weight: 600; }
.owner-profile-row-amt .hint { font-size: 11px; }
.owner-profile-row-open { color: #b23a3a; font-size: 12px; font-weight: 600; }
.owner-profile-row-allocs {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.owner-profile-alloc {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--grey-100, #f0f0f0);
  color: var(--grey-700, #555);
}
.owner-profile-row-tags {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.owner-profile-row-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.owner-profile-status-paid,
.owner-profile-status-reconciled  { background: #d4edda; color: #155724; }
.owner-profile-status-partial     { background: #fff3cd; color: #856404; }
.owner-profile-status-outstanding,
.owner-profile-status-claude_suggested { background: #fdecec; color: #8c1f1f; }
.owner-profile-status-claude_suggested { background: #fff3cd; color: #856404; }

.owner-profile-homestay-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase;
}
.owner-profile-homestay-tag-live     { background: #d4edda; color: #155724; }
.owner-profile-homestay-tag-upcoming { background: #e8f3fb; color: #1a4a7a; }
.owner-profile-homestay-tag-past     { background: var(--grey-100, #f0f0f0); color: var(--grey-600, #666); }

@media (max-width: 600px) {
  .owner-profile-head { padding: 18px 18px 10px; }
  .owner-profile-balance { text-align: left; min-width: auto; flex: 1 0 100%; }
  .owner-profile-body { padding: 12px 14px 18px; }
  .owner-profile-actions { padding: 8px 18px 0; }
  .owner-profile-tabs { padding: 8px 8px 0; }
}

/* ── Reports page ─────────────────────────────────────────────────────── */
.reports-controls { display: flex; flex-direction: column; gap: 10px; }
.reports-quick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.reports-quick {
  background: var(--grey-100, #f0f0f0);
  color: var(--grey-700, #444);
  border: 1px solid var(--grey-200, #e2e2e2);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.reports-quick.active {
  background: var(--brand-green, #2D7A44);
  color: #fff;
  border-color: var(--brand-green, #2D7A44);
}
.reports-range-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reports-range-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--grey-600, #666);
}
.reports-range-label input[type="date"] {
  padding: 6px 8px;
  border: 1px solid var(--grey-300, #ccc);
  border-radius: 6px;
  font-size: 13px;
}

.reports-grid { display: flex; flex-direction: column; gap: 0; }

.reports-hero-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.reports-stat {
  background: var(--grey-50, #fafafa);
  border: 1px solid var(--grey-200, #ececec);
  border-radius: 10px;
  padding: 12px 14px;
}
.reports-stat-primary { background: #f0f7f2; border-color: #cbe5d2; }
.reports-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey-500, #888);
  margin-bottom: 4px;
}
.reports-stat-value { font-size: 22px; font-weight: 700; color: var(--grey-900, #222); }
.reports-stat-sub { font-size: 12px; color: var(--grey-500, #888); margin-top: 2px; }
.reports-stat-hint {
  font-size: 11.5px;
  font-style: italic;
  color: var(--grey-600, #6b6b6b);
  margin-top: 6px;
  line-height: 1.35;
}
.reports-stat-good { color: #1e7a3a; }
.reports-stat-warn { color: #b23a3a; }

.reports-hero-note,
.reports-card-note {
  font-size: 12.5px;
  color: var(--grey-600, #6b6b6b);
  line-height: 1.4;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #f7faf8;
  border-left: 3px solid #5fa676;
  border-radius: 4px;
}
.reports-card-note { margin-top: 4px; margin-bottom: 14px; }

.reports-card { padding: 14px 16px; }

.reports-net-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.reports-net-cell {
  border-left: 3px solid var(--grey-200, #ececec);
  padding: 2px 0 2px 10px;
}

.reports-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.reports-table th, .reports-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--grey-100, #f0f0f0);
  text-align: left;
}
.reports-table th { color: var(--grey-500, #888); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.reports-table td.num, .reports-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.reports-table-foot td { border-top: 1px solid var(--grey-300, #ccc); border-bottom: 0; }

.reports-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.reports-kpi {
  background: var(--grey-50, #fafafa);
  border: 1px solid var(--grey-200, #ececec);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.reports-kpi-value { font-size: 22px; font-weight: 700; color: var(--brand-green, #2D7A44); }
.reports-kpi-label { font-size: 11px; color: var(--grey-500, #888); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Owner-ledger payment row: stack Reassign + Remove vertically when narrow. */
.ledger-payment-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.ledger-payment-actions .btn-secondary { white-space: nowrap; }

.ledger-reassign-row td { background: #fafafa; padding: 10px 12px; }
.ledger-reassign-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--grey-300, #ccc);
  border-radius: 6px;
  font-size: 14px;
}
.ledger-reassign-current {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1a4a7a;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.reports-owner-name { font-weight: 600; color: var(--grey-900, #222); }
.reports-owner-dogs {
  font-size: 12px;
  color: var(--grey-500, #888);
  margin-top: 2px;
}

@media (max-width: 700px) {
  .reports-hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reports-net-row  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Dog profile: attendance + billing section ─────────────────────────── */
.dog-attendance-section .dog-attendance-banner {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 12px;
}
.dog-balance-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px;
  border: 1px solid var(--grey-200, #e2e2e2);
  border-radius: 10px; background: #fff;
  cursor: pointer; font: inherit; text-align: left; width: 100%;
}
.dog-balance-row:hover { border-color: var(--grey-300, #c8c8c8); background: #fafafa; }
.dog-balance-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dog-balance-name { font-weight: 600; font-size: 14px; color: var(--grey-900, #222); }
.dog-balance-name .owner-primary-star { margin-right: 4px; color: #d4a017; }
.dog-balance-sub  { font-size: 12px; color: var(--grey-500, #888); }
.dog-balance-amt  {
  font-weight: 600; font-size: 14px;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.dog-balance-amt-owing  { background: #fdecec; color: #8c1f1f; }
.dog-balance-amt-credit { background: #e8f3fb; color: #1a4a7a; }
.dog-balance-amt-clear  { background: #e7f5ec; color: #155724; }
.dog-balance-owing  { border-left: 3px solid #c0392b; }
.dog-balance-credit { border-left: 3px solid #2c6da3; }

.dog-attendance-schedule { margin-top: 14px; }
.dog-sched-block { margin-bottom: 14px; }
.dog-sched-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--grey-500, #888); font-weight: 600; margin-bottom: 6px;
}
.dog-sched-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dog-sched-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.dog-sched-upcoming { width: 100%; border-collapse: collapse; }
.dog-sched-upcoming tr { border-bottom: 1px solid var(--grey-100, #ececec); }
.dog-sched-upcoming tr:last-child { border-bottom: none; }
.dog-sched-upcoming tr.is-off { opacity: 0.55; }
.dog-sched-upcoming td { padding: 6px 8px; font-size: 13px; vertical-align: middle; }
.dog-sched-up-date { font-weight: 600; color: var(--grey-900, #222); min-width: 80px; }
.dog-sched-up-day  { color: var(--grey-500, #888); min-width: 40px; }
.dog-sched-up-van  { min-width: 90px; }
.dog-sched-tag {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  font-weight: 600;
}
.dog-sched-tag-homestay { background: #e8f3fb; color: #1a4a7a; }
.dog-sched-tag-absent   { background: #f5e6e6; color: #8c1f1f; }

.dog-attendance-history { margin-top: 18px; }
.dog-attend-summary {
  font-size: 13px; color: var(--grey-700, #555);
  margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.dog-attend-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.dog-attend-pill-attended { background: #e7f5ec; color: #155724; }
.dog-attend-pill-noshow   { background: #fdecec; color: #8c1f1f; }
.dog-attend-pill-absent   { background: #f3eddc; color: #6b4a0e; }
.dog-attend-pill-pending  { background: #eef0f3; color: #555; }
.dog-attend-pill-homestay { background: #e8f3fb; color: #1a4a7a; margin-left: 4px; }
.dog-attend-row.dog-attend-onhomestay td.dog-attend-date { position: relative; }
.dog-attend-table-wrap { overflow-x: auto; }
.dog-attend-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dog-attend-table thead th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--grey-500, #888);
  padding: 6px 8px; border-bottom: 1px solid var(--grey-200, #e2e2e2);
}
.dog-attend-table tbody td {
  padding: 6px 8px; border-bottom: 1px solid var(--grey-100, #ececec);
  vertical-align: middle;
}
.dog-attend-row.dog-attend-attended { background: rgba(231, 245, 236, 0.35); }
.dog-attend-row.dog-attend-noshow   { background: rgba(253, 236, 236, 0.35); }
.dog-attend-row.dog-attend-absent   { background: rgba(243, 237, 220, 0.35); }
.dog-attend-date { font-weight: 600; color: var(--grey-900, #222); white-space: nowrap; }
.dog-attend-status { white-space: nowrap; }
.dog-attend-times,
.dog-attend-notes { font-size: 12px; }
.dog-attend-more { margin-top: 10px; }

/* ── Owner profile: Attendance tab ─────────────────────────────────────── */
.owner-attend-list {
  display: flex; flex-direction: column; gap: 10px; margin-top: 10px;
}
.owner-attend-card {
  border: 1px solid var(--grey-200, #e2e2e2);
  border-radius: 10px; padding: 12px 14px; background: #fff;
}
.owner-attend-card.is-inactive { opacity: 0.6; }
.owner-attend-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.owner-attend-title { font-weight: 600; font-size: 14px; color: var(--grey-900, #222); }
.owner-attend-tag {
  font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600;
}
.owner-attend-tag-homestay { background: #e8f3fb; color: #1a4a7a; }
.owner-attend-sched-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.owner-attend-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.owner-attend-stat {
  background: var(--grey-50, #f7f7f7); border-radius: 8px;
  padding: 8px 10px;
}
.owner-attend-stat-num {
  font-weight: 600; font-size: 15px; color: var(--grey-900, #222);
}
.owner-attend-stat-lbl {
  font-size: 11px; color: var(--grey-500, #888);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 2px;
}
.owner-attend-rate-good { color: #155724; }
.owner-attend-rate-warn { color: #6b4a0e; }
.owner-attend-rate-bad  { color: #8c1f1f; }

/* ── Onboarding setup checklist banner ─────────────────────────────────── */
.onboarding-banner {
  background: linear-gradient(180deg, #fffefb 0%, #fff7e6 100%);
  border: 1px solid #f0d394;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 12px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.onboarding-banner-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.onboarding-banner-title {
  font-weight: 600; font-size: 15px; color: #4a3a10; flex: 1; min-width: 0;
}
.onboarding-banner-progress {
  font-size: 12px; font-weight: 600; color: #6b4a0e;
  background: #fdecc4; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.onboarding-banner-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: #8a6d2c; padding: 0 4px; line-height: 1;
}
.onboarding-banner-close:hover { color: #4a3a10; }
.onboarding-step-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 6px;
}
.onboarding-step {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.6); border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.onboarding-step:hover {
  background: #fff; border-color: #f0d394;
}
.onboarding-step.done {
  cursor: default; opacity: 0.7;
}
.onboarding-step.done:hover { background: rgba(255,255,255,0.6); border-color: transparent; }
.onboarding-step.next {
  background: #fff; border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(45,122,68,0.12);
}
.onboarding-step-check {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 22px; font-size: 13px; font-weight: 700;
  background: #fff; border: 2px solid #d6c89a; color: transparent;
}
.onboarding-step.done .onboarding-step-check {
  background: var(--green); border-color: var(--green); color: #fff;
}
.onboarding-step.next .onboarding-step-check {
  border-color: var(--green); background: var(--green-pale); color: var(--green);
}
.onboarding-step.next .onboarding-step-check::before { content: "→"; }
.onboarding-step.done .onboarding-step-check::before { content: "✓"; }
.onboarding-step-body { flex: 1; min-width: 0; }
.onboarding-step-label {
  font-size: 14px; font-weight: 600; color: var(--grey-900, #222);
}
.onboarding-step.done .onboarding-step-label {
  text-decoration: line-through; color: var(--grey-500, #888);
}
.onboarding-step-desc {
  font-size: 12px; color: var(--grey-500, #6b7280); margin-top: 1px;
}
.onboarding-banner.complete {
  background: linear-gradient(180deg, #f3fbf5 0%, #e8f5ec 100%);
  border-color: #b9dec6;
}
.onboarding-banner.complete .onboarding-banner-title { color: #1b4a2a; }