/* PawHaven operator backend styles. Clean, professional, data-dense. */

:root {
  --bg:           #f5f6f8;
  --surface:      #ffffff;
  --surface-2:    #fafbfc;
  --border:       #e5e7eb;
  --border-2:     #d1d5db;

  --ink-900:      #0f172a;
  --ink-700:      #334155;
  --ink-500:      #64748b;
  --ink-400:      #94a3b8;

  --accent:       #1e6f5c;
  --accent-soft:  #e6f4ee;
  --accent-dark:  #134e40;

  --warn:         #b45309;
  --warn-soft:    #fef3c7;
  --danger:       #b91c1c;
  --danger-soft:  #fee2e2;
  --info:         #1e40af;
  --info-soft:    #dbeafe;

  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.06);
}

body {
  background: var(--bg);
  color: var(--ink-900);
  font-size: 14px;
}

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--ink-900);
  color: #cbd5e1;
  padding: 24px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar .brand {
  padding: 0 20px 24px;
  border-bottom: 1px solid #1e293b;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}

.sidebar .brand .mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sidebar .brand small {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}

.sidebar nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
  transition: background 120ms, color 120ms;
  text-align: left;
  width: 100%;
}

.sidebar nav button:hover {
  background: #1e293b;
  color: #fff;
}

.sidebar nav button.active {
  background: var(--accent);
  color: #fff;
}

.sidebar .group-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
  padding: 18px 14px 6px;
}

/* ---------- Top bar ---------- */
.main {
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar h1 {
  font-size: 18px;
  font-weight: 600;
}

.topbar .crumbs {
  color: var(--ink-500);
  font-size: 13px;
  margin-top: 2px;
}

.topbar .actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  transition: all 120ms;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--ink-900);
  color: #fff;
}

.btn-primary:hover {
  background: #000;
}

.btn-outline {
  background: var(--surface);
  color: var(--ink-700);
  border-color: var(--border-2);
}

.btn-outline:hover {
  border-color: var(--ink-500);
  color: var(--ink-900);
}

.btn:disabled,
.btn-outline:disabled,
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
}

.btn-accent {
  background: var(--accent);
  color: #fff;
}

.btn-accent:hover {
  background: var(--accent-dark);
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
}

.btn-ghost-text {
  background: transparent;
  color: var(--accent);
  padding: 4px 8px;
}

.btn-ghost-text:hover {
  text-decoration: underline;
}

.btn-danger-text {
  background: transparent;
  color: var(--danger);
  padding: 4px 8px;
}

.btn-danger-text:hover {
  text-decoration: underline;
}

.search {
  position: relative;
}

.search input {
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  width: 240px;
  font-size: 13px;
}

.search input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.search::before {
  content: '\1F50D';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.5;
}

/* ---------- Page body ---------- */
.page {
  padding: 28px 32px;
  flex: 1;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-title h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- KPI cards ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
}

.kpi .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  font-weight: 600;
  margin-bottom: 8px;
}

.kpi .value {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1;
}

.kpi .delta {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kpi .delta.up { color: var(--accent); }
.kpi .delta.down { color: var(--danger); }
.kpi .delta.flat { color: var(--ink-500); }

/* ---------- Cards / tables ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.card-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
}

.card-header .h-sub {
  font-size: 12px;
  color: var(--ink-500);
  font-weight: 500;
}

.card-body {
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  text-align: left;
  padding: 12px 16px;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  border-bottom: 1px solid var(--border);
}

td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-700);
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: var(--surface-2);
}

td .strong {
  color: var(--ink-900);
  font-weight: 600;
}

td .small {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 2px;
}

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-500);
  font-size: 13px;
}

.empty .big {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink-500);
}

/* ---------- Status pills ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status.confirmed { background: var(--accent-soft); color: var(--accent-dark); }
.status.pending   { background: var(--warn-soft);   color: var(--warn); }
.status.checked-in { background: var(--info-soft); color: var(--info); }
.status.checked-out { background: #f1f5f9; color: var(--ink-500); }
.status.cancelled  { background: var(--danger-soft); color: var(--danger); }

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Kennel inventory ---------- */
.kennel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.kennel-tile {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: all 160ms;
}

.kennel-tile:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
}

.kennel-tile.inactive {
  background: #fafafa;
  border-style: dashed;
  opacity: 0.65;
}

.kennel-tile .k-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kennel-tile .k-name {
  font-weight: 600;
  color: var(--ink-900);
  font-size: 14px;
}

.kennel-tile .k-type {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.kennel-tile .k-rate {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 6px 0;
}

.kennel-tile .k-rate small {
  font-size: 11px;
  color: var(--ink-500);
  font-weight: 500;
}

.kennel-tile .k-meta {
  font-size: 12px;
  color: var(--ink-500);
}

.kennel-tile .k-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.kennel-tile .k-actions button {
  flex: 1;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  color: var(--ink-700);
  background: var(--surface);
  font-weight: 500;
}

.kennel-tile .k-actions button:hover {
  background: var(--surface-2);
}

/* ---------- Type settings ---------- */
.type-settings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.type-settings-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.type-settings-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.type-settings-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.type-settings-actions .muted { font-size: 13px; }
.type-settings-actions button[disabled] { opacity: 0.5; cursor: not-allowed; }
.type-card-remove { padding-top: 6px; border-top: 1px dashed var(--border); }

.type-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
}

.type-card h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink-900);
}

.type-card .t-sub {
  font-size: 12px;
  color: var(--ink-500);
  margin-bottom: 14px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-row .s-label {
  color: var(--ink-700);
}

.setting-row .s-input {
  display: flex;
  align-items: center;
  gap: 6px;
}

.setting-row .s-input input[type=number] {
  width: 70px;
  padding: 4px 8px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  font-size: 13px;
  text-align: right;
}

.setting-row .s-input input[type=number]:focus {
  outline: none;
  border-color: var(--accent);
}

.setting-row .s-input .unit {
  font-size: 12px;
  color: var(--ink-500);
}

.toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--border-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: left 160ms;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.toggle.on {
  background: var(--accent);
}

.toggle.on::after {
  left: 18px;
}

/* ---------- Service catalog ---------- */
.svc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.svc-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.svc-tile.inactive {
  opacity: 0.55;
  background: #fafafa;
}

.svc-tile .s-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.svc-tile .s-name {
  font-weight: 600;
  color: var(--ink-900);
  font-size: 14px;
}

.svc-tile .s-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--surface-2);
  border-radius: 4px;
  padding: 2px 6px;
}

.svc-tile .s-desc {
  font-size: 12px;
  color: var(--ink-500);
  margin-bottom: 10px;
  min-height: 32px;
}

.svc-tile .s-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-500);
}

.svc-tile .s-price {
  font-weight: 600;
  color: var(--ink-900);
  font-size: 16px;
}

.svc-tile .s-actions {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.form-grid label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 4px;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 111, 92, 0.12);
}

/* ---------- Modal ---------- */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 20px;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-head h3 {
  font-size: 16px;
  font-weight: 600;
}

.modal-head .close {
  font-size: 22px;
  color: var(--ink-500);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
}

.modal-head .close:hover {
  background: var(--surface-2);
  color: var(--ink-900);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
}

.modal-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--surface-2);
}

/* ---------- Booking detail ---------- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.detail-section h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  font-weight: 600;
  margin-bottom: 10px;
}

.kv {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.kv:last-child { border-bottom: none; }

.kv .k { color: var(--ink-500); }
.kv .v { color: var(--ink-900); font-weight: 500; }

.detail-section.full { grid-column: 1 / -1; }

.agreement-view {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 13px;
  color: var(--ink-700);
}

.agreement-view ol {
  padding-left: 18px;
  list-style: decimal;
}

.agreement-view li {
  margin-bottom: 6px;
}

.signature-block {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--accent-dark);
}

.signature-block .sig-name {
  font-family: 'Caveat', cursive;
  font-size: 24px;
  color: var(--ink-900);
  margin-top: 4px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ink-900);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  z-index: 200;
  animation: toastIn 200ms ease-out;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Sidebar collapses to a top horizontal bar */
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: relative;
    height: auto;
    padding: 14px 16px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .sidebar .brand {
    border-bottom: none;
    margin-bottom: 8px;
    padding: 0 0 8px;
    flex-shrink: 0;
  }
  .sidebar nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 0;
    overflow-x: auto;
  }
  .sidebar nav button {
    width: auto;
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 13px;
  }
  .sidebar .group-label {
    display: none;
  }

  /* Topbar wraps and shrinks */
  .topbar {
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .topbar h1 {
    font-size: 22px;
  }
  .topbar .actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .topbar .search input {
    width: 100%;
    min-width: 0;
  }
  .topbar #add-btn {
    width: 100%;
  }

  /* KPI grid: 2 columns then 1 on small */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .kpi {
    padding: 14px;
  }
  .kpi .value {
    font-size: 26px;
  }
  .kpi .label {
    font-size: 11px;
  }

  /* Tables: horizontal scroll wrapper */
  .card {
    margin: 0 16px 20px;
    padding: 0;
  }
  .card-body {
    padding: 12px;
  }
  .card-header {
    padding: 12px 14px;
  }
  .card-header h3 {
    font-size: 14px;
  }
  .card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .card table thead,
  .card table tbody,
  .card table tr {
    display: table;
    width: 100%;
  }
  .card table th,
  .card table td {
    padding: 10px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Forms stack to 1 column */
  .form-grid,
  .detail-grid,
  .type-settings,
  .ab-options,
  .rt-card .rt-grid {
    grid-template-columns: 1fr !important;
  }

  /* Modal: nearly full screen on mobile */
  .modal-back {
    padding: 8px;
    align-items: stretch;
  }
  .modal {
    max-width: 100%;
    max-height: 96vh;
    border-radius: var(--radius-md);
  }
  .modal-head {
    padding: 14px 18px;
  }
  .modal-body {
    padding: 18px;
  }
  .modal-foot {
    padding: 12px 18px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-foot .btn {
    flex: 1 1 auto;
    min-width: 100px;
  }

  /* Section title stacks */
  .section-title {
    padding: 16px 20px 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .section-title .btn {
    width: 100%;
  }

  /* Review cards stack tighter */
  .rt-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .rt-photo {
    width: 56px;
    height: 56px;
  }
  .rt-actions {
    width: 100%;
  }
  .rt-actions .btn {
    flex: 1;
  }

  /* Page padding */
  .page {
    padding-bottom: 40px;
  }
}

/* ---------- Small phones (under 480px) ---------- */
@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  .kpi .value {
    font-size: 22px;
  }
  .topbar h1 {
    font-size: 18px;
  }
  .crumbs {
    font-size: 12px;
  }
  .modal-foot .btn {
    flex: 1 1 100%;
  }
  .sidebar nav button {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ---------- AcceptBlue Settings ---------- */

.ab-config-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  font-size: 13px;
}

.ab-config-banner.test {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid #fde68a;
}

.ab-config-banner.prod {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid #fecaca;
}

.ab-config-banner .b-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--warn);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.ab-config-banner.prod .b-icon {
  background: var(--danger);
}

.ab-config-banner .b-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.ab-config-banner .b-detail {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.9;
}

.ab-options {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.ab-options h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  font-weight: 600;
  margin-bottom: 12px;
}

.ab-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
}

.ab-toggle-row:last-child {
  border-bottom: none;
}

.ab-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.ab-test-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

.ab-test-result.testing {
  background: var(--info-soft);
  color: var(--info);
  border: 1px solid #bfdbfe;
}

.ab-test-result.success {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid #a7e6c2;
}

.ab-test-result.error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid #fecaca;
}

.ab-test-result .r-icon {
  min-width: 32px;
  height: 24px;
  border-radius: 6px;
  background: currentColor;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 8px;
  flex-shrink: 0;
  align-self: flex-start;
}

.ab-test-result .r-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}

.ab-test-result .r-detail {
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.5;
}

.ab-spinner-mini {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: abSpin 800ms linear infinite;
  flex-shrink: 0;
}

@keyframes abSpin {
  to { transform: rotate(360deg); }
}

.method {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'JetBrains Mono', Menlo, monospace;
}

.method.post { background: #dbeafe; color: #1e40af; }
.method.get  { background: #dcfce7; color: #166534; }

table code {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink-900);
}

.ab-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-700);
  line-height: 1.6;
  border-left: 3px solid var(--accent);
}

.ab-note code {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 11.5px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ---------- Service deposit toggle ---------- */

.s-deposit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.s-deposit-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--ink-500);
  margin-bottom: 6px;
}

.s-deposit-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  transition: opacity 120ms;
}

.s-deposit-toggle:hover {
  opacity: 0.8;
}

.s-deposit-hint {
  font-size: 11px;
  color: var(--ink-400);
  font-weight: 500;
}

.pill-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 120ms;
}

.pill-mini.refundable {
  background: #dcfce7;
  color: #166534;
}

.pill-mini.nonrefundable {
  background: #fee2e2;
  color: #991b1b;
}

.pill-mini::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Kennel type card with photo ---------- */

.tc-photo {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
  margin-bottom: 12px;
}

.tc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-body {
  display: block;
}

.kennel-error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1.5px solid #fecaca;
  border-radius: var(--radius-md);
  padding: 16px;
  font-size: 13px;
  line-height: 1.5;
  grid-column: 1 / -1;
}

/* ---------- Reviews tiles ---------- */

.review-tile {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  background: var(--surface);
  transition: all 160ms;
}

.review-tile:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
}

.review-tile.inactive {
  opacity: 0.55;
  background: #fafafa;
  border-style: dashed;
}

.review-tile.featured {
  border-color: var(--sun-400, #fcd34d);
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%);
}

.rt-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.rt-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

.rt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}

.rt-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-900);
}

.rt-owner {
  color: var(--ink-500);
  font-weight: 500;
  font-size: 13px;
}

.rt-meta {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 2px;
}

.rt-stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.rt-text {
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.5;
  margin-bottom: 10px;
}

.rt-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rt-actions .btn {
  font-size: 12px;
  padding: 5px 10px;
}

/* ---------- Admin booking form ---------- */
.modal-head-wide {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
}
.modal-head-wide .modal-sub {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  vertical-align: middle;
}
.modal-body-wide {
  max-height: 75vh;
  overflow-y: auto;
  padding: 20px 24px;
}
.modal-foot-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-foot-wide .modal-foot-left {
  flex: 1;
}
.modal-foot-wide .modal-foot-right {
  display: flex;
  gap: 8px;
}
.form-status {
  font-size: 13px;
  color: var(--ink-500);
}
.form-status.error {
  color: var(--danger);
  font-weight: 500;
}

.form-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 14px;
  background: var(--surface);
}
.form-section > summary {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 6px;
  user-select: none;
}
.form-section > summary::-webkit-details-marker { display: none; }
.form-section > summary::before {
  content: '\25B6';
  font-size: 9px;
  color: var(--ink-500);
  transition: transform 150ms;
}
.form-section[open] > summary::before {
  transform: rotate(90deg);
}
.form-section[open] > summary {
  margin-bottom: 12px;
}
.form-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.kennel-picker-info .muted {
  margin: 0 0 10px;
}
.kennel-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--surface);
  font-family: inherit;
}
.kennel-detail {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.kennel-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.kennel-detail-row .k {
  color: var(--ink-500);
}
.kennel-detail-row .v {
  color: var(--ink-900);
  font-weight: 500;
}
.kennel-detail-notes {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-style: italic;
  color: var(--ink-700);
}
.k-avail {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
.k-avail.yes {
  background: #dcfce7;
  color: #15803d;
}
.k-avail.no {
  background: #fee2e2;
  color: #b91c1c;
}
.k-avail.unknown {
  background: var(--border);
  color: var(--ink-500);
}

.svc-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.svc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
}
.svc-check:hover {
  background: var(--surface-2);
}
.rate-overrides {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.nights-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  justify-content: center;
}
.nights-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--accent);
}
.nights-label {
  color: var(--ink-500);
  font-size: 14px;
}

/* ---------- Documents ---------- */
.doc-uploader {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doc-drop {
  border: 2px dashed var(--border-2);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  text-align: center;
  background: var(--bg);
  transition: background 120ms, border-color 120ms;
}
.doc-drop.dragover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.doc-drop-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.doc-drop-text strong {
  font-size: 14px;
  color: var(--ink-900);
}
.doc-drop-text span {
  font-size: 12px;
  color: var(--ink-500);
}
.doc-drop-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-500);
}
.doc-kind {
  display: flex;
  align-items: center;
  gap: 10px;
}
.doc-kind label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
}
.doc-kind select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  font-family: inherit;
}
.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-empty {
  padding: 12px;
  text-align: center;
  color: var(--ink-500);
  font-size: 13px;
  font-style: italic;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.doc-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
}
.doc-thumb-icon {
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-500);
}
.doc-meta {
  flex: 1;
  min-width: 0;
}
.doc-name {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-info {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 2px;
}
.doc-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ---------- Deposit options ---------- */
.deposit-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deposit-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.deposit-radio:hover {
  background: var(--surface-2);
}
.deposit-radio input[type="radio"] {
  margin-top: 4px;
}
.deposit-radio:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.deposit-radio-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.deposit-radio-body strong {
  font-size: 13px;
  color: var(--ink-900);
}
.deposit-radio-body span {
  font-size: 12px;
  color: var(--ink-500);
}
.deposit-conditional {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* ---------- Booking detail additions ---------- */
.muted-inline {
  color: var(--ink-500);
  font-weight: 400;
  font-size: 12px;
  margin-left: 4px;
}
.admin-notes {
  padding: 10px 12px;
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
  border-radius: 0 6px 6px 0;
  color: var(--ink-900);
  font-size: 13px;
  white-space: pre-wrap;
}
.doc-list-detail {
  margin-top: 8px;
}

/* ---------- Admin form mobile ---------- */
@media (max-width: 700px) {
  .modal-body-wide { padding: 14px 16px; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .svc-checks { grid-template-columns: 1fr; }
  .modal-foot-wide {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .modal-foot-wide .modal-foot-right { justify-content: stretch; }
  .modal-foot-wide .modal-foot-right .btn { flex: 1; }
  .kennel-detail-row { font-size: 12px; }
  .nights-num { font-size: 24px; }
  .doc-item {
    flex-wrap: wrap;
  }
  .doc-actions { width: 100%; justify-content: flex-end; }
}

/* ---------- Directory (pets, owners) ---------- */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 16px;
}
.dir-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.dir-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.dir-card-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-900);
}
.dir-card-stat {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
}
.dir-card-sub {
  font-size: 12px;
  color: var(--ink-500);
  margin-bottom: 6px;
}
.dir-card-meta {
  font-size: 12px;
  color: var(--ink-700);
  margin-top: 2px;
}
.dir-card-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ---------- Pet photo (in modal + cards) ---------- */

.dir-card-photo {
  width: 100%;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--cream-100), var(--cream-200));
  display: flex;
  align-items: center;
  justify-content: center;
}
.dir-card-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dir-card-photo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 48px;
  font-weight: 600;
  color: var(--ink-300);
  text-transform: capitalize;
  background: linear-gradient(135deg, var(--cream-100) 0%, var(--cream-200) 100%);
  letter-spacing: 0.02em;
}
.dir-card-photo-fallback[data-species="dog"] { color: #c8482a; }
.dir-card-photo-fallback[data-species="cat"] { color: #0a5e66; }
.dir-card-photo-fallback[data-species="hamster"] { color: #92400e; }
.dir-card-photo-fallback[data-species="rabbit"] { color: #4d8a57; }
.dir-card-photo-fallback[data-species="bird"] { color: #0e7c86; }

.pet-photo-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pet-photo-preview {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--cream-100), var(--cream-200));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}
.pet-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pet-photo-empty {
  font-size: 12px;
  color: var(--ink-500);
  text-align: center;
  padding: 12px;
  line-height: 1.4;
}
.pet-photo-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.pet-photo-controls input[type="file"] {
  font-size: 12px;
  padding: 6px;
  border: 1px dashed var(--border-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-700);
  cursor: pointer;
}
.pet-photo-hint {
  font-size: 11px;
  color: var(--ink-500);
  line-height: 1.4;
}

/* ---------- Sample photo picker ---------- */

.pet-sample-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.pet-sample-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
  text-align: center;
}
.pet-sample-item:hover {
  border-color: var(--ink-300);
  transform: translateY(-1px);
}
.pet-sample-item:focus {
  outline: none;
  border-color: var(--coral-500);
}
.pet-sample-item.selected {
  border-color: var(--coral-500);
  background: var(--coral-50);
}
.pet-sample-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cream-100), var(--cream-200));
  display: flex;
  align-items: center;
  justify-content: center;
}
.pet-sample-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pet-sample-loading {
  font-size: 10px;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pet-sample-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-700);
  line-height: 1.2;
}
.pet-sample-item[data-species="cat"] .pet-sample-label { color: #0a5e66; }
.pet-sample-item[data-species="dog"] .pet-sample-label { color: #c8482a; }

/* ---------- Vaccination editor (in add/edit pet modal) ---------- */
.vax-edit-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.vax-edit-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  background: var(--cream-50, #faf6f1);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}
.vax-edit-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900, #0f172a);
  align-self: center;
}
.vax-edit-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vax-edit-field label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500, #64748b);
}
.vax-edit-field input {
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
}
.vax-edit-row .btn { align-self: end; }
@media (max-width: 640px) {
  .vax-edit-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "exp given"
      "clear clear";
  }
  .vax-edit-name { grid-area: name; }
  .vax-edit-field:nth-of-type(1) { grid-area: exp; }
  .vax-edit-field:nth-of-type(2) { grid-area: given; }
  .vax-edit-row .btn { grid-area: clear; justify-self: end; }
}
.vax-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.vax-badge.vax-ok { background: #dcfce7; color: #15803d; }
.vax-badge.vax-soon { background: #fef3c7; color: #92400e; }
.vax-badge.vax-bad { background: #fee2e2; color: #b91c1c; }
.vax-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.vax-row {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg);
  border-radius: 4px;
}
.vax-row.missing strong { color: var(--ink-500); }
.vax-row.warn { background: #fef3c7; }
.vax-row.warn strong { color: #92400e; }
.vax-row.bad { background: #fee2e2; }
.vax-row.bad strong { color: #b91c1c; }

.vax-inline-warn {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}

.vax-warning {
  border-left: 3px solid #b91c1c;
  background: #fef2f2;
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-900);
}
.vax-warning-warn {
  border-left-color: #b45309;
  background: #fffbeb;
}
.vax-warning-head { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.vax-warning ul { margin: 0; padding-left: 20px; }
.vax-warning li { margin: 2px 0; }

/* ---------- Sidebar nav badge (cancellation count) ---------- */
.nav-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  background: #c8482a;
  color: #fff;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.nav-badge.hidden { display: none; }

/* ---------- Today's care (dashboard photo-update shortcut) ---------- */
.care-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.care-card {
  display: flex;
  gap: 12px;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border-2, #eadfd2);
  border-radius: 12px;
  padding: 12px;
  align-items: center;
}
.care-card-photo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff5f1, #fdefdb);
  display: grid;
  place-items: center;
  font-size: 28px;
  flex-shrink: 0;
  color: #c8482a;
}
.care-card-body { flex: 1; min-width: 0; }
.care-card-name { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.care-card-meta { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.care-card-actions { margin-top: 6px; display: flex; gap: 6px; }
.cancel-reason {
  font-size: 12px;
  color: var(--ink-700);
  background: var(--surface-1, #fdefdb);
  border: 1px solid var(--border-2, #eadfd2);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
}
.cancel-note {
  flex: 1;
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border-2, #eadfd2);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--ink-900);
}

/* ---------- Calendar view (Gantt-style) ---------- */
.cal-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--ink-500);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cal-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.cal-header {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  margin-bottom: 4px;
  align-items: center;
}
.cal-kennel-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  padding: 0 8px;
}
.cal-header .cal-track {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 0;
}
.cal-header .cal-track .cal-day {
  font-size: 10px;
  color: var(--ink-500);
  text-align: center;
  border-left: 1px solid transparent;
  padding: 4px 0;
}
.cal-header .cal-track .cal-day .cal-dow { font-size: 9px; opacity: 0.7; }
.cal-header .cal-track .cal-day .cal-date { font-weight: 600; }
.cal-body { display: flex; flex-direction: column; gap: 6px; }
.cal-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  align-items: center;
}
.cal-kennel {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  padding: 0 8px;
}
.cal-kennel-type {
  display: block;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink-500);
  letter-spacing: 0.05em;
  margin-top: 1px;
}
.cal-track {
  position: relative;
  height: 36px;
  background: var(--surface-1, #fdf6ec);
  border: 1px solid var(--border-2, #eadfd2);
  border-radius: 6px;
  overflow: hidden;
}
.cal-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
}
.cal-grid .cal-day {
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 0;
  color: transparent;
}
.cal-grid .cal-day .cal-dow,
.cal-grid .cal-day .cal-date { display: none; }
.cal-grid .cal-day.today { background: rgba(255, 122, 89, 0.08); }
.cal-bar {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 28px;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}
.cal-bar:hover { filter: brightness(0.92); }
.cal-bar:focus { outline: 2px solid #14532d; outline-offset: 1px; }
.cal-bar-upcoming { background: #d1e7dd; color: #14532d; border: 1px solid #86c8a4; }
.cal-bar-stay    { background: #c8482a; color: #fff; border: 1px solid #a03a1f; }
.cal-bar-past    { background: #e7e0d8; color: var(--ink-500); border: 1px solid #c8bca8; }
.cal-bar-pending { background: #fff5f1; color: #c8482a; border: 1px dashed #ff7a59; }
.cal-holiday {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 122, 89, 0.12),
    rgba(255, 122, 89, 0.12) 4px,
    transparent 4px,
    transparent 10px
  );
  border-left: 2px solid #ff7a59;
  border-right: 2px solid #ff7a59;
  font-size: 10px;
  font-weight: 600;
  color: #c8482a;
  line-height: 36px;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ---------- Holiday rules list (settings) ---------- */
#holiday-rules-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.holiday-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-1, #fdf6ec);
  border: 1px solid var(--border-2, #eadfd2);
  border-radius: 6px;
}
.holiday-rule-main { flex: 1; min-width: 0; }
.holiday-rule-label { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.holiday-rule-meta { font-size: 11px; color: var(--ink-500); }

/* ---------- Photo updates ---------- */
.photo-update-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.photo-update-item {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.photo-update-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.photo-update-meta { padding: 8px 10px; }
.photo-update-caption { font-size: 12px; color: var(--ink-900); margin-bottom: 4px; }
.photo-update-when { font-size: 10px; color: var(--ink-500); }
.photo-update-preview { margin-top: 8px; }
.photo-update-thumb {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* ---------- Webhooks feed ---------- */
.webhook-config {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
.webhook-config code {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 12px;
  margin: 4px 0;
  word-break: break-all;
}
.webhook-config .muted { margin: 6px 0 0; }
.webhook-list { list-style: none; padding: 0; margin: 0; }
.webhook-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.webhook-item:last-child { border-bottom: 0; }
.webhook-time { color: var(--ink-500); }
.webhook-event { font-weight: 600; color: var(--ink-900); }
.webhook-meta { color: var(--ink-700); font-family: 'JetBrains Mono', Menlo, monospace; font-size: 11px; margin-top: 2px; }
.webhook-result { color: var(--ink-700); margin-top: 2px; }
.webhook-result .ok { color: var(--accent); font-weight: 600; }
.webhook-result .pending { color: var(--ink-500); }
.header-actions { display: flex; gap: 8px; }

/* ---------- Empty states ---------- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-500);
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: var(--ink-300);
  opacity: 0.6;
}
.empty-state-icon svg {
  width: 100%;
  height: 100%;
}
.empty-state-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 6px;
}
.empty-state-body {
  font-size: 13px;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print styles ---------- */
@media print {
  body * { visibility: hidden; }
  .email-shell, .email-shell * { visibility: visible; }
  .email-shell { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; }
  .no-print { display: none !important; }
  body { background: white !important; padding: 0 !important; }
}

/* ---------- Dark mode ----------
   Two paths trigger dark mode:
     1. OS preference (prefers-color-scheme: dark) - default for first visit
     2. Manual toggle (data-theme="dark" on <html>) - user override
   A manual light choice disables OS-based dark mode via :not([data-theme="light"]).
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #1a1f2e;
    --surface-2: #232a3d;
    --bg: #0f1320;
    --border: #2d3548;
    --border-2: #3a4359;
    --ink-900: #e8ecf3;
    --ink-700: #b8c0d0;
    --ink-500: #8a93a8;
    --ink-300: #5a6378;
    --accent: #4ade80;
    --accent-soft: #1a3a2a;
    --warn: #fbbf24;
    --warn-soft: #3a2a10;
    --danger: #f87171;
    --danger-soft: #3a1a1a;
  }
  .sidebar { background: #0a0d16; }
  body { color: var(--ink-900); }
  .topbar, .card, .modal { background: var(--surface); color: var(--ink-900); }
  .empty-state-icon { color: var(--ink-500); }
  input, select, textarea, .form-section, .dir-card, .webhook-config {
    background: var(--surface);
    color: var(--ink-900);
  }
}

/* Manual dark mode toggle. Overrides the OS preference. */
:root[data-theme="dark"] {
  --surface: #1a1f2e;
  --surface-2: #232a3d;
  --bg: #0f1320;
  --border: #2d3548;
  --border-2: #3a4359;
  --ink-900: #e8ecf3;
  --ink-700: #b8c0d0;
  --ink-500: #8a93a8;
  --ink-300: #5a6378;
  --accent: #4ade80;
  --accent-soft: #1a3a2a;
  --warn: #fbbf24;
  --warn-soft: #3a2a10;
  --danger: #f87171;
  --danger-soft: #3a1a1a;
}
:root[data-theme="dark"] .sidebar { background: #0a0d16; }
:root[data-theme="dark"] body { color: var(--ink-900); }
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal { background: var(--surface); color: var(--ink-900); }
:root[data-theme="dark"] .empty-state-icon { color: var(--ink-500); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .form-section,
:root[data-theme="dark"] .dir-card,
:root[data-theme="dark"] .webhook-config {
  background: var(--surface);
  color: var(--ink-900);
}
:root[data-theme="dark"] .theme-toggle { background: var(--ink-200); color: var(--ink-900); border-color: var(--border-2); }

/* ---------- How-to box (inside modals) ---------- */
.how-to-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--ink-700);
}
.how-to-box strong { color: var(--ink-900); display: block; margin-bottom: 4px; }
.how-to-box ol { margin: 6px 0 0 18px; padding: 0; }
.how-to-box li { margin: 2px 0; }

/* ---------- Portal link button in operator sidebar ---------- */
.portal-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.portal-link:hover { background: #1e293b; color: #fff; }

/* === Service tile: pricing mode badge (v12) === */
.s-mode { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; }
.s-mode-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); }
.pill-mini.mode-perday { background: rgba(15, 118, 110, 0.12); color: #0f766e; }
.pill-mini.mode-once { background: rgba(180, 83, 9, 0.12); color: #b45309; }

/* === Service edit modal: pricing mode segmented control (v12) === */
.seg-control { display: inline-flex; border: 1px solid var(--border-2, var(--border)); border-radius: 8px; overflow: hidden; background: var(--surface, #fff); }
.seg-control .seg { appearance: none; border: 0; background: transparent; padding: 8px 14px; font: inherit; font-size: 13px; color: var(--ink-700, var(--ink-500)); cursor: pointer; }
.seg-control .seg + .seg { border-left: 1px solid var(--border-2, var(--border)); }
.seg-control .seg.active { background: var(--coral-600, #14532d); color: #fff; font-weight: 600; }
.seg-control .seg:focus-visible { outline: 2px solid var(--coral-600, #14532d); outline-offset: -2px; }